Descontos progressivos

No próximo tutorial, explicamos como adicionar o componente de descontos progressivos, para exibir múltiplos descontos por quantidade em um mesmo produto.

O código neste tutorial inclui:

• Uma tabela para mostrar os descontos progressivos
• O rótulo na imagem do produto para exibir o desconto máximo disponível

HTML

1. No arquivo labels.tpl, vamos modificar o seguinte código para adicionar o rótulo de desconto progressivo na imagem do produto.

<div>{{ product.promotional_offer.selected_threshold.discount_decimal_percentage * 100 }}% OFF</div>
<div class="label-small p-right-quarter p-left-quarter">
  {{ "Comprando {1} o más" | translate(product.promotional_offer.selected_threshold.quantity) }}
</div>

Vamos substituí-lo por este

{% if product.promotional_offer.parameters | length > 1 %}
  <div>
    {{ "Hasta {1}% OFF" | translate(product.promotional_offer.selected_threshold.discount_decimal_percentage * 100) }}
  </div>
  <div class="label-small p-right-quarter p-left-quarter">{{ "Comprando en cantidad" | translate }}</div>
{% else %}
  <div>{{ product.promotional_offer.selected_threshold.discount_decimal_percentage * 100 }}% OFF</div>
  <div class="label-small p-right-quarter p-left-quarter">
    {{ "Comprando {1} o más" | translate(product.promotional_offer.selected_threshold.quantity) }}
  </div>
{% endif %}

 2. No arquivo product/product-form.tpl, vamos procurar o seguinte código

{% for threshold in product.promotional_offer.parameters %}
  <h4 class="mb-2 text-accent"><strong>
    {{ "¡{1}% OFF comprando {2} o más!" | translate(threshold.discount_decimal_percentage * 100, threshold.quantity) }}
  </strong></h4>
{% endfor %}

E substituí-lo por este código

{% if product.promotional_offer.parameters | length > 1 %}
  {{ component('progressive-discounts-table', {
    progressive_discounts_classes: {
      title: 'text-accent mb-3',
      table: 'table mb-2',
      hidden_table: 'table-body-inverted',
      show_more_link: 'btn-link btn-link-primary mb-4',
      show_more_icon: 'icon-inline',
      hide_icon: 'icon-inline icon-flip-vertical',
      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" }),
  }) }}
{% else %}
  {% set threshold = product.promotional_offer.parameters[0] %}
  <h4 class="mb-2 text-accent"><strong>
    {{ "¡{1}% OFF comprando {2} o más!" | translate(threshold.discount_decimal_percentage * 100, threshold.quantity) }}
  </strong></h4>
{% endif %}

CSS

1. Adicionamos o seguinte SASS de cores no arquivo style-colors.scss.tpl (ou na folha de estilo do seu design que contém as cores e tipografias da loja). Lembre-se de que as variáveis de cores e tipografias podem variar de acordo com o seu design:

{# /* // Tables */ #}

.table{
  background-color: $main-background;
  color: $main-foreground;
  tbody{
    tr:nth-child(odd){
      background-color: rgba($main-foreground, .05);
    }
    &.table-body-inverted{
      tr:nth-child(even){
        background-color: rgba($main-foreground, .05);
      }
      tr:nth-child(odd){
        background-color: $main-background;
      }
    }
  }
  th{
    padding: 8px;
    text-align: left;
  }
}

2. Vamos mover os estilos da tabela do arquivo static/style-async.scss.tpl para o arquivo static/style-critical.tpl. Caso o seu design não utilize uma folha de estilo para o CSS crítico, este passo não é necessário.

Apagamos este código de static/style-async.scss.tpl

{# /* // Tables */ #}

.table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  thead{
    th{
      padding: 8px;
      &:first-of-type{
        padding-left: 0;
      }
    }
  }
  td{
    padding: 8px;
    text-align: left;
  }
}

E colamos este em static/style-critical.tpl

{# /* // Tables */ #}

.table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}
.table thead th{
  padding: 8px;
}
.table thead th:first-of-type{
  padding-left: 0;
}
.table td{
  padding: 8px;
  text-align: left;
}

Traduções

Nesta etapa, adicionamos os textos para as traduções no arquivo config/translations.txt 

es "Hasta {1}% OFF"
pt "Até {1}% OFF"
en "Up to {1}% OFF"
es_mx "Hasta {1}% OFF"

es "Comprando en cantidad"
pt "Comprando em quantidade"
en "Buying in quantity"
es_mx "Comprando en cantidad"

Ativação

Pronto! Assim que um desconto progressivo for criado no administrador, ele será aplicado aos produtos na sua loja.