Shopify 테마에 수량 규칙 추가

이 페이지는 Jun 05, 2023에 인쇄되었습니다. 최신 버전은 https://help.shopify.com/ko/manual/b2b/catalogs/code에서 확인하십시오.

B2B 카탈로그의 수량 규칙은 버전 8.0.0 이상의 무료 Shopify 테마에서만 지원됩니다. 테마를 변경하거나 업데이트하지 않으려면 테마에 다음 코드를 추가하여 수량 규칙을 표시할 수 있습니다.

이 페이지의 정보

제품 카트 수량

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

Liquid 제품 카트 수량 코드 추가

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

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

단계:

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

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

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

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

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

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

  1. 편집할 파일을 엽니다.
  2. 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다. 
{% 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 }}">
    {%- assign cart_qty = cart | item_count_for_variant: product.selected_or_first_available_variant.id -%}
    {{- 'products.product.quantity.in_cart' | t: quantity: cart_qty -}}
</span>
  1. 저장을 클릭합니다.

Javascript 카트 수량 코드 추가

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

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

단계:

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

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

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

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

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

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

  1. theme.js 파일을 엽니다.
  2. 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다. 
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. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

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

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

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

  1. 편집할 파일을 엽니다.
  2. 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다. 
{% 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. 편집할 테마를 찾아 ... 버튼을 클릭하여 작업 메뉴를 연 다음 코드 편집을 클릭합니다.

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

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

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

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

  1. theme.js 파일을 엽니다.
  2. 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다. 
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. 저장을 클릭합니다.

로케일 추가

JSON 번역 문자열 추가

단계:

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

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

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

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

  1. Shopify 앱에서 스토어를 탭합니다.

  2. 판매 채널 섹션에서 온라인 스토어를 탭합니다.

  3. 테마 관리를 탭합니다.

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

  1. en.default.json 파일을 엽니다.
  2. 파일 맨 아래에 새 줄을 만들고 다음 코드를 추가합니다. 
{
   "products":{
      "quantity":{
         "minimum_of":"Minimum of ",
         "maximum_of":"Maximum of ",
         "multiples_of":"Increments of ",
         "in_cart": " in cart"
      }
   }
}
  1. 저장을 클릭합니다.

Shopify와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험