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:
Ga in het Shopify-beheercentrum naar webshop > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Open het bestand dat je wilt bewerken.
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>
- 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:
Ga in het Shopify-beheercentrum naar webshop > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Open het bestand
theme.js
.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;
});
- 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:
Ga in het Shopify-beheercentrum naar webshop > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Open het bestand dat je wilt bewerken.
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>
-
{{- '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>
-
{{- 'products.product.quantity.maximum_of' | t: quantity: product.selected_or_first_available_variant.quantity_rule.max -}}
</span>
{%- endif -%}
</div>
- 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 daarvanen.default.json
Stappen:
Ga in het Shopify-beheercentrum naar webshop > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Open het bestand
theme.js
.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;
});
- 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:
Ga in het Shopify-beheercentrum naar webshop > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Open het bestand dat je wilt bewerken.
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 -%}
- 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:
Ga in het Shopify-beheercentrum naar webshop > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Open het bestand
theme.js
.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');
}
}
},
);
}
- 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:
Ga in het Shopify-beheercentrum naar webshop > Thema's.
Zoek het thema dat je wilt bewerken, klik op de knop ... om het actiemenu te openen en klik vervolgens op Code bewerken.
Open het bestand
en.default.json
.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"
}
}
}
- Klik op Opslaan.