Visibilidade do desconto com pagamento personalizado

Neste tutorial, veremos como mostrar a porcentagem de desconto pagando com o método de pagamento personalizado nos detalhes do produto.

Queremos mostrar o desconto como uma promoção extraordinária e, dentro do modal com as opções de pagamento, proporcionar maior visibilidade e informações, calculando qual seria o preço final (sem frete) com o referido desconto.

HTML

1. A primeira coisa que vamos fazer é adicionar a mensagem no detalhe do produto. Vamos para snipplets/payments/installments.tpl  ou onde estão os detalhes das taxas oferecidas em sua loja. Procuramos a seguinte linha:

{% if product_detail and installments_info %}

E substituí-la por:

{% if product_detail and ( installments_info or custom_payment.discount > 0 ) %}

Em seguida, adicionamos o código abaixo nas condicionais {% if product %} {% if product.show_installments and product.display_price %} que já existem no tpl:

{# Cash discount #}

{% if product_detail and custom_payment.discount > 0 %}
   <div class="text-center text-md-left mb-2">
      <span><strong>{{ custom_payment.discount }}% {{'de descuento' | translate }}</strong> {{'pagando con' | translate }} {{ custom_payment.name }}</span>
   </div>
{% endif %}

Com esse código, verificamos que estamos nos detalhes do produto e que temos um desconto maior que 0 com o meio de pagamento personalizado.

2. Depois, adicionaremos a label à tab do modal, modificando o snipplet que está na mesma pasta de snipplets/payments/ e seu nome é payments.tpl.

Vamos procurar o loop em que as tabs são criadas dentro do elemento <ul class="js-tab-group tab-group">  e encontraremos o condicional que se refere a custom_payments is not null. Apósda tag do nome {{ custom_payment.name | upper }} adicione o seguinte código:

{% if custom_payment.discount > 0 %}
     <span class="label label-primary ml-1"><strong>{{ custom_payment.discount }}% {{'OFF' | translate }}</strong></span>
{% endif %}

3. No mesmo tpl em que adicionamos a label no ponto 2, procuraremos o conteúdo da tab:

{# Custom method instructions #}
<h6 class="mb-1">{{ 'Cuando termines la compra vas a ver la información de pago en relación a esta opción.' | translate }}</h6>
    
{# Price total #}
<h4 class="mb-1 font-weight-normal">
   <span>{{ 'Total:' | translate }}</span><strong class="js-installments-one-payment">{{ product.price | money }}</strong>
</h4>

{% if custom_payment.discount > 0 %}
   <div> {{ custom_payment.name }}: {{ 'tiene un' | translate }} <strong>{{ custom_payment.discount }}% {{'de descuento' | translate }}</strong> {{'que será aplicado sobre el costo total de la compra al finalizar la misma.' | translate }}</div>
{% endif %}

E substituí-lo por:

{# Custom method instructions #}
   <h6 class="mb-2">{{ 'Cuando termines la compra vas a ver la información de pago en relación a esta opción.' | translate }}</h6>

{% if custom_payment.discount > 0 %}
   <div class="mb-1">
      <span><strong>{{ custom_payment.discount }}% {{'de descuento' | translate }}</strong> {{'pagando con' | translate }} {{ custom_payment.name }}</span>
   </div>
{% endif %}

{# Price total #}
<h4 class="mb-1 font-weight-normal">
   <span>{{ 'Total:' | translate }}</span>
   {% if custom_payment.discount > 0 %}
      {% set price_with_discount = product.price - ((product.price * custom_payment.discount) / 100) %}
      <span class="price-compare">{{ product.price | money }}</span>
      <strong class="js-installments-one-payment h3 text-brand">{{ price_with_discount | money }}</strong> 
   {% else %} 
      <strong class="js-installments-one-payment ml-3">{{ product.price | money }}</strong>
   {% endif %}
</h4>

{% if custom_payment.discount > 0 %}
   <div class="mt-3">{{'El descuento será aplicado sobre el costo total de la compra al finalizar la misma.' | translate }}</div>
{% endif %}

CSS

Requisito:

Ter adicionado helper classes em seu layout. Você pode seguir este pequeno tutorial para fazer isso (é só copiar e colar algumas classes, não leva mais que 1 minuto).

1.  Adicionamos o seguinte SASS de cores em style-colors.scss.tpl (ou no stylesheet do seu layout que possui as cores e fontes da loja). Lembre-se de que as variáveis de cores e fontes podem variar em relação ao seu layout:

{# /* // Labels */ #}

.label {
  background: darken($main-background, 1%);
  &.label-primary{
    background: $main-foreground;
    color: $main-background;
  }
}

2. Adicione os estilos no arquivo static/style-critical.tpl

{# /* // Labels */ #}

.labels {
  position: absolute;
  top: 0;
  z-index: 9;
}
.label {
  margin-bottom: 10px;
  padding: 5px 10px; 
  font-size: 12px;
  text-align: left;
}

Traduções

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

es "pagando con"
pt "pagando com"
en "paying with"
es_mx "pagando con"

es "El descuento será aplicado sobre el costo total de la compra al finalizar la misma."
pt "O desconto será aplicado aplicado sobre o custo total da compra ao finalizá-la."
en "The discount will be applied over the total cost of the order when the checkout process is finished."
es_mx "El descuento será aplicado sobre el costo total de la compra al finalizar la misma."

Ativação

O componente é ativado com um desconto no método de pagamento personalizado. No Administrator Nuvem, na seção Configurações> Formas de pagamento, a opção Personalizada: