Ajuda
Inicia la sessió

Mostrar les regles de quantitat i els preus per volum a la teva botiga

Pots mostrar les regles de quantitat i els preus per volum per al teu catàleg B2B a la teva botiga actualitzant el tema de la botiga a l'última versió.

Si no vols canviar ni actualitzar el teu tema, pots afegir-hi el codi següent per mostrar les regles de quantitat i els preus per volum.

En aquesta pàgina

Consideracions per afegir regles de quantitat i preus per volum al codi del teu tema

Abans d'afegir les regles de quantitat i els preus per volum al codi del teu tema, revisa les consideracions següents:

  • Aquesta és una guia pràctica avançada. Si no tens prou coneixements per llegir i editar el codi del tema, pots col·laborar amb un desenvolupador o contractar un Partner de Shopify.
  • Abans de fer actualitzacions als fitxers del tema, assegura't de duplicar-lo per crear-ne una còpia de seguretat.
  • Les regles de quantitat per al catàleg B2B són compatibles amb els temes de Shopify gratuïts, en la versió 8.0.0 o posterior. Els preus per volum són compatibles amb la versió 11.0.0 o posterior.

Quantitat del producte al carretó

El valor de la quantitat al carretó d'una variant de producte es pot mostrar a la fitxa del producte o a la secció del producte destacat. El valor es pot obtenir mitjançant Liquid.

Afegir el codi de Liquid per a la quantitat del producte al carretó

Pots afegir codi als fitxers següents del teu tema per admetre la quantitat al carretó:

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

Passos:

  1. Al panell d'administració de Shopify, ves a Botiga en línia.

  2. Cerca el tema que vols editar, fes clic al botó Menú horitzontal per obrir el menú d'accions i, a continuació, fes clic a Edita el codi.

  3. Obre el fitxer que vols editar.

  4. Crea una línia nova a la part inferior del fitxer i afegeix-hi el codi següent:

{% 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. Fes clic a Desa.

Afegir el codi JavaScript per a la quantitat al carretó

Quan canvia la quantitat al carretó d'una variant, cal actualitzar el valor que es mostra a la fitxa del producte o a la secció del producte destacat. El valor actualitzat es pot obtenir mitjançant codi JavaScript.

Pots afegir codi al fitxer theme.js o equivalent.

Passos:

  1. Al panell d'administració de Shopify, ves a Botiga en línia.

  2. Cerca el tema que vols editar, fes clic al botó Menú horitzontal per obrir el menú d'accions i, a continuació, fes clic a Edita el codi.

  3. Obre el fitxer theme.js.

  4. Crea una línia nova a la part inferior del fitxer i afegeix-hi el codi següent:

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. Fes clic a Desa.

Regles de quantitat

Les regles de quantitat d'una variant de producte es poden mostrar a la fitxa del producte o a la secció del producte destacat. Les regles es poden obtenir mitjançant Liquid.

Afegir el codi de Liquid per a les regles de quantitat

Pots afegir codi als fitxers següents del teu tema per admetre les regles de quantitat:

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

Passos:

  1. Al panell d'administració de Shopify, ves a Botiga en línia.

  2. Cerca el tema que vols editar, fes clic al botó Menú horitzontal per obrir el menú d'accions i, a continuació, fes clic a Edita el codi.

  3. Obre el fitxer que vols editar.

  4. Crea una línia nova a la part inferior del fitxer i, a continuació, afegeix-hi el codi següent:

{% 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. Fes clic a Desa.

Afegir el codi JavaScript per a les regles de quantitat

Cada variant d'un producte pot tenir el seu propi conjunt de regles de quantitat. Després de seleccionar una variant diferent, s'han d'actualitzar les regles de quantitat que es mostren en una fitxa del producte o en la secció de producte destacat. El valor actualitzat es pot obtenir mitjançant codi JavaScript.

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

Passos:

  1. Al panell d'administració de Shopify, ves a Botiga en línia.

  2. Cerca el tema que vols editar, fes clic al botó Menú horitzontal per obrir el menú d'accions i, a continuació, fes clic a Edita el codi.

  3. Obre el fitxer theme.js.

  4. Crea una línia nova a la part inferior del fitxer i, a continuació, afegeix-hi el codi següent:

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. Fes clic a Desa.

Preus per volum

Afegir el codi de Liquid per als preus per volum

Pots afegir codi als fitxers següents del teu tema per mostrar els preus per volum:

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

Passos:

  1. Al panell d'administració de Shopify, ves a Botiga en línia.

  2. Cerca el tema que vols editar, fes clic al botó Menú horitzontal per obrir el menú d'accions i, a continuació, fes clic a Edita el codi.

  3. Obre el fitxer que vols editar.

  4. Crea una línia nova a la part inferior del fitxer i, a continuació, afegeix-hi el codi següent:

{%- 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. Fes clic a Desa.

Afegir el codi JavaScript per als preus per volum

Pots afegir codi al fitxer següent del teu tema per mostrar els preus per volum:

  • theme.js

Passos:

  1. Al panell d'administració de Shopify, ves a Botiga en línia.

  2. Cerca el tema que vols editar, fes clic al botó Menú horitzontal per obrir el menú d'accions i, a continuació, fes clic a Edita el codi.

  3. Obre el fitxer theme.js.

  4. Crea una línia nova a la part inferior del fitxer i, a continuació, afegeix-hi el codi següent:

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. Fes clic a Desa.

Afegir configuracions regionals

Per garantir que les regles de quantitat i els preus per volum es mostrin en totes les versions traduïdes de la teva botiga en línia, pots afegir configuracions regionals afegint les cadenes de traducció JSON següents al fitxer en.default.json.

Passos:

  1. Al panell d'administració de Shopify, ves a Botiga en línia.

  2. Cerca el tema que vols editar, fes clic al botó Menú horitzontal per obrir el menú d'accions i, a continuació, fes clic a Edita el codi.

  3. Obre el fitxer en.default.json.

  4. Crea una línia nova a la part inferior del fitxer i, a continuació, afegeix-hi el codi següent:

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