Inloggen
Neem contact op

Hoeveelheidsregels en volumeprijsstelling in je winkel weergeven

Je kunt hoeveelheidsregels en volumeprijzen voor je B2B-catalogus weergeven in je winkel door het thema van je winkel bij te werken naar de nieuwste versie.

Als je het thema niet wil wijzigen of bijwerken, kun je er de volgende code aan toevoegen om hoeveelheidsregels en volumeprijsstelling weer te geven.

Op deze pagina

Overwegingen voor het toevoegen van hoeveelheidsregels en op volume gebaseerde prijsstelling aan je themacode

Bekijk de volgende overwegingen voordat je hoeveelheidsregels en op volume gebaseerde prijsstelling toevoegt aan de code van je thema:

  • Dit is een geavanceerde tutorial. Als je niet vertrouwd bent met het lezen en bewerken van themacodes, kun je samenwerken met een ontwikkelaar of een Shopify-partner inhuren.
  • Dupliceer het thema om een back-upkopie te maken voordat je updates uitvoert aan themabestanden.
  • Hoeveelheidsregels voor B2B-assortimenten worden ondersteund bij gratis Shopify-thema's, versie 8.0.0 of hoger. Volumeprijsstelling wordt ondersteund op versie 11.0.0 of hoger.

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.
Zat het antwoord dat je zocht er niet bij? Wij helpen je graag verder.