Hoeveelheidsregels en volumeprijsstelling in je winkel weergeven

Deze pagina is afgedrukt op Apr 25, 2024. Ga voor de huidige versie naar https://help.shopify.com/nl/manual/b2b/theme-code/quantity-pricing.

Hoeveelheidsregels voor B2B-assortimenten worden ondersteund bij gratis Shopify-thema's, versie 8.0.0 of hoger, en volumeprijsstelling wordt ondersteund bij versie 11.0.0 of hoger. Als je in je winkel hoeveelheidsregels en volumeprijsstelling wilt weergeven, kun je het thema van je winkel bijwerken naar de meest recente versie.

Als je het thema niet wilt wijzigen of bijwerken, kun je er de volgende code aan toevoegen om hoeveelheidsregels en een volumeprijsstelling weer te geven.Dupliceer het thema om een back-upkopie te maken voordat je updates uitvoert aan themabestanden.

Op deze pagina

Winkelwagenhoeveelheid product

Je kunt de waarde van de winkelwagenhoeveelheid van een productvariant weergeven op de productpagina of in de uitgelichte productsectie. Je kunt de waarde ophalen met behulp van Liquid.

Liquid-code voor winkelwagenhoeveelheid product toevoegen

Je kunt code toevoegen aan de volgende bestanden in het thema om de winkelwagenhoeveelheid te ondersteunen:

  • main-product.liquid of een equivalent daarvan;
  • featured-product.liquid of een equivalent daarvan.

Stappen:

  1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
  2. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
  3. Open het bestand dat je wilt bewerken.
  4. Maak een nieuwe regel onder in het bestand en voeg de volgende code toe: 
{% 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. Klik op Opslaan.

Javascript-code voor winkelwagenhoeveelheid toevoegen

Wanneer de winkelwagenhoeveelheid van een variant verandert, is het nodig om de waarde die wordt weergegeven op de productpagina of of in de uitgelichte productsectie bij te werken. Je kunt de bijgewerkte waarde ophalen met behulp van Javascript-code.

Je kunt code toevoegen aan het bestand theme.js of een equivalent daarvan.

Stappen:

  1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
  2. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
  3. Open het bestand theme.js.
  4. Maak een nieuwe regel onder in het bestand en voeg de volgende code toe: 
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. Klik op Opslaan.

Hoeveelheidsregels

Je kunt de hoeveelheidsregels van een productvariant weergeven op de productpagina of in de uitgelichte productsectie. Je kunt de regels ophalen met behulp van Liquid.

Liquid-code voor hoeveelheidsregels toevoegen

Je kunt code toevoegen aan de volgende bestanden in het thema om hoeveelheidsregels te ondersteunen:

  • main-product.liquid of een equivalent daarvan;
  • featured-product.liquid of een equivalent daarvan.

Stappen:

  1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
  2. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
  3. Open het bestand dat je wilt bewerken.
  4. Maak een nieuwe regel onder in het bestand aan en voeg de volgende code toe: 
{% 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. Klik op Opslaan.

Javascript-code voor hoeveelheidsregels toevoegen

Voor elke variant van een product kan een unieke reeks hoeveelheidsregels gelden. Werk de hoeveelheidsregels die worden weergegeven op een productpagina of in een uitgelichte productsectie bij als je een andere variant selecteert. Je kunt de bijgewerkte waarde ophalen met behulp van Javascript-code:

  • theme.js of een equivalent daarvan
  • en.default.json

Stappen:

  1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
  2. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
  3. Open het bestand theme.js.
  4. Maak een nieuwe regel onder in het bestand aan en voeg de volgende code toe: 
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. Klik op Opslaan.

Volumeprijzen

Liquid-code voor volumeprijsstelling toevoegen

Je kunt code toevoegen aan de volgende bestanden in het thema om een volumeprijsstelling weer te geven:

  • main-product.liquid of een equivalent daarvan;
  • featured-product.liquid of een equivalent daarvan.

Stappen:

  1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
  2. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
  3. Open het bestand dat je wilt bewerken.
  4. Maak een nieuwe regel onder in het bestand aan en voeg de volgende code toe: 
{%- 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. Klik op Opslaan.

Javascript-code voor volumeprijsstelling toevoegen

Je kunt code toevoegen aan het volgende bestand in het thema om een volumeprijsstelling weer te geven:

  • theme.js

Stappen:

  1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
  2. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
  3. Open het bestand theme.js.
  4. Maak een nieuwe regel onder in het bestand aan en voeg de volgende code toe: 
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. Klik op Opslaan.

Landinstellingen toevoegen

Als je de hoeveelheidsregels en volumeprijsstelling in alle vertaalde versies van je webshop wilt weergeven, kun je landinstellingen toevoegen door JSON-vertaalreeksen aan het bestand en.default.json toe te voegen.

Stappen:

  1. Ga in het Shopify-beheercentrum naar webshop > Thema's.
  2. Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
  3. Open het bestand en.default.json.
  4. Maak een nieuwe regel onder in het bestand aan en voeg de volgende code toe: 
"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}
  1. Klik op Opslaan.

Klaar om te beginnen met verkopen met Shopify?

Probeer het gratis