Visualizzazione dei numeri SKU sulle pagine del prodotto
Le SKU (Stock Keeping Unit) sono numeri, in genere alfanumerici, utilizzati per facilitare l'identificazione dei prodotti e il monitoraggio delle scorte. Se un negozio utilizza le SKU, a ogni singola variante di prodotto viene assegnato un numero univoco. Puoi mostrare i numeri SKU delle varianti sulle pagine del prodotto modificando il codice del tema:
Temi con sezioni e temi senza sezioni
Visualizzazione dei numeri SKU sulle pagine del prodotto
Per modificare il tema in modo da mostrare i numeri SKU sulle pagine del prodotto:
Dal pannello di controllo Shopify passa a Negozio online > Temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nella directory Sezioni clicca su
product.liquido suproduct-template.liquid.Trova il tag Liquid seguente:
{{ product.title }}Questo è il codice che esegue il rendering dei titoli del prodotto sulla pagina del prodotto.
- Su una nuova riga, sotto quella del codice che contiene
{{ product.title }}, incolla il codice seguente:
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>- Clicca su Salva.
Seleziona il tuo tema
I passaggi successivi per questa personalizzazione variano a seconda del tuo tema. Clicca sul pulsante del tema e segui le istruzioni.
Passaggi per Boundless
- Nella directory Risorse, clicca su
theme.js.liquid. -
Cerca
variant.sku.Se riesci a trovare
variant.sku, hai completato la personalizzazione.Se non riesci a trovare
variant.sku, prosegui con il passaggio successivo. In fondo al file, incolla il seguente codice:
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);
});- Clicca su Salva.
Passaggi per Brooklyn
- Nella directory Risorse, clicca su
theme.js.liquid. -
Cerca
variant.sku.Se riesci a trovare
variant.sku, hai completato la personalizzazione.Se non riesci a trovare
variant.sku, prosegui con il passaggio successivo. In fondo al file, incolla il seguente codice:
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;
});
});
}
});- Clicca su Salva.
Passaggi per Debut
- Nella directory Risorse, clicca su
theme.js. -
Cerca
variant.sku.Se riesci a trovare
variant.sku, hai completato la personalizzazione.Se non riesci a trovare
variant.sku, prosegui con il passaggio successivo. In fondo al file, incolla il seguente codice:
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;
});
});
}
});- Clicca su Salva.
Passaggi per Express
- Nella directory Layout, clicca su
theme.liquid. -
Trova il tag di chiusura
</body>. - Sulla riga immediatamente sopra il tag di chiusura
</body>incolla il codice seguente:
<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>- Clicca su Salva.
Passaggi per Minimal
- Nella directory Risorse, clicca su
theme.js. -
Cerca
variant.sku.Se riesci a trovare
variant.sku, hai completato la personalizzazione.Se non riesci a trovare
variant.sku, prosegui con il passaggio successivo. In fondo al file, incolla il seguente codice:
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;
});
});
}
});- Clicca su Salva.
Passaggi per Narrative
- Nella directory Risorse, clicca su
custom.js. - In fondo al file, incolla il seguente codice:
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;
});
});
}
});- Clicca su Salva.
Passaggi per Simple
- Nella directory Risorse, clicca su
theme.js.liquid. -
Cerca
variant.sku.Se riesci a trovare
variant.sku, hai completato la personalizzazione.Se non riesci a trovare
variant.sku, prosegui con il passaggio successivo. In fondo al file, incolla il seguente codice:
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;
});
});
}
});- Clicca su Salva.
Passaggi per Supply
- Nella directory Risorse, clicca su
theme.js.liquid. -
Cerca
variant.sku.Se riesci a trovare
variant.sku, hai completato la personalizzazione.Se non riesci a trovare
variant.sku, prosegui con il passaggio successivo. In fondo al file, incolla il seguente codice:
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;
});
});
}
});- Clicca su Salva.
Passaggi per Venture
- Nella directory Risorse, clicca su
theme.js. -
Cerca
variant.sku.Se riesci a trovare
variant.sku, hai completato la personalizzazione.Se non riesci a trovare
variant.sku, prosegui con il passaggio successivo. In fondo al file, incolla il seguente codice:
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;
});
});
}
});- Clicca su Salva.
Aggiunta di numeri SKU alle varianti di prodotto dal pannello di controllo
Per fare in modo che le SKU vengano visualizzate sulle pagine del prodotto, devi aggiungere i numeri SKU alle varianti di prodotto dal pannello di controllo Shopify.
Dal tuo pannello di controllo Shopify, vai su Prodotti > Tutti i prodotti.
Clicca sul prodotto che desideri modificare.
-
Per i prodotti con più varianti, aggiungi i numeri SKU nella sezione Varianti:
Per i prodotti senza varianti, aggiungi il numero SKU nella sezione Scorte:
Clicca su Salva.
Visualizzazione dei numeri SKU sulle pagine del prodotto
Per modificare il tema in modo da mostrare i numeri SKU sulle pagine del prodotto:
Dal pannello di controllo Shopify passa a Negozio online > Temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, quindi clicca su Azioni > Modifica codice.
Nella directory Modelli, clicca su
product.liquid.Trova il tag Liquid seguente:
{{ product.title }}Questo è il codice che esegue il rendering dei titoli del prodotto sulla pagina del prodotto.
- Su una nuova riga, sotto quella del codice che contiene
{{ product.title }}, incolla quanto segue:
{% assign current_variant = product.selected_or_first_available_variant %}
<span class="variant-sku">{{ current_variant.sku }}</span>Clicca su Salva.
Se utilizzi un tema gratuito di Shopify che non sia Brooklyn o Venture, trova la riga di codice seguente:
var selectCallback = function(variant, selector) { Se non trovi la riga di codice riportata sopra in product.liquid, la troverai in theme.liquid, nella directory Layout.
Brooklyn e Venture
Se utilizzi Brooklyn o Venture, dovrai trovare e modificare una riga di codice diversa. Nella directory Assets (Risorse) clicca su theme.js.liquid e trova la riga di codice seguente:
theme.productVariantCallback = function (variant, selector) {- Su una nuova riga sotto incolla il codice seguente:
if (variant) {
document.querySelector('.variant-sku').innerText = variant.sku;
}
else {
document.querySelector('.variant-sku').innerText = '';
}Il codice dovrebbe avere un aspetto simile a questo:
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
}
});
};- Clicca su Salva.
Aggiunta di numeri SKU alle varianti di prodotto dal pannello di controllo
Per fare in modo che le SKU vengano visualizzate sulle pagine del prodotto, devi aggiungere i numeri SKU alle varianti di prodotto dal pannello di controllo Shopify.
Dal tuo pannello di controllo Shopify, vai su Prodotti > Tutti i prodotti.
Clicca sul prodotto che desideri modificare.
-
Per i prodotti con più varianti, aggiungi i numeri SKU nella sezione Varianti:
Per i prodotti senza varianti, aggiungi il numero SKU nella sezione Scorte:
Clicca su Salva.