Viser antallsregler og volumbasert prising i butikken
Du kan vise antallsregler og volumbasert prising for B2B-katalogen i butikken din ved å oppdatere butikkens tema til den nyeste versjonen.
Hvis du ikke vil endre eller oppdatere temaet ditt, kan du legge til følgende kode i temaet for å vise antallsregler og volumbasert prising.
På denne siden
Hensyn å ta når du legger til antallsregler og volumbasert prising i temakoden din
Før du legger til antallsregler og volumbasert prising i temakoden din, bør du vurdere følgende hensyn:
- Dette er en avansert veiledning. Hvis du ikke er komfortabel med å lese og redigere temakode, kan du jobbe med en utvikler eller leie inn en Shopify-partner.
- Før du gjør oppdateringer i temafiler, må du sikre at du dupliserer temaet for å opprette en sikkerhetskopi.
- Antallsregler for B2B-kataloger støttes bare i gratis Shopify-temaer med versjon 8.0.0 og nyere. Volumbasert prising støttes i versjon 11.0.0. og nyere.
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 tilsvarendefeatured-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 tilsvarendefeatured-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 tilsvarendeen.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 tilsvarendefeatured-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.