Pokaż numery SKU na stronach produktów

Uwaga

Klasyczne szablony nie są dostępne w Theme Store. Te szablony nie mają funkcji zawartych w szablonach Online Store 2.0, a darmowe klasyczne szablony Shopify nie są aktualizowane z wyjątkiem poprawek bezpieczeństwa.

Uwaga

Jeśli używasz darmowego szablonu z Shopify, możesz kontaktować się z pomocą techniczną Shopify i uzyskać pomoc w związku z tym tutorialem. Czas projektowania wynosi 15 minut. Dowiedz się więcej o Polityce Shopify w zakresie projektowania.

Uwaga

To dostosowanie jest przeznaczone dla klasycznych szablonów Shopify i nie ma zastosowania do szablonów Online Store 2.0.

• Dowiedz się, jaka jest wersja architektury Twojego szablonu
• Przeglądaj dostosowania szablonu Online Store 2.0

SKU (jednostki magazynowe) to numery, zazwyczaj alfanumeryczne, które służą do identyfikacji produktów i śledzenia zapasów. Jeśli sklep używa numerów SKU, unikalny numer jest przypisany do każdego indywidualnego wariantu produktu. Możesz wyświetlać numery SKU dla wariantów na stronach produktów poprzez edycję kodu szablonu:

Szablony z sekcjami i bez sekcji

Uwaga

Kroki tego tutoriala różnią się w zależności od tego, czy używasz szablonu z sekcjami czy bez sekcji. Szablon z sekcjami umożliwia przeciąganie i upuszczanie elementów w celu zmiany układu strony głównej, nie jest to możliwe w przypadku szablonu bez sekcji.

Aby ustalić, czy Twój szablon obsługuje sekcje, przejdź do strony Edytuj kod. Jeśli w katalogu Sekcje znajdują się pliki, używasz szablonu z sekcjami. Szablony bez sekcji zostały opublikowane przed październikiem 2016 roku i nie mają plików w katalogu Sekcje.

Jeśli używasz szablonu z sekcjami, kliknij przycisk Szablony z sekcjami i zastosuj się do instrukcji. Jeśli używasz starszego szablonu, niezawierającego sekcji, kliknij przycisk Szablony bez sekcji i zastosuj się do instrukcji.

Kroki dotyczące szablonów z sekcjami

Pokaż numery SKU na stronach produktów

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.

2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

3. W katalogu Sekcje kliknij product.liquid lub product-template.liquid.

4. Znajdź następujący tag Liquid:

{{ product.title }}

Jest to kod, który renderuje tytuły produktów na stronie produktu.

1. W nowej linii pod linią kodu, która zawiera {{ product.title }}, wklej następujący kod:

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>

1. Kliknij opcję Zapisz.

Wybierz swój szablon

Kolejne kroki dla tego dostosowania różnią się w zależności od szablonu. Kliknij przycisk dla szablonu i postępuj według instrukcji.

Boundless

Kroki dla szablonu Boundless

1. W katalogu Zasoby kliknij theme.js.liquid.

2. Poszukaj variant.sku:

   • Jeśli znajdziesz variant.sku, dostosowanie będzie zakończone.
   • Jeśli nie możesz znaleźć variant.sku, przejdź do kolejnego kroku.

3. Na dole pliku wklej następujący kod:

document.addEventListener('DOMContentLoaded', () => {
  setTimeout(function() {
    const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
    if (productJson.length > 0) {
      productJson.forEach((product) => {
        const sectionId = product.id.replace("ProductJson-", "shopify-section-");
        const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
        const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
        const productInfo = JSON.parse(product.innerHTML);
        const inputValues = [];
        const optionValues = [];
        let count = 0;
        inputSelects.forEach((input) => {
          inputValues.push(input.value);
          optionValues.push(count);
          input.addEventListener('change', (evt) => {
            const currentValue = evt.currentTarget.value.toString();
            const changedIndex = inputSelects.indexOf(evt.target);
            inputValues[changedIndex] = currentValue;
            variantSKU.innerText = ' ';
            productInfo.variants.forEach((variant) => {
              if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
                variantSKU.innerText = variant.sku;
              }
            });
          });
          count += 1;
        });
      });
    }
  }, 100);
});

