De resterende voorraad van een variant op productpagina's tonen

Let op

Vintage thema's zijn niet beschikbaar in de Theme Store. Deze 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 alleen nog updates 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 15 minuten ontwerptijd nodig. Zie Ondersteuning voor thema's voor meer informatie.

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 met het aantal artikelen dat je op voorraad hebt wanneer de voorraad laag is voor een productvariant. Als je dit bericht wilt laten zien, moet je voorraadtracking inschakelen voor het product.

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 voor Laat resterende hoeveelheid-bericht zien. Je kunt deze instelling inschakelen in de themabewerker.

Debut

Stappen voor Debut

Bewerken theme.liquid

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
2. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > 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>

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

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 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 / Simple / Minimal

Stappen voor Brooklyn, Simple en Minimal

Bewerken theme.liquid

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
2. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > 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:

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>

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

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 op Opslaan.

Boundless

Stappen voor Boundless

Bewerken theme.liquid

1. Ga in het Shopify-beheercentrum naar Onlinewinkel > Thema's.
2. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > 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:

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 Onlinewinkel > Thema's.
2. Zoek het thema dat je wilt bewerken en klik vervolgens op Acties > 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:

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

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 op Opslaan.