Guida
Accedi

Visualizzazione di regole sulla quantità e prezzi basati sui volumi nel negozio

Puoi visualizzare le regole sulla quantità e i prezzi basati sui volumi per il catalogo B2B nel negozio aggiornando il tema all'ultima versione.

Se non desideri modificare o aggiornare il tema, puoi aggiungere il codice seguente al tema per visualizzare le regole sulla quantità e i prezzi basati sui volumi.

In questa pagina

Considerazioni sull'aggiunta di regole sulla quantità e prezzi basati sui volumi al codice del tema

Prima di aggiungere le regole sulla quantità e i prezzi basati sui volumi al codice del tema, leggi le considerazioni seguenti:

  • Questo è un tutorial avanzato. Se non hai familiarità con la lettura e la modifica del codice del tema, puoi collaborare con uno sviluppatore o incaricare un Partner di Shopify.
  • Prima di apportare aggiornamenti ai file del tema, assicurati di duplicare il tema per creare una copia di backup.
  • Le regole sulla quantità per il catalogo B2B sono supportate sui temi gratuiti di Shopify dalla versione 8.0.0 in poi. I prezzi basati sui volumi sono supportati dalla versione 11.0.0 in poi.

Quantità del prodotto nel carrello

Il valore della quantità nel carrello di una variante di prodotto può essere visualizzato sulla pagina del prodotto o nella sezione del prodotto in primo piano. Il valore può essere recuperato utilizzando Liquid.

Aggiungi il codice Liquid per la quantità del prodotto nel carrello

Puoi aggiungere codice ai file seguenti nel tema per supportare la quantità nel carrello:

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

Passaggi:

  1. Dal pannello di controllo Shopify, vai a Negozio online > Temi.

  2. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu delle azioni, quindi clicca su Modifica codice.

  3. Apri il file che desideri modificare.

  4. 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>
  1. Clicca su Salva.

Aggiungi il codice Javascript per la quantità nel carrello

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

Puoi aggiungere codice al file theme.js o equivalente.

Passaggi:

  1. Dal pannello di controllo Shopify, vai a Negozio online > Temi.

  2. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu delle azioni, quindi clicca su Modifica codice.

  3. Apri il file theme.js.

  4. 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;
  });
  1. Clicca su Salva.

Regole sulla quantità

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

Aggiungi il codice Liquid per le regole sulla quantità

Puoi aggiungere codice ai file seguenti nel tema per supportare le regole sulla quantità:

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

Passaggi:

  1. Dal pannello di controllo Shopify, vai a Negozio online > Temi.

  2. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu delle azioni, quindi clicca su Modifica codice.

  3. Apri il file che desideri modificare.

  4. Crea una nuova riga in fondo al file, quindi 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>
  1. Clicca su Salva.

Aggiungi il codice Javascript per le regole sulla quantità

Ogni variante di un prodotto può avere un proprio set di regole sulla quantità. Dopo aver selezionato una variante diversa, le regole sulla quantità visualizzate sulla pagina del prodotto o nella sezione del prodotto in primo piano devono essere aggiornate. Il valore aggiornato può essere recuperato utilizzando codice Javascript.

  • theme.js o equivalente
  • en.default.json

Passaggi:

  1. Dal pannello di controllo Shopify, vai a Negozio online > Temi.

  2. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu delle azioni, quindi clicca su Modifica codice.

  3. Apri il file theme.js.

  4. Crea una nuova riga in fondo al file, quindi 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;
  });
  1. Clicca su Salva.

Prezzi basati sui volumi

Aggiungi il codice Liquid per i prezzi basati sui volumi

Puoi aggiungere codice ai file seguenti nel tema per visualizzare i prezzi basati sui volumi:

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

Passaggi:

  1. Dal pannello di controllo Shopify, vai a Negozio online > Temi.

  2. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu delle azioni, quindi clicca su Modifica codice.

  3. Apri il file che desideri modificare.

  4. Crea una nuova riga in fondo al file, quindi 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 -%}
  1. Clicca su Salva.

Aggiungi il codice Javascript per i prezzi basati sui volumi

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

  • theme.js

Passaggi:

  1. Dal pannello di controllo Shopify, vai a Negozio online > Temi.

  2. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu delle azioni, quindi clicca su Modifica codice.

  3. Apri il file theme.js.

  4. Crea una nuova riga in fondo al file, quindi 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');
        }
      }
    },
  );
}
  1. Clicca su Salva.

Aggiungi impostazioni locali

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

Passaggi:

  1. Dal pannello di controllo Shopify, vai a Negozio online > Temi.

  2. Trova il tema che desideri modificare, clicca sul pulsante ... per aprire il menu delle azioni, quindi clicca su Modifica codice.

  3. Apri il file en.default.json.

  4. Crea una nuova riga in fondo al file, quindi 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"
    }
  }
}
  1. Clicca su Salva.