1. Kliknij opcję Zapisz.

Brooklyn

Kroki dla szablonu Brooklyn

1. W katalogu Zasoby kliknij theme.js.liquid.

2. Poszukaj variant.sku:

   • Jeśli znajdziesz variant.sku, dostosowanie będzie zakończone.
   • Jeśli nie możesz znaleźć variant.sku, przejdź do kolejnego kroku.

3. Na dole pliku wklej następujący kod:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const productInfo = JSON.parse(product.innerHTML);
      const radioButtons = document.querySelector('.single-option-radio');
      let inputSelects;
      if (radioButtons !== null) {
        inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-radio')];
      } else {
        inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector__radio')];
      }
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        if (radioButtons !== null) {
          inputValues.push(input.firstElementChild.value);
        } else {
          inputValues.push(input.value);
        }
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.target.value.toString();
          const changedIndex = inputSelects.indexOf(evt.currentTarget);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
      count += 1;
      });
    });
  }
});

1. Kliknij opcję Zapisz.

Debut

Kroki dla szablonu Debut

1. W katalogu Zasoby kliknij theme.js.

2. Poszukaj variant.sku:

   • Jeśli znajdziesz variant.sku, dostosowanie będzie zakończone.
   • Jeśli nie możesz znaleźć variant.sku, przejdź do kolejnego kroku.

3. Na dole pliku wklej następujący kod:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

1. Kliknij opcję Zapisz.

Express

Kroki dotyczące szablonu Express

1. W katalogu Układ kliknij theme.liquid.
2. Znajdź tag zamykający </body>.
3. W linii nad tagiem zamykającym </body> wklej następujący kod:

<script>
document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[data-product-json]')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = "shopify-section-" + product.closest('[data-section-id]').dataset.sectionId;
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .form__input--select')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});
</script>

1. Kliknij opcję Zapisz.

Minimal

Kroki dla szablonu Minimal

1. W katalogu Zasoby kliknij theme.js.

2. Poszukaj variant.sku:

   • Jeśli znajdziesz variant.sku, dostosowanie będzie zakończone.
   • Jeśli nie możesz znaleźć variant.sku, przejdź do kolejnego kroku.

3. Na dole pliku wklej następujący kod:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

1. Kliknij opcję Zapisz.

Narrative

Kroki dla szablonu Narrative

1. W katalogu Zasoby kliknij custom.js.
2. Na dole pliku wklej następujący kod:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[data-product-json]')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = "shopify-section-" + product.closest('[data-section-id]').dataset.sectionId;
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

1. Kliknij opcję Zapisz.

Simple

Kroki dla szablonu Simple

1. W katalogu Zasoby kliknij theme.js.liquid.

2. Poszukaj variant.sku:

   • Jeśli znajdziesz variant.sku, dostosowanie będzie zakończone.
   • Jeśli nie możesz znaleźć variant.sku, przejdź do kolejnego kroku.

3. Na dole pliku wklej następujący kod:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

1. Kliknij opcję Zapisz.

Supply

Kroki dla szablonu Supply

1. W katalogu Zasoby kliknij theme.js.liquid.

2. Poszukaj variant.sku:

   • Jeśli znajdziesz variant.sku, dostosowanie będzie zakończone.
   • Jeśli nie możesz znaleźć variant.sku, przejdź do kolejnego kroku.

3. Na dole pliku wklej następujący kod:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

1. Kliknij opcję Zapisz.

Venture

Kroki dla szablonu Venture

1. W katalogu Zasoby kliknij theme.js.

2. Poszukaj variant.sku:

   • Jeśli znajdziesz variant.sku, dostosowanie będzie zakończone.
   • Jeśli nie możesz znaleźć variant.sku, przejdź do kolejnego kroku.

3. Na dole pliku wklej następujący kod:

