Brinde no carrinho

Neste tutorial, implementaremos a promoção de brinde no carrinho.

HTML

1. Modificaremos o snippet chamado snipplets/cart-panel.tpl. Neste arquivo, utilizaremos o componente privado gift-promotion-progress antes da barra de progresso do frete, para que possamos exibir a nova barra de progresso do brinde.

O código correspondente é o seguinte:

{% set gift_progress_parameters = {
  svg_sprites: false,
  progress_bar_custom_icon: include('snipplets/svg/gift.tpl', {svg_custom_class: 'progress-bar-icon icon-inline icon-w-18 icon-lg svg-icon-accent'}),
  show_check: false,
  progress_bar_classes: {
    container: 'progress-bar',
    title_container: 'progress-bar-title-container',
    title: 'progress-bar-title text-accent h6',
    subtitle: 'progress-bar-subtitle opacity-50',
    track: 'bar-progress',
    fill: 'bar-progress-active transition-soft',
  }
} %}


{{ component('gift-promotion-progress', gift_progress_parameters) }}

Também adicionamos os componentes que utilizamos:

snipplets/svg/gift.tpl

<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 144h-26.1c6.2-12.1 10.1-25.5 10.1-40 0-48.5-39.5-88-88-88-41.6 0-68.5 21.3-103 68.3-34.5-47-61.4-68.3-103-68.3-48.5 0-88 39.5-88 88 0 14.5 3.8 27.9 10.1 40H48c-26.5 0-48 21.5-48 48v128c0 8.8 7.2 16 16 16h16v136c0 22.1 17.9 40 40 40h368c22.1 0 40-17.9 40-40V336h16c8.8 0 16-7.2 16-16V192c0-26.5-21.5-48-48-48zM360 64c30.9 0 56 25.1 56 56s-25.1 56-56 56h-59.6c31.3-45.5 49.4-112 59.6-112zM152 64c10.3 0 28.4 66.5 59.6 112H152c-30.9 0-56-25.1-56-56s25.1-56 56-56zM32 192c0-8.8 7.2-16 16-16h176v128H32V192zm32 160h144v128H72c-4.4 0-8-3.6-8-8V352zm376 128H288V352h160v128c0 4.4-3.6 8-8 8zm40-176H288V176h176c8.8 0 16 7.2 16 16v112z"/></svg>

2. Também modificaremos o snippet snipplets/forms/form-input.tpl para permitir desabilitar os campos de entrada de quantidade do brinde; faremos a seguinte alteração:

<div class="form-group {{ input_group_custom_class }} {% if input_disabled %}form-control-disabled{% endif %}">

E no componente de input:

<input {% if input_disabled %}disabled{% endif %} ... >

3.  Prosseguiremos com as alterações no arquivo snipplets/cart-item-ajax.tpl para indicar que o produto é um brinde.

Primeiro, definimos a variável is_gift

{% set is_gift = item.is_gift %}

Adicionamos o atributo data-gift à div js-cart-item:

<div class="js-cart-item ..." data-gift="{{ is_gift ? 'true' : 'false' }}" ... />

Adicionamos o rótulo de brinde abaixo do nome do produto:

{% if is_gift %}
    <div class="text-accent font-smallest font-weight-bold text-uppercase my-2">
        {{ "Regalo" | translate }}
    </div>
{% endif %}

Adicionamos o atributo input_disabled ao componente form-input da etapa anterior:

{% embed "snipplets/forms/form-input.tpl" with {
    input_disabled: is_gift,
    ...
} %}

Substituímos o componente de div js-cart-item-subtotal-compare-price-container existente pelo seguinte, caso se trate de um brinde:

{% if is_gift %}
    <div class="price-compare font-small opacity-50">{{ item.compare_at_price_subtotal | money }}</div>
    <h6 class="{% if cart_page %}h4-md font-weight-bold{% endif %} mt-1 mb-0">{{ "Gratis" | translate }}</h6>
{% else %}
    <div class="js-cart-item-subtotal-compare-price-container" > ... <div />
    <h6 class="js-cart-item-subtotal ..." ...> ... <h6 />
{% endif %}

E, finalmente, ocultamos o botão de exclusão para que o brinde não possa ser removido:

button type="button" class="... {% if is_gift %}hidden{% endif %}" ... data-component="line-item.remove">

CSS

Requisito:

1. Para que os estilos sejam aplicados corretamente, eles devem ser inseridos no local adequado. Todas as alterações serão feitas no arquivo static/css/style-async.scss.tpl.

Adicionamos o seguinte css

.progress-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.progress-bar-title-container {
  display: flex;
  align-items: center;
  gap: 8px;
}
.progress-bar-title {
  flex: 1;
  min-width: 0;
}
.progress-bar-icon {
  flex-shrink: 0;
}
.progress-bar-subtitle {
  font-size: var(--font-small);
}
.progress-bar-subtitle:not(:has(> :not([style*="display: none"]))) { 
  display: none;
}
.gift-promotion-progress {
  margin-top: 8px;
  margin-bottom: 16px;
}
.form-control-disabled {
  opacity: 0.3;
  pointer-events: none;
}

Traduções

Nesta etapa, adicionamos os textos para tradução no arquivo config/translations.txt:

es "Regalo"
pt "Brinde"
en "Gift"
es_mx "Regalo"

Ativação

Para ativar a funcionalidade, acesse o painel administrativo da loja e vá para a seção Descuentos > Promociones. Em seguida, crie uma nova promoção, configure os parâmetros conforme necessário e salve as alterações.