Ayuda
Iniciar sesión

Mostrar reglas de cantidad y precio basado en el volumen en la tienda

Puedes mostrar reglas de cantidad y precio basado en el volumen para el catálogo B2B en la tienda updating your store's theme a la versión más reciente.

Si no quieres cambiar ni actualizar el tema, puedes agregar el siguiente código al tema para mostrar reglas de cantidad y precio basado en el volumen.

En esta página

Consideraciones para agregar reglas de cantidad y precio basado en el volumen al código del tema

Antes de agregar reglas de cantidad y precio basado en el volumen al código del tema, revisa las siguientes consideraciones:

  • Este es un tutorial avanzado. Si no te resulta cómodo leer y editar el código del tema, puedes trabajar con una persona desarrolladora o hire a Shopify Partner.
  • Antes de actualizar los archivos del tema, duplicate your theme para crear una copia de seguridad.
  • Las reglas de cantidad para el catálogo B2B son compatibles en free Shopify themes, versión 8.0.0 o posterior. El precio basado en el volumen es compatible a partir de la versión 11.0.0.

Cantidad en el carrito del producto

La cantidad en el carrito de una variante de producto se puede mostrar en la página de producto o en la sección de producto destacado. Puedes obtener ese valor con Liquid.

Agregar código de Liquid para la cantidad en el carrito del producto

Puedes agregar código en los siguientes archivos del tema para mostrar la cantidad en el carrito:

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

Pasos:

  1. Desde el panel de control de Shopify, ve a Tienda online > Themes.

  2. Busca el tema que quieres editar, haz clic en el botón ... para abrir el menú de acciones y luego haz clic en Editar código.

  3. Abre el archivo que quieres editar.

  4. Crea una línea nueva al final del archivo y agrega el siguiente código:

{% 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. Haz clic en Guardar.

Agregar código de JavaScript para la cantidad en el carrito

Cuando cambia la cantidad en el carrito de una variante, debes actualizar el valor mostrado en la página de producto o en la sección de producto destacado. Puedes obtener el valor actualizado con código JavaScript.

Puedes agregar código en el archivo theme.js o equivalente.

Pasos:

  1. Desde el panel de control de Shopify, ve a Tienda online > Themes.

  2. Busca el tema que quieres editar, haz clic en el botón ... para abrir el menú de acciones y luego haz clic en Editar código.

  3. Abre el archivo theme.js.

  4. Crea una línea nueva al final del archivo y agrega el siguiente código:

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. Haz clic en Guardar.

Reglas de cantidad

Las reglas de cantidad de una variante de producto se pueden mostrar en la página de producto o en la sección de producto destacado. Puedes obtener esas reglas con Liquid.

Agregar código de Liquid para las reglas de cantidad

Puedes agregar código en los siguientes archivos del tema para mostrar las reglas de cantidad:

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

Pasos:

  1. Desde el panel de control de Shopify, ve a Tienda online > Themes.

  2. Busca el tema que quieres editar, haz clic en el botón ... para abrir el menú de acciones y luego haz clic en Editar código.

  3. Abre el archivo que quieres editar.

  4. Crea una línea nueva al final del archivo y luego agrega el siguiente código:

{% 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. Haz clic en Guardar.

Agregar código de JavaScript para las reglas de cantidad

Cada variante de un producto puede tener su propio conjunto de reglas de cantidad. Cuando se selecciona otra variante, hay que actualizar las reglas de cantidad que se muestran en la página de producto o en la sección de producto destacado. Puedes obtener los valores actualizados con código JavaScript.

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

Pasos:

  1. Desde el panel de control de Shopify, ve a Tienda online > Themes.

  2. Busca el tema que quieres editar, haz clic en el botón ... para abrir el menú de acciones y luego haz clic en Editar código.

  3. Abre el archivo theme.js.

  4. Crea una línea nueva al final del archivo y luego agrega el siguiente código:

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. Haz clic en Guardar.

Precio basado en el volumen

Agregar código de Liquid para el precio basado en el volumen

Puedes agregar código en los siguientes archivos del tema para mostrar el precio basado en el volumen:

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

Pasos:

  1. Desde el panel de control de Shopify, ve a Tienda online > Themes.

  2. Busca el tema que quieres editar, haz clic en el botón ... para abrir el menú de acciones y luego haz clic en Editar código.

  3. Abre el archivo que quieres editar.

  4. Crea una línea nueva al final del archivo y luego agrega el siguiente código:

{%- 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. Haz clic en Guardar.

Agregar código de JavaScript para el precio basado en el volumen

Puedes agregar código en el siguiente archivo del tema para mostrar el precio basado en el volumen:

  • theme.js

Pasos:

  1. Desde el panel de control de Shopify, ve a Tienda online > Themes.

  2. Busca el tema que quieres editar, haz clic en el botón ... para abrir el menú de acciones y luego haz clic en Editar código.

  3. Abre el archivo theme.js.

  4. Crea una línea nueva al final del archivo y luego agrega el siguiente código:

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. Haz clic en Guardar.

Agregar regiones

Para garantizar que las reglas de cantidad y el precio basado en el volumen se muestren en todas las versiones traducidas de la tienda online, puedes agregar regiones si agregas las siguientes cadenas de traducción JSON al archivo en.default.json.

Pasos:

  1. Desde el panel de control de Shopify, ve a Tienda online > Themes.

  2. Busca el tema que quieres editar, haz clic en el botón ... para abrir el menú de acciones y luego haz clic en Editar código.

  3. Abre el archivo en.default.json.

  4. Crea una línea nueva al final del archivo y luego agrega el siguiente código:

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