SKU-nummers op productpagina's tonen

Let op

Vintage thema's zijn niet beschikbaar in de Theme Store. Vintage thema's hebben niet de functies die in de Online Store 2.0-thema's van Shopify zijn opgenomen en de gratis vintage thema's van Shopify krijgen geen updates, behalve als dit voor de beveiliging nodig is.

Opmerking

Als je een gratis thema van Shopify gebruikt, kun je contact opnemen met Shopify Support voor hulp bij deze tutorial. Hiervoor is vijftien minuten ontwerptijd nodig. Hier vind je meer informatie over het Ontwerpbeleid van Shopify.

Opmerking

Deze aanpassing is voor vintage thema's van Shopify en is niet van toepassing op Online Store 2.0-thema's.

• Ontdek de architectuurversie van je thema
• Ontdek aanpassingen aan Online Store 2.0-thema

SKU's (voorraadeenheden) zijn getallen, meestal alfanumerieke, die worden gebruikt om producten te identificeren en voorraad bij te houden. Als een winkel SKU's gebruikt, wordt aan elke afzonderlijke productvariant een uniek nummer toegewezen. Je kunt SKU-nummers voor varianten op je productpagina's tonen door je themacode te bewerken:

Thema's met en zonder secties

Opmerking

De stappen in deze tutorial verschillen al naar gelang of je een thema met of zonder secties gebruikt. In een thema met secties kun je slepen en neerzetten om de opmaak van de homepage te bepalen en in een thema zonder secties kan dat niet.

Ga naar de pagina Code bewerken van je thema om erachter te komen of je thema secties ondersteunt. Gebruik een thema met secties als de directory Secties bestanden bevat. Thema's zonder secties werden voor oktober 2016 in gebruik genomen en de directory Secties van deze thema's bevat geen bestanden.

Als je een thema met secties gebruikt, klik je op de knop Thema's met secties en volg je de instructies. Als je een ouder thema zonder secties gebruikt, klik je op de knop Thema's zonder secties en volg je de instructies.

Stappen voor thema's met secties

SKU-nummers op productpagina's tonen

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.

2. Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.

3. Klik in de directory Secties op product.liquid of product-template.liquid.

4. Zoek de volgende Liquid-tag:

{{ product.title }}

Dit is de code die je producttitels op de productpagina weergeeft.

1. Plak de volgende code op een nieuwe regel onder de regel met code {{ product.title }}:

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

1. Klik op Opslaan.

Je thema selecteren

De stappen voor deze aanpassing variëren naargelang je thema. Klik op de knop van je thema en volg de instructies.

Boundless

Stappen voor Boundless

1. Klik in de directory Assets op theme.js.liquid.

2. Zoek naar variant.sku:

   • Als je variant.sku kunt vinden, heb je de aanpassing voltooid.
   • Als je variant.sku niet kunt vinden, ga je verder met de volgende stap.

3. Plak onderin het bestand de volgende code:

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. Klik op Opslaan.

Brooklyn

Stappen voor Brooklyn

1. Klik in de directory Assets op theme.js.liquid.

2. Zoek naar variant.sku:

   • Als je variant.sku kunt vinden, heb je de aanpassing voltooid.
   • Als je variant.sku niet kunt vinden, ga je verder met de volgende stap.

3. Plak onderin het bestand de volgende code:

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. Klik op Opslaan.

Debut

Stappen voor Debut

1. Klik in de directory Assets op theme.js.

2. Zoek naar variant.sku:

   • Als je variant.sku kunt vinden, heb je de aanpassing voltooid.
   • Als je variant.sku niet kunt vinden, ga je verder met de volgende stap.

3. Plak onderin het bestand de volgende code:

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. Klik op Opslaan.

Express

Stappen voor Express

1. Klik in de directory Opmaak op theme.liquid.
2. Zoek de sluitende tag </body>.
3. Plak de volgende code op een regel direct boven de sluitende tag </body>:

<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. Klik op Opslaan.

Minimal

Stappen voor Minimal

1. Klik in de directory Assets op theme.js.

