Este tutorial explica como exibir corretamente promoções do tipo Desconto sobre preços nas lojas.
Pré-requisitos
Antes de começar a implementação, certifique-se de que a loja tenha uma promoção ativa desse tipo.
Por exemplo, na imagem a seguir foi aplicado um desconto de 10% em todos os produtos:
Uma vez configurada, a promoção pode ser exibida automaticamente em vários pontos da loja, desde que o tema contenha os componentes necessários.
Componentes necessários
Incluir o componente labels
Localização:
Arquivo: snipplets/labels.tpl
Este componente é responsável por exibir os rótulos de promoções, frete e estoque. Deve ser incluído com a seguinte configuração:
{% 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 o componente promotions-details
Localização:
Arquivo: snipplets/product/product-form.tpl
Deve ser inserido após o bloco de preço do produto e antes do bloco de parcelamento e formas de pagamento.
...
{# 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 o componente cart-labels
Localização:
Arquivo: snipplets/cart-item-ajax.tpl
Inserir dentro do bloco do nome do item no carrinho:
...
{# 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 o preço unitário de um item do carrinho
Localização:
Arquivos: snipplets/cart-item-ajax.tpl e/ou templates/cart.ptl
Este componente pode não estar presente em todos os temas. No entanto, caso o layout contenha um elemento para exibir o preço unitário de um produto — seja no carrinho AJAX ou na página do carrinho (/comprar) —, devem ser seguidas as instruções abaixo:
- Adicionar a classe CSS:
js-cart-item-unit-price - Incluir o 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 a comparação de preços (preço promocional / riscado)
Localização:
Arquivos: snipplets/cart-item-ajax.tpl e/ou templates/cart.ptl
Este componente também pode não estar implementado em alguns temas. Para incorporá-lo corretamente, siga os passos abaixo:
1. Alteração na lógica do preço de comparação
Substitua esta linha:
{% set compare_at_price = item.product.compare_at_price %}Por esta:
{% set compare_at_price = item.compare_at_price %}2. Componente: preço unitário com comparação
...
{# 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 com comparação
...
{# 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
Com essa configuração, o desconto aplicado (por exemplo, 10% OFF) será exibido corretamente:
- Na listagem de produtos.
- Na página do produto.
- No carrinho AJAX.
- Na página do carrinho (
/comprar).
Isso contribui para uma melhor comunicação das promoções ao longo de toda a experiência de compra do cliente.
