Mengenregeln zu deinem Shopify-Theme hinzufügen

Mengenregeln für B2B-Katalog werden nur für kostenlose Shopify-Themes, Version 8.0.0 oder höher, unterstützt. Wenn du dein Theme nicht ändern oder aktualisieren möchtest, kannst du den folgenden Code zu deinem Theme hinzufügen, um Mengenregeln anzuzeigen.

Bringe dein Geschäft voran

Dies ist ein Tutorial für Fortgeschrittene. Wenn du mit dem Lesen und Bearbeiten von Theme-Code nicht vertraut bist, kannst du mit einem Entwickler zusammenarbeiten oder einen Shopify-Expert beauftragen.

Produkt-Warenkorbmenge

Der Warenkorbwert einer Produktvariante kann auf der Produktseite oder im Abschnitt für vorgestellte Produkte angezeigt werden. Der Wert kann mit Liquid abgerufen werden.

Liquid-Code für die Produkt-Warenkorbmenge hinzufügen

Du kannst Code zu den folgenden Dateien in deinem Theme hinzufügen, um die Warenkorbmenge zu unterstützen:

• main-product.liquid oder äquivalent
• featured-product.liquid oder äquivalent

Schritte:

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

iPhone

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

Android

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

1. Öffne die Datei, die du bearbeiten möchtest.
2. Erstelle eine neue Zeile am Ende der Datei und füge folgenden Code hinzu:

{% comment %} Cart quantity {% endcomment %}
<span id="CartQuantity-{{ section.id }}" data-product-url="{{ product.url }}" data-section-id="{{ section.id }}" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
    {%- assign cart_qty = cart | item_count_for_variant: product.selected_or_first_available_variant.id -%}
    {{- 'products.product.quantity.in_cart' | t: quantity: cart_qty -}}
</span>

1. Klicke auf Speichern.

JavaScript-Code für die Warenkorbmenge hinzufügen

Wenn sich die Warenkorbmenge einer Variante ändert, muss der auf der Produktseite oder im Abschnitt für vorgestellte Produkte angezeigte Wert aktualisiert werden. Der aktualisierte Wert kann mithilfe von JavaScript-Code abgerufen werden.

Du kannst Code zur Datei theme.js oder zum Äquivalent hinzufügen.

Schritte:

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

iPhone

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

Android

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

1. Öffne die Datei theme.js.
2. Erstelle eine neue Zeile am Ende der Datei und füge folgenden Code hinzu:

let productUrl = document.querySelector('[data-product-url]').dataset.productUrl;
let sectionId = document.querySelector('[data-section-id]').dataset.sectionId;
let variantId = document.querySelector('[data-variant-id]').dataset.variantId;

// Fetch updated HTML from Section Rendering API
fetch(`${productUrl}?section_id=${sectionId}&variant=${variantId}`)
    .then((response) => response.text())
    .then((responseText) => {
        // Replace the current HTML in DOM with the updated HTML

        const updatedHtml = new DOMParser().parseFromString(responseText, 'text/html');

        // Update the cart quantity
        const currentCartQuantity = document.querySelector(`#CartQuantity-${sectionId}`);
        const updatedCartQuantity = updatedHtml.querySelector(`#CartQuantity-${sectionId}`);
        currentCartQuantity.innerHTML = updatedCartQuantity.innerHTML;
    });

1. Klicke auf Speichern.

Mengenregeln

Die Mengenregeln einer Produktvariante können auf der Produktseite oder im Abschnitt für vorgestellte Produkte angezeigt werden. Die Regeln können mithilfe von Liquid abgerufen werden.

Liquid-Code für Mengenregeln hinzufügen

Du kannst in deinem Theme Code zu den folgenden Dateien hinzufügen, um die Produktwarenkorbmenge zu unterstützen:

• main-product.liquid oder äquivalent
• featured-product.liquid oder äquivalent

Schritte:

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

iPhone

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

Android

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

1. Öffne die Datei, die du bearbeiten möchtest.
2. Erstelle eine neue Zeile am Ende der Datei und füge dann folgenden Code hinzu:

{% comment %} Quantity rules {% endcomment %}
<div id="QuantityRules-{{ section.id }}" data-product-url="{{ product.url }}" data-section-id="{{ section.id }}" data-variant-id="{{ product.selected_or_first_available_variant.id }}">
    {%- if product.selected_or_first_available_variant.quantity_rule.increment > 1 -%}
        <span>
        {{- 'products.product.quantity.multiples_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.increment -}}
        </span>
    {%- endif -%}
    {%- if product.selected_or_first_available_variant.quantity_rule.min > 1 -%}
        <span>
        &nbsp;-&nbsp;
        {{- 'products.product.quantity.minimum_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.min -}}
        </span>
    {%- endif -%}
    {%- if product.selected_or_first_available_variant.quantity_rule.max != null -%}
        <span>
        &nbsp;-&nbsp;
        {{- 'products.product.quantity.maximum_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.max -}}
        </span>
    {%- endif -%}
</div>

1. Klicke auf Speichern.

JavaScript-Code für Mengenregeln hinzufügen

Jede Variante eines Produkts kann eigene Mengenregeln haben. Nachdem eine andere Variante ausgewählt wurde, müssen die Mengenregeln, die auf einer Produktseite oder einem Abschnitt für vorgestellte Produkte angezeigt werden, aktualisiert werden. Der aktualisierte Wert kann mithilfe des JavaScript-Codes abgerufen werden.

• theme.js oder äquivalent
• en.default.json

Schritte:

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

iPhone

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

Android

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

1. Öffne die Datei theme.js.
2. Erstelle eine neue Zeile am Ende der Datei und füge dann folgenden Code hinzu:

let productUrl = document.querySelector('[data-product-url]').dataset.productUrl;
let sectionId = document.querySelector('[data-section-id]').dataset.sectionId;
let variantId = document.querySelector('[data-variant-id]').dataset.variantId;
// `variantId` is set to the current variant's id. Replace this value with the updated variant's id

// Fetch updated HTML from Section Rendering API
fetch(`${productUrl}?section_id=${sectionId}&variant=${variantId}`)
    .then((response) => response.text())
    .then((responseText) => {
        // Replace the current HTML in DOM with the updated HTML

        const updatedHtml = new DOMParser().parseFromString(responseText, 'text/html');

        // Update the quantity rules
        const currentQuantityRules = document.querySelector(`#QuantityRules-${sectionId}`);
        const updatedQuantityRules = updatedHtml.querySelector(`#QuantityRules-${sectionId}`);
        currentQuantityRules.innerHTML = updatedQuantityRules.innerHTML;
    });

1. Klicke auf Speichern.

Sprachvarianten hinzufügen

JSON-Übersetzungs-Strings hinzufügen

Schritte:

Desktop

1. Gehe in deinem Shopify-Adminbereich auf Onlineshop > Themes.

2. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

iPhone

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

Android

1. Tippe in der Shopify App auf Shop.

2. Tippe unter Vertriebskanäle auf Onlineshop.

3. Tippe auf Themes verwalten.

4. Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.

1. Öffne die Datei en.default.json.
2. Erstelle eine neue Zeile am Ende der Datei und füge dann folgenden Code hinzu:

{
   "products":{
      "quantity":{
         "minimum_of":"Minimum of ",
         "maximum_of":"Maximum of ",
         "multiples_of":"Increments of ",
         "in_cart": " in cart"
      }
   }
}

1. Klicke auf Speichern.