SKU-koodien näyttäminen tuotesivuilla

Tämä sivu on tulostettu Apr 19, 2024. Nykyinen versio on osoitteessa https://help.shopify.com/fi/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku.

SKU-koodit (varastoyksiköt) ovat yleensä alfanumeerisia koodeja, joita käytetään tuotteiden tunnistamiseen ja varaston seuraamiseen. Jos kaupassa käytetään SKU-koodeja, jokaiselle yksittäiselle tuoteversiolle määritetään oma yksilöllinen koodi. Voit näyttää tuotesivuilla tuoteversioiden SKU-koodit muokkaamalla teeman koodia:

Esimerkki version SKU-koodista

Osiin jaetut ja jakamattomat teemat

Huomautus: Tämän tutoriaalin vaiheet vaihtelevat sen mukaan, käytätkö osiin jaettua vai osiin jakamatonta teemaa. Osiin jaetussa teemassa etusivun asettelua voi järjestää vetämällä ja pudottamalla elementtejä, osiin jakamattomassa teemassa ei.

Teeman Muokkaa koodia -sivulla saat selville tukeeko teemasi osioita. Jos Osiot-hakemistossa on tiedostoja, käytössäsi on osioihin jaettu teema. Osioihin jakamattomat teemat on julkaistu ennen lokakuuta 2016, eikä niiden Osiot-hakemistossa ole tiedostoja.

Jos käytät osioihin jaettua teemaa, klikkaa Osioihin jaetut teemat -painiketta ja noudata ohjeita. Jos käytät vanhempaa teemaa, jota ei ole jaettu osioihin, klikkaa Osioihin jakamattomat teemat -painiketta ja noudata ohjeita.

Tällä sivulla

Osiin jaettujen teemojen ohjeet

SKU-koodien näyttäminen tuotesivuilla

  1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
  2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
  3. Klikkaa Sections-hakemistossa product.liquid tai product-template.liquid.
  4. Etsi seuraava Liquid-tunniste: 
{{ product.title }}

Tämä on koodi, joka hahmontaa tuotenimikkeesi tuotesivulla.

  1. Liitä seuraava koodi uudelle riville sen koodirivin alapuolelle, joka sisältää tunnisteen {{ product.title }}: 
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
  1. Klikkaa Tallenna.

Valitse teema

Tämän mukautuksen seuraavat toimintavaiheet vaihtelevat teeman mukaan. Klikkaa teeman painiketta ja noudata ohjeita.

Boundless-teeman toimintavaiheet

  1. Klikkaa Assets-hakemistossa theme.js.liquid.

  2. Etsi variant.sku.

    • Jos variant.sku löytyy, mukautus on valmis.
    • Jos et löydä variant.sku-koodia, jatka seuraavaan vaiheeseen.

  3. Liitä tiedoston loppuun seuraava koodi:

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. Klikkaa Tallenna.

Brooklyn-teeman toimintavaiheet

  1. Klikkaa Assets-hakemistossa theme.js.liquid.

  2. Etsi variant.sku.

    • Jos variant.sku löytyy, mukautus on valmis.
    • Jos et löydä variant.sku-koodia, jatka seuraavaan vaiheeseen.

  3. Liitä tiedoston loppuun seuraava koodi:

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. Klikkaa Tallenna.

Debut-teeman toimintavaiheet

  1. Klikkaa Assets-hakemistossa theme.js.

  2. Etsi variant.sku.

    • Jos variant.sku löytyy, mukautus on valmis.
    • Jos et löydä variant.sku-koodia, jatka seuraavaan vaiheeseen.

  3. Liitä tiedoston loppuun seuraava koodi:

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. Klikkaa Tallenna.

Express-teeman vaiheet

  1. Valitse Ulkoasu-luettelosta theme.liquid.
  2. Etsi </body>-lopputunniste.
  3. Liitä seuraava koodi heti </body>-lopputunnisteen yläpuolelle: 
<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. Klikkaa Tallenna.

Minimal-teeman toimintavaiheet

  1. Klikkaa Assets-hakemistossa theme.js.

  2. Etsi variant.sku.

    • Jos variant.sku löytyy, mukautus on valmis.
    • Jos et löydä variant.sku-koodia, jatka seuraavaan vaiheeseen.

  3. Liitä tiedoston loppuun seuraava koodi:

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. Klikkaa Tallenna.

