Mengenregeln und volumenabhängige Preisgestaltung in deinem Shop anzeigen

Mengenregeln für B2B-Kataloge werden bei kostenlosen Shopify-Themes ab Version 8.0.0 und die volumenabhängige Preisgestaltung ab Version 11.0.0 unterstützt. Wenn du in deinem Shop Mengenregeln und volumenabhängige Preise anzeigen möchtest, kannst du das Theme deines Shops auf die neueste Version aktualisieren.

Wenn du dein Theme nicht ändern oder aktualisieren möchtest, kannst du den folgenden Code zu deinem Theme hinzufügen, um Mengenregeln und eine volumenabhängige Preisgestaltung anzuzeigen.Bevor du Aktualisierungen an deinen Theme-Dateien vornimmst, stelle sicher, dass du dein Theme duplizierst, um eine Sicherheitskopie zu erstellen.

Auf dieser Seite

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:

Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
Öffne die Datei, die du bearbeiten möchtest.
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 }}">
    {{ cart | line_items_for: product | sum: 'quantity' }}
    {{- 'products.product.quantity.in_cart' | t: quantity: cart_qty -}}
</span>

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:

Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
Öffne die Datei theme.js.
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;
  });

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 Code zu den folgenden Dateien in deinem Theme hinzufügen, um die Mengenregeln zu unterstützen:

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

Schritte:

Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
Öffne die Datei, die du bearbeiten möchtest.
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>

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:

Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
Öffne die Datei theme.js.
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;
  });

Klicke auf Speichern.

Volumenabhängige Preisgestaltung

Liquid-Code für volumenabhängige Preisgestaltung hinzufügen

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

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

Schritte:

Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
Öffne die Datei, die du bearbeiten möchtest.
Erstelle eine neue Zeile am Ende der Datei und füge dann folgenden Code hinzu:

{%- if product.quantity_price_breaks_configured? -%}
  <div class="volume-pricing-note">
    <span>{{ 'products.product.volume_pricing.note' | t }}</span>
  </div>
  <volume-pricing class="parent-display" id="Volume-{{ section.id }}">
    {%- if product.selected_or_first_available_variant.quantity_price_breaks.size > 0 -%}
      <span class="caption-large">{{ 'products.product.volume_pricing.title' | t }}</span>
      <ul class="list-unstyled no-js-hidden">
        <li>
          <span>{{ product.selected_or_first_available_variant.quantity_rule.min }}+</span>
          {%- assign price = product.selected_or_first_available_variant.price
            | money_with_currency
          -%}
          <span data-text="{{ 'products.product.volume_pricing.price_at_each' | t: price: variant_price }}">
            {{ 'sections.quick_order_list.each' | t: money: price -}}
          </span>
        </li>
        {%- for price_break in product.selected_or_first_available_variant.quantity_price_breaks -%}
          {%- assign price_break_price = price_break.price | money_with_currency -%}
          <li class="{%- if forloop.index >= 3 -%}show-more-item hidden{%- endif -%}">
            <span>
              {{- price_break.minimum_quantity -}}
              <span aria-hidden="true">+</span></span
            >
            {%- assign price = price_break.price | money_with_currency -%}
            <span data-text="{{ 'products.product.volume_pricing.price_at_each' | t: price: price_break_price }}">
              {{ 'sections.quick_order_list.each' | t: money: price -}}
            </span>
          </li>
        {%- endfor -%}
      </ul>
      {%- if product.selected_or_first_available_variant.quantity_price_breaks.size >= 3 -%}
        <show-more-button>
          <button
            class="button-show-more link underlined-link no-js-hidden"
            id="Show-More-{{ section.id }}"
            type="button"
          >
            <span class="label-show-more label-text"
              ><span aria-hidden="true">+ </span>{{ 'products.facets.show_more' | t }}
            </span>
          </button>
        </show-more-button>
      {%- endif -%}
    {%- endif -%}
  </volume-pricing>
{%- endif -%}

Klicke auf Speichern.

JavaScript-Code für volumenabhängige Preisgestaltung hinzufügen

Du kannst Code zur folgenden Datei in deinem Theme hinzufügen, um die volumenabhängige Preisgestaltung zu unterstützen:

theme.js

Schritte:

Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
Öffne die Datei theme.js.
Erstelle eine neue Zeile am Ende der Datei und füge dann folgenden Code hinzu:

if (!customElements.get('show-more-button')) {
  customElements.define(
    'show-more-button',
    class ShowMoreButton extends HTMLElement {
      constructor() {
        super();
        const button = this.querySelector('button');
        button.addEventListener('click', (event) => {
          this.expandShowMore(event);
          const nextElementToFocus = event.target
            .closest('.parent-display')
            .querySelector('.show-more-item');
          if (
            nextElementToFocus &&
            !nextElementToFocus.classList.contains('hidden') &&
            nextElementToFocus.querySelector('input')
          ) {
            nextElementToFocus.querySelector('input').focus();
          }
        });
      }
      expandShowMore(event) {
        const parentDisplay = event.target
          .closest('[id^="Show-More-"]')
          .closest('.parent-display');
        const parentWrap = parentDisplay.querySelector('.parent-wrap');
        this.querySelectorAll('.label-text').forEach((element) =>
          element.classList.toggle('hidden'),
        );
        parentDisplay
          .querySelectorAll('.show-more-item')
          .forEach((item) => item.classList.toggle('hidden'));
        if (!this.querySelector('.label-show-less')) {
          this.classList.add('hidden');
        }
      }
    },
  );
}

Klicke auf Speichern.

Sprachvarianten hinzufügen

Um sicherzustellen, dass Mengenregeln und volumenabhängige Preise in allen übersetzten Versionen deines Onlineshops angezeigt werden, kannst du Sprachvarianten hinzufügen, indem du die folgenden JSON-Übersetzungs-Strings zur Datei en.default.json hinzufügst.

Schritte:

Gehe im Shopify-Adminbereich zu Onlineshop > Themes.
Suche das Theme, das du bearbeiten möchtest, klicke auf die Schaltfläche ..., um das Aktionsmenü zu öffnen, und klicke dann auf Code bearbeiten.
Öffne die Datei en.default.json.
Erstelle eine neue Zeile am Ende der Datei und füge dann folgenden Code hinzu:

"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}

Klicke auf Speichern.