Verbleibendes Inventar einer Variante auf Produktseiten anzeigen

Achtung

Vintage-Themes sind nicht im Theme Store verfügbar. Diese Themes verfügen nicht über die Funktionen, die in den Onlineshop 2.0-Themes von Shopify enthalten sind, und erhalten nur sicherheitsbezogene Aktualisierungen.

Hinweis

Wenn du ein kostenloses Theme von Shopify verwendest, kannst du dich an den Shopify Support wenden, um Hilfe zu diesem Tutorial zu erhalten. Die Designzeit beträgt 15 Minuten. Weitere Informationen dazu findest du unter Theme-Support.

Hinweis

Diese Anpassung ist für Vintage-Shopify-Themes und gilt nicht für Online Store 2.0-Themes.

• Finde die Architekturversion deines Themes heraus
• Entdecke die Anpassungsmöglichkeiten für Online Store 2.0-Themes

Du kannst eine Nachricht auf der Produktseite oder im Abschnitt für ausgewählte Produkte hinzufügen, auf der die Anzahl der Artikel angezeigt wird, die auf Lager sind, wenn der Lagerbestand einer Produktvariante niedrig ist. Damit diese Nachricht angezeigt wird, musst du die Inventarverfolgung für das Produkt aktivieren.

Die Schritte für diese Anpassung variieren je nach deinem Theme. Klicke auf die Schaltfläche für dein Theme und befolge die Anweisungen.

Tipp

Die Themes Supply und Venture von Shopify beinhalten bereits die Einstellung Meldung zur verbleibenden Restmenge anzeigen. Du kannst diese Einstellung über den Theme-Editor aktivieren.

Debut

Schritte für Debut

Bearbeiten theme.liquid

1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
2. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
3. Öffne im Verzeichnis Layout theme.liquid.
4. Suche das abschließende Tag </head> im Code. Füge in einer neuen Zeile über dem abschließenden Tag </head> den folgenden Code ein:

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

1. Klicke auf Speichern.

Bearbeiten von product-template.liquid oder featured-product.liquid

1. Öffne im Verzeichnis Abschnitte product-template.liquid oder featured-product.liquid:

   • Öffne product-template.liquid, um diese Funktion zu deinen Produktseiten hinzuzufügen.
   • Öffne featured-product.liquid, um diese Funktion zum Abschnitt für ausgewählte Produkte auf der Startseite hinzuzufügen.

