De resterende voorraad van een variant op productpagina's tonen

Let op

Vintage thema's zijn niet beschikbaar in de Theme Store. Vintage thema's hebben niet de functies die in de Online Store 2.0-thema's van Shopify zijn opgenomen en de gratis vintage thema's van Shopify krijgen geen updates, behalve als dit voor de beveiliging nodig is.

Opmerking

Als je een gratis thema van Shopify gebruikt, kun je mogelijk contact opnemen met Shopify Support voor hulp bij deze tutorial. Hiervoor is vijftien minuten ontwerptijd nodig. Hier vind je meer informatie over het Shopify-ontwerpbeleid.

Opmerking

Deze aanpassing is voor vintage thema's van Shopify en is niet van toepassing op Online Store 2.0-thema's.

• Ontdek de architectuurversie van je thema
• Ontdek aanpassingen aan Online Store 2.0-thema

Je kunt een bericht toevoegen aan de sectie Productpagina of Uitgelicht product waar het aantal artikelen wordt weergegeven dat je op voorraad hebt wanneer de voorraad laag is voor een productvariant. Activeer voorraadtracking voor het product als je dit bericht wil weergeven.

De stappen voor deze aanpassing variëren naargelang je thema. Klik op de knop van je thema en volg de instructies.

Tip

Het Supply-thema en het Venture-thema van Shopify bevatten al een instelling Laat resterende hoeveelheid-bericht zien. Je kunt deze instelling activeren in de themabewerker.

Debut

Stappen voor Debut

Bewerken theme.liquid

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken en klik op de knop ... > Code bewerken.
3. Open in de directory Opmaak theme.liquid.
4. Zoek de sluitende tag </head> in je code. Plak de volgende code op een nieuwe regel boven de sluitende tag </head>:

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

1. Klik op Opslaan.

Bewerk product-template.liquid of featured-product.liquid

1. Open in de directory Secties product-template.liquid of featured-product.liquid:

   • Open product-template.liquid om deze functie toe te voegen aan productpagina's.
   • Open featured-product.liquid om deze functie toe te voegen aan de sectie uitgelicht product op de homepage.

