Visa återstående lager för en variant på produktsidor

Varning

Vintage-teman är inte tillgängliga i temabutiken. Dessa teman har inte funktionerna som ingår i Shopifys Online Store 2.0-teman och Shopifys gratis Vintage-teman får inte uppdateringar utöver säkerhetsfixar.

Observera

Om du använder ett gratis tema från Shopify kan du kanske kontakta Shopify-support för att få hjälp med denna handledning. Det tar 15 minuter i designtid. För mer information, se Support för teman.

Observera

Denna anpassning är för Shopifys vintageteman och gäller inte teman för webbutik 2.0.

• Hitta temats arkitekturversion
• Utforska temaanpassningar för Online Store 2.0

Du kan lägga till ett meddelande på produktsidan eller avsnittet med utvalda produkter som visar det antal artiklar du har i lager när lagret börjar ta slut för en produktvariant. Du måste aktivera lagerspårning för produkten för att det här meddelandet ska visas.

Stegen för denna anpassning varierar beroende på ditt tema. Klicka på knappen för ditt tema och följ anvisningarna.

Tips

Shopifys Supply-tema och Venture-tema inkluderar redan inställningen Visa återstående kvantitet-meddelande. Du kan aktivera den här inställningen från temaredigeraren.

Debut

Steg för Debut

Redigera theme.liquid

1. Från din Shopify admin går du till Webbshop > teman.
2. Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.
3. Öppna theme.liquid i katalogen Layout.
4. Hitta sluttaggen </head> i koden. På en ny rad ovanför sluttaggen </head> klistrar du in följande kod:

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

1. Klicka på Spara.

Redigera product-template.liquid eller featured-product.liquid

1. Öppna product-template.liquid eller featured-product.liquid i katalogen Avsnitt:

   • Öppna product-template.liquid för att lägga till den här funktionen på produktsidor.
   • Öppna featured-product.liquid för att lägga till den här funktionen i avsnittet för utvalda produkter på startsidan.

2. Hitta {% form 'product'. Lägg till följande kod ovanför den här 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. Lägg till följande kod längst ner i filen:

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

1. Klicka på Spara.

Redigera theme.js.liquid eller theme.js

Vilka ändringar du behöver göra i dessa filer beror på vilken version av Debut du använder.

Versionerna 17.8.0 och lägre

1. Öppna theme.js.liquid eller theme.js.
2. Hitta theme.Product = (function(). Under this.selectors = { lägger du till följande kod:

inventoryHtml: '.inventoryWrapper',

1. I samma fil, hitta _updateAddToCart: function(evt) {. Lägg till följande kod direkt under:

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

1. Hitta if (variant.available) {. Före utdraget } else { lägger du till följande kod:

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. Klicka på Spara.

Versionerna 17.9.0 och högre

1. Öppna theme.js.liquid eller theme.js.
2. Hitta theme.Product = (function(). Under this.selectors = { lägger du till följande kod:

inventoryHtml: '.inventoryWrapper',

1. I samma fil, hitta _setProductState: function(evt) {. Lägg till följande kod direkt under:

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

1. I samma funktion, hitta if (!variant) {. Efter den avslutande }-parentesen lägger du till följande kod:

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

Ovanstående kod matar ut Stock: x. Du kan ändra formuleringen genom att justera innehållet i <p>-taggarna. Se till att inkludera ${variantStock[variant.id]} i dina <p>-taggar.

1. Klicka på Spara.

Brooklyn / Simple / Minimal

Steg för Brooklyn, Simple och Minimal

Redigera theme.liquid

1. Från din Shopify admin går du till Webbshop > teman.
2. Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.
3. Öppna theme.liquid i katalogen Layout.
4. Hitta sluttaggen </head> i koden. På en ny rad ovanför sluttaggen </head> klistrar du in följande kod:

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

1. Klicka på Spara.

Redigera product-template.liquid eller featured-product.liquid

1. Öppna product-template.liquid eller featured-product.liquid i katalogen Avsnitt:

2. Hitta {% form 'product'. Lägg till följande kod ovanför den här 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. Lägg till följande kod längst ner i filen:

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

1. Klicka på Spara.

Redigera theme.js.liquid eller theme.js

1. Öppna theme.js.liquid eller theme.js.
2. Hitta theme.Product = (function(). Under this.selectors = { lägger du till följande kod:

inventoryHtml: '.inventoryWrapper',

1. I samma fil, hitta if (variant.available) {. Före utdraget } else { lägger du till följande kod:

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. Klicka på Spara.

Boundless

Steg för Boundless

Redigera theme.liquid

1. Från din Shopify admin går du till Webbshop > teman.
2. Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.
3. Öppna theme.liquid i katalogen Layout.
4. Hitta sluttaggen </head> i koden. På en ny rad ovanför sluttaggen </head> klistrar du in följande kod:

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

1. Klicka på Spara.

Redigera product-template.liquid eller featured-product.liquid

1. Öppna product-template.liquid eller featured-product.liquid i katalogen Avsnitt:

2. Hitta {% form 'product'. Lägg till följande kod ovanför den här 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>

Ovanstående kod matar ut Stock: x. Du kan ändra formuleringen genom att justera innehållet i <p>-taggarna. Se till att inkludera {{current_variant.inventory_quantity }} i dina <p>-taggar.

1. Lägg till följande kod längst ner i filen:

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

1. Klicka på Spara.

Redigera theme.js.liquid eller theme.js

1. Öppna "theme.js.liquid" *eller *"theme.js".
2. Hitta theme.Product = (function(). Under var selectors = { lägger du till följande kod:

inventoryHtml: '.inventoryWrapper',

1. I samma fil, hitta $(selectors.SKU, this.$container).html(variant.sku);. Lägg till följande kod direkt under:

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

Ovanstående kod matar ut Stock: x. Du kan ändra formuleringen genom att justera innehållet i <p>-taggarna. Se till att inkludera ${variantStock[variant.id]} i dina <p>-taggar.

1. Klicka på Spara.

Narrative

Steg för Narrative

Redigera theme.liquid

1. Från din Shopify admin går du till Webbshop > teman.
2. Hitta det tema du vill redigera och klicka sedan på Åtgärder > Redigera kod.
3. Öppna theme.liquid i katalogen Layout.
4. Hitta sluttaggen </head> i koden. På en ny rad ovanför sluttaggen </head> klistrar du in följande kod:

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

1. Klicka på Spara.

Redigera product-template.liquid eller featured-product.liquid

1. Öppna product-template.liquid eller featured-product.liquid i katalogen Avsnitt:

2. Hitta {% include 'product-form' %}. Lägg till följande kod ovanför den här 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>

Ovanstående kod matar ut Stock: x. Du kan ändra formuleringen genom att justera innehållet i <p>-taggarna. Se till att inkludera {{current_variant.inventory_quantity }} i dina <p>-taggar.

1. Lägg till följande kod längst ner i filen:

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

1. Klicka på Spara.

Redigera custom.js

1. Öppna custom.js.
2. Lägg till följande kod längst ner i filen:

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. Klicka på Spara.