การแสดงกฎเกี่ยวกับจำนวนและการกำหนดราคาตามปริมาณในร้านค้าของคุณ

คุณสามารถแสดงกฎเกี่ยวกับจำนวนและการกำหนดราคาตามปริมาณสำหรับแค็ตตาล็อก B2B ในร้านค้าของคุณได้โดยการอัปเดตธีมของร้านค้าเป็นเวอร์ชันล่าสุด

หากคุณไม่ต้องการเปลี่ยนหรืออัปเดตธีม คุณสามารถเพิ่มโค้ดต่อไปนี้ไปยังธีมของคุณเพื่อแสดงกฎเกี่ยวกับจำนวนและการกำหนดราคาตามปริมาณได้

ข้อควรพิจารณาในการเพิ่มกฎเกี่ยวกับจำนวนและการกำหนดราคาตามปริมาณไปยังโค้ดธีมของคุณ

ก่อนที่คุณจะเพิ่มกฎเกี่ยวกับจำนวนและการกำหนดราคาตามปริมาณไปยังโค้ดธีมของคุณ โปรดตรวจสอบข้อควรพิจารณาต่อไปนี้

• นี่คือบทแนะนำการใช้งานขั้นสูง หากคุณไม่ถนัดในการอ่านและแก้ไขโค้ดธีม คุณสามารถทำงานร่วมกับนักพัฒนาหรือจ้าง Shopify Partner ได้
• ก่อนที่คุณจะอัปเดตไฟล์ธีม โปรดตรวจสอบให้แน่ใจว่าคุณได้ทำสำเนาธีมของคุณเพื่อสร้างข้อมูลสำรอง
• กฎเกี่ยวกับจำนวนสำหรับแค็ตตาล็อก B2B รองรับบนธีม Shopify ฟรีเวอร์ชัน 8.0.0 หรือใหม่กว่า ส่วนการกำหนดราคาตามปริมาณรองรับบนเวอร์ชัน 11.0.0 หรือใหม่กว่า

จำนวนสินค้าในตะกร้าสินค้า

สามารถแสดงค่าจำนวนตัวเลือกสินค้าในตะกร้าสินค้าได้ที่หน้าสินค้าหรือส่วนสินค้าแนะนำ โดยสามารถดึงค่าดังกล่าวได้โดยใช้ Liquid

เพิ่มโค้ด Liquid สำหรับจำนวนสินค้าในตะกร้า

คุณสามารถเพิ่มโค้ดไปยังไฟล์ต่อไปนี้ในธีมของคุณเพื่อรองรับจำนวนสินค้าในตะกร้า

• main-product.liquid หรือไฟล์ที่เทียบเท่า
• featured-product.liquid หรือไฟล์ที่เทียบเท่า

ขั้นตอน:

1. จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม

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>

5. คลิกบันทึก

เพิ่มโค้ด Javascript สำหรับจำนวนสินค้าในตะกร้า

เมื่อจำนวนตัวเลือกสินค้าในตะกร้าสินค้าเปลี่ยนไป จะต้องอัปเดตค่าที่แสดงบนหน้าสินค้าหรือส่วนสินค้าแนะนำ ซึ่งสามารถดึงค่าที่อัปเดตแล้วได้โดยใช้โค้ด Javascript

คุณสามารถเพิ่มโค้ดไปยังไฟล์ theme.js หรือไฟล์ที่เทียบเท่าได้

ขั้นตอน:

1. จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม

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;
  });

5. คลิกบันทึก

กฎเกี่ยวกับจำนวน

สามารถแสดงกฎเกี่ยวกับจำนวนของตัวเลือกสินค้าได้ที่หน้าสินค้าหรือส่วนสินค้าแนะนำ โดยสามารถดึงกฎดังกล่าวได้โดยใช้ Liquid

เพิ่มโค้ด Liquid สำหรับกฎเกี่ยวกับจำนวน

คุณสามารถเพิ่มโค้ดไปยังไฟล์ต่อไปนี้ในธีมของคุณเพื่อรองรับกฎเกี่ยวกับจำนวน

• main-product.liquid หรือไฟล์ที่เทียบเท่า
• featured-product.liquid หรือไฟล์ที่เทียบเท่า

ขั้นตอน:

1. จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม

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>

5. คลิกบันทึก

เพิ่มโค้ด Javascript สำหรับกฎเกี่ยวกับจำนวน

ตัวเลือกสินค้าแต่ละรายการของสินค้าสามารถมีชุดกฎเกี่ยวกับจำนวนของตัวเองได้ หลังจากที่เลือกตัวเลือกสินค้าอื่นแล้ว จะต้องอัปเดตกฎเกี่ยวกับจำนวนที่แสดงบนหน้าสินค้าหรือส่วนสินค้าแนะนำ โดยสามารถดึงค่าที่อัปเดตแล้วได้โดยใช้โค้ด Javascript

• theme.js หรือไฟล์ที่เทียบเท่า
• en.default.json

ขั้นตอน:

1. จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม

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;
  });

5. คลิกบันทึก

การกำหนดราคาตามปริมาณ

เพิ่มโค้ด Liquid สำหรับการกำหนดราคาตามปริมาณ

คุณสามารถเพิ่มโค้ดไปยังไฟล์ต่อไปนี้ในธีมของคุณเพื่อแสดงการกำหนดราคาตามปริมาณ

• main-product.liquid หรือไฟล์ที่เทียบเท่า
• featured-product.liquid หรือไฟล์ที่เทียบเท่า

ขั้นตอน:

1. จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม

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 -%}

5. คลิกบันทึก

เพิ่มโค้ด Javascript สำหรับการกำหนดราคาตามปริมาณ

คุณสามารถเพิ่มโค้ดไปยังไฟล์ต่อไปนี้ในธีมของคุณเพื่อแสดงการกำหนดราคาตามปริมาณ

• theme.js

ขั้นตอน:

1. จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม

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');
        }
      }
    },
  );
}

5. คลิกบันทึก

เพิ่มตำแหน่งที่ตั้ง

เพื่อให้แน่ใจว่ากฎเกี่ยวกับจำนวนและการกำหนดราคาตามปริมาณแสดงในร้านค้าออนไลน์ของคุณทุกเวอร์ชันที่แปล คุณสามารถเพิ่มตำแหน่งที่ตั้งได้โดยการเพิ่มสตริงการแปล JSON ต่อไปนี้ไปยังไฟล์ en.default.json ของคุณ

ขั้นตอน:

1. จากส่วนผู้ดูแล Shopify ของคุณ ให้ไปที่ ร้านค้าออนไลน์ > ธีม

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"
    }
  }
}

5. คลิกบันทึก