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:

Esempio di SKU variante

Temi con sezioni e temi senza sezioni

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.

Boundless

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

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

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

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

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

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

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

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

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.

Non trovi le risposte che stai cercando? Siamo qui per aiutarti.