Visualizzazione delle regole sulla quantità e dei prezzi basati sui volumi nel tuo negozio

Le regole sulla quantità per il catalogo B2B sono supportate sui temi Shopify gratuiti, versione 8.0.0 o successiva e i prezzi basati sui volumi sono supportati sulla versione 11.0.0 o successiva. Se desideri mostrare le regole sulle quantità e i prezzi basati sui volumi nel tuo negozio, puoi aggiornare il tema del tuo negozio alla versione più recente.

Se non vuoi modificare o aggiornare il tuo tema, puoi aggiungere il seguente codice al tema per mostrare le regole sulla quantità e i prezzi basati sui volumi. Prima di effettuare aggiornamenti ai file del tema, assicurati di duplicare il tema per creare una copia di backup.

Su questa pagina

Quantità del carrello dei prodotti

Nella pagina del prodotto o nella sezione del prodotto in primo piano può essere visualizzato il valore per la quantità del carrello della variante di prodotto. Il valore può essere recuperato utilizzando Liquid.

Aggiunta del codice Liquid della quantità del carrello dei prodotti

Per supportare la quantità del carrello, nel tuo tema puoi aggiungere un codice ai file seguenti:

main-product.liquid o equivalente
featured-product.liquid o equivalente

Passaggi:

Dal pannello di controllo Shopify, vai su Negozio online > Temi.
Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.
Apri il file che desideri modificare.
Crea una nuova riga in fondo al file e aggiungi il codice seguente:

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

Clicca su Salva.

Aggiunta del codice Javascript della quantità del carrello

Quando la quantità del carrello di una variante cambia, devi aggiornare il valore visualizzato sulla pagina di prodotto o sulla sezione del prodotto in primo piano. Il valore aggiornato può essere recuperato utilizzando il codice Javascript.

Puoi aggiungere un codice al file theme.js o equivalente.

Passaggi:

Dal pannello di controllo Shopify, vai su Negozio online > Temi.
Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.
Apri il file theme.js.
Crea una nuova riga in fondo al file e aggiungi il codice seguente:

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

Clicca su Salva.

Regole sulla quantità

Le regole sulla quantità di una variante di prodotto possono essere visualizzate nella pagina del prodotto o nella sezione del prodotto in primo piano. Le regole possono essere recuperate utilizzando Liquid.

Aggiunta del codice Liquid delle regole sulla quantità

Per supportare le regole sulla quantità, nel tuo tema puoi aggiungere un codice ai file seguenti:

main-product.liquid o equivalente
featured-product.liquid o equivalente

Passaggi:

Dal pannello di controllo Shopify, vai su Negozio online > Temi.
Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.
Apri il file che desideri modificare.
Crea una nuova riga in fondo al file e aggiungi il codice seguente:

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

Clicca su Salva.

Aggiunta del codice Javascript delle regole sulla quantità

Ogni variante di un prodotto può avere una propria serie di regole di quantità. Dopo aver selezionato una variante diversa, devi aggiornare le regole sulla quantità visualizzate in una pagina del prodotto o in una sezione di prodotti in primo piano. Il valore aggiornato può essere recuperato utilizzando il codice Javascript.

theme.js o equivalente
en.default.json

Passaggi:

Dal pannello di controllo Shopify, vai su Negozio online > Temi.
Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.
Apri il file theme.js.
Crea una nuova riga in fondo al file e aggiungi il codice seguente:

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

Clicca su Salva.

Prezzi basati sui volumi

Aggiunta del codice dei prezzi basati sui volumi di Liquid

Per visualizzare i prezzi basati sui volumi, nel tuo tema puoi aggiungere un codice ai seguenti file:

main-product.liquid o equivalente
featured-product.liquid o equivalente

Passaggi:

Dal pannello di controllo Shopify, vai su Negozio online > Temi.
Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.
Apri il file che desideri modificare.
Crea una nuova riga in fondo al file e aggiungi il codice seguente:

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

Clicca su Salva.

Aggiunta del codice dei prezzi basati sui volumi di Javascript

Puoi aggiungere un codice al seguente file nel tema per visualizzare i prezzi basati sui volumi:

theme.js

Passaggi:

Dal pannello di controllo Shopify, vai su Negozio online > Temi.
Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.
Apri il file theme.js.
Crea una nuova riga in fondo al file e aggiungi il codice seguente:

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

Clicca su Salva.

Aggiunta di impostazioni locali

Per assicurarti che le regole sulla quantità e i prezzi basati sui volumi siano visualizzati in tutte le versioni tradotte del tuo negozio online, puoi aggiungere le impostazioni locali aggiungendo le seguenti stringhe di traduzione JSON al file en.default.json.

Passaggi:

Dal pannello di controllo Shopify, vai su Negozio online > Temi.
Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu azioni, quindi clicca su Modifica codice.
Apri il file en.default.json.
Crea una nuova riga in fondo al file e aggiungi il codice seguente:

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

Clicca su Salva.