Mostrar las reglas de cantidad y los precios por volumen en la tienda

Esta página fue impresa el Apr 25, 2024. Para acceder a la versión actual, por favor visita https://help.shopify.com/es/manual/b2b/theme-code/quantity-pricing.

Las reglas de cantidad para el catálogo B2B se admiten en los temas gratuitos de Shopify, versión 8.0.0 o posterior, y los precios por volumen se admiten en la versión 11.0.0 o posterior. Si deseas mostrar reglas de cantidad y precios por volumen en la tienda, puedes actualizar su tema a la versión más reciente.

Si no deseas cambiar ni actualizar el tema, puedes agregarle el siguiente código para mostrar las reglas de cantidad y los precios por volumen. Antes de actualizar los archivos del tema, asegúrate de duplicarlo para crear una copia de seguridad.

En esta página

Cantidad en el carrito del producto

El valor de la cantidad en el carrito de la variante de producto se puede mostrar en la página de producto o en la sección de producto destacado. Se puede usar Liquid para buscar el valor.

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

Puedes agregar un código a los siguientes archivos de tu tema para admitir 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 > Temas.
  2. Busca el tema que desees editar, haz clic en el botón ... para abrir el menú de acciones y, a continuación, en Editar código.
  3. Abre el archivo que deseas editar.
  4. Crea una nueva línea en la parte inferior 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 Javascript de la cantidad en el carrito

Cuando cambia la cantidad en el carrito de una variante, se debe actualizar el valor que se muestra en la página de producto o en la sección de producto destacado. Se puede usar el código Javascript para buscar el valor actualizado.

Puedes agregar un código al archivo theme.js o equivalente.

Pasos:

  1. Desde el panel de control de Shopify, ve a Tienda online > Temas.
  2. Busca el tema que desees editar, haz clic en el botón ... para abrir el menú de acciones y, a continuación, en Editar código.
  3. Abre el archivo theme.js.
  4. Crea una nueva línea en la parte inferior 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 la variante de producto se pueden mostrar en la página de producto o en la sección de producto destacado. Se puede usar Liquid para buscar las reglas.

Agregar código de Liquid de reglas de cantidad

Puedes agregar un código a los siguientes archivos del tema para admitir 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 > Temas.
  2. Busca el tema que desees editar, haz clic en el botón ... para abrir el menú de acciones y, a continuación, en Editar código.
  3. Abre el archivo que deseas editar.
  4. Crea una nueva línea en la parte inferior 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 Javascript de reglas de cantidad

Cada variante de un producto puede tener su propio conjunto de reglas de cantidad. Después de seleccionar una variante diferente, se deben actualizar las reglas de cantidad que se muestran en una página de producto o en la sección de producto destacado. Se puede usar el código Javascript para buscar el valor actualizado.

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

Pasos:

  1. Desde el panel de control de Shopify, ve a Tienda online > Temas.
  2. Busca el tema que desees editar, haz clic en el botón ... para abrir el menú de acciones y, a continuación, en Editar código.
  3. Abre el archivo theme.js.
  4. Crea una nueva línea en la parte inferior 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.

Fijar precios por volumen

Agregar código Liquid de precios por volumen

Puedes agregar un código a los siguientes archivos del tema para mostrar los precios por volumen:

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

Pasos:

  1. Desde el panel de control de Shopify, ve a Tienda online > Temas.
  2. Busca el tema que desees editar, haz clic en el botón ... para abrir el menú de acciones y, a continuación, en Editar código.
  3. Abre el archivo que deseas editar.
  4. Crea una nueva línea en la parte inferior 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 Javascript de precios por volumen

Puedes agregar un código al siguiente archivo del tema para mostrar los precios por volumen:

  • theme.js

Pasos:

  1. Desde el panel de control de Shopify, ve a Tienda online > Temas.
  2. Busca el tema que desees editar, haz clic en el botón ... para abrir el menú de acciones y, a continuación, en Editar código.
  3. Abre el archivo theme.js.
  4. Crea una nueva línea en la parte inferior 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 se muestren reglas de cantidad y precios por volumen en todas las versiones traducidas de tu tienda online, puedes agregar configuraciones regionales si agregas las siguientes cadenas de traducción JSON a tu archivo en.default.json.

Pasos:

  1. Desde el panel de control de Shopify, ve a Tienda online > Temas.
  2. Busca el tema que desees editar, haz clic en el botón ... para abrir el menú de acciones y, a continuación, en Editar código.
  3. Abre el archivo en.default.json.
  4. Crea una nueva línea en la parte inferior 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.

¿Estás listo/a para comenzar a vender con Shopify?

Prueba gratis