Vis en variants resterende lagerbeholdning på produktsider

Denne side blev udskrevet kl. Apr 18, 2024. Besøg https://help.shopify.com/da/manual/online-store/themes/themes-by-shopify/vintage-themes/customizing-vintage-themes/show-remaining-quantity for at se den aktuelle version.

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

  1. Gå til Webshop > Temaer i din Shopify-administrator.
  2. Find det tema, du vil redigere, og klik derefter på knappen ... > 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.

  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>

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

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

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.

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.

Trin til Brooklyn

Rediger theme.liquid

  1. Gå til Webshop > Temaer i din Shopify-administrator.
  2. Find det tema, du vil redigere, og klik derefter på knappen ... > 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.

  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>

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

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.

Trin for Simple

Rediger theme.liquid

  1. Gå til Webshop > Temaer i din Shopify-administrator.
  2. Find det tema, du vil redigere, og klik derefter på knappen ... > 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.

  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>

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

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.

Trin for Minimal

Rediger theme.liquid

  1. Gå til Webshop > Temaer i din Shopify-administrator.
  2. Find det tema, du vil redigere, og klik derefter på knappen ... > 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.

  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>

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

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.

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å knappen ... > 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.

  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>

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.

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å knappen ... > 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.

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

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.

Er du klar til at begynde at sælge med Shopify?

Prøv det gratis