Visualizzazione delle scorte rimanenti per una variante sulle pagine del prodotto

Attenzione

I temi vintage non sono disponibili nel Theme Store. Questi temi non dispongono delle funzionalità incluse nei temi dell'Online Store 2.0 di Shopify e i temi vintage gratuiti di Shopify non ricevono aggiornamenti oltre alle correzioni di sicurezza.

Nota

Se usi un tema gratuito di Shopify, puoi contattare l'Assistenza Shopify per ricevere aiuto con questo tutorial. Sono necessari 15 minuti di tempo di progettazione. Scopri di più sulla Design Policy di Shopify.

Nota

Questa personalizzazione è per i temi Shopify vintage e non si applica ai temi dell'Online Store 2.0.

• Scopri la versione della struttura del tuo tema
• Esplora le opzioni di personalizzazione del tema dell'Online Store 2.0.

Puoi aggiungere sulla pagina del prodotto o sulla sezione del prodotto in primo piano un messaggio che mostra il numero di articoli disponibili in magazzino quando le scorte per una variante di prodotto iniziano a scarseggiare. Per mostrare questo messaggio, devi abilitare il monitoraggio delle scorte per il prodotto.

I passaggi per questa personalizzazione variano a seconda del tuo tema. Clicca sul pulsante del tema e segui le istruzioni.

Suggerimento

Il tema Supply e il tema Venture di Shopify includono già un'impostazione Mostra messaggio con la quantità rimanente, che puoi abilitare dall'editor del tema.

Debut

Passaggi per Debut

Modifica theme.liquid

1. Dal pannello di controllo Shopify vai a Negozio online > Temi.
2. Trova il tema che desideri modificare, quindi clicca sul pulsante ... > Modifica codice.
3. Dalla directory Layout apri theme.liquid.
4. Trova il tag di chiusura </head> nel codice. Su una nuova riga sopra il tag di chiusura </head> incolla il codice seguente:

<script>
  var variantStock = {};
</script>

1. Clicca su Salva.

Modifica di product-template.liquid o di featured-product.liquid

1. Dalla directory Sezioni apri product-template.liquid o featured-product.liquid:

   • Apri product-template.liquid per aggiungere questa funzionalità alle pagine del prodotto.
   • Apri featured-product.liquid per aggiungere questa funzionalità alla sezione dei prodotti in primo piano sulla homepage.

