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, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.
Nella directory Sezioni clicca su
product.liquido suproduct-template.liquid.Trova il tag Liquid seguente:
{{ product.title }}This is the code that renders your product titles on the product page.- 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.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.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.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.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.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.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.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.
Nel pannello di controllo Shopify vai a Prodotti.
Clicca sul prodotto che desideri modificare.
Per i prodotti con più varianti, aggiungi i numeri SKU nella sezione Varianti:
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, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.
Nell'app Shopify tocca Negozio.
Nella sezione Canali di vendita, tocca Negozio online.
Tocca Gestisci temi.
Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.
Nella directory Modelli, clicca su
product.liquid.Trova il tag Liquid seguente:
{{ product.title }}This is the code that renders your product titles on the product page.- 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) {If you cannot find the above line of code in `product.liquid`, then you will find it in `theme.liquid`, in the **Layout** directory.
#### Brooklyn and Venture
If you are using Brooklyn or Venture, then you will need to find and edit a different line of code. In the **Assets** directory, click `theme.js.liquid`, and [find](/manual/shopify-admin/productivity-tools/keyboard-shortcuts#find) the following line of code: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 = '';
}Your code should look something like this: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.
Nel pannello di controllo Shopify vai a Prodotti.
Clicca sul prodotto che desideri modificare.
Per i prodotti con più varianti, aggiungi i numeri SKU nella sezione Varianti:
Clicca su Salva.