Bantuan
Masuk

Menampilkan aturan kuantitas dan harga volume di toko Anda

Anda dapat menampilkan aturan kuantitas dan harga volume untuk katalog B2B Anda di toko Anda dengan memperbarui tema toko Anda ke versi terbaru.

Jika tidak ingin mengubah atau memperbarui tema, Anda dapat menambahkan kode berikut ke tema untuk menampilkan aturan kuantitas dan harga volume.

Di halaman ini

Pertimbangan untuk menambahkan aturan kuantitas dan harga volume ke kode tema Anda

Sebelum menambahkan aturan kuantitas dan harga volume ke kode tema Anda, tinjau pertimbangan berikut:

  • Ini adalah tutorial tingkat lanjut. Jika Anda tidak terbiasa membaca dan mengedit kode tema, Anda dapat bekerja sama dengan developer atau menyewa Jasa Partner Shopify.
  • Sebelum memperbarui file tema, pastikan Anda menduplikasi tema untuk membuat salinan cadangan.
  • Aturan kuantitas untuk katalog B2B didukung di tema gratis Shopify, versi 8.0.0 atau yang lebih baru. Harga volume didukung di versi 11.0.0 atau yang lebih baru.

Kuantitas keranjang produk

Nilai kuantitas keranjang varian produk dapat ditampilkan di halaman produk atau bagian produk unggulan. Nilai tersebut dapat diambil menggunakan Liquid.

Tambahkan kode kuantitas keranjang produk Liquid

Anda dapat menambahkan kode ke file berikut di tema Anda untuk mendukung kuantitas keranjang:

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

Langkah-langkah:

  1. Dari admin Shopify Anda, buka Toko Online > Tema.

  2. Temukan tema yang ingin diedit, klik tombol ... untuk membuka menu tindakan, lalu klik Edit kode.

  3. Buka file yang ingin Anda edit.

  4. Buat baris baru di bagian bawah file, dan tambahkan kode 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 kode kuantitas keranjang Javascript

Ketika kuantitas keranjang varian berubah, nilai yang ditampilkan di halaman produk atau bagian produk unggulan harus diperbarui. Nilai yang diperbarui dapat diambil menggunakan kode Javascript.

Anda dapat menambahkan kode ke file theme.js atau yang setara.

Langkah-langkah:

  1. Dari admin Shopify Anda, buka Toko Online > Tema.

  2. Temukan tema yang ingin diedit, klik tombol ... untuk membuka menu tindakan, lalu klik Edit kode.

  3. Buka file theme.js.

  4. Buat baris baru di bagian bawah file, dan tambahkan kode 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.

Aturan kuantitas

Aturan kuantitas varian produk dapat ditampilkan di halaman produk atau bagian produk unggulan. Aturan tersebut dapat diambil menggunakan Liquid.

Tambahkan kode aturan kuantitas Liquid

Anda dapat menambahkan kode ke file berikut di tema Anda untuk mendukung aturan kuantitas:

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

Langkah-langkah:

  1. Dari admin Shopify Anda, buka Toko Online > Tema.

  2. Temukan tema yang ingin diedit, klik tombol ... untuk membuka menu tindakan, lalu klik Edit kode.

  3. Buka file yang ingin Anda edit.

  4. Buat baris baru di bagian bawah file, lalu tambahkan kode 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 kode aturan kuantitas Javascript

Setiap varian produk dapat memiliki set aturan kuantitasnya sendiri. Setelah varian lain dipilih, aturan kuantitas yang ditampilkan di halaman produk atau bagian produk unggulan perlu diperbarui. Nilai yang diperbarui dapat diambil menggunakan kode Javascript.

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

Langkah-langkah:

  1. Dari admin Shopify Anda, buka Toko Online > Tema.

  2. Temukan tema yang ingin diedit, klik tombol ... untuk membuka menu tindakan, lalu klik Edit kode.

  3. Buka file theme.js.

  4. Buat baris baru di bagian bawah file, lalu tambahkan kode 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.

Harga volume

Tambahkan kode harga volume Liquid

Anda dapat menambahkan kode ke file berikut di tema Anda untuk menampilkan harga volume:

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

Langkah-langkah:

  1. Dari admin Shopify Anda, buka Toko Online > Tema.

  2. Temukan tema yang ingin diedit, klik tombol ... untuk membuka menu tindakan, lalu klik Edit kode.

  3. Buka file yang ingin Anda edit.

  4. Buat baris baru di bagian bawah file, lalu tambahkan kode 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 kode harga volume Javascript

Anda dapat menambahkan kode ke file berikut di tema Anda untuk menampilkan harga volume:

  • theme.js

Langkah-langkah:

  1. Dari admin Shopify Anda, buka Toko Online > Tema.

  2. Temukan tema yang ingin diedit, klik tombol ... untuk membuka menu tindakan, lalu klik Edit kode.

  3. Buka file theme.js.

  4. Buat baris baru di bagian bawah file, lalu tambahkan kode 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 lokal

Untuk memastikan aturan kuantitas dan harga volume ditampilkan di semua versi terjemahan toko online Anda, Anda dapat menambahkan lokal dengan menambahkan string terjemahan JSON berikut ke file en.default.json Anda.

Langkah-langkah:

  1. Dari admin Shopify Anda, buka Toko Online > Tema.

  2. Temukan tema yang ingin diedit, klik tombol ... untuk membuka menu tindakan, lalu klik Edit kode.

  3. Buka file en.default.json.

  4. Buat baris baru di bagian bawah file, lalu tambahkan kode 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.