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: