Vis antallsregler og volumprissetting i butikken
Antallsregler for B2B-kataloger støttes i gratis Shopify-temaer, versjon 8.0.0 eller nyere, og volumprissetting støttes i versjon 11.0.0 eller nyere. Hvis du ønsker å vise antallsregler og volumprissetting i butikken kan du oppdatere butikkens tema til den nyeste versjonen.
Hvis du ikke vil endre eller oppdatere tema, kan du legge til følgende kode i temaet for å vise antallsregler og volumprissetting. Før du gjør oppdateringer i temafiler, må du sikre at du dupliserer temaet for å opprette en sikkerhetskopi.
På denne siden
Antall produkter i handlekurven
Antallsverdien for en produktvariant i handlekurven kan vises på produktsiden eller i en seksjon for fremhevede produkter. Verdien kan hentes med Liquid.
Legg til Liquid-kode for antall produkter i handlekurven
Du kan legge til kode i følgende filer i temaet for å støtte handlekurvantall:
-
main-product.liquid
eller tilsvarende -
featured-product.liquid
eller tilsvarende
Trinn:
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
- Åpne filen du vil redigere.
- Opprett en ny linje nederst i filen, og legg til 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>
- Klikk på Lagre.
Legg til Javascript-kode for antall i handlekurven
Når handlekurvantallet for en variant endres må verdien som vises på produktsiden eller den fremhevede produktseksjonen oppdateres. Den oppdaterte verdien kan hentes ved hjelp av Javascript-kode.
Du kan legge til kode i theme.js
-filen eller tilsvarende.
Trinn:
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
- Åpne filen
theme.js
. - Opprett en ny linje nederst i filen, og legg til 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;
});
- Klikk på Lagre.
Antallsregler
Antallsregler for en produktvariant kan vises på produktsiden eller den fremhevede produktseksjonen. Reglene kan hentes ved hjelp av Liquid.
Legg til Liquid-kode for antallsregler
Du kan legge til kode i følgende filer i temaet for å støtte antallsregler:
-
main-product.liquid
eller tilsvarende -
featured-product.liquid
eller tilsvarende
Trinn:
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
- Åpne filen du vil redigere.
- Opprett en ny linje nederst i filen, og legg til 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>
- Klikk på Lagre.
Legg til Javascript-kode for antallsregler
Hver variant av et produkt kan ha sitt eget sett med antallsregler. Når en annen variant velges må antallsreglene som vises på en produktside eller en fremhevet produktseksjon oppdateres. Den oppdaterte verdien kan hentes med Javascript-kode.
-
theme.js
eller tilsvarende -
en.default.json
Trinn:
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
- Åpne filen
theme.js
. - Opprett en ny linje nederst i filen, og legg til 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;
});
- Klikk på Lagre.
Volumprising
Legg til Liquid-kode for volumprissetting
Du kan legge til kode i følgende filer i temaet for å vise volumprissetting:
-
main-product.liquid
eller tilsvarende -
featured-product.liquid
eller tilsvarende
Trinn:
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
- Åpne filen du vil redigere.
- Opprett en ny linje nederst i filen, og legg til 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 -%}
- Klikk på Lagre.
Legg til Javascript-kode for volumprissetting
Du kan legge til kode i følgende fil i temaet for å vise volumprissetting:
-
theme.js
Trinn:
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
- Åpne filen
theme.js
. - Opprett en ny linje nederst i filen, og legg til 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');
}
}
},
);
}
- Klikk på Lagre.
Legg til nasjonale innstillinger
For å sikre at antallsregler og volumprissetting vises for alle oversatte versjoner av nettbutikken kan du legge til lokale innstillinger ved å legge til følgende JSON-oversettelsesstrenger i filen en.default.json
.
Trinn:
- Fra Shopify-administrator går du til Nettbutikk > Temaer.
- Finn temaet du vil redigere, klikk på …-knappen for å åpne handlingsmenyen og klikk på Rediger kode.
- Åpne filen
en.default.json
. - Opprett en ny linje nederst i filen, og legg til følgende kode:
"products": {
"product": {
"volume_pricing": {
"title": "Volume Pricing",
"note": "Volume pricing available",
"price_at_each": "at /ea"
}
"facets": {
"show_more": "Show more"
}
}
}
- Klikk på Lagre.