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:
Archivo: 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>
...Resultado esperado
Con esta configuración, el descuento aplicado (por ejemplo, 10% OFF) se mostrará correctamente:
- En el detalle del producto.
- En el carrito de compras.
Esto ayuda a mejorar la comunicación de promociones en toda la experiencia de compra del cliente.
