Vis en variants resterende lagerbeholdning på produktsider

Advarsel

Ældre temaer er ikke tilgængelige i temabutikken. Disse temaer har ikke de funktioner, der er inkluderet i Shopifys Webshop 2.0-temaer, og Shopifys gratis ældre temaer modtager ikke opdateringer ud over sikkerhedsrettelser.

Bemærk

Hvis du bruger et gratis tema fra Shopify, kan du muligvis kontakte Shopify Support for at få hjælp til denne vejledning. Det kræver 15 minutters designtid. Få mere at vide under Support til temaer.

Bemærk

Denne tilpasning er for ældre Shopify-temaer og gælder ikke for Online Store 2.0-temaer.

• Find dit temas arkitekturversion
• Se Online Store 2.0-tematilpasninger

Du kan tilføje en besked på produktsiden eller i afsnittet med fremhævede produkter, som viser antallet af varer, du har på lager, når lagerbeholdningen for en produktvariant er lav. Hvis du vil vise denne besked, skal du aktivere lagersporing for produktet.

Trinnene til denne tilpasning varierer afhængigt af dit tema. Klik på knappen for dit tema, og følg vejledningen.

Tip

Shopifys Supply-tema og Venture-team indeholder allerede indstillingen Vis besked om tilbageværende antal. Du kan aktivere denne indstilling fra temaeditoren.

Debut

Trin for Debut

Rediger theme.liquid

1. Gå til Webshop > Temaer i din Shopify-administrator.
2. Find det tema, du vil redigere, og klik derefter på Handlinger > Rediger kode.
3. Åbn theme.liquid i mappen Layout.
4. Find det afsluttende </head>-tag i koden. Indsæt følgende kode på en ny linje over det afsluttende </head>-tag:

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

1. Klik på Gem.

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

1. Åbn product-template.liquid eller featured-product.liquid i mappen Afsnit:

   • Åbn product-template.liquid for at føje denne funktion til produktsider.
   • Åbn featured-product.liquid for at føje denne funktion til det udvalgte produktafsnit på startsiden.

2. Find {% form 'product'. Tilføj følgende kode for dette tag:

<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. Tilføj følgende kode i bunden af filen:

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

1. Klik på Gem.

Rediger theme.js.liquid eller theme.js

De ændringer, du skal foretage af disse filer, afhænger af den version af Debut, som du bruger.

Version 17.8.0 og ældre

1. Åbn theme.js.liquid eller theme.js.
2. Find theme.Product = (function(). Tilføj følgende kode under this.selectors = {:

inventoryHtml: '.inventoryWrapper',

1. Find _updateAddToCart: function(evt) { i den samme fil. Tilføj følgende kode direkte herunder:

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

1. Find if (variant.available) {. Tilføj følgende kode før erklæringen } 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 = '';
}

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. Klik på Gem.

Version 17.9.0 og nyere

1. Åbn theme.js.liquid eller theme.js.
2. Find theme.Product = (function(). Tilføj følgende kode under this.selectors = {:

inventoryHtml: '.inventoryWrapper',

1. Find _setProductState: function(evt) { i den samme fil. Tilføj følgende kode direkte herunder:

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

1. Find if (!variant) { i den samme funktion. Tilføj følgende kode, når du har lukket }-parentesen:

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 outputtene Stock: x. Du kan ændre formuleringen ved at justere indholdet i taggene <p>. Sørg for at medtage ${variantStock[variant.id]} i dine <p>-tags.

1. Klik på Gem.

Brooklyn / Simple / Minimal

Trin til Brooklyn, Simple og Minimal

Rediger theme.liquid

1. Gå til Webshop > Temaer i din Shopify-administrator.
2. Find det tema, du vil redigere, og klik derefter på Handlinger > Rediger kode.
3. Åbn theme.liquid i mappen Layout.
4. Find det afsluttende </head>-tag i koden. Indsæt følgende kode på en ny linje over det afsluttende </head>-tag:

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

1. Klik på Gem.

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

1. Åbn product-template.liquid eller featured-product.liquid i mappen Afsnit:

2. Find {% form 'product'. Tilføj følgende kode for dette tag:

    <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. Tilføj følgende kode i bunden af filen:

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

1. Klik på Gem.

Rediger theme.js.liquid eller theme.js

1. Åbn theme.js.liquid eller theme.js.
2. Find theme.Product = (function(). Tilføj følgende kode under this.selectors = {:

inventoryHtml: '.inventoryWrapper',

1. Find if (variant.available) { i den samme fil. Tilføj følgende kode før erklæringen } else {:

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. Klik på Gem.

Boundless

Trin for Boundless

Rediger theme.liquid

1. Gå til Webshop > Temaer i din Shopify-administrator.
2. Find det tema, du vil redigere, og klik derefter på Handlinger > Rediger kode.
3. Åbn theme.liquid i mappen Layout.
4. Find det afsluttende </head>-tag i koden. Indsæt følgende kode på en ny linje over det afsluttende </head>-tag:

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

1. Klik på Gem.

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

1. Åbn product-template.liquid eller featured-product.liquid i mappen Afsnit:

2. Find {% form 'product'. Tilføj følgende kode for dette tag:

    <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 outputtene Stock: x. Du kan ændre formuleringen ved at justere indholdet i taggene <p>. Sørg for at medtage {{current_variant.inventory_quantity }} i dine <p>-tags.

1. Tilføj følgende kode i bunden af filen:

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

1. Klik på Gem.

Rediger theme.js.liquid eller theme.js

1. Åbn “theme.js.liquid” *or *“theme.js”.
2. Find theme.Product = (function(). Tilføj følgende kode under var selectors = {:

inventoryHtml: '.inventoryWrapper',

1. Find $(selectors.SKU, this.$container).html(variant.sku); i den samme fil. Tilføj følgende kode direkte herunder:

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 outputtene Stock: x. Du kan ændre formuleringen ved at justere indholdet i taggene <p>. Sørg for at medtage ${variantStock[variant.id]} i dine <p>-tags.

1. Klik på Gem.

Narrative

Trin for Narrative

Rediger theme.liquid

1. Gå til Webshop > Temaer i din Shopify-administrator.
2. Find det tema, du vil redigere, og klik derefter på Handlinger > Rediger kode.
3. Åbn theme.liquid i mappen Layout.
4. Find det afsluttende </head>-tag i koden. Indsæt følgende kode på en ny linje over det afsluttende </head>-tag:

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

1. Klik på Gem.

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

1. Åbn product-template.liquid eller featured-product.liquid i mappen Afsnit:

2. Find {% include 'product-form' %}. Tilføj følgende kode for dette tag:

    <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 outputtene Stock: x. Du kan ændre formuleringen ved at justere indholdet i taggene <p>. Sørg for at medtage {{current_variant.inventory_quantity }} i dine <p>-tags.

1. Tilføj følgende kode i bunden af filen:

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

1. Klik på Gem.

Rediger custom.js

1. Åbn custom.js.
2. Tilføj følgende kode i bunden af 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. Klik på Gem.