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>

...

Resultado esperado

Com essa configuração, o desconto aplicado (por exemplo, 10% OFF) será exibido corretamente:

• Na página do produto.
• No carrinho de compras.

Isso contribui para uma melhor comunicação das promoções ao longo de toda a experiência de compra do cliente.