document.addEventListener('DOMContentLoaded', () => {
  const productJson = [...document.querySelectorAll('[id^=ProductJson-')];
  if (productJson.length > 0) {
    productJson.forEach((product) => {
      const sectionId = product.id.replace("ProductJson-", "shopify-section-");
      const variantSKU = document.querySelector('#' + sectionId + ' .variant-sku');
      const inputSelects = [...document.querySelectorAll('#' + sectionId + ' .single-option-selector')];
      const productInfo = JSON.parse(product.innerHTML);
      const inputValues = [];
      const optionValues = [];
      let count = 0;
      inputSelects.forEach((input) => {
        inputValues.push(input.value);
        optionValues.push(count);
        input.addEventListener('change', (evt) => {
          const currentValue = evt.currentTarget.value.toString();
          const changedIndex = inputSelects.indexOf(evt.target);
          inputValues[changedIndex] = currentValue;
          variantSKU.innerText = ' ';
          productInfo.variants.forEach((variant) => {
            if (JSON.stringify(variant.options) == JSON.stringify(inputValues)) {
              variantSKU.innerText = variant.sku;
            }
          });
        });
        count += 1;
      });
    });
  }
});

1. Kliknij opcję Zapisz.

Dodaj numery SKU do wariantów produktu w panelu administracyjnym

Aby numery SKU pojawiały się na stronach produktów, musisz dodać te numery do wariantów produktu w panelu administracyjnym Shopify.

1. Z panelu administracyjnego Shopify przejdź do opcji Produkty.

2. Kliknij produkt, który chcesz edytować.

3. W przypadku produktów z wieloma wariantami dodaj numery SKU w sekcji Warianty:

4. Kliknij opcję Zapisz.

Kroki dotyczące szablonów bez sekcji

Pokaż numery SKU na stronach produktów

Uwaga

To dostosowanie nie będzie działać w przypadku szablonu Boundless bez sekcji. Szablony bez sekcji zostały opublikowane przed październikiem 2016 roku i nie mają plików w katalogu Sekcje.

Kroki:

1. W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.

2. Znajdź temat, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij Edytuj kod.

3. W katalogu Szablony kliknij product.liquid.

4. Znajdź następujący tag Liquid:

{{ product.title }}

Jest to kod, który renderuje tytuły produktów na stronie produktu.

1. W nowej linii pod linią kodu zawierającą {{ product.title }} wklej:

{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>

1. Kliknij opcję Zapisz.
2. Jeśli korzystasz z darmowego szablonu Shopify innego niż Brooklyn i Venture, znajdź poniższą linię kodu:

var selectCallback = function(variant, selector) {

Jeżeli nie możesz znaleźć powyższej linii kodu w product.liquid, znajdziesz go w theme.liquid, w katalogu Układ.

• Brooklyn i Venture: Jeśli korzystasz z szablonu Brooklyn lub Venture, musisz znaleźć i edytować inną linię kodu. W katalogu Zasoby kliknij theme.js.liquid i znajdź poniższą linię kodu:

theme.productVariantCallback = function (variant, selector) {

1. W nowej linii poniżej wklej następujący kod:

if (variant) {
      document.querySelector('.variant-sku').innerText = variant.sku;
    }
    else {
      document.querySelector('.variant-sku').innerText = '';
    }

Twój kod powinien wyglądać tak:

var selectCallback = function(variant, selector) {

      if (variant) {
        document.querySelector('.variant-sku').innerText = variant.sku;
      }
      else {
        document.querySelector('.variant-sku').innerText = '';
      }

        self.productPage({
          money_format: theme.moneyFormat,
          variant: variant,
          selector: selector,
          translations: {
            add_to_cart : theme.productStrings.addToCart,
            sold_out : theme.productStrings.soldOut,
            unavailable : theme.productStrings.unavailable
          }
        });
      };

1. Kliknij opcję Zapisz.

Dodaj numery SKU do wariantów produktu w panelu administracyjnym

Aby numery SKU pojawiały się na stronach produktów, musisz dodać te numery do wariantów produktu w panelu administracyjnym Shopify.

1. Z panelu administracyjnego Shopify przejdź do opcji Produkty.

2. Kliknij produkt, który chcesz edytować.

3. W przypadku produktów z wieloma wariantami w sekcji Warianty dodaj numery SKU:

   

   W przypadku produktów bez wariantów w sekcji Zapasy dodaj numer SKU:

   

4. Kliknij opcję Zapisz.