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.