Help
Inloggen

Aantalregels en op volume gebaseerde prijsstelling weergeven in je winkel

Je kunt aantalregels en op volume gebaseerde prijsstelling voor je B2B-catalogus in je winkel weergeven door het thema van je winkel te updaten naar de nieuwste versie.

Als je je thema niet wilt wijzigen of updaten, kun je de volgende code aan je thema toevoegen om aantalregels en op volume gebaseerde prijsstelling weer te geven.

Op deze pagina

Aandachtspunten voor het toevoegen van aantalregels en op volume gebaseerde prijsstelling aan je themacode

Neem de volgende aandachtspunten door voordat je aantalregels en op volume gebaseerde prijsstelling aan je themacode toevoegt:

  • Dit is een geavanceerde tutorial. Als je niet vertrouwd bent met het lezen en bewerken van themacode, kun je samenwerken met een ontwikkelaar of een Shopify Partner inhuren.
  • Voordat je je themabestanden bijwerkt, moet je je thema dupliceren om een back-up te maken.
  • Aantalregels voor B2B-catalogi worden ondersteund in gratis Shopify-thema's (versie 8.0.0 of hoger). Op volume gebaseerde prijsstelling wordt ondersteund in versie 11.0.0 of hoger.

Productaantal in winkelwagen

Het aantal van een productvariant in de winkelwagen kan worden weergegeven op de productpagina of in de sectie met uitgelichte producten. De waarde kan worden opgehaald met Liquid.

Liquid-code voor productaantal in winkelwagen toevoegen

Je kunt code toevoegen aan de volgende bestanden in je thema om het aantal in de winkelwagen te ondersteunen:

  • main-product.liquid of een gelijkwaardig bestand
  • featured-product.liquid of een gelijkwaardig bestand

Stappen:

  1. Ga vanuit 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 aan onderaan 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 productaantal in winkelwagen toevoegen

Wanneer het aantal van een variant in de winkelwagen verandert, moet de waarde die wordt weergegeven op de productpagina of in de sectie met uitgelichte producten, worden bijgewerkt. De bijgewerkte waarde kan worden opgehaald met Javascript-code.

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

Stappen:

  1. Ga vanuit 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 aan onderaan 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.

Aantalregels

De aantalregels van een productvariant kunnen worden weergegeven op de productpagina of in de sectie met uitgelichte producten. De regels kunnen worden opgehaald met Liquid.

Liquid-code voor aantalregels toevoegen

Je kunt code toevoegen aan de volgende bestanden in je thema om aantalregels te ondersteunen:

  • main-product.liquid of een gelijkwaardig bestand
  • featured-product.liquid of een gelijkwaardig bestand

Stappen:

  1. Ga vanuit 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 aan onderaan het bestand en voeg daarna 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 aantalregels toevoegen

Elke productvariant kan zijn eigen aantalregels hebben. Nadat een andere variant is geselecteerd, moeten de aantalregels die worden weergegeven op een productpagina of in de sectie met uitgelichte producten, worden bijgewerkt. De bijgewerkte waarde kan worden opgehaald met Javascript-code.

  • theme.js of een gelijkwaardig bestand
  • en.default.json

Stappen:

  1. Ga vanuit 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 aan onderaan het bestand en voeg daarna 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.

Op volume gebaseerde prijsstelling

Liquid-code voor op volume gebaseerde prijsstelling toevoegen

Je kunt code toevoegen aan de volgende bestanden in je thema om op volume gebaseerde prijsstelling weer te geven:

  • main-product.liquid of een gelijkwaardig bestand
  • featured-product.liquid of een gelijkwaardig bestand

Stappen:

  1. Ga vanuit 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 aan onderaan het bestand en voeg daarna 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 op volume gebaseerde prijsstelling toevoegen

Je kunt code toevoegen aan het volgende bestand in je thema om op volume gebaseerde prijsstelling weer te geven:

  • theme.js

Stappen:

  1. Ga vanuit 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 aan onderaan het bestand en voeg daarna 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

Om ervoor te zorgen dat aantalregels en op volume gebaseerde prijsstelling worden weergegeven in alle vertaalde versies van je webshop, kun je landinstellingen toevoegen door de volgende JSON-vertaaltekenreeksen toe te voegen aan je bestand en.default.json.

Stappen:

  1. Ga vanuit 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 aan onderaan het bestand en voeg daarna 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.