Visibilidad de descuento en efectivo

En este tutorial vamos a ver cómo mostrar el porcentaje de descuento pagando con el medio de pago personalizado dentro del detalle de producto.

Queremos mostrar el descuento como una promoción destacada, y dentro del modal con las opciones de pago, darle mayor visibilidad e información, haciendo el cálculo de cúal sería el precio final (sin envío) con dicho descuento.

HTML

1. Lo primero que vamos a hacer es agregar el mensaje en el detalle de producto. Vamos a snipplets/payments/installments.tpl  o donde se encuentren los detalles de las cuotas que se ofrecen en tu tienda. Buscamos la siguiente línea:

{% if product_detail and installments_info %}

Y la reemplazamos por:

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

Luego agregamos el siguiente código dentro de los condicionales {% if product %} {% if product.show_installments and product.display_price %} que ya existen en el 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 %}

Con este código, comprobamos que estamos en el detalle del producto y que tenemos un descuento mayor a 0 con el medio de pago personalizado.

2. Después, vamos a agregar el cartel a la pestaña del modal, modificando el snipplet que se encuentra en la misma carpeta snipplets/payments/ y su nombre es payments.tpl.

Vamos a buscar el loop donde se crean las pestañas dentro del elemento <ul class="js-tab-group tab-group"> y vamos a encontrar el condicional que hace referencia a custom_payments is not null. Luego de la etiqueta del nombre {{ custom_payment.name | upper }} agregamos el siguiente código:

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

3. En el mismo tpl donde agregamos el cartel en el punto 2, vamos a buscar el contenido de la 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 %}

Y lo reemplazamos 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:
Tener agregados en tu diseño las clases helpers. Podés seguir este este pequeño tutorial para hacerlo (simplemente es copiar y pegar algunas clases, no toma más de 1 minuto).

1. Agregamos el siguiente SASS de colores en style-colors.scss.tpl (o la hoja de tu diseño que tenga los colores y tipografías de la tienda). Recordá que las variables de colores y tipografías pueden variar respecto a tu diseño:

{# /* // Labels */ #}

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

2. Agregar los estilos dentro del archivo 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;
}

Traducciones

En este paso agregamos los textos para las traducciones en el archivo 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."

Activación

El componente se activa al disponer de un descuento con el medio de pago Personalizado. Dentro de el Administrador Nube , en la sección Configuraciones > Medios de Pago, la opción Personalizado: