Vis SKU-numre på produktsider
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 sektioner eller uden sektioner. Med et tema med sektioner kan du trække og slippe for at arrangere startsidens layout – det kan du ikke med et tema uden sektioner.
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 afsnit, skal du klikke på knappen Temaer med afsnit og følge instruktionerne. Hvis du bruger et ældre tema uden afsnit, skal du klikke på knappen Temaer uden afsnit og følge instruktionerne.
På denne side
Trin for temaer med afsnit
Vis SKU-numre på produktsider
- Gå til Webshop > Temaer i din Shopify-administrator.
- Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
- Klik på
product.liquid
ellerproduct-template.liquid
i mappen Afsnit. - Find det følgende Liquid-tag:
{{ product.title }}
Dette er den kode, der gengiver produkttitler på produktsiden.
- 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>
- 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.
Trin for Boundless
- Klik på
theme.js.liquid
i mappen Aktiver. -
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.
- Hvis du kan finde
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);
});
- Klik på Gem.
Trin til Brooklyn
- Klik på
theme.js.liquid
i mappen Aktiver. -
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.
- Hvis du kan finde
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;
});
});
}
});
- Klik på Gem.
Trin for Debut
- Klik på
theme.js
i mappen Aktiver. -
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.
- Hvis du kan finde
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;
});
});
}
});
- Klik på Gem.
Trin til Express
- I mappen Layout skal du klikke på
theme.liquid
. -
Finddet afsluttende
</body>
-tag. - 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>
- Klik på Gem.
Trin for Minimal
- Klik på
theme.js
i mappen Aktiver. -
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.
- Hvis du kan finde
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;
});
});
}
});
- Klik på Gem.
Trin for Narrative
- Klik på
custom.js
i mappen Aktiver. - 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;
});
});
}
});
- Klik på Gem.
Trin for Simple
- Klik på
theme.js.liquid
i mappen Aktiver. -
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.
- Hvis du kan finde
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;
});
});
}
});
- Klik på Gem.
Trin for Supply
- Klik på
theme.js.liquid
i mappen Aktiver. -
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.
- Hvis du kan finde
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;
});
});
}
});
- Klik på Gem.
Trin for Venture
- Klik på
theme.js
i mappen Aktiver. -
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.
- Hvis du kan finde
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;
});
});
}
});
- 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.
Gå til Produkter i din Shopify-administrator.
Klik på det produkt, du vil redigere.
Hvis du har produkter med flere varianter, skal du tilføje dine SKU-numre i afsnittet Varianter:
Klik på Gem.
Trin for temaer uden sektioner
Vis SKU-numre på produktsider
Trin:
- Gå til Webshop > Temaer i din Shopify-administrator.
- Find det tema, du vil redigere, og klik på knappen … for at åbne handlingsmenuen. Klik derefter på Rediger kode.
- Klik på
product.liquid
i mappen Skabeloner. - Find det følgende Liquid-tag:
{{ product.title }}
Dette er den kode, der gengiver produkttitler på produktsiden.
- 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>
- Klik på Gem.
- 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) {
- 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
}
});
};
- 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.
Gå til Produkter i din Shopify-administrator.
Klik på det produkt, du vil redigere.
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:Klik på Gem.