Visualizzazione delle scorte rimanenti per una variante sulle pagine del prodotto

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

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.

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 seguente codice: 
<script>
  var variantStock = {};
</script>
  1. Clicca su Salva.

  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.

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 seguente codice: 
<script>
  var variantStock = {};
</script>
  1. Clicca su Salva.

  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.

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 seguente codice: 
<script>
  var variantStock = {};
</script>
  1. Clicca su Salva.

  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.

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 seguente codice: 
<script>
  var variantStock = {};
</script>
  1. Clicca su Salva.

  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.

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 seguente codice: 
<script>
  var variantStock = {};
    </script>
  1. Clicca su Salva.

  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.

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 seguente codice: 
<script>
      var variantStock = {};
    </script>
  1. Clicca su Salva.

  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.

Sei pronto per iniziare a vendere con Shopify?

Provalo, è gratis