2. Zoek naar variant.sku:

   • Als je variant.sku kunt vinden, heb je de aanpassing voltooid.
   • Als je variant.sku niet kunt vinden, ga je verder met de volgende stap.

3. Plak onderin het bestand de volgende code:

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. Klik op Opslaan.

Narrative

Stappen voor Narrative

1. Klik in de directory Assets op custom.js.
2. Plak onderin het bestand de volgende code:

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. Klik op Opslaan.

Simple

Stappen voor Simple

1. Klik in de directory Assets op theme.js.liquid.

2. Zoek naar variant.sku:

   • Als je variant.sku kunt vinden, heb je de aanpassing voltooid.
   • Als je variant.sku niet kunt vinden, ga je verder met de volgende stap.

3. Plak onderin het bestand de volgende code:

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. Klik op Opslaan.

Supply

Stappen voor Supply

1. Klik in de directory Assets op theme.js.liquid.

2. Zoek naar variant.sku:

   • Als je variant.sku kunt vinden, heb je de aanpassing voltooid.
   • Als je variant.sku niet kunt vinden, ga je verder met de volgende stap.

3. Plak onderin het bestand de volgende code:

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. Klik op Opslaan.

Venture

Stappen voor Venture

1. Klik in de directory Assets op theme.js.

2. Zoek naar variant.sku:

   • Als je variant.sku kunt vinden, heb je de aanpassing voltooid.
   • Als je variant.sku niet kunt vinden, ga je verder met de volgende stap.

3. Plak onderin het bestand de volgende code:

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. Klik op Opslaan.

SKU-nummers toevoegen aan je productvarianten vanuit het beheercentrum

Om SKU's op je productpagina's te laten verschijnen, moet je SKU-nummers toevoegen aan je productvarianten vanuit het Shopify-beheercentrum.

1. Ga vanaf je Shopify-beheercentrum naar Producten.

2. Klik op het product dat je wilt bewerken.

3. Voeg in het gedeelte Varianten je SKU-nummers toe voor producten met meerdere varianten:

4. Klik op Opslaan.

Stappen voor thema's zonder secties

SKU-nummers op productpagina's tonen

Opmerking

Deze aanpassing werkt niet voor het thema Boundless dat geen secties heeft.Thema's zonder secties werden voor oktober 2016 in gebruik genomen en de directory Secties van deze thema's bevat geen bestanden.

Stappen:

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.

2. Zoek het thema dat je wilt bewerken, klik op de knop … om het actiemenu te openen en klik vervolgens op Code bewerken.

3. Klik op product.liquid in de directory Templates.

4. Zoek de volgende Liquid-tag:

{{ product.title }}

Dit is de code die je producttitels op de productpagina weergeeft.

1. Plak het volgende op een nieuwe regel onder de regel code die {{ product.title }} bevat:

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

1. Klik op Opslaan.
2. Als je een ander gratis Shopify-thema gebruikt dan Brooklyn of Venture, zoek je de volgende coderegel:

var selectCallback = function(variant, selector) {

Als je de bovenstaande coderegel niet in de product.liquid kunt vinden, dan vind je deze in theme.liquid, in de directory Opmaak.

• Brooklyn en Venture: Als je Brooklyn of Venture gebruikt, zoek dan een andere coderegel en bewerk deze. Klik in de directory Elementen op theme.js.liquid en zoek de volgende coderegel:

theme.productVariantCallback = function (variant, selector) {

1. Plak de volgende code op een nieuwe regel hieronder:

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

Je code zou er als dit uit moeten zien:

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. Klik op Opslaan.

SKU-nummers toevoegen aan je productvarianten vanuit het beheercentrum

Om SKU's op je productpagina's te laten verschijnen, moet je SKU-nummers toevoegen aan je productvarianten vanuit het Shopify-beheercentrum.

1. Ga vanaf je Shopify-beheercentrum naar Producten.

2. Klik op het product dat je wilt bewerken.

3. Voor producten met meerdere varianten voeg je in de sectie Varianten de SKU-nummers toe:

   

   Voor producten zonder varianten voeg je in de sectie Voorraad het SKU-nummer toe:

   

4. Klik op Opslaan.