Nuevas opciones de pago personalizado

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.