En este tutorial vamos a agregar en la tienda la visualización de la funcionalidad de múltiples pagos personalizados, que permite diferenciar diferentes formas de pago como “Depósito Bancario”, “Transferencia”, “A convenir / Efectivo” y “Pix” con descuentos independientes.
HTML
1. Lo primero que vamos a hacer es buscar en la carpeta snipplets/payments el archivo llamado installments.tpl, donde tenemos que reemplazar el siguiente código:
{% if product %}
{# Product installments #}
{% if product.show_installments and product.display_price %}
{% set installments_info_base_variant = product.installments_info %}
{% set installments_info = product.installments_info_from_any_variant %}
{# If product detail installments, include container with "see installments" link #}
{% if product_detail and ( installments_info or custom_payment.discount > 0 ) %}
<div data-toggle="#installments-modal" data-modal-url="modal-fullscreen-payments" class="js-modal-open js-fullscreen-modal-open js-product-payments-container mb-2" {% if (not product.get_max_installments) and (not product.get_max_installments(false)) %}style="display: none;"{% endif %}>
{% endif %}
{# Cash discount #}
{% if product_detail and custom_payment.discount > 0 %}
<div class="text-center text-md-left mb-2">
<span><strong class="text-accent">{{ custom_payment.discount }}% {{'de descuento' | translate }}</strong> {{'pagando con' | translate }} {{ custom_payment.name }}</span>
</div>
{% endif %}Por este:
{% if product %}
{% set hasDiscount = product.maxPaymentDiscount.value > 0 %}
{# Product installments #}
{% if product.show_installments and product.display_price %}
{% set installments_info_base_variant = product.installments_info %}
{% set installments_info = product.installments_info_from_any_variant %}
{# If product detail installments, include container with "see installments" link #}
{% if product_detail and ( installments_info or hasDiscount ) %}
<div data-toggle="#installments-modal" data-modal-url="modal-fullscreen-payments" class="js-modal-open js-fullscreen-modal-open js-product-payments-container mb-2" {% if (not product.get_max_installments) and (not product.get_max_installments(false)) %}style="display: none;"{% endif %}>
{% endif %}
{# Max Payment Discount #}
{% if product_detail and hasDiscount %}
<div class="text-center text-md-left mb-2">
<span><strong class="text-accent">{{ product.maxPaymentDiscount.value }}% {{'de descuento' | translate }}</strong> {{'pagando con' | translate }} {{ product.maxPaymentDiscount.paymentProviderName }}</span>
</div>
{% endif %}Con esto conseguimos normalizar los descuentos específicos para cada medio de pago.
2. Luego vamos a crear el archivo que va a mostrar las nuevas opciones de pago dentro de la carpeta snipplets/payments con el nombre payment-methods-info.tpl y el siguiente contenido:
{% macro paymentMethodsInfo(paymentProvider, product) %}
{% for paymentMethod in paymentProvider.supported_payment_methods %}
{% set hasDiscount = paymentMethod.discount > 0 %}
{# Payment Method Title #}
<h4 class="mb-2">{{ paymentMethod.name }}</h4>
<div id="info-payment-method-{{ paymentMethod.id }}" class="box">
{# Payment Method Discount #}
{% if hasDiscount %}
<div class="mb-3">
<span><strong>{{ paymentMethod.discount }}% {{'de descuento' | translate }}</strong> {{'pagando con' | translate }} {{ paymentMethod.name }}</span>
</div>
{% endif %}
{# Payment Method Logos #}
<div>
{% for logo in paymentMethod.logos %}
<span>
<img src="{{ 'images/empty-placeholder.png' | static_url }}" data-src="{{ logo | payment_new_logo }}" class="lazyload card-img card-img-medium card-img-big-md" alt="">
</span>
{% endfor %}
</div>
{# Payment Method Total #}
<h4 class="font-weight-normal mb-0">
<span>{{ 'Total:' | translate }}</span>
{% if hasDiscount %}
{% set priceWithDiscount = product.price - ((product.price * paymentMethod.discount) / 100) %}
<span class="price-compare ">{{ product.price | money }}</span>
<strong class="js-installments-one-payment h3 weight-strong text-primary">{{ priceWithDiscount | money }}</strong>
{% else %}
<strong class="js-installments-one-payment">{{ product.price | money }}</strong>
{% endif %}
</h4>
{% if hasDiscount %}
<div class="font-small mt-1">{{'El descuento será aplicado sobre el costo total de la compra (sin envío) al finalizar la misma.' | translate }}</div>
{% endif %}
</div>
{% endfor %}
{% endmacro %}3. Ahora vamos a llamar y utilizar el archivo creado en el lugar correspondiente. Buscamos en la carpeta snipplets/payments el archivo llamado payments-info-banks.tpl, y agregamos al principio esta línea de código:
{% from 'snipplets/payments/payment-methods-info.tpl' import paymentMethodsInfo %}Y al final del mismo archivo agregar lo siguiente:
{# Supported Payment Methods #}
{{ paymentMethodsInfo(gateways, product) }}4. Luego vamos a hacer lo mismo buscando en la carpeta snipplets/payments el archivo payments-info.tpl agregando en la primer linea este código:
{% from 'snipplets/payments/payment-methods-info.tpl' import paymentMethodsInfo %}Y vamos a reemplazar el siguiente código:
{# Supported Payment Methods #}
{% if installments_data['supported_payment_methods'] %}
{% for paymentMethod in installments_data['supported_payment_methods'] %}
{# Payment Method Title #}
<h6 class="mb-1">{{ paymentMethod.name }}</h6>
<div id="info-payment-method-{{ paymentMethod.id }}" class="box">
{# Payment Method Logos #}
<div>
{% for logo in paymentMethod.logos %}
<span>
<img src="{{ 'images/empty-placeholder.png' | static_url }}" data-src="{{ logo | payment_new_logo }}" class="lazyload card-img card-img-medium">
</span>
{% endfor %}
</div>
{# Payment Method Total #}
<h4 class="font-weight-normal mb-0">
<span>{{ 'Total:' | translate }}</span><strong class="js-installments-one-payment">{{ product.price | money }}</strong>
</h4>
</div>
{% endfor %}
{% endif %}Por este:
{# Supported Payment Methods #}
{{ paymentMethodsInfo(installments_data, product) }}5. El último cambio lo vamos a hacer para mostrar los descuentos en el modal de medios de pago, para lo que tenemos que buscar en la carpeta snipplets/payments el archivo payments.tpl y agregar luego de esta línea de código:
{% set method_clean = method | replace(" ", "_") | lower %}Esta otra:
{% set maxDiscount = payment_methods_config[method].max_discount %}En el mismo archivo vamos a reemplazar este código:
<a href="#installment_{{ method_clean }}_{{ installment }}" class="js-tab-link tab-link">{{ method == 'paypal_multiple' ? 'PAYPAL' : (method == 'itaushopline'? 'ITAU SHOPLINE' : method == 'boleto_paghiper'? 'BOLETO PAGHIPER' : method | upper) }}</a>Por el siguiente:
<a href="#installment_{{ method_clean }}_{{ installment }}" class="js-tab-link tab-link">
{{ payment_methods_config[method].name | upper }}
{% if maxDiscount > 0 %}
{% set hasGeneralDiscount = payment_methods_config[method].has_general_discount %}
<span class="label label-small label-accent ml-1">
<strong>{% if not hasGeneralDiscount %}{{'Hasta' | translate }} {% endif %}{{ maxDiscount }}% {{'OFF' | translate }}</strong>
</span>
{% endif %}
</a>Activación
Una vez aplicados todos los cambios en tu código, vas a poder activar la funcionalidad para que tus clientes puedan ver los nuevos medios de pago personalizados ingresando al siguiente link, reemplazando donde dice “tutienda.mitiendanube.com” por la URL de tu tienda:
https://tutienda.mitiendanube.com/admin/themes/?activate-new-payments-info=true
Recordá que tenés que estar logueado en el Administrador Nube para realizar la activación.