Vis gjenværende lagerbeholdning av en variant på produktsider

Advarsel

Eldre temaer er ikke tilgjengelige i Theme Store. Disse temaene har ikke funksjonene som er inkludert i Shopifys Online Store 2.0-temaer, og Shopifys gratis eldre temaer mottar ikke oppdateringer ut over sikkerhetsrettelser.

Merk

Hvis du bruker et gratis tema fra Shopify, kan det hende du kan kontakte Shopify-brukerstøtte for hjelp med denne veiledningen. Det krever 15 minutters designtid. For å finne ut mer, kan du se _Støtte for temaer–.

Merk

Denne tilpasningen er for eldre Shopify-temaer, og gjelder ikke for Nettbutikk 2.0-temaer.

• Finn ut temaets arkitekturversjon
• Utforsk Online Store 2.0-tematilpasninger

Du kan legge til en melding på produktsiden eller i seksjonen med fremhevede produkter som viser antall varer på lager dersom lagerbeholdningen er lav for en produktvariant. For at denne meldingen skal vises, må du aktivere lagersporing for produktet.

Trinnene for denne tilpasningen varierer avhengig av valgt tema. Klikk på knappen for ditt tema og følg instruksjonene.

Tips

Shopifys Supply-tema og Venture-tema inneholder allerede innstillingen Melding for å vise gjenværende antall. Du kan aktivere denne innstillingen fra redigeringsprogrammet for temaer.

Debut

Steg for Debut

Rediger theme.liquid

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere og klikk på Handlinger > Redigere kode.
3. Fra Layout-katalogen åpner du theme.liquid.
4. Finn den avsluttende </head>-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende </head>-taggen:

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

1. Klikk på Lagre.

Rediger product-template.liquid eller featured-product.liquid

1. Fra Seksjoner-katalogen åpner du product-template.liquid eller featured-product.liquid:

   • Åpne product-template.liquid for å legge til denne funksjonen på produktsider.
   • Åpne featured-product.liquid for å legge til denne funksjonen i seksjonen for fremhevede produkter på startsiden.

2. Finn {% form 'product'. Legg til følgende kode over denne taggen:

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

The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `{{ current_variant.inventory_quantity }}` in your `<p>` tags.

1. Nederst i filen legger du til følgende kode:

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

1. Klikk på Lagre.

Rediger theme.js.liquid eller theme.js

Hvilke endringer du må gjøre i disse filene avhenger av hvilken Debut-versjon du bruker.

Versjon 17.8.0 og lavere

1. Åpne theme.js.liquid eller theme.js.
2. Finn theme.Product = (function(). Legg til følgende kode under this.selectors = {:

inventoryHtml: '.inventoryWrapper',

1. I samme fil, finn _updateAddToCart: function(evt) {. Legg til følgende kode rett nedenfor:

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

1. Finn if (variant.available) {. Legg til følgende kode før } else {-uttrykket:

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 = '';
}

The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `${variantStock[variant.id]}` in your `<p>` tags.

1. Klikk på Lagre.

Versjon 17.9.0 og nyere

1. Åpne theme.js.liquid eller theme.js.
2. Finn theme.Product = (function(). Legg til følgende kode under this.selectors = {:

inventoryHtml: '.inventoryWrapper',

1. I samme fil, finn _setProductState: function(evt) {. Legg til følgende kode rett nedenfor:

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

1. I samme funksjon, finn if (!variant) {. Legg til følgende kode etter den avsluttende }-braketten:

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 = '';
  }
}

Koden over gir resultatet Stock: x. Du kan endre ordleggingen ved å justere innholdet i <p>-taggene. Pass på at du tar med ${variantStock[variant.id]} i <p>-taggene.

1. Klikk på Lagre.

Brooklyn / Simple / Minimal

Trinn for Brooklyn, Simple og Minimal

Rediger theme.liquid

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere og klikk på Handlinger > Redigere kode.
3. Fra Layout-katalogen åpner du theme.liquid.
4. Finn den avsluttende </head>-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende </head>-taggen:

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

1. Klikk på Lagre.

Rediger product-template.liquid eller featured-product.liquid

1. Fra Seksjoner-katalogen åpner du product-template.liquid eller featured-product.liquid:

2. Finn {% form 'product'. Legg til følgende kode over denne taggen:

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

The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `{{current_variant.inventory_quantity }}` in your `<p>` tags.

1. Nederst i filen legger du til følgende kode:

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

1. Klikk på Lagre.

Rediger theme.js.liquid eller theme.js

1. Åpne theme.js.liquid eller theme.js.
2. Finn theme.Product = (function(). Legg til følgende kode under this.selectors = {:

inventoryHtml: '.inventoryWrapper',

1. I samme fil, finn if (variant.available) {. Legg til følgende kode før } else {-uttrykket:

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('');
}

The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `${variantStock[variant.id]}` in your `<p>` tags.

1. Klikk på Lagre.

Boundless

Steg for Boundless

Rediger theme.liquid

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere og klikk på Handlinger > Redigere kode.
3. Fra Layout-katalogen åpner du theme.liquid.
4. Finn den avsluttende </head>-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende </head>-taggen:

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

1. Klikk på Lagre.

Rediger product-template.liquid eller featured-product.liquid

1. Fra Seksjoner-katalogen åpner du product-template.liquid eller featured-product.liquid:

2. Finn {% form 'product'. Legg til følgende kode over denne taggen:

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

Koden over gir resultatet Stock: x. Du kan endre ordleggingen ved å justere innholdet i <p>-taggene. Pass på at du tar med {{current_variant.inventory_quantity }} i <p>-taggene.

1. Nederst i filen legger du til følgende kode:

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

1. Klikk på Lagre.

Rediger theme.js.liquid eller theme.js

1. Åpne «theme.js.liquid» *eller *«theme.js».
2. Finn theme.Product = (function(). Legg til følgende kode under var selectors = {:

inventoryHtml: '.inventoryWrapper',

1. I samme fil, finn $(selectors.SKU, this.$container).html(variant.sku);. Legg til følgende kode rett nedenfor:

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

Koden over gir resultatet Stock: x. Du kan endre ordleggingen ved å justere innholdet i <p>-taggene. Pass på at du tar med ${variantStock[variant.id]} i <p>-taggene.

1. Klikk på Lagre.

Narrative

Steg for Narrative

Rediger theme.liquid

1. Fra Shopify-administrator går du til Nettbutikk > Temaer.
2. Finn temaet du vil redigere og klikk på Handlinger > Redigere kode.
3. Fra Layout-katalogen åpner du theme.liquid.
4. Finn den avsluttende </head>-taggen i koden. Lim inn følgende kode på en ny linje like over den avsluttende </head>-taggen:

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

1. Klikk på Lagre.

Rediger product-template.liquid eller featured-product.liquid

1. Fra Seksjoner-katalogen åpner du product-template.liquid eller featured-product.liquid:

2. Finn {% include 'product-form' %}. Legg til følgende kode over denne taggen:

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

Koden over gir resultatet Stock: x. Du kan endre ordleggingen ved å justere innholdet i <p>-taggene. Pass på at du tar med {{current_variant.inventory_quantity }} i <p>-taggene.

1. Nederst i filen legger du til følgende kode:

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

1. Klikk på Lagre.

Rediger custom.js

1. Åpne custom.js.
2. Nederst i filen legger du til følgende kode:

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);

The code above outputs `Stock: x`. You can change the wording by adjusting the content in the `<p>` tags. Make sure to include `${variantStock[variant.id]}` in your `<p>` tags.

1. Klikk på Lagre.