2. Suche nach {% form 'product'. Füge über diesem Tag den folgenden Code hinzu:

<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. Füge am Ende der Datei den folgenden Code hinzu:

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

1. Klicke auf Speichern.

Bearbeiten von theme.js.liquid oder theme.js

Welche Änderungen du an diesen Dateien vornehmen musst, hängt von der Version von Debut ab, die du verwendest.

Versionen 17.8.0 und darunter

1. Öffne theme.js.liquid oder theme.js.
2. Suche nach theme.Product = (function(). Füge unterhalb von this.selectors = { den folgenden Code hinzu:

inventoryHtml: '.inventoryWrapper',

1. Suche in derselben Datei nach _updateAddToCart: function(evt) {. Füge direkt darunter den folgenden Code hinzu:

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

1. Suche nach if (variant.available) {. Füge vor der Anweisung } else { den folgenden Code hinzu:

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. Klicke auf Speichern.

Versionen 17.9.0 und höher

1. Öffne theme.js.liquid oder theme.js.
2. Suche nach theme.Product = (function(). Füge unterhalb von this.selectors = { den folgenden Code hinzu:

inventoryHtml: '.inventoryWrapper',

1. Suche in derselben Datei nach _setProductState: function(evt) {. Füge direkt darunter den folgenden Code hinzu:

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

1. Suche in derselben Datei nach if (!variant) {. Füge hinter der schließenden Klammer } den folgenden Code hinzu:

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

Info zum Code über den Ausgaben Stock: x: Du kannst den Wortlaut ändern, indem du den Inhalt in den <p>-Tags anpasst. Stelle sicher, dass die <p>-Tags ${variantStock[variant.id]} enthalten.

1. Klicke auf Speichern.

Brooklyn / Simple / Minimal

Schritte für Brooklyn, Simple und Minimal

Bearbeiten theme.liquid

1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
2. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
3. Öffne im Verzeichnis Layout theme.liquid.
4. Suche das abschließende Tag </head> im Code. Füge in einer neuen Zeile über dem abschließenden Tag </head> den folgenden Code ein:

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

1. Klicke auf Speichern.

Bearbeiten von product-template.liquid oder featured-product.liquid

1. Öffne im Verzeichnis Abschnitte product-template.liquid oder featured-product.liquid:

2. Suche nach {% form 'product'. Füge über diesem Tag den folgenden Code hinzu:

    <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. Füge am Ende der Datei den folgenden Code hinzu:

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

1. Klicke auf Speichern.

Bearbeiten von theme.js.liquid oder theme.js

1. Öffne theme.js.liquid oder theme.js.
2. Suche nach theme.Product = (function(). Füge unterhalb von this.selectors = { den folgenden Code hinzu:

inventoryHtml: '.inventoryWrapper',

1. Suche in derselben Datei nach if (variant.available) {. Füge vor der Anweisung } else { den folgenden Code hinzu:

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. Klicke auf Speichern.

Boundless

Schritte für Boundless

Bearbeiten theme.liquid

1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
2. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
3. Öffne im Verzeichnis Layout theme.liquid.
4. Suche das abschließende Tag </head> im Code. Füge in einer neuen Zeile über dem abschließenden Tag </head> den folgenden Code ein:

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

1. Klicke auf Speichern.

Bearbeiten von product-template.liquid oder featured-product.liquid

1. Öffne im Verzeichnis Abschnitte product-template.liquid oder featured-product.liquid:

2. Suche nach {% form 'product'. Füge über diesem Tag den folgenden Code hinzu:

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

Info zum Code über den Ausgaben Stock: x: Du kannst den Wortlaut ändern, indem du den Inhalt in den <p>-Tags anpasst. Stelle sicher, dass die <p>-Tags {{current_variant.inventory_quantity }} enthalten.

1. Füge am Ende der Datei den folgenden Code hinzu:

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

1. Klicke auf Speichern.

Bearbeiten von theme.js.liquid oder theme.js

1. Öffte 'theme.js.liquid' * oder * 'theme.js'.
2. Suche nach theme.Product = (function(). Füge unterhalb von var selectors = { den folgenden Code hinzu:

inventoryHtml: '.inventoryWrapper',

1. Suche in derselben Datei nach $(selectors.SKU, this.$container).html(variant.sku);. Füge direkt darunter den folgenden Code hinzu:

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

Info zum Code über den Ausgaben Stock: x: Du kannst den Wortlaut ändern, indem du den Inhalt in den <p>-Tags anpasst. Stelle sicher, dass die <p>-Tags ${variantStock[variant.id]} enthalten.

1. Klicke auf Speichern.

Narrative

Schritte für Narrative

Bearbeiten theme.liquid

1. Gehe in deinem Shopify-Adminbereich zu Onlineshop > Themes.
2. Suche das Theme, das du bearbeiten möchtest und klicke dann auf Aktionen > Code bearbeiten.
3. Öffne im Verzeichnis Layout theme.liquid.
4. Suche das abschließende Tag </head> im Code. Füge in einer neuen Zeile über dem abschließenden Tag </head> den folgenden Code ein:

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

1. Klicke auf Speichern.

Bearbeiten von product-template.liquid oder featured-product.liquid

1. Öffne im Verzeichnis Abschnitte product-template.liquid oder featured-product.liquid:

2. Suche nach {% include 'product-form' %}. Füge über diesem Tag den folgenden Code hinzu:

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

Info zum Code über den Ausgaben Stock: x: Du kannst den Wortlaut ändern, indem du den Inhalt in den <p>-Tags anpasst. Stelle sicher, dass die <p>-Tags {{current_variant.inventory_quantity }} enthalten.

1. Füge am Ende der Datei den folgenden Code hinzu:

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

1. Klicke auf Speichern.

Bearbeiten custom.js

1. Öffne custom.js.
2. Füge am Ende der Datei den folgenden Code hinzu:

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. Klicke auf Speichern.