Visualizzazione dei numeri SKU sulle pagine del prodotto

Questa pagina è stata stampata il Sep 16, 2024. Per la versione aggiornata, visita https://help.shopify.com/it/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-sku.

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:

Esempio di SKU variante

Temi con sezioni e temi senza sezioni

Su questa pagina

Passaggi per i Temi con sezioni

Visualizzazione dei numeri SKU sulle pagine del prodotto

  1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
  2. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
  3. Nella directory Sezioni clicca su product.liquid o su product-template.liquid.
  4. Trova il tag Liquid seguente: 
{{ product.title }}

Questo è il codice che esegue il rendering dei titoli del prodotto sulla pagina del prodotto.

  1. 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>
  1. 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

  1. Nella directory Risorse, clicca su theme.js.liquid.

  2. 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.

  3. 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);
});
  1. Clicca su Salva.

Passaggi per Brooklyn

  1. Nella directory Risorse, clicca su theme.js.liquid.

  2. 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.

  3. 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;
      });
    });
  }
});
  1. Clicca su Salva.

Passaggi per Debut

  1. Nella directory Risorse, clicca su theme.js.

  2. 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.

  3. 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;
      });
    });
  }
});
  1. Clicca su Salva.

Passaggi per Express

  1. Nella directory Layout, clicca su theme.liquid.
  2. Trova il tag di chiusura </body>.
  3. 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>
  1. Clicca su Salva.

Passaggi per Minimal

  1. Nella directory Risorse, clicca su theme.js.

  2. 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.

  3. 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;
      });
    });
  }
});
  1. Clicca su Salva.

Passaggi per Narrative

  1. Nella directory Risorse, clicca su custom.js.
  2. 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;
      });
    });
  }
});
  1. Clicca su Salva.

Passaggi per Simple

  1. Nella directory Risorse, clicca su theme.js.liquid.

  2. 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.

  3. 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;
      });
    });
  }
});
  1. Clicca su Salva.

Passaggi per Supply

  1. Nella directory Risorse, clicca su theme.js.liquid.

  2. 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.

  3. 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;
      });
    });
  }
});
  1. Clicca su Salva.

Passaggi per Venture

  1. Nella directory Risorse, clicca su theme.js.

  2. 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.

  3. 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;
      });
    });
  }
});
  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.

  1. Dal pannello di controllo Shopify vai a Prodotti.

  2. Clicca sul prodotto che desideri modificare.

  3. Per i prodotti con più varianti, aggiungi i numeri SKU nella sezione Varianti:

  4. Clicca su Salva.

Passaggi per i Temi senza sezioni

Visualizzazione dei numeri SKU sulle pagine del prodotto

Passaggi:

  1. Dal pannello di controllo Shopify, vai su Negozio online > Temi.
  2. Trova il tema che desideri modificare, clicca sul pulsante … per aprire il menu azioni, quindi clicca su Modifica codice.
  3. Nella directory Modelli, clicca su product.liquid.
  4. Trova il tag Liquid seguente: 
{{ product.title }}

Questo è il codice che esegue il rendering dei titoli del prodotto sulla pagina del prodotto.

  1. 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>
  1. Clicca su Salva.
  2. Se utilizzi un tema gratuito di Shopify diverso da 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 and 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) {
  1. 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
          }
        });
      };
  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.

  1. Dal pannello di controllo Shopify vai a Prodotti.

  2. Clicca sul prodotto che desideri modificare.

  3. Per i prodotti con più varianti, nella sezione Varianti, aggiungi i numeri SKU:

    SKUs
    Per i prodotti senza varianti, nella sezione Scorte, aggiungi il numero SKU:
    SKU for products without variants

  4. Clicca su Salva.

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis