Vis SKU-numre på produktsider

Advarsel

Ældre temaer er ikke tilgængelige i temabutikken. Ældre temaer har ikke de funktioner, der er inkluderet i Shopifys Online Store 2.0-temaer, og Shopifys gratis ældre temaer modtager ikke opdateringer med undtagelse af sikkerhedsrettelser.

Bemærk

Hvis du bruger et gratis tema fra Shopify, kan du kontakte Shopify Support for at få hjælp til denne vejledning. Det kræver 15 minutters designtid. Få mere at vide om Shopifys designpolitik.

Bemærk

Denne tilpasning er for ældre Shopify-temaer og gælder ikke for Online Store 2.0-temaer.

• Find dit temas arkitekturversion
• Se Online Store 2.0-tematilpasninger

SKU-numre er normalt alfanumeriske numre, som bruges til at identificere produkter og spore lagerbeholdning. Hvis en butik bruger SKU-numre, tildeles der et unikt nummer til alle de enkelte produktvarianter. Du kan vise SKU-numre for varianter på dine produktsider ved at redigere din temakode:

Temaer med og uden sektioner

Bemærk

Trinnene i denne vejledning er forskellige, afhængigt af om du bruger et tema med afsnit eller et tema uden afsnit. Med et tema med afsnit kan du trække og slippe for at arrangere startsidens layout – det kan du ikke med et tema uden afsnit.

Du kan finde ud af, om dit tema understøtter sektioner, ved at gå til temaets side Rediger kode. Hvis der er filer i mappen Sektioner, bruger du et tema med sektioner. Temaer uden sektioner blev udgivet før oktober 2016 og har ikke filer i mappen Sektioner.

Hvis du bruger et tema med sektioner, skal du klikke på knappen Tema med afsnit og følge vejledningen. Hvis du bruger et ældre tema uden afsnit, skal du klikke på knappen Tema uden afsnit og følge vejledningen.

Trin for temaer med afsnit

Vis SKU-numre på produktsider

1. Gå til Webshop > Temaer i din Shopify-administrator.

2. Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.

3. Klik på product.liquid eller product-template.liquid i mappen Afsnit.

4. Find det følgende Liquid-tag:

{{ product.title }}

Dette er den kode, der gengiver produkttitler på produktsiden.

1. Indsæt følgende kode på en ny linje under den kodelinje, der indeholder {{ product.title }}:

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

1. Klik på Gem.

Vælg dit tema

De næste trin for denne tilpasning varierer afhængigt af dit tema. Klik på knappen for dit tema, og følg vejledningen.

Boundless

Trin for Boundless

1. Klik på theme.js.liquid i mappen Aktiver.

2. Søg efter variant.sku:

   • Hvis du kan finde variant.sku, har du fuldført tilpasningen.
   • Hvis du ikke kan finde variant.sku, skal du fortsætte til næste trin.

3. Indsæt nedenstående kode i bunden af filen:

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 på Gem.

Brooklyn

Trin til Brooklyn

1. Klik på theme.js.liquid i mappen Aktiver.

2. Søg efter variant.sku:

   • Hvis du kan finde variant.sku, har du fuldført tilpasningen.
   • Hvis du ikke kan finde variant.sku, skal du fortsætte til næste trin.

3. Indsæt nedenstående kode i bunden af filen:

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 på Gem.

Debut

Trin for Debut

1. Klik på theme.js i mappen Aktiver.

2. Søg efter variant.sku:

   • Hvis du kan finde variant.sku, har du fuldført tilpasningen.
   • Hvis du ikke kan finde variant.sku, skal du fortsætte til næste trin.

3. Indsæt nedenstående kode i bunden af filen:

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 på Gem.

Express

Trin til Express

1. I mappen Layout skal du klikke på theme.liquid.
2. Finddet afsluttende </body>-tag.
3. Indsæt følgende kode på linjen lige over det afsluttende </body>-tag:

<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 på Gem.

Minimal

Trin for Minimal

