로그인
문의하기

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

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

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

이 페이지의 정보

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

테마 코드에 수량 규칙과 수량별 가격을 추가하기 전에 다음 고려 사항을 검토하세요.

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

제품 카트 수량

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

Liquid 제품 카트 수량 코드 추가

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

  • main-product.liquid나 그와 동일한 파일
  • featured-product.liquid나 그와 동일한 파일

단계:

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

  3. 편집할 파일을 엽니다.

  4. 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다.

{% 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>
  1. 저장을 클릭합니다.

Javascript 카트 수량 코드 추가

이형 상품의 카트 수량이 변경되면 제품 페이지나 추천 제품 섹션에 표시되는 값을 업데이트해야 합니다. Javascript 코드를 사용하여 업데이트된 값을 가져올 수 있습니다.

theme.js 파일이나 그와 동일한 파일에 코드를 추가할 수 있습니다.

단계:

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

  3. theme.js 파일을 엽니다.

  4. 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다.

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;
  });
  1. 저장을 클릭합니다.

수량 규칙

제품 페이지나 추천 제품 섹션에 제품 이형의 수량 규칙을 표시할 수 있습니다. Liquid를 사용하여 규칙을 가져올 수 있습니다.

Liquid 수량 규칙 코드 추가

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

  • main-product.liquid나 그와 동일한 파일
  • featured-product.liquid나 그와 동일한 파일

단계:

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

  3. 편집할 파일을 엽니다.

  4. 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다.

{% 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>
  1. 저장을 클릭합니다.

Javascript 수량 규칙 코드 추가

제품의 각 이형 상품은 자체 수량 규칙 집합을 포함할 수 있습니다. 서로 다른 이형 상품을 선택하면 제품 페이지나 추천 제품 섹션에 표시되는 수량 규칙을 업데이트해야 합니다. Javascript 코드를 사용하여 업데이트된 값을 가져올 수 있습니다.

  • theme.js이나 그와 동일한 파일
  • en.default.json

단계:

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

  3. theme.js 파일을 엽니다.

  4. 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다.

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;
  });
  1. 저장을 클릭합니다.

볼륨 가격 책정

Liquid 볼륨 가격 책정 코드 추가

테마의 다음 파일에 코드를 추가하여 볼륨 가격 책정을 표시할 수 있습니다.

  • main-product.liquid나 그와 동일한 파일
  • featured-product.liquid나 그와 동일한 파일

단계:

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

  3. 편집할 파일을 엽니다.

  4. 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다.

{%- 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 -%}
  1. 저장을 클릭합니다.

Javascript 볼륨 가격 책정 코드 추가

테마에서 다음 파일에 코드를 추가하여 볼륨 가격 책정을 표시할 수 있습니다.

  • theme.js

단계:

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

  3. theme.js 파일을 엽니다.

  4. 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다.

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');
        }
      }
    },
  );
}
  1. 저장을 클릭합니다.

로케일 추가

온라인 스토어의 번역된 모든 버전에 수량 규칙 및 볼륨 가격 책정이 표시되도록 en.default.json 파일에 다음 JSON 번역 문자열을 추가하여 로케일을 추가할 수 있습니다.

단계:

  1. Shopify Admin에서 온라인 스토어 > 테마로 이동합니다.

  2. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

  3. en.default.json 파일을 엽니다.

  4. 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다.

"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}
  1. 저장을 클릭합니다.
적절한 답변을 찾을 수 없습니까? 언제든지 도와드리겠습니다.