Hilfe
Einloggen

Anzeige von Mengenregeln und volumenabhängiger Preisgestaltung in deinem Shop

Du kannst Mengenregeln und die volumenabhängige Preisgestaltung für deinen B2B-Katalog in deinem Shop anzeigen, indem du das Theme deines Shops auf die neueste Version aktualisierst.

Wenn du dein Theme nicht ändern oder aktualisieren möchtest, kannst du den folgenden Code zu deinem Theme hinzufügen, um Mengenregeln und die volumenabhängige Preisgestaltung anzuzeigen.

Auf dieser Seite

Überlegungen zum Hinzufügen von Mengenregeln und volumenabhängiger Preisgestaltung zu deinem Theme-Code

Bevor du Mengenregeln und eine volumenabhängige Preisgestaltung zu deinem Theme-Code hinzufügst, lies die folgenden Überlegungen:

  • Dies ist ein Tutorial für Fortgeschrittene. Wenn du dich mit dem Lesen und Bearbeiten von Theme-Code nicht wohlfühlst, kannst du mit Entwickler:innen zusammenarbeiten oder Shopify-Partner:innen engagieren.
  • Bevor du Änderungen an deinen Theme-Dateien vornimmst, stelle sicher, dass du dein Theme duplizierst, um eine Sicherungskopie zu erstellen.
  • Mengenregeln für den B2B-Katalog werden von kostenlosen Shopify-Themes ab Version 8.0.0 unterstützt. Die volumenabhängige Preisgestaltung wird ab Version 11.0.0 unterstützt.

Produktmenge im Warenkorb

Der Wert für die Warenkorbmenge 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 Produktmenge im Warenkorb hinzufügen

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

  • main-product.liquid oder eine entsprechende Datei
  • featured-product.liquid oder eine entsprechende Datei

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu 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.

  3. Öffne die Datei, die du bearbeiten möchtest.

  4. Erstelle am Ende der Datei eine neue Zeile und füge den 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>
  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 mit JavaScript-Code abgerufen werden.

Du kannst Code zur Datei theme.js oder einer entsprechenden Datei hinzufügen.

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu 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.

  3. Öffne die Datei theme.js.

  4. Erstelle am Ende der Datei eine neue Zeile und füge den 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 mit Liquid abgerufen werden.

Liquid-Code für Mengenregeln hinzufügen

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

  • main-product.liquid oder eine entsprechende Datei
  • featured-product.liquid oder eine entsprechende Datei

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu 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.

  3. Öffne die Datei, die du bearbeiten möchtest.

  4. Erstelle am Ende der Datei eine neue Zeile und füge dann den 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 ihre eigenen Mengenregeln haben. Nachdem eine andere Variante ausgewählt wurde, müssen die auf einer Produktseite oder im Abschnitt für vorgestellte Produkte angezeigten Mengenregeln aktualisiert werden. Der aktualisierte Wert kann mit JavaScript-Code abgerufen werden.

  • theme.js oder eine entsprechende Datei
  • en.default.json

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu 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.

  3. Öffne die Datei theme.js.

  4. Erstelle am Ende der Datei eine neue Zeile und füge dann den 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.

Volumenabhängige Preisgestaltung

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

Du kannst Code zu den folgenden Dateien in deinem Theme hinzufügen, um die volumenabhängige Preisgestaltung anzuzeigen:

  • main-product.liquid oder eine entsprechende Datei
  • featured-product.liquid oder eine entsprechende Datei

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu 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.

  3. Öffne die Datei, die du bearbeiten möchtest.

  4. Erstelle am Ende der Datei eine neue Zeile und füge dann den 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 -%}
  1. Klicke auf Speichern.

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

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

  • theme.js

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu 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.

  3. Öffne die Datei theme.js.

  4. Erstelle am Ende der Datei eine neue Zeile und füge dann den 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');
        }
      }
    },
  );
}
  1. Klicke auf Speichern.

Gebietsschemata hinzufügen

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

Schritte:

  1. Gehe in deinem Shopify-Adminbereich zu 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.

  3. Öffne die Datei en.default.json.

  4. Erstelle am Ende der Datei eine neue Zeile und füge dann den folgenden Code hinzu:

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