Vis en variants resterende lagerbeholdning på produktsider

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.

Trin for Debut

Rediger `theme.liquid`

Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik derefter på knappen ... > Rediger kode.
Åbn theme.liquid i mappen Layout.
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>

Klik på Gem.

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

Å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.
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 . Sørg for at medtage {{ current_variant.inventory_quantity }} i dine -tags.

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

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

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

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

inventoryHtml: '.inventoryWrapper',

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

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

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

Koden over outputtene Stock: x. Du kan ændre formuleringen ved at justere indholdet i taggene . Sørg for at medtage ${variantStock[variant.id]} i dine -tags.

Klik på Gem.

Version 17.9.0 og nyere

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

inventoryHtml: '.inventoryWrapper',

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

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

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 . Sørg for at medtage ${variantStock[variant.id]} i dine -tags.

Klik på Gem.

Trin til Brooklyn

Rediger `theme.liquid`

Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik derefter på knappen ... > Rediger kode.
Åbn theme.liquid i mappen Layout.
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>

Klik på Gem.

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

Å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.
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 . Sørg for at medtage {{current_variant.inventory_quantity }} i dine -tags.

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

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

Klik på Gem.

Rediger `theme.js.liquid` eller `theme.js`

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

inventoryHtml: '.inventoryWrapper',

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

Koden over outputtene Stock: x. Du kan ændre formuleringen ved at justere indholdet i taggene . Sørg for at medtage ${variantStock[variant.id]} i dine -tags.

Klik på Gem.

Trin for Simple

Rediger `theme.liquid`

Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik derefter på knappen ... > Rediger kode.
Åbn theme.liquid i mappen Layout.
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>

Klik på Gem.

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

Å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.
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 . Sørg for at medtage {{current_variant.inventory_quantity }} i dine -tags.

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

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

Klik på Gem.

Rediger `theme.js.liquid` eller `theme.js`

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

inventoryHtml: '.inventoryWrapper',

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

Koden over outputtene Stock: x. Du kan ændre formuleringen ved at justere indholdet i taggene . Sørg for at medtage ${variantStock[variant.id]} i dine -tags.

Klik på Gem.

Trin for Minimal

Rediger `theme.liquid`

Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik derefter på knappen ... > Rediger kode.
Åbn theme.liquid i mappen Layout.
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>

Klik på Gem.

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

Å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.
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 . Sørg for at medtage {{current_variant.inventory_quantity }} i dine -tags.

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

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

Klik på Gem.

Rediger `theme.js.liquid` eller `theme.js`

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

inventoryHtml: '.inventoryWrapper',

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

Koden over outputtene Stock: x. Du kan ændre formuleringen ved at justere indholdet i taggene . Sørg for at medtage ${variantStock[variant.id]} i dine -tags.

Klik på Gem.

Trin for Boundless

Rediger `theme.liquid`

Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik derefter på knappen ... > Rediger kode.
Åbn theme.liquid i mappen Layout.
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>

Klik på Gem.

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

Å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.
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 . Sørg for at medtage {{current_variant.inventory_quantity }} i dine -tags.

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

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

Klik på Gem.

Rediger `theme.js.liquid` eller `theme.js`

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

inventoryHtml: '.inventoryWrapper',

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 . Sørg for at medtage ${variantStock[variant.id]} i dine -tags.

Klik på Gem.

Trin for Narrative

Rediger `theme.liquid`

Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, og klik derefter på knappen ... > Rediger kode.
Åbn theme.liquid i mappen Layout.
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>

Klik på Gem.

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

Å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.
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 . Sørg for at medtage {{current_variant.inventory_quantity }} i dine -tags.

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

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

Klik på Gem.

Rediger `custom.js`

Åbn custom.js.
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);

Koden over outputtene Stock: x. Du kan ændre formuleringen ved at justere indholdet i taggene . Sørg for at medtage ${variantStock[variant.id]} i dine -tags.

Klik på Gem.

Vis en variants resterende lagerbeholdning på produktsider

Trin for Debut

Rediger theme.liquid

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

Rediger theme.js.liquid eller theme.js

Version 17.8.0 og ældre

Version 17.9.0 og nyere

Trin til Brooklyn

Rediger theme.liquid

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

Rediger theme.js.liquid eller theme.js

Trin for Simple

Rediger theme.liquid

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

Rediger theme.js.liquid eller theme.js

Trin for Minimal

Rediger theme.liquid

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

Rediger theme.js.liquid eller theme.js

Trin for Boundless

Rediger theme.liquid

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

Rediger theme.js.liquid eller theme.js

Trin for Narrative

Rediger theme.liquid

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

Rediger custom.js

Rediger `theme.liquid`

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

Rediger `theme.js.liquid` eller `theme.js`

Rediger `theme.liquid`

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

Rediger `theme.js.liquid` eller `theme.js`

Rediger `theme.liquid`

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

Rediger `theme.js.liquid` eller `theme.js`

Rediger `theme.liquid`

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

Rediger `theme.js.liquid` eller `theme.js`

Rediger `theme.liquid`

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

Rediger `theme.js.liquid` eller `theme.js`

Rediger `theme.liquid`

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

Rediger `custom.js`