SKU-koodien näyttäminen tuotesivuilla

Huomio

Vanhoja teemoja ei ole saatavilla Theme Storessa. Vanhoissa teemoissa ei ole Shopifyn Online Store 2.0 ‑teemoihin sisältyviä ominaisuuksia, eikä Shopifyn ilmaisiin vanhoihin teemoihin tehdä muita päivityksiä kuin tietoturvakorjauksia.

Huomaa

Jos käytät Shopifyn ilmaista teemaa, voit ottaa yhteyttä Shopify-tukeen saadaksesi tähän tutoriaaliin liittyvää tukea. Tarvitset 15 minuuttia suunnitteluaikaa. Lue lisää Shopifyn suunnittelukäytännöstä.

Huomaa

tämä mukautus koskee vain vanhoja Shopify-teemoja, eikä sitä sovelleta Online Store 2.0 -teemoihin.

• Selvitä teemasi arkkitehtuuriversio
• Tutustu Online Store 2.0:n teemojen mukauttamiseen

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:

Osiin jaetut ja jakamattomat teemat

Huomaa

Tämän tutoriaalin vaiheet poikkeavat toisistaan sen mukaan, käytätkö osioihin jaettua vai osioihin jakamatonta teemaa. Osiin jaetussa teemassa voit käyttää vedä-ja-pudota-toimintoa etusivun pohjan asetteluun, kun taas osiin jakamattomassa teemassa et.

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.

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

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

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

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

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

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

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

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

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

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

Huomaa

Tämä mukautus ei toimi osioihin jakamattoman Boundless-teeman kanssa. Osioihin jakamattomat teemat on julkaistu ennen lokakuuta 2016, eikä niiden Osiot-hakemistossa ole tiedostoja.

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:

   

   Jos tuotteilla ei ole versioita, lisää SKU-numerosi Varasto-osiossa:

   

4. Klikkaa Tallenna.