Bantuan
Log masuk

Mempamerkan peraturan kuantiti dan penetapan harga jumlah di kedai anda

Anda boleh mempamerkan peraturan kuantiti dan penetapan harga jumlah untuk katalog B2B di kedai anda dengan mengemaskinikan tema kedai anda kepada versi terkini.

Jika anda tidak mahu menukar atau mengemaskinikan tema anda, maka anda boleh menambah kod yang berikut pada tema anda untuk mempamerkan peraturan kuantiti dan penetapan harga jumlah.

Pada halaman ini

Pertimbangan untuk menambahkan peraturan kuantiti dan penetapan harga jumlah pada kod tema anda

Sebelum anda menambah peraturan kuantiti dan penetapan harga jumlah pada kod tema anda, semak pertimbangan yang berikut:

  • Ini merupakan tutorial lanjutan. Jika anda tidak selesa untuk membaca dan menyunting kod tema, maka anda boleh bekerja dengan pembangun atau mengupah Rakan Kongsi Shopify.
  • Sebelum anda membuat kemaskinian pada fail tema anda, pastikan anda menduplikasi tema anda untuk mencipta salinan sandaran.
  • Peraturan kuantiti untuk katalog B2B disokong pada tema percuma Shopify, versi 8.0.0 atau yang lebih baharu. Penetapan harga jumlah disokong pada versi 11.0.0 atau yang lebih baharu.

Kuantiti troli produk

Nilai kuantiti troli varian produk boleh dipaparkan pada halaman produk atau bahagian produk yang ditampilkan. Nilai tersebut boleh diambil dengan menggunakan Liquid.

Tambahkan kod kuantiti troli produk Liquid

Anda boleh menambahkan kod pada fail berikut dalam tema anda untuk menyokong kuantiti troli:

  • main-product.liquid atau yang setara
  • featured-product.liquid atau yang setara

Langkah-langkah:

  1. Daripada pentadbir Shopify anda, pergi ke Kedai Dalam Talian > Tema.

  2. Cari tema yang ingin anda sunting, klik butang ... untuk membuka menu tindakan, dan kemudian klik Sunting kod.

  3. Buka fail yang ingin anda sunting.

  4. Buat baris baharu di bahagian bawah fail dan tambahkan kod berikut:

{% 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. Klik Simpan.

Tambahkan kod kuantiti troli Javascript

Apabila kuantiti troli varian berubah, nilai yang dipaparkan pada halaman produk atau bahagian produk yang ditampilkan mesti dikemaskinikan. Nilai yang dikemaskinikan boleh diambil dengan menggunakan kod Javascript.

Anda boleh menambahkan kod pada fail theme.js atau yang setara.

Langkah-langkah:

  1. Daripada pentadbir Shopify anda, pergi ke Kedai Dalam Talian > Tema.

  2. Cari tema yang ingin anda sunting, klik butang ... untuk membuka menu tindakan, dan kemudian klik Sunting kod.

  3. Buka fail theme.js.

  4. Buat baris baharu di bahagian bawah fail dan tambahkan kod berikut:

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. Klik Simpan.

Peraturan kuantiti

Peraturan kuantiti varian produk boleh dipaparkan pada halaman produk atau bahagian produk yang ditampilkan. Peraturan tersebut boleh diambil dengan menggunakan Liquid.

Tambahkan kod peraturan kuantiti Liquid

Anda boleh menambahkan kod pada fail berikut dalam tema anda untuk menyokong peraturan kuantiti:

  • main-product.liquid atau yang setara
  • featured-product.liquid atau yang setara

Langkah-langkah:

  1. Daripada pentadbir Shopify anda, pergi ke Kedai Dalam Talian > Tema.

  2. Cari tema yang ingin anda sunting, klik butang ... untuk membuka menu tindakan, dan kemudian klik Sunting kod.

  3. Buka fail yang ingin anda sunting.

  4. Buat baris baharu di bahagian bawah fail, kemudian tambahkan kod berikut:

{% 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. Klik Simpan.

Tambahkan kod peraturan kuantiti Javascript

Setiap varian produk boleh memiliki set peraturan kuantitinya sendiri. Selepas varian yang berbeza dipilih, peraturan kuantiti yang dipaparkan pada halaman produk atau bahagian produk yang ditampilkan perlu dikemaskinikan. Nilai yang dikemaskinikan boleh diambil menggunakan kod Javascript.

  • theme.js atau yang setara
  • en.default.json

Langkah-langkah:

  1. Daripada pentadbir Shopify anda, pergi ke Kedai Dalam Talian > Tema.

  2. Cari tema yang ingin anda sunting, klik butang ... untuk membuka menu tindakan, dan kemudian klik Sunting kod.

  3. Buka fail theme.js.

  4. Buat baris baharu di bahagian bawah fail, kemudian tambahkan kod berikut:

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. Klik Simpan.

Penentuan harga berasaskan jumlah

Tambahkan kod penentuan harga berasaskan jumlah Liquid

Anda boleh menambahkan kod pada fail berikut dalam tema anda untuk memaparkan penentuan harga berasaskan jumlah:

  • main-product.liquid atau yang setara
  • featured-product.liquid atau yang setara

Langkah-langkah:

  1. Daripada pentadbir Shopify anda, pergi ke Kedai Dalam Talian > Tema.

  2. Cari tema yang ingin anda sunting, klik butang ... untuk membuka menu tindakan, dan kemudian klik Sunting kod.

  3. Buka fail yang ingin anda sunting.

  4. Buat baris baharu di bahagian bawah fail, kemudian tambahkan kod berikut:

{%- 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. Klik Simpan.

Tambahkan kod penentuan harga berasaskan jumlah Javascript

Anda boleh menambahkan kod pada fail berikut dalam tema anda untuk memaparkan penentuan harga berasaskan jumlah:

  • theme.js

Langkah-langkah:

  1. Daripada pentadbir Shopify anda, pergi ke Kedai Dalam Talian > Tema.

  2. Cari tema yang ingin anda sunting, klik butang ... untuk membuka menu tindakan, dan kemudian klik Sunting kod.

  3. Buka fail theme.js.

  4. Buat baris baharu di bahagian bawah fail, kemudian tambahkan kod berikut:

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. Klik Simpan.

Tambahkan penempatan

Untuk memastikan peraturan kuantiti dan penentuan harga berasaskan jumlah dipaparkan pada semua versi terjemahan kedai dalam talian anda, anda boleh menambahkan penempatan dengan menambahkan rentetan terjemahan JSON berikut pada fail en.default.json anda.

Langkah-langkah:

  1. Daripada pentadbir Shopify anda, pergi ke Kedai Dalam Talian > Tema.

  2. Cari tema yang ingin anda sunting, klik butang ... untuk membuka menu tindakan, dan kemudian klik Sunting kod.

  3. Buka fail en.default.json.

  4. Buat baris baharu di bahagian bawah fail, kemudian tambahkan kod berikut:

"products": {
  "product": {
    "volume_pricing": {
      "title": "Volume Pricing",
      "note": "Volume pricing available",
      "price_at_each": "at /ea"
    }
    "facets": {
      "show_more": "Show more"
    }
  }
}
  1. Klik Simpan.