Afișarea regulilor de cantitate și a tarifării în funcție de volum în magazinul dumneavoastră

Puteți afișa regulile de cantitate și tarifarea în funcție de volum pentru catalogul dumneavoastră B2B în magazinul dumneavoastră actualizând tema magazinului dumneavoastră la cea mai recentă versiune.

Dacă nu doriți să modificați sau să actualizați tema, atunci puteți adăuga următorul cod la tema dumneavoastră pentru a afișa regulile de cantitate și tarifarea în funcție de volum.

Pe această pagină

Aspecte de luat în considerare la adăugarea regulilor de cantitate și a tarifării în funcție de volum în codul temei dumneavoastră

Înainte de a adăuga regulile de cantitate și tarifarea în funcție de volum în codul temei dumneavoastră, analizați următoarele aspecte:

Acesta este un tutorial avansat. Dacă nu vă simțiți confortabil să citiți și să editați codul temei, atunci puteți colabora cu un dezvoltator sau puteți angaja un Partener Shopify.
Înainte de a face actualizări la fișierele temei, asigurați-vă că duplicați tema pentru a crea o copie de rezervă.
Regulile de cantitate pentru cataloagele B2B sunt acceptate pe temele gratuite de la Shopify, versiunea 8.0.0 sau o versiune ulterioară. Tarifarea în funcție de volum este acceptată pe versiunea 11.0.0 sau o versiune ulterioară.

Cantitate produs în coș

Valoarea cantității din coș a unei variante de produs poate fi afișată pe pagina de produs sau în secțiunea de produse recomandate. Valoarea poate fi preluată folosind Liquid.

Adăugați codul Liquid pentru cantitatea de produs în coș

Puteți adăuga cod la următoarele fișiere din tema dumneavoastră pentru a accepta cantitatea din coș:

main-product.liquid sau echivalent
featured-product.liquid sau echivalent

Pași:

Din panoul de administrare Shopify, accesați Magazin online > Teme.
Găsiți tema pe care doriți să o editați, faceți clic pe butonul ... pentru a deschide meniul de acțiuni, apoi faceți clic pe Editare cod.
Deschideți fișierul pe care doriți să-l editați.
Creați o linie nouă la sfârșitul fișierului și adăugați următorul cod:

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

Faceți clic pe Salvare.

Adăugați cod Javascript pentru cantitatea din coș

Atunci când se modifică cantitatea din coș a unei variante, valoarea afișată pe pagina de produs sau în secțiunea de produse recomandate trebuie actualizată. Valoarea actualizată poate fi preluată folosind cod Javascript.

Puteți adăuga cod la fișierul theme.js sau la un fișier echivalent.

Pași:

Din panoul de administrare Shopify, accesați Magazin online > Teme.
Găsiți tema pe care doriți să o editați, faceți clic pe butonul ... pentru a deschide meniul de acțiuni, apoi faceți clic pe Editare cod.
Deschideți fișierul theme.js.
Creați o linie nouă la sfârșitul fișierului și adăugați următorul cod:

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

Faceți clic pe Salvare.

Reguli de cantitate

Regulile de cantitate ale unei variante de produs pot fi afișate pe pagina de produs sau în secțiunea de produse recomandate. Regulile pot fi preluat folosind Liquid.

Adăugați cod Liquid pentru regulile de cantitate

Puteți adăuga cod la următoarele fișiere din tema dumneavoastră pentru a accepta regulile de cantitate:

main-product.liquid sau echivalent
featured-product.liquid sau echivalent

Pași:

Din panoul de administrare Shopify, accesați Magazin online > Teme.
Găsiți tema pe care doriți să o editați, faceți clic pe butonul ... pentru a deschide meniul de acțiuni, apoi faceți clic pe Editare cod.
Deschideți fișierul pe care doriți să-l editați.
Creați o linie nouă la sfârșitul fișierului, apoi adăugați următorul cod:

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

Faceți clic pe Salvare.

Adăugați cod Javascript pentru regulile de cantitate

Fiecare variantă a unui produs poate avea propriul set de reguli de cantitate. După ce este selectată o altă variantă, regulile de cantitate afișate pe pagina de produs sau în secțiunea de produse recomandate trebuie actualizate. Valoarea actualizată poate fi preluată folosind cod Javascript.

theme.js sau echivalent
en.default.json

Pași:

Din panoul de administrare Shopify, accesați Magazin online > Teme.
Găsiți tema pe care doriți să o editați, faceți clic pe butonul ... pentru a deschide meniul de acțiuni, apoi faceți clic pe Editare cod.
Deschideți fișierul theme.js.
Creați o linie nouă la sfârșitul fișierului, apoi adăugați următorul cod:

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

Faceți clic pe Salvare.

Tarifare în funcție de volum

Adăugați cod Liquid pentru tarifarea în funcție de volum

Puteți adăuga cod la următoarele fișiere din tema dumneavoastră pentru a afișa tarifarea în funcție de volum:

main-product.liquid sau echivalent
featured-product.liquid sau echivalent

Pași:

Din panoul de administrare Shopify, accesați Magazin online > Teme.
Găsiți tema pe care doriți să o editați, faceți clic pe butonul ... pentru a deschide meniul de acțiuni, apoi faceți clic pe Editare cod.
Deschideți fișierul pe care doriți să-l editați.
Creați o linie nouă la sfârșitul fișierului, apoi adăugați următorul cod:

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

Faceți clic pe Salvare.

Adăugați cod Javascript pentru tarifarea în funcție de volum

Puteți adăuga cod la următorul fișier din tema dumneavoastră pentru a afișa tarifarea în funcție de volum:

theme.js

Pași:

Din panoul de administrare Shopify, accesați Magazin online > Teme.
Găsiți tema pe care doriți să o editați, faceți clic pe butonul ... pentru a deschide meniul de acțiuni, apoi faceți clic pe Editare cod.
Deschideți fișierul theme.js.
Creați o linie nouă la sfârșitul fișierului, apoi adăugați următorul cod:

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

Faceți clic pe Salvare.

Adăugați parametri locali

Pentru a vă asigura că regulile de cantitate și tarifarea în funcție de volum se afișează pe toate versiunile traduse ale magazinului dumneavoastră online, puteți adăuga parametri locali adăugând următoarele șiruri de traducere JSON la fișierul dumneavoastră en.default.json.

Pași:

Din panoul de administrare Shopify, accesați Magazin online > Teme.
Găsiți tema pe care doriți să o editați, faceți clic pe butonul ... pentru a deschide meniul de acțiuni, apoi faceți clic pe Editare cod.
Deschideți fișierul en.default.json.
Creați o linie nouă la sfârșitul fișierului, apoi adăugați următorul cod:

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

Faceți clic pe Salvare.