2. Trova {% form 'product'. Sopra questo tag aggiungi il codice seguente:

<div class="inventoryWrapper">
  {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

Il codice riportato sopra genera il messaggio Stock: x. Puoi modificare il testo regolando il contenuto nei tag <p>. Assicurati di includere {{ current_variant.inventory_quantity }} nei tag <p>.

1. In fondo al file, aggiungi il codice seguente:

<script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. Clicca su Salva.

Modifica di theme.js.liquid o di theme.js

Le modifiche da apportare a questi file dipendono dalla versione di Debut che stai utilizzando.

Versioni 17.8.0 e successive

1. Apri theme.js.liquid o theme.js.
2. Trova theme.Product = (function(). Sotto this.selectors = { aggiungi il codice seguente:

inventoryHtml: '.inventoryWrapper',

1. Nello stesso file trova _updateAddToCart: function(evt) {. Subito sotto aggiungi il codice seguente:

var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);

1. Trova if (variant.available) {. Prima dell'istruzione } else { aggiungi il codice seguente:

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
      inventoryWrapper.innerHTML = inventoryHtml;
    } else {
      inventoryWrapper.innerHTML = '';
}

Il codice riportato sopra genera il messaggio Stock: x. Puoi modificare il testo regolando il contenuto nei tag <p>. Assicurati di includere ${variantStock[variant.id]} nei tag <p>.

1. Clicca su Salva.

Versioni 17.9.0 e successive

1. Apri theme.js.liquid o theme.js.
2. Trova theme.Product = (function(). Sotto this.selectors = { aggiungi il codice seguente:

inventoryHtml: '.inventoryWrapper',

1. Nello stesso file trova _setProductState: function(evt) {. Subito sotto aggiungi il codice seguente:

var inventoryWrapper = this.container.querySelector(this.selectors.inventoryHtml);

1. Nella stessa funzione trova if (!variant) {. Dopo la parentesi di chiusura } aggiungi il codice seguente:

else {
  if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify' && inventoryWrapper !== null) {
    const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
    inventoryWrapper.innerHTML = inventoryHtml;
  } else {
    inventoryWrapper.innerHTML = '';
  }
}

Il codice riportato sopra genera il messaggio Stock: x. Puoi modificare il testo regolando il contenuto nei tag <p>. Assicurati di includere ${variantStock[variant.id]} nei tag <p>.

1. Clicca su Salva.

Brooklyn

Passaggi per Brooklyn

Modifica theme.liquid

1. Dal pannello di controllo Shopify vai a Negozio online > Temi.
2. Trova il tema che desideri modificare, quindi clicca sul pulsante ... > Modifica codice.
3. Dalla directory Layout apri theme.liquid.
4. Trova il tag di chiusura </head> nel codice. Su una nuova riga sopra il tag di chiusura </head> incolla il codice seguente:

<script>
  var variantStock = {};
</script>

1. Clicca su Salva.

Modifica di product-template.liquid o di featured-product.liquid

1. Dalla directory Sezioni apri product-template.liquid o featured-product.liquid:

   • Apri product-template.liquid per aggiungere questa funzionalità alle pagine del prodotto.
   • Apri featured-product.liquid per aggiungere questa funzionalità alla sezione dei prodotti in primo piano sulla homepage.

2. Trova {% form 'product'. Sopra questo tag aggiungi il codice seguente:

<div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

Il codice riportato sopra genera il messaggio Stock: x. Puoi modificare il testo regolando il contenuto nei tag <p>. Assicurati di includere {{current_variant.inventory_quantity }} nei tag <p>.

1. In fondo al file, aggiungi il codice seguente:

<script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. Clicca su Salva.

Modifica di theme.js.liquid o di theme.js

1. Apri theme.js.liquid o theme.js.
2. Trova theme.Product = (function(). Sotto this.selectors = { aggiungi il codice seguente:

inventoryHtml: '.inventoryWrapper',

1. Nello stesso file trova if (variant.available) {. Prima dell'istruzione } else { aggiungi il codice seguente:

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

Il codice riportato sopra genera il messaggio Stock: x. Puoi modificare il testo regolando il contenuto nei tag <p>. Assicurati di includere ${variantStock[variant.id]} nei tag <p>.

1. Clicca su Salva.

Simple

Passaggi per Simple

Modifica theme.liquid

1. Dal pannello di controllo Shopify vai a Negozio online > Temi.
2. Trova il tema che desideri modificare, quindi clicca sul pulsante ... > Modifica codice.
3. Dalla directory Layout apri theme.liquid.
4. Trova il tag di chiusura </head> nel codice. Su una nuova riga sopra il tag di chiusura </head> incolla il codice seguente:

<script>
  var variantStock = {};
</script>

1. Clicca su Salva.

Modifica di product-template.liquid o di featured-product.liquid

1. Dalla directory Sezioni apri product-template.liquid o featured-product.liquid:

   • Apri product-template.liquid per aggiungere questa funzionalità alle pagine del prodotto.
   • Apri featured-product.liquid per aggiungere questa funzionalità alla sezione dei prodotti in primo piano sulla homepage.

2. Trova {% form 'product'. Sopra questo tag aggiungi il codice seguente:

<div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

Il codice riportato sopra genera il messaggio Stock: x. Puoi modificare il testo regolando il contenuto nei tag <p>. Assicurati di includere {{current_variant.inventory_quantity }} nei tag <p>.

1. In fondo al file, aggiungi il codice seguente:

<script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. Clicca su Salva.

Modifica di theme.js.liquid o di theme.js

1. Apri theme.js.liquid o theme.js.
2. Trova theme.Product = (function(). Sotto this.selectors = { aggiungi il codice seguente:

inventoryHtml: '.inventoryWrapper',

1. Nello stesso file trova if (variant.available) {. Prima dell'istruzione } else { aggiungi il codice seguente:

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

Il codice riportato sopra genera il messaggio Stock: x. Puoi modificare il testo regolando il contenuto nei tag <p>. Assicurati di includere ${variantStock[variant.id]} nei tag <p>.

1. Clicca su Salva.

Minimal

Passaggi per Minimal

Modifica theme.liquid

1. Dal pannello di controllo Shopify vai a Negozio online > Temi.
2. Trova il tema che desideri modificare, quindi clicca sul pulsante ... > Modifica codice.
3. Dalla directory Layout apri theme.liquid.
4. Trova il tag di chiusura </head> nel codice. Su una nuova riga sopra il tag di chiusura </head> incolla il codice seguente:

<script>
  var variantStock = {};
</script>

1. Clicca su Salva.

Modifica di product-template.liquid o di featured-product.liquid

1. Dalla directory Sezioni apri product-template.liquid o featured-product.liquid:

   • Apri product-template.liquid per aggiungere questa funzionalità alle pagine del prodotto.
   • Apri featured-product.liquid per aggiungere questa funzionalità alla sezione dei prodotti in primo piano sulla homepage.

2. Trova {% form 'product'. Sopra questo tag aggiungi il codice seguente:

<div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
    <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

Il codice riportato sopra genera il messaggio Stock: x. Puoi modificare il testo regolando il contenuto nei tag <p>. Assicurati di includere {{current_variant.inventory_quantity }} nei tag <p>.

1. In fondo al file, aggiungi il codice seguente:

<script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. Clicca su Salva.

Modifica di theme.js.liquid o di theme.js

1. Apri theme.js.liquid o theme.js.
2. Trova theme.Product = (function(). Sotto this.selectors = { aggiungi il codice seguente:

inventoryHtml: '.inventoryWrapper',

1. Nello stesso file trova if (variant.available) {. Prima dell'istruzione } else { aggiungi il codice seguente:

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
  const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $(this.selectors.inventoryHtml, this.$container).html(inventoryHtml);
} else {
  $(this.selectors.inventoryHtml, this.$container).html('');
}

Il codice riportato sopra genera il messaggio Stock: x. Puoi modificare il testo regolando il contenuto nei tag <p>. Assicurati di includere ${variantStock[variant.id]} nei tag <p>.

1. Clicca su Salva.

Boundless

Passaggi per Boundless

Modifica theme.liquid

1. Dal pannello di controllo Shopify vai a Negozio online > Temi.
2. Trova il tema che desideri modificare, quindi clicca sul pulsante ... > Modifica codice.
3. Dalla directory Layout apri theme.liquid.
4. Trova il tag di chiusura </head> nel codice. Su una nuova riga sopra il tag di chiusura </head> incolla il codice seguente:

<script>
  var variantStock = {};
    </script>

1. Clicca su Salva.

Modifica di product-template.liquid o di featured-product.liquid

1. Dalla directory Sezioni apri product-template.liquid o featured-product.liquid:

   • Apri product-template.liquid per aggiungere questa funzionalità alle pagine del prodotto.
   • Apri featured-product.liquid per aggiungere questa funzionalità alla sezione dei prodotti in primo piano sulla homepage.

2. Trova {% form 'product'. Sopra questo tag aggiungi il codice seguente:

<div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
        <p>Stock: {{ current_variant.inventory_quantity }}</p>
  {% endif %}
</div>

Il codice riportato sopra genera il messaggio Stock: x. Puoi modificare il testo regolando il contenuto nei tag <p>. Assicurati di includere {{current_variant.inventory_quantity }} nei tag <p>.

1. In fondo al file, aggiungi il codice seguente:

<script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. Clicca su Salva.

Modifica di theme.js.liquid o di theme.js

1. Apri "theme.js.liquid" *o *"theme.js".
2. Trova theme.Product = (function(). Sotto var selectors = { aggiungi il codice seguente:

inventoryHtml: '.inventoryWrapper',

1. Nello stesso file trova $(selectors.SKU, this.$container).html(variant.sku);. Subito sotto aggiungi il codice seguente:

if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      const inventoryHtml = `<p>Stock: ${variantStock[variant.id]}</p>`;
  $('.inventoryWrapper').html(inventoryHtml);
} else {
    $('.inventoryWrapper').html("");
}

Il codice riportato sopra genera il messaggio Stock: x. Puoi modificare il testo regolando il contenuto nei tag <p>. Assicurati di includere ${variantStock[variant.id]} nei tag <p>.

1. Clicca su Salva.

Narrative

Passaggi per Narrative

Modifica theme.liquid

1. Dal pannello di controllo Shopify vai a Negozio online > Temi.
2. Trova il tema che desideri modificare, quindi clicca sul pulsante ... > Modifica codice.
3. Dalla directory Layout apri theme.liquid.
4. Trova il tag di chiusura </head> nel codice. Su una nuova riga sopra il tag di chiusura </head> incolla il codice seguente:

<script>
      var variantStock = {};
    </script>

1. Clicca su Salva.

Modifica di product-template.liquid o di featured-product.liquid

1. Dalla directory Sezioni apri product-template.liquid o featured-product.liquid:

   • Apri product-template.liquid per aggiungere questa funzionalità alle pagine del prodotto.
   • Apri featured-product.liquid per aggiungere questa funzionalità alla sezione dei prodotti in primo piano sulla homepage.

2. Trova {% include 'product-form' %}. Sopra questo tag aggiungi il codice seguente:

<div class="inventoryWrapper">
      {% if current_variant.inventory_quantity > 0 and current_variant.inventory_management == 'shopify' %}
        <p>Stock: {{ current_variant.inventory_quantity }}</p>
      {% endif %}
</div>

Il codice riportato sopra genera il messaggio Stock: x. Puoi modificare il testo regolando il contenuto nei tag <p>. Assicurati di includere {{current_variant.inventory_quantity }} nei tag <p>.

1. In fondo al file, aggiungi il codice seguente:

<script>
      {% for variant in product.variants %}
        variantStock[{{- variant.id -}}] = {{ variant.inventory_quantity }};
      {% endfor %}
    </script>

1. Clicca su Salva.

Modifica custom.js

1. Apri custom.js.
2. In fondo al file, aggiungi il codice seguente:

var sections = window.theme.sections;
    var inventorySelectorHtml = '.inventoryWrapper';
    var productExtension = {
      init: function() {
          this.on('variant_change_successful', this._updateInventory.bind(this));
          this.on('variant_change_undefined', this._removeInventory.bind(this));
      },
      _removeInventory: function() {
    $(inventorySelectorHtml, this.container).html('');
      },
      _updateInventory: function(event, instance, product, variant) {
    if (variantStock[variant.id] > 0 && variant.inventory_management == 'shopify') {
      $(inventorySelectorHtml, this.container).html(`<p>Stock: ${variantStock[variant.id]}</p>`);
    } else {
      $(inventorySelectorHtml, this.container).html('');
    }
  }
};
    sections.extend('product-template', productExtension);
    sections.extend('featured-product', productExtension);

Il codice riportato sopra genera il messaggio Stock: x. Puoi modificare il testo regolando il contenuto nei tag <p>. Assicurati di includere ${variantStock[variant.id]} nei tag <p>.

1. Clicca su Salva.