스토어에 수량 규칙 및 수량별 가격 표시하기

스토어 테마를 최신 버전으로 업데이트하여 스토어의 B2B 카탈로그에 대한 수량 규칙 및 수량별 가격을 표시할 수 있습니다.

테마를 변경하거나 업데이트하지 않으려면 다음 코드를 테마에 추가하여 수량 규칙 및 수량별 가격을 표시할 수 있습니다.

이 페이지의 내용

테마 코드에 수량 규칙 및 수량별 가격을 추가할 때 고려 사항

테마 코드에 수량 규칙 및 수량별 가격을 추가하기 전에 다음 고려 사항을 검토하십시오.

이 튜토리얼은 고급 과정입니다. 테마 코드를 읽고 편집하는 것이 익숙하지 않은 경우 개발자와 협력하거나 Shopify 파트너를 고용할 수 있습니다.
테마 파일을 업데이트하기 전에 테마를 복제하여 백업 사본을 생성하십시오.
B2B 카탈로그의 수량 규칙은 버전 8.0.0 이상의 무료 Shopify 테마에서 지원됩니다. 수량별 가격은 버전 11.0.0 이상에서 지원됩니다.

제품 카트 수량

제품 이형 상품의 카트 수량 값은 제품 페이지 또는 추천 제품 섹션에 표시될 수 있습니다. Liquid를 사용하여 값을 가져올 수 있습니다.

Liquid 제품 카트 수량 코드 추가

카트 수량을 지원하려면 테마의 다음 파일에 코드를 추가할 수 있습니다.

main-product.liquid 또는 이에 상응하는 파일
featured-product.liquid 또는 이에 상응하는 파일

단계:

Shopify 관리자에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
편집하려는 파일을 엽니다.
파일 하단에 새 줄을 만든 다음 다음 코드를 추가합니다.

{% 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 관리자에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
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 관리자에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
편집하려는 파일을 엽니다.
파일 하단에 새 줄을 만든 다음 다음 코드를 추가합니다.

{% 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>
		&nbsp;-&nbsp;
		{{- '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>
		&nbsp;-&nbsp;
		{{- '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 관리자에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
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 관리자에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
편집하려는 파일을 엽니다.
파일 하단에 새 줄을 만든 다음 다음 코드를 추가합니다.

{%- 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 관리자에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
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 관리자에서 온라인 스토어 > 테마로 이동합니다.
편집하려는 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.
en.default.json 파일을 엽니다.
파일 하단에 새 줄을 만든 다음 다음 코드를 추가합니다.

"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}

저장을 클릭합니다.