스토어에 수량 규칙 및 수량 가격 책정 표시
B2B 카탈로그의 수량 규칙은 버전 8.0.0 이상의 무료 Shopify 테마에서 지원되고 볼륨 가격 책정은 버전 11.0.0 이상에서 지원됩니다. 스토어에 수량 규칙 및 볼륨 가격 책정을 표시하려는 경우 최신 버전으로 스토어 테마를 업데이트할 수 있습니다.
테마를 변경하거나 업데이트하지 않으려면 테마에 다음 코드를 추가하여 수량 규칙 및 볼륨 가격 책정을 표시할 수 있습니다. 테마 파일에 업데이트하기 전에 백업 복사본을 생성하려면 테마를 복제해야 합니다.
제품 카트 수량
제품 페이지나 추천 제품 섹션에 제품 이형의 카트 수량 값을 표시할 수 있습니다. Liquid를 사용하여 값을 가져올 수 있습니다.
Liquid 제품 카트 수량 코드 추가
테마의 다음 파일에 코드를 추가하여 카트 수량을 지원할 수 있습니다.
-
main-product.liquid
나 그와 동일한 파일 -
featured-product.liquid
나 그와 동일한 파일
단계:
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
- 편집할 파일을 엽니다.
- 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다.
{% 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>
- 저장을 클릭합니다.
Javascript 카트 수량 코드 추가
이형 상품의 카트 수량이 변경되면 제품 페이지나 추천 제품 섹션에 표시되는 값을 업데이트해야 합니다. Javascript 코드를 사용하여 업데이트된 값을 가져올 수 있습니다.
theme.js
파일이나 그와 동일한 파일에 코드를 추가할 수 있습니다.
단계:
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
theme.js
파일을 엽니다. - 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다.
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;
});
- 저장을 클릭합니다.
수량 규칙
제품 페이지나 추천 제품 섹션에 제품 이형의 수량 규칙을 표시할 수 있습니다. Liquid를 사용하여 규칙을 가져올 수 있습니다.
Liquid 수량 규칙 코드 추가
테마의 다음 파일에 코드를 추가하여 카트 수량 규칙을 지원할 수 있습니다.
-
main-product.liquid
나 그와 동일한 파일 -
featured-product.liquid
나 그와 동일한 파일
단계:
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
- 편집할 파일을 엽니다.
- 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다.
{% 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>
- 저장을 클릭합니다.
Javascript 수량 규칙 코드 추가
제품의 각 이형 상품은 자체 수량 규칙 집합을 포함할 수 있습니다. 서로 다른 이형 상품을 선택하면 제품 페이지나 추천 제품 섹션에 표시되는 수량 규칙을 업데이트해야 합니다. Javascript 코드를 사용하여 업데이트된 값을 가져올 수 있습니다.
-
theme.js
이나 그와 동일한 파일 -
en.default.json
단계:
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
theme.js
파일을 엽니다. - 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다.
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;
});
- 저장을 클릭합니다.
볼륨 가격 책정
Liquid 볼륨 가격 책정 코드 추가
테마의 다음 파일에 코드를 추가하여 볼륨 가격 책정을 표시할 수 있습니다.
-
main-product.liquid
나 그와 동일한 파일 -
featured-product.liquid
나 그와 동일한 파일
단계:
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
- 편집할 파일을 엽니다.
- 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다.
{%- 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 -%}
- 저장을 클릭합니다.
Javascript 볼륨 가격 책정 코드 추가
테마에서 다음 파일에 코드를 추가하여 볼륨 가격 책정을 표시할 수 있습니다.
-
theme.js
단계:
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
theme.js
파일을 엽니다. - 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다.
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');
}
}
},
);
}
- 저장을 클릭합니다.
로케일 추가
온라인 스토어의 번역된 모든 버전에 수량 규칙 및 볼륨 가격 책정이 표시되도록 en.default.json
파일에 다음 JSON 번역 문자열을 추가하여 로케일을 추가할 수 있습니다.
단계:
- Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.
- 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
-
en.default.json
파일을 엽니다. - 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다.
"products": {
"product": {
"volume_pricing": {
"title": "Volume Pricing",
"note": "Volume pricing available",
"price_at_each": "at /ea"
}
"facets": {
"show_more": "Show more"
}
}
}
- 저장을 클릭합니다.