1. Klik på theme.js i mappen Aktiver.

2. Søg efter variant.sku:

   • Hvis du kan finde variant.sku, har du fuldført tilpasningen.
   • Hvis du ikke kan finde variant.sku, skal du fortsætte til næste trin.

3. Indsæt nedenstående kode i bunden af filen:

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 på Gem.

Narrative

Trin for Narrative

1. Klik på custom.js i mappen Aktiver.
2. Indsæt nedenstående kode i bunden af filen:

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 på Gem.

Simple

Trin for Simple

1. Klik på theme.js.liquid i mappen Aktiver.

2. Søg efter variant.sku:

   • Hvis du kan finde variant.sku, har du fuldført tilpasningen.
   • Hvis du ikke kan finde variant.sku, skal du fortsætte til næste trin.

3. Indsæt nedenstående kode i bunden af filen:

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 på Gem.

Supply

Trin for Supply

1. Klik på theme.js.liquid i mappen Aktiver.

2. Søg efter variant.sku:

   • Hvis du kan finde variant.sku, har du fuldført tilpasningen.
   • Hvis du ikke kan finde variant.sku, skal du fortsætte til næste trin.

3. Indsæt nedenstående kode i bunden af filen:

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 på Gem.

Venture

Trin for Venture

1. Klik på theme.js i mappen Aktiver.

2. Søg efter variant.sku:

   • Hvis du kan finde variant.sku, har du fuldført tilpasningen.
   • Hvis du ikke kan finde variant.sku, skal du fortsætte til næste trin.

3. Indsæt nedenstående kode i bunden af filen:

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 på Gem.

Føj SKU-numre til dine produktvarianter fra administratoren

Hvis du vil vise SKU-numre på dine produktsider, skal du føje SKU-numrene til dine produktvarianter i Shopify-administrator.

1. Gå til Produkter i din Shopify-administrator.

2. Klik på det produkt, du vil redigere.

3. Hvis du har produkter med flere varianter, skal du tilføje dine SKU-numre i afsnittet Varianter:

4. Klik på Gem.

Trin for temaer uden sektioner

Vis SKU-numre på produktsider

Bemærk

Denne tilpasning virker ikke for Boundless-tema uden sektioner. Temaer uden sektioner blev udgivet før oktober 2016 og har ikke filer i mappen Sektioner.

Trin:

1. Gå til Webshop > Temaer i din Shopify-administrator.

2. Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.

3. Klik på product.liquid i mappen Skabeloner.

4. Find det følgende Liquid-tag:

{{ product.title }}

Dette er den kode, der gengiver produkttitler på produktsiden.

1. Indsæt følgende på en ny linje under den kodelinje, der indeholder {{ product.title }}:

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

1. Klik på Gem.
2. Hvis du bruger et andet gratis Shopify-tema end Brooklyn eller Venture, skal du finde følgende kodelinje:

var selectCallback = function(variant, selector) {

Hvis du ikke kan finde ovenstående kodelinje i product.liquid, kan du finde den i theme.liquid i mappen Layout.

• Brooklyn og Venture: Hvis du bruger Brooklyn eller Venture, skal du finde og redigere en anden kodelinje. Klik på theme.js.liquid i mappen Aktiver, og find følgende kodelinje:

theme.productVariantCallback = function (variant, selector) {

1. Indsæt følgende kode på en ny linje nedenfor:

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

Koden bør se nogenlunde således ud:

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 på Gem.

Føj SKU-numre til dine produktvarianter fra administratoren

Hvis du vil vise SKU-numre på dine produktsider, skal du føje SKU-numrene til dine produktvarianter i Shopify-administrator.

1. Gå til Produkter i din Shopify-administrator.

2. Klik på det produkt, du vil redigere.

3. Hvis du har produkter med flere varianter, skal du tilføje dine SKU-numre i afsnittet Varianter:

   

   Hvis du har produkter uden varianter, skal du tilføje dit SKU-nummer i afsnittet Lager:

   

4. Klik på Gem.