เพิ่มกฎเกี่ยวกับจำนวนไปยังธีม Shopify ของคุณ

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

ขยายธุรกิจของคุณให้เติบโต

นี่คือบทแนะนำการใช้งานขั้นสูงหากคุณไม่สบายใจที่จะอ่านและแก้ไขรหัสธีม คุณสามารถทำงานกับผู้พัฒนาหรือจ้าง Shopify Expert ได้

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

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

เพิ่มตะกร้าสินค้าและโค้ดจำนวน Liquid

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

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

ขั้นตอน:

เดสก์ท็อป

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

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด

iPhone

1. จากแอป Shopify ให้แตะ ร้านค้า

2. ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์

3. แตะ จัดการธีม

4. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด

Android

1. จากแอป Shopify ให้แตะ ร้านค้า

2. ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์

3. แตะ จัดการธีม

4. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด

1. เปิดไฟล์ CSV ที่คุณต้องการแก้ไข
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 ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด

iPhone

1. จากแอป Shopify ให้แตะ ร้านค้า

2. ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์

3. แตะ จัดการธีม

4. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด

Android

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 ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด

iPhone

1. จากแอป Shopify ให้แตะ ร้านค้า

2. ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์

3. แตะ จัดการธีม

4. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด

Android

1. จากแอป Shopify ให้แตะ ร้านค้า

2. ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์

3. แตะ จัดการธีม

4. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด

1. เปิดไฟล์ CSV ที่คุณต้องการแก้ไข
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 ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด

iPhone

1. จากแอป Shopify ให้แตะ ร้านค้า

2. ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์

3. แตะ จัดการธีม

4. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด

Android

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 ให้ไปที่ร้านค้าออนไลน์ > ธีม

2. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด

iPhone

1. จากแอป Shopify ให้แตะ ร้านค้า

2. ในส่วนช่องทางการขาย ให้แตะ ร้านค้าออนไลน์

3. แตะ จัดการธีม

4. ค้นหาธีมที่คุณต้องการแก้ไข แล้วคลิกปุ่ม ... เพื่อเปิดเมนูดำเนินการ จากนั้นคลิกแก้ไขโค้ด

Android

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. คลิกที่ “บันทึก”