Wyświetlanie reguł ilości i cen zależnych od wolumenu w sklepie
Możesz wyświetlać reguły ilości oraz ceny zależne od ilości w katalogu B2B w swoim sklepie, uaktualniając szablon sklepu do najnowszej wersji.
Jeśli nie chcesz zmienić ani zaktualizować swojego szablonu, możesz dodać do swojego szablonu poniższy kod, aby wyświetlić reguły ilości i ceny zależne od wolumenu.
Na tej stronie
Informacje dotyczące dodawania reguł ilości i cen zależnych od ilości do kodu szablonu
Przed dodaniem reguł ilości i cen zależnych od ilości do kodu szablonu zapoznaj się z poniższymi informacjami:
- To jest zaawansowany tutorial. Jeśli nie masz doświadczenia w odczytywaniu i edycji kodu szablonu, możesz skorzystać ze wsparcia programisty lub zatrudnić partnera Shopify.
- Przed aktualizacją plików szablonu koniecznie zduplikuj swój szablon, aby utworzyć kopię zapasową.
- Reguły ilości dla katalogu B2B są obsługiwane tylko w przypadku darmowych szablonów Shopify w wersji 8.0.0 lub nowszej. Ceny zależne od wolumenu są obsługiwane w wersji 11.0.0 lub nowszej.
Ilość produktów w koszyku
Wartość ilości w koszyku wariantu produktu może zostać wyświetlona na stronie produktu lub w sekcji Polecany produkt. Wartość można pobrać za pomocą Liquid.
Dodawanie kodu Liquid ilości produktów w koszyku
Możesz dodać kod do poniższych plików w szablonie w celu zapewnienia obsługi ilości w koszyku:
main-product.liquid
lub odpowiednikfeatured-product.liquid
lub odpowiednik
Kroki:
W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
Znajdź szablon, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij opcję Edytuj kod.
Otwórz plik, który chcesz edytować.
Utwórz nową linię w dolnej części pliku, a następnie dodaj następujący kod:
{% 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>
- Kliknij opcję Zapisz.
Dodaj kod Javascript ilości w koszyku
W przypadku zmiany ilości w koszyku dla wariantu wartość wyświetlona na stronie produktu lub w sekcji Polecany produkt musi zostać zaktualizowana. Zaktualizowaną wartość można pobrać za pomocą kodu Javascript.
Możesz dodać kod do pliku theme.js
lub jego odpowiednik.
Kroki:
W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
Znajdź szablon, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij opcję Edytuj kod.
Otwórz plik
theme.js
.Utwórz nową linię w dolnej części pliku, a następnie dodaj następujący kod:
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;
});
- Kliknij opcję Zapisz.
Reguły ilości
Reguły ilości wariantu produktu mogą być wyświetlane na stronie produktu lub w sekcji Polecany produkt. Reguły można pobrać za pomocą kodu Liquid.
Dodaj kod Liquid reguł ilości
Możesz dodać kod do poniższych plików w szablonie w celu zapewnienia obsługi reguł dotyczących ilości:
main-product.liquid
lub odpowiednikfeatured-product.liquid
lub odpowiednik
Kroki:
W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
Znajdź szablon, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij opcję Edytuj kod.
Otwórz plik, który chcesz edytować.
Utwórz nową linię na dole pliku, a następnie dodaj następujący kod:
{% 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>
- Kliknij opcję Zapisz.
Dodaj kod reguł ilości Javascript
Każdy wariant produktu może mieć własny zbiór reguł ilości. Po wybraniu innego wariantu należy zaktualizować reguły ilości wyświetlane na stronie produktu lub w sekcji Polecany produkt. Zaktualizowaną wartość można pobrać za pomocą kodu Javascript.
theme.js
lub odpowiedniken.default.json
Kroki:
W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
Znajdź szablon, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij opcję Edytuj kod.
Otwórz plik
theme.js
.Utwórz nową linię na dole pliku, a następnie dodaj następujący kod:
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;
});
- Kliknij opcję Zapisz.
Ceny zależne od wolumenu
Dodawanie kodu cen zależnych od wolumenu Liquid
Możesz dodać kod do poniższych plików w szablonie w celu wyświetlenia cen zależnych od wolumenu:
main-product.liquid
lub odpowiednikfeatured-product.liquid
lub odpowiednik
Kroki:
W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
Znajdź szablon, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij opcję Edytuj kod.
Otwórz plik, który chcesz edytować.
Utwórz nową linię na dole pliku, a następnie dodaj następujący kod:
{%- 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 -%}
- Kliknij opcję Zapisz.
Dodawanie kodu cen zależnych od wolumenu Javascript
Możesz dodać kod do poniższego pliku w szablonie w celu wyświetlenia cen zależnych od wolumenu:
theme.js
Kroki:
W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
Znajdź szablon, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij opcję Edytuj kod.
Otwórz plik
theme.js
.Utwórz nową linię na dole pliku, a następnie dodaj następujący kod:
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');
}
}
},
);
}
- Kliknij opcję Zapisz.
Dodawanie ustawień regionalnych
Aby zapewnić wyświetlanie reguł dotyczących ilości i cen zależnych od wolumenu we wszystkich przetłumaczonych wersjach sklepu online, możesz dodać ustawienia regionalne, dodając do pliku następujące ciągi znaków tłumaczenia JSON do pliku en.default.json
.
Kroki:
W panelu administracyjnym Shopify przejdź do opcji: Sklep online > Szablony.
Znajdź szablon, który chcesz edytować, kliknij przycisk ..., aby otworzyć menu czynności, a następnie kliknij opcję Edytuj kod.
Otwórz plik
en.default.json
.Utwórz nową linię na dole pliku, a następnie dodaj następujący kod:
"products": {
"product": {
"volume_pricing": {
"title": "Volume Pricing",
"note": "Volume pricing available",
"price_at_each": "at /ea"
}
"facets": {
"show_more": "Show more"
}
}
}
- Kliknij opcję Zapisz.