Este tutorial explica cómo mostrar correctamente promociones del tipo Descuento sobre precios en las tiendas.
Requisitos previos
Antes de comenzar con la implementación, asegurate de que la tienda tenga una promoción activa de este tipo.
Por ejemplo, en la imagen siguiente se aplicó un 10% de descuento a todos los productos:
Una vez configurada, el descuento se puede mostrar automáticamente en varios puntos de la tienda si el tema cuenta con los componentes adecuados.
Componentes necesarios
Incluir el componente labels
Ubicación:
Archivo: snipplets/labels.tpl
Este componente se encarga de mostrar los labels de promociones, envíos y stock. Se debe importar con la siguiente configuración:
{% set label_accent_classes = 'label label-accent' %}
{% set label_default_classes = 'label label-default' %}
{{ component(
'labels', {
prioritize_promotion_over_offer: true,
promotion_quantity_long_wording: true,
promotion_nxm_long_wording: false,
labels_classes: {
group: 'js-labels-floating-group',
promotion: label_accent_classes,
promotion_primary_text: 'd-block',
offer: 'js-offer-label ' ~ label_accent_classes,
shipping: 'label label-secondary',
no_stock: 'js-stock-label ' ~ label_default_classes,
},
})
}}Incluir el componente promotions-details
Ubicación:
Archivo: snipplets/product/product-form.tpl
Colocar después del bloque de precio del producto y antes del bloque de cuotas y métodos de pago.
...
{# Product price #}
<div class="price-container text-center text-md-left" data-store="product-price-{{ product.id }}">
<span class="d-inline-block mb-2">
<h4 id="compare_price_display" class="js-compare-price-display price-compare mb-0" {% if not product.compare_at_price or not product.display_price %}style="display:none;"{% else %} style="display:block;"{% endif %}>{% if product.compare_at_price and product.display_price %}{{ product.compare_at_price | money }}{% endif %}</h4>
</span>
<span class="d-inline-block">
<h4 class="js-price-display mb-0" id="price_display" {% if not product.display_price %}style="display:none;"{% endif %} data-product-price="{{ product.price }}">{% if product.display_price %}{{ product.price | money }}{% endif %}</h4>
</span>
{{ component('price-without-taxes', {
container_classes: "mb-2 font-small opacity-60",
})
}}
{{ component('payment-discount-price', {
visibility_condition: settings.payment_discount_price,
location: 'product',
container_classes: "h6 text-accent mb-3",
})
}}
</div>
{{ component('promotions-details', {
promotions_details_classes: {
container: 'js-product-promo-container text-center text-md-left mb-4',
promotion_title: 'h4 mb-2 text-accent',
valid_scopes: 'mb-0',
categories_combinable: 'mb-0',
not_combinable: 'font-small mb-0',
progressive_discounts_table: 'table mb-2 mt-3',
progressive_discounts_hidden_table: 'table-body-inverted',
progressive_discounts_show_more_link: 'btn-link btn-link-primary mb-4',
progressive_discounts_show_more_icon: 'icon-inline',
progressive_discounts_hide_icon: 'icon-inline icon-flip-vertical',
progressive_discounts_promotion_quantity: 'font-weight-light text-lowercase'
},
svg_sprites: false,
custom_control_show: include("snipplets/svg/chevron-down.tpl", { svg_custom_class: "icon-inline icon-w-14 icon-md ml-2" }),
custom_control_hide: include("snipplets/svg/chevron-up.tpl", { svg_custom_class: "icon-inline icon-w-14 icon-md ml-2" }),
}) }}
{# Product installments #}
... Incluir el componente cart-labels
Ubicación:
Archivos: snipplets/cart-item-ajax.tpl
Insertar dentro del bloque del nombre del producto en el carrito:
...
{# Cart item name #}
<div class="{% if cart_page %}row align-items-center{% else %}w-100{% endif %}">
<h6 class="font-weight-normal {% if cart_page %}col-12 col-md-6 h4-md mb-2 mb-md-0{% else %}cart-item-name mb-0{% endif %}" data-component="line-item.name">
<a href="{{ item.url }}" data-component="name.short-name">
{{ item.short_name }}
</a>
<small data-component="name.short-variant-name">{{ item.short_variant_name }}</small>
{{ component(
'cart-labels', {
group: true,
labels_classes: {
group: 'mt-2',
label: 'd-inline-block label label-secondary font-smallest mb-1 mr-1',
shipping: 'label-secondary',
promotion: 'label-accent',
},
})
}}
</h6>
...Mostrar el precio unitario de un ítem del carrito
Ubicación:
Archivos: snipplets/cart-item-ajax.tpl y/o templates/cart.ptl
Este componente puede no estar presente en todos los themes. Sin embargo, si el layout cuenta con un elemento para mostrar el precio unitario de un producto, ya sea en el carrito AJAX o en la página del carrito (/comprar), se deben seguir estas indicaciones:
- Agregar la clase CSS:
js-cart-item-unit-price - Incluir el atributo:
data-line-item-id="{{ item.id }}"
...
{# Cart item unit price #}
<span class="js-cart-item-unit-price cart-item-subtotal-short col-2 text-center d-none d-md-block" data-line-item-id="{{ item.id }}">{{ item.unit_price | money }}</span>
...Mostrar la comparación de precios (precio tachado / promocional)
Ubicación:
Archivo: snipplets/cart-item-ajax.tpl y/o templates/cart.ptl
Este componente también puede no estar implementado en algunos themes. Para incorporarlo correctamente, se deben hacer los siguientes ajustes:
1. Cambio en la lógica del precio de comparación
Reemplazar esta línea:
{% set compare_at_price = item.product.compare_at_price %}Por esta otra:
{% set compare_at_price = item.compare_at_price %}2. Componente: precio unitario con comparación
...
{# Cart item unit price #}
<div class="cart-item-subtotal-short col-2 mb-0 {% if not compare_at_price %}mt-2{% endif %} text-center font-weight-normal d-none d-md-block">
<div class="js-cart-item-unit-price-compare-price-container" data-line-item-id="{{ item.id }}"{% if not compare_at_price %} style="display: none"{% endif %}>
<span class="text-accent font-small font-weight-bold mr-1">-{{ item.product.promotional_price_percentage | round }}%</span>
<span class="js-cart-item-unit-price-compare-price price-compare font-small opacity-50 mr-0" data-line-item-id="{{ item.id }}" data-component="compare_price.value" data-component-value='{{ compare_at_price | money }}'>{{ compare_at_price | money }}</span>
</div>
<div class="js-cart-item-unit-price h4 font-weight-normal {% if compare_at_price %}mt-1{% endif %}" data-line-item-id="{{ item.id }}">{{ item.unit_price | money }}</div>
</div>
...3. Componente: subtotal con comparación
...
{# Cart item subtotal #}
<div class="{% if cart_page %}col col-md-2 text-right text-md-center mb-0{% else %}cart-item-subtotal{% endif %} {% if cart_page and not item.compare_at_price_subtotal %}mt-2{% elseif item.compare_at_price_subtotal %}m-0{% endif %}">
<div class="js-cart-item-subtotal-compare-price-container" data-line-item-id="{{ item.id }}"{% if not item.compare_at_price_subtotal %} style="display: none"{% endif %}>
<span class="text-accent font-small font-weight-bold mr-1">-{{ item.product.promotional_price_percentage | round }}%</span>
<span class="js-cart-item-subtotal-compare-price price-compare font-small opacity-50 mr-0" data-line-item-id="{{ item.id }}" data-component="subtotal_compare_price.value" data-component-value='{{ item.compare_at_price_subtotal | money }}'>{{ item.compare_at_price_subtotal | money }}</span>
</div>
<div class="js-cart-item-subtotal {% if cart_page %}h5 h4-md{% else %}h6{% endif %} {% if item.compare_at_price_subtotal %}mt-1{% endif %}" data-line-item-id="{{ item.id }}" data-component="subtotal.value" data-component-value='{{ item.subtotal | money }}'>{{ item.subtotal | money }}</div>
</div>
...Resultado esperado
Con esta configuración, el descuento aplicado (por ejemplo, 10% OFF) se mostrará correctamente:
- En el listado de productos.
- En la página del producto.
- En el carrito de compras AJAX.
- En la página del carrito (
/comprar).
Esto ayuda a mejorar la comunicación de promociones en toda la experiencia de compra del cliente.
