Visning af mængderegler og mængdebaserede priser i din butik
Du kan vise mængderegler og mængdebaserede priser for dit B2B-katalog i din butik ved at opdatere din butiks tema til den seneste version.
Hvis du ikke vil ændre eller opdatere dit tema, kan du føje følgende kode til dit tema for at vise mængderegler og mængdebaserede priser.
På denne side
Overvejelser i forbindelse med at tilføje mængderegler og mængdebaserede priser til din temakode
Før du føjer mængderegler og mængdebaserede priser til din temakode, bør du overveje følgende:
- Dette er en avanceret vejledning. Hvis du ikke er tryg ved at læse og redigere temakode, kan du samarbejde med en udvikler eller ansætte en Shopify-partner.
- Inden du foretager ændringer af dine temafiler, skal du sørge for at duplikere dit tema for at oprette en sikkerhedskopi.
- Du kan kun angive mængderegler for B2B-kataloger, hvis du anvender gratis Shopify-temaer, version 8.0.0 eller nyere. Mængdebaserede priser er understøttet i version 11.0.0 eller nyere.
Produktets kurvantal
Værdien for en produktvariants kurvantal kan vises på produktsiden eller i afsnittet med udvalgte produkter. Værdien kan hentes ved hjælp af Liquid.
Tilføj Liquid-kode for produktets kurvantal
Du kan føje kode til følgende filer i dit tema for at understøtte kurvantal:
main-product.liquid
eller tilsvarendefeatured-product.liquid
eller tilsvarende
Trin:
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
Åbn den fil, du vil redigere.
Opret en ny linje i bunden af filen, og tilføj derefter følgende kode:
{% 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 på Gem.
Tilføj Javascript-kode for kurvantal
Når en variants kurvantal ændrer sig, skal den værdi, der vises på produktsiden eller i afsnittet med udvalgte produkter, opdateres. Du kan hente den opdaterede værdi ved hjælp af Javascript-kode.
Du kan føje kode til theme.js
-filen eller tilsvarende.
Trin:
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
Åbn
theme.js
-filen.Opret en ny linje i bunden af filen, og tilføj derefter følgende kode:
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 på Gem.
Mængderegler
En produktvariants mængderegler kan vises på produktsiden eller i afsnittet med udvalgte produkter. Reglerne kan hentes ved hjælp af Liquid.
Tilføj Liquid-kode for mængderegler
Du kan føje kode til følgende filer i dit tema for at understøtte mængderegler:
main-product.liquid
eller tilsvarendefeatured-product.liquid
eller tilsvarende
Trin:
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
Åbn den fil, du vil redigere.
Opret en ny linje i bunden af filen, og tilføj derefter følgende kode:
{% 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 på Gem.
Tilføj Javascript-kode for mængderegler
Hver variant for et produkt kan have sine egne mængderegler. Når du har valgt en anden variant, skal de mængderegler, der vises på produktsiden eller i afsnittet med udvalgte produkter, opdateres. Du kan hente den opdaterede værdi ved hjælp af Javascript-kode.
theme.js
eller tilsvarendeen.default.json
Trin:
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
Åbn
theme.js
-filen.Opret en ny linje i bunden af filen, og tilføj derefter følgende kode:
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 på Gem.
Mængdebaserede priser
Tilføj Liquid-kode for mængdebaserede priser
Du kan føje kode til følgende filer i dit team for at vise mængdebaserede priser:
main-product.liquid
eller tilsvarendefeatured-product.liquid
eller tilsvarende
Trin:
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
Åbn den fil, du vil redigere.
Opret en ny linje i bunden af filen, og tilføj derefter følgende kode:
{%- 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 på Gem.
Tilføj Javascript-kode for mængdebaserede priser
Du kan føje kode til følgende fil i dit tema for at vise mængdebaserede priser:
theme.js
Trin:
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
Åbn
theme.js
-filen.Opret en ny linje i bunden af filen, og tilføj derefter følgende kode:
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 på Gem.
Tilføj landestandarder
For at sikre, at mængderegler og mængdebaserede priser vises i alle oversatte versioner af din webshop, kan du tilføje landestandarder ved at føje følgende JSON-oversættelsesstrenge til din en.default.json
-fil.
Trin:
Gå til Webshop > Temaer i din Shopify-administrator.
Find det tema, du vil redigere, klik på knappen ... for at åbne handlingsmenuen, og klik derefter på Rediger kode.
Åbn
en.default.json
-filen.Opret en ny linje i bunden af filen, og tilføj derefter følgende kode:
"products": {
"product": {
"volume_pricing": {
"title": "Volume Pricing",
"note": "Volume pricing available",
"price_at_each": "at /ea"
}
"facets": {
"show_more": "Show more"
}
}
}
- Klik på Gem.