แสดงกฎเกี่ยวกับปริมาณและการกำหนดราคาตามปริมาณในร้านค้าของคุณ
กฎเกี่ยวกับปริมาณสำหรับแคตตาล็อก B2B รองรับเฉพาะในธีม Shopify ฟรี เวอร์ชัน 8.0.0 หรือใหม่กว่า และการกำหนดราคาตามปริมาณรองรับเฉพาะในเวอร์ชัน 11.0.0 หรือใหม่กว่า หากคุณต้องการแสดงกฎเกี่ยวกับปริมาณและการกําหนดราคาตามปริมาณในร้านค้าของคุณ คุณสามารถอัปเดตธีมร้านค้าของคุณให้เป็นเวอร์ชันล่าสุดได้
หากคุณไม่ต้องการเปลี่ยนหรืออัปเดตธีมของคุณ คุณสามารถเพิ่มโค้ดต่อไปนี้ไปยังธีมของคุณเพื่อแสดงกฎเกี่ยวกับปริมาณและการกำหนดราคาตามปริมาณได้ ก่อนที่คุณจะอัปเดตไฟล์ธีมของคุณ โปรดตรวจสอบให้แน่ใจว่าคุณได้คัดลอก ธีมของคุณ เพื่อสร้างสําเนาข้อมูลสํารอง
จำนวนตะกร้าสินค้า
ค่าจำนวนตะกร้าสินค้าของตัวเลือกสินค้าสามารถแสดงได้ในหน้าสินค้าหรือส่วนสินค้าแนะนำ สามารถดึงค่าได้โดยใช้ Liquid
เพิ่มตะกร้าสินค้าและโค้ดจำนวน Liquid
คุณสามารถเพิ่มโค้ดในไฟล์ต่อไปนี้ในธีมของคุณเพื่อรองรับจำนวนตะกร้าสินค้า:
-
main-product.liquid
หรือเทียบเท่า -
featured-product.liquid
หรือเทียบเท่า
ขั้นตอน:
ในส่วนผู้ดูแล Shopify ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม “...” เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก“แก้ไขโค้ด”
เปิดไฟล์ CSV ที่คุณต้องการแก้ไข
สร้างรายการใหม่ที่ด้านล่างของไฟล์ และใส่รหัสต่อไปนี้:
{% 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 ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม “...” เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก“แก้ไขโค้ด”
เปิดไฟล์ CSV ที่คุณต้องการแก้ไข
สร้างรายการใหม่ที่ด้านล่างของไฟล์ จากนั้นใส่รหัสต่อไปนี้:
{% 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 ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม “...” เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก“แก้ไขโค้ด”
เปิดไฟล์
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 ให้ไปที่ร้านค้าออนไลน์ > ธีม
ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม “...” เพื่อเปิดเมนูดำเนินการ จากนั้นคลิก“แก้ไขโค้ด”
เปิดไฟล์ CSV ที่คุณต้องการแก้ไข
สร้างรายการใหม่ที่ด้านล่างของไฟล์ จากนั้นใส่รหัสต่อไปนี้:
{%- 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');
}
}
},
);
}
- คลิกที่ “บันทึก”
เพิ่มตำแหน่งที่ตั้ง
เพื่อให้แน่ใจว่าระบบแสดงกฎด้านปริมาณและการกําหนดราคาตามปริมาณในร้านค้าออนไลน์เวอร์ชันที่แปลแล้วทั้งหมด คุณสามารถเพิ่มภาษาท้องถิ่นได้โดยเพิ่มสตริงการแปลแบบ JSON ต่อไปนี้ไปยังไฟล์ en.default.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"
}
}
}
- คลิกที่ “บันทึก”