2. Zoek {% form 'product'. Voeg boven deze tag de volgende code toe:

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

De bovenstaande code toont Stock: x. Je kunt de tekst wijzigen door de content in de <p>-tags aanpassen. Zorg ervoor dat je {{ current_variant.inventory_quantity }} in je <p>-tags op te nemen.

1. Voeg onderin het bestand de volgende code toe:

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

1. Klik op Opslaan.

Bewerk theme.js.liquid of theme.js

De wijzigingen die je aan deze bestanden moet aanbrengen, zijn afhankelijk van de versie van Debut die je gebruikt.

Versie 17.8.0 en lager

1. Open theme.js.liquid of theme.js.
2. Zoek theme.Product = (function(). Voeg onder this.selectors = { de volgende code toe:

inventoryHtml: '.inventoryWrapper',

1. Zoek in hetzelfde bestand naar _updateAddToCart: function(evt) {. Voeg direct hieronder de volgende code toe:

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

1. Zoek if (variant.available) {. Voeg vóór het } else {-overzicht de volgende code toe:

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

De bovenstaande code toont Stock: x. Je kunt de tekst wijzigen door de content in de <p>-tags aanpassen. Zorg ervoor dat je ${variantStock[variant.id]} in je <p>-tags op te nemen.

1. Klik op Opslaan.

Versie 17.9.0 en hoger

1. Open theme.js.liquid of theme.js.
2. Zoek theme.Product = (function(). Voeg onder this.selectors = { de volgende code toe:

inventoryHtml: '.inventoryWrapper',

1. Zoek in hetzelfde bestand naar _setProductState: function(evt) {. Voeg direct hieronder de volgende code toe:

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

1. Zoek in dezelfde functie naar if (!variant) {. Voeg na het sluitende haakje } de volgende code toe:

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

De bovenstaande code toont Stock: x. Je kunt de tekst wijzigen door de content in de <p>-tags aanpassen. Zorg ervoor dat je ${variantStock[variant.id]} in je <p>-tags op te nemen.

1. Klik op Opslaan.

Brooklyn

Stappen voor Brooklyn

Bewerken theme.liquid

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken en klik op de knop ... > Code bewerken.
3. Open in de directory Opmaak theme.liquid.
4. Zoek de sluitende tag </head> in je code. Plak de volgende code op een nieuwe regel boven de sluitende tag </head>:

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

1. Klik op Opslaan.

Bewerk product-template.liquid of featured-product.liquid

1. Open in de directory Secties product-template.liquid of featured-product.liquid:

   • Open product-template.liquid om deze functie toe te voegen aan productpagina's.
   • Open featured-product.liquid om deze functie toe te voegen aan de sectie uitgelicht product op de homepage.

2. Zoek {% form 'product'. Voeg boven deze tag de volgende code toe:

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

De bovenstaande code toont Stock: x. Je kunt de tekst wijzigen door de content in de <p>-tags aanpassen. Zorg ervoor dat je {{current_variant.inventory_quantity }} in je <p>-tags op te nemen.

1. Voeg onderin het bestand de volgende code toe:

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

1. Klik op Opslaan.

Bewerk theme.js.liquid of theme.js

1. Open theme.js.liquid of theme.js.
2. Zoek theme.Product = (function(). Voeg onder this.selectors = { de volgende code toe:

inventoryHtml: '.inventoryWrapper',

1. Zoek in hetzelfde bestand naar if (variant.available) {. Voeg vóór het } else {-overzicht de volgende code toe:

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

De bovenstaande code toont Stock: x. Je kunt de tekst wijzigen door de content in de <p>-tags aanpassen. Zorg ervoor dat je ${variantStock[variant.id]} in je <p>-tags op te nemen.

1. Klik op Opslaan.

Simple

Stappen voor Simple

Bewerken theme.liquid

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken en klik op de knop ... > Code bewerken.
3. Open in de directory Opmaak theme.liquid.
4. Zoek de sluitende tag </head> in je code. Plak de volgende code op een nieuwe regel boven de sluitende tag </head>:

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

1. Klik op Opslaan.

Bewerk product-template.liquid of featured-product.liquid

1. Open in de directory Secties product-template.liquid of featured-product.liquid:

   • Open product-template.liquid om deze functie toe te voegen aan productpagina's.
   • Open featured-product.liquid om deze functie toe te voegen aan de sectie uitgelicht product op de homepage.

2. Zoek {% form 'product'. Voeg boven deze tag de volgende code toe:

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

De bovenstaande code toont Stock: x. Je kunt de tekst wijzigen door de content in de <p>-tags aanpassen. Zorg ervoor dat je {{current_variant.inventory_quantity }} in je <p>-tags op te nemen.

1. Voeg onderin het bestand de volgende code toe:

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

1. Klik op Opslaan.

Bewerk theme.js.liquid of theme.js

1. Open theme.js.liquid of theme.js.
2. Zoek theme.Product = (function(). Voeg onder this.selectors = { de volgende code toe:

inventoryHtml: '.inventoryWrapper',

1. Zoek in hetzelfde bestand naar if (variant.available) {. Voeg vóór het } else {-overzicht de volgende code toe:

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

De bovenstaande code toont Stock: x. Je kunt de tekst wijzigen door de content in de <p>-tags aanpassen. Zorg ervoor dat je ${variantStock[variant.id]} in je <p>-tags op te nemen.

1. Klik op Opslaan.

Minimal

Stappen voor Minimal

Bewerken theme.liquid

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken en klik op de knop ... > Code bewerken.
3. Open in de directory Opmaak theme.liquid.
4. Zoek de sluitende tag </head> in je code. Plak de volgende code op een nieuwe regel boven de sluitende tag </head>:

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

1. Klik op Opslaan.

Bewerk product-template.liquid of featured-product.liquid

1. Open in de directory Secties product-template.liquid of featured-product.liquid:

   • Open product-template.liquid om deze functie toe te voegen aan productpagina's.
   • Open featured-product.liquid om deze functie toe te voegen aan de sectie uitgelicht product op de homepage.

2. Zoek {% form 'product'. Voeg boven deze tag de volgende code toe:

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

De bovenstaande code toont Stock: x. Je kunt de tekst wijzigen door de content in de <p>-tags aanpassen. Zorg ervoor dat je {{current_variant.inventory_quantity }} in je <p>-tags op te nemen.

1. Voeg onderin het bestand de volgende code toe:

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

1. Klik op Opslaan.

Bewerk theme.js.liquid of theme.js

1. Open theme.js.liquid of theme.js.
2. Zoek theme.Product = (function(). Voeg onder this.selectors = { de volgende code toe:

inventoryHtml: '.inventoryWrapper',

1. Zoek in hetzelfde bestand naar if (variant.available) {. Voeg vóór het } else {-overzicht de volgende code toe:

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

De bovenstaande code toont Stock: x. Je kunt de tekst wijzigen door de content in de <p>-tags aanpassen. Zorg ervoor dat je ${variantStock[variant.id]} in je <p>-tags op te nemen.

1. Klik op Opslaan.

Boundless

Stappen voor Boundless

Bewerken theme.liquid

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken en klik op de knop ... > Code bewerken.
3. Open in de directory Opmaak theme.liquid.
4. Zoek de sluitende tag </head> in je code. Plak de volgende code op een nieuwe regel boven de sluitende tag </head>:

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

1. Klik op Opslaan.

Bewerk product-template.liquid of featured-product.liquid

1. Open in de directory Secties product-template.liquid of featured-product.liquid:

   • Open product-template.liquid om deze functie toe te voegen aan productpagina's.
   • Open featured-product.liquid om deze functie toe te voegen aan de sectie uitgelicht product op de homepage.

2. Zoek {% form 'product'. Voeg boven deze tag de volgende code toe:

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

De bovenstaande code toont Stock: x. Je kunt de tekst wijzigen door de content in de <p>-tags aanpassen. Zorg ervoor dat je {{current_variant.inventory_quantity }} in je <p>-tags op te nemen.

1. Voeg onderin het bestand de volgende code toe:

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

1. Klik op Opslaan.

Bewerk theme.js.liquid of theme.js

1. Open 'theme.js.liquid' *of *'theme.js'.
2. Zoek theme.Product = (function(). Voeg onder var selectors = { de volgende code toe:

inventoryHtml: '.inventoryWrapper',

1. Zoek in hetzelfde bestand naar $(selectors.SKU, this.$container).html(variant.sku);. Voeg direct hieronder de volgende code toe:

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

De bovenstaande code toont Stock: x. Je kunt de tekst wijzigen door de content in de <p>-tags aanpassen. Zorg ervoor dat je ${variantStock[variant.id]} in je <p>-tags op te nemen.

1. Klik op Opslaan.

Narrative

Stappen voor Narrative

Bewerken theme.liquid

1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
2. Zoek het thema dat je wilt bewerken en klik op de knop ... > Code bewerken.
3. Open in de directory Opmaak theme.liquid.
4. Zoek de sluitende tag </head> in je code. Plak de volgende code op een nieuwe regel boven de sluitende tag </head>:

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

1. Klik op Opslaan.

Bewerk product-template.liquid of featured-product.liquid

1. Open in de directory Secties product-template.liquid of featured-product.liquid:

   • Open product-template.liquid om deze functie toe te voegen aan productpagina's.
   • Open featured-product.liquid om deze functie toe te voegen aan de sectie uitgelicht product op de homepage.

2. Zoek {% include 'product-form' %}. Voeg boven deze tag de volgende code toe:

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

De bovenstaande code toont Stock: x. Je kunt de tekst wijzigen door de content in de <p>-tags aanpassen. Zorg ervoor dat je {{current_variant.inventory_quantity }} in je <p>-tags op te nemen.

1. Voeg onderin het bestand de volgende code toe:

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

1. Klik op Opslaan.

Bewerken custom.js

1. Open custom.js.
2. Voeg onderin het bestand de volgende code toe:

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

De bovenstaande code toont Stock: x. Je kunt de tekst wijzigen door de content in de <p>-tags aanpassen. Zorg ervoor dat je ${variantStock[variant.id]} in je <p>-tags op te nemen.

1. Klik op Opslaan.