Agregar reglas de cantidad a tu tema de Shopify

Esta página fue impresa el Jun 03, 2023. Para acceder a la versión actual, por favor visita https://help.shopify.com/es/manual/b2b/catalogs/code.

Las reglas de cantidad para el catálogo B2B se admiten solo en los temas gratuitos de Shopify, versión 8.0.0 o posterior. Si no deseas cambiar o actualizar el tema, puedes agregarle el siguiente código para mostrar las reglas de cantidad.

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 tu panel de control de Shopify, ve a Tienda online > Temas.

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

  1. Desde la app de Shopify, toca Tienda.

  2. En la sección Canales de ventas, selecciona Tienda online.

  3. Toca Administrar temas.

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

  1. Desde la app de Shopify, toca Tienda.

  2. En la sección Canales de ventas, selecciona Tienda online.

  3. Toca Administrar temas.

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

  1. Abre el archivo que deseas editar.
  2. 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 }}">
    {%- assign cart_qty = cart | item_count_for_variant: product.selected_or_first_available_variant.id -%}
    {{- '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 tu panel de control de Shopify, ve a Tienda online > Temas.

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

  1. Desde la app de Shopify, toca Tienda.

  2. En la sección Canales de ventas, selecciona Tienda online.

  3. Toca Administrar temas.

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

  1. Desde la app de Shopify, toca Tienda.

  2. En la sección Canales de ventas, selecciona Tienda online.

  3. Toca Administrar temas.

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

  1. Abre el archivo theme.js.
  2. 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 en tu tema para admitir la cantidad en el carrito del producto:

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

Pasos:

  1. Desde tu panel de control de Shopify, ve a Tienda online > Temas.

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

  1. Desde la app de Shopify, toca Tienda.

  2. En la sección Canales de ventas, selecciona Tienda online.

  3. Toca Administrar temas.

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

  1. Desde la app de Shopify, toca Tienda.

  2. En la sección Canales de ventas, selecciona Tienda online.

  3. Toca Administrar temas.

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

  1. Abre el archivo que deseas editar.
  2. 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 tu panel de control de Shopify, ve a Tienda online > Temas.

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

  1. Desde la app de Shopify, toca Tienda.

  2. En la sección Canales de ventas, selecciona Tienda online.

  3. Toca Administrar temas.

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

  1. Desde la app de Shopify, toca Tienda.

  2. En la sección Canales de ventas, selecciona Tienda online.

  3. Toca Administrar temas.

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

  1. Abre el archivo theme.js.
  2. 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.

Agregar regiones

Agregar cadenas de traducción JSON

Pasos:

  1. Desde tu panel de control de Shopify, ve a Tienda online > Temas.

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

  1. Desde la app de Shopify, toca Tienda.

  2. En la sección Canales de ventas, selecciona Tienda online.

  3. Toca Administrar temas.

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

  1. Desde la app de Shopify, toca Tienda.

  2. En la sección Canales de ventas, selecciona Tienda online.

  3. Toca Administrar temas.

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

  1. Abre el archivo en.default.json.
  2. Crea una nueva línea en la parte inferior del archivo y luego agrega el siguiente código: 
{
   "products":{
      "quantity":{
         "minimum_of":"Minimum of ",
         "maximum_of":"Maximum of ",
         "multiples_of":"Increments of ",
         "in_cart": " in cart"
      }
   }
}
  1. Haz clic en Guardar.

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

Prueba gratis