Narrative-teeman toimintavaiheet

  1. Klikkaa Assets-hakemistossa custom.js.
  2. Liitä tiedoston loppuun seuraava koodi: 
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. Klikkaa Tallenna.

Simple-teeman toimintavaiheet

  1. Klikkaa Assets-hakemistossa theme.js.liquid.

  2. Etsi variant.sku.

    • Jos variant.sku löytyy, mukautus on valmis.
    • Jos et löydä variant.sku-koodia, jatka seuraavaan vaiheeseen.

  3. Liitä tiedoston loppuun seuraava koodi:

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. Klikkaa Tallenna.

Supply-teeman toimintavaiheet

  1. Klikkaa Assets-hakemistossa theme.js.liquid.

  2. Etsi variant.sku.

    • Jos variant.sku löytyy, mukautus on valmis.
    • Jos et löydä variant.sku-koodia, jatka seuraavaan vaiheeseen.

  3. Liitä tiedoston loppuun seuraava koodi:

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. Klikkaa Tallenna.

Venture-teeman toimintavaiheet

  1. Klikkaa Assets-hakemistossa theme.js.

  2. Etsi variant.sku.

    • Jos variant.sku löytyy, mukautus on valmis.
    • Jos et löydä variant.sku-koodia, jatka seuraavaan vaiheeseen.

  3. Liitä tiedoston loppuun seuraava koodi:

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. Klikkaa Tallenna.

Lisää SKU-koodit tuoteversioihin administa

Jotta SKU-koodit näkyvät tuotesivuillasi, sinun on lisättävä tuoteversioihin SKU-koodit Shopify Administa.

  1. Siirry Shopify-ylläpitäjästä kohtaan Tuotteet.

  2. Klikkaa muokattavaa tuotetta.

  3. Lisää Versiot-osiossa SKU-koodit tuotteille, joilla on useita tuoteversioita:

  4. Klikkaa Tallenna.

Osiin jakamattomien teemojen ohjeet

SKU-koodien näyttäminen tuotesivuilla

Vaiheet:

  1. Siirry Shopify Adminissa kohtaan Verkkosivu > Teemat.
  2. Etsi teema, jota haluat muokata, avaa toimintovalikko klikkaamalla ...-painiketta ja klikkaa sitten Muokkaa koodia.
  3. klikkaa Templates-hakemistossa product.liquid.
  4. Etsi seuraava Liquid-tunniste: 
{{ product.title }}

Tämä on koodi, joka hahmontaa tuotenimikkeesi tuotesivulla.

  1. Liitä seuraava uudelle riville sen koodirivin alapuolelle, joka sisältää tunnisteen {{ product.title }}: 
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>
  1. Klikkaa Tallenna.
  2. Jos käytät ilmaista Shopify-teemaa, joka ei ole Brooklyn tai Venture, etsi seuraava koodirivi: 
var selectCallback = function(variant, selector) {

Jos et löydä yllä olevaa koodiriviä Asettelut-hakemiston product.liquid-tiedostosta, löydät sen silloin theme.liquid-tiedostosta.

  • Brooklyn ja Venture: Jos käytät Brooklyn- tai Venture-teemaa, sinun on etsittävä eri koodirivi ja ja muokattava sitä. Klikkaa Resurssit-hakemistossa theme.js.liquid ja etsi seuraava koodirivi: 
theme.productVariantCallback = function (variant, selector) {
  1. Liitä seuraava koodi alle uudelle riville: 
if (variant) {
      document.querySelector('.variant-sku').innerText = variant.sku;
    }
    else {
      document.querySelector('.variant-sku').innerText = '';
    }

Koodisi pitäisi näyttää suurin piirtein tältä:

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. Klikkaa Tallenna.

Lisää SKU-koodit tuoteversioihin administa

Jotta SKU-koodit näkyvät tuotesivuillasi, sinun on lisättävä tuoteversioihin SKU-koodit Shopify Administa.

  1. Siirry Shopify-ylläpitäjästä kohtaan Tuotteet.

  2. Klikkaa muokattavaa tuotetta.

  3. Jos tuotteilla on useampi versio, lisää SKU-numerosi Versiot-osiossa:

    SKUs
    Jos tuotteilla ei ole versioita, lisää SKU-numerosi Varasto-osiossa:
    SKU for products without variants

  4. Klikkaa Tallenna.

Valmiina aloittamaan Shopifyssa?

Kokeile ilmaiseksi