Desconto sobre preços

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.