Información de medios de pago y cuotas

En este tutorial, vemos cómo agregar visibilidad sobre medios de pago y cuotas en tu diseño:

El código en este tutorial incluye:

  • Cuotas en el listado de productos, el detalle del producto y el carrito (solo aplica en tiendas de Brasil)
  • Modal que muestra el detalle de los medios de pago ofrecidos por la tienda

Item del listado de productos


Formulario en el detalle de productos


Modal del detalle de medios de pago para Mercado Pago


El mismo modal solo que mostrando medios de pago por fuera de Mercado Pago, por ejemplo PayPal.

HTML

Lo primero que vamos a hacer es crear los tpls necesarios para la funcionalidad.

1. Agregamos la carpeta con el nombre payments dentro de la carpeta snipplets 

2. Dentro de esta carpeta creamos los siguientes archivos, cada uno con su respectivo código. Es importante mantener los IDs y las clases “js-...” para garantizar su funcionamiento cuando agreguemos el JavaScript.

Installments.tpl

Este archivo lo usamos para mostrar la mejor opción de cuotas tanto en el detalle del producto como en el listado y en el carrito de compras (solo en tiendas de Brasil).

Antes de ver el código vamos a repasar algunos condicionales:

  • {% if product %} lo usamos al incluir el snipplet para mostrar cuotas de un producto específico o cuotas debajo del total del carrito (solo en tiendas de Brasil)
  • {% if product_detail %} define si vamos a usar el código para las cuotas en el detalle del producto o en el listado. De esta forma podemos agregar clases “js-...” o “IDs” para actualizar las cuotas usando JavaScript cuando el usuario cambia las variantes.
  • {% if store.country == 'AR' %} o {% if store.country == BR %} sirve para mostrar las cuotas de forma distinta dependiendo a cada país.

El código de este tpl es el siguiente:

{% 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 %}
      <div data-toggle="#installments-modal" class="js-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 %}

    {% set product_can_show_installments = product.show_installments and product.display_price and product.get_max_installments.installment > 1 %}

    {% if product_can_show_installments %}

      {# If NOT product detail, just include installments alone without link or container #}
      <div class="{% if product_detail %}js-max-installments-container js-max-installments text-center text-md-left{% else %}item-installments{% endif %}">
        {% set max_installments_without_interests = product.get_max_installments(false) %}
        {% set max_installments_with_interests = product.get_max_installments %}
        {% if store.country == 'AR' %}
          {% if max_installments_with_interests %}
            <div>{{ "Hasta <strong class='installment-amount'>{1}</strong> cuotas" | t(max_installments_with_interests.installment, max_installments_with_interests.installment_data.installment_value_cents | money) }}</div>
          {% else %}
            <div style="display: none;">
            {% if product.max_installments_without_interests %}
              {{ "Hasta <strong class='js-installment-amount installment-amount'>{1}</strong> cuotas sin interés" | t(null, null) }}
            {% else %}
              {{ "Hasta <strong class='js-installment-amount installment-amount'>{1}</strong> cuotas sin interés" | t(null, null) }}
            {% endif %}
            </div>
          {% endif %}
        {% else %}
            {% if max_installments_without_interests and max_installments_without_interests.installment > 1 %}
              <div class="js-max-installments">{{ "<strong class='js-installment-amount installment-amount'>{1}</strong> cuotas sin interés de <strong class='js-installment-price installment-price'>{2}</strong>" | t(max_installments_without_interests.installment, max_installments_without_interests.installment_data.installment_value_cents | money) }}</div>
            {% else %}
              {% set max_installments_with_interests = product.get_max_installments %}
              {% if max_installments_with_interests %}
                <div class="js-max-installments">{{ "<strong class='js-installment-amount installment-amount'>{1}</strong> cuotas de <strong class='js-installment-price installment-price'>{2}</strong>" | t(max_installments_with_interests.installment, max_installments_with_interests.installment_data.installment_value_cents | money) }}</div>
              {% else %}
                <div class="js-max-installments" style="display: none;">
                  {% if product.max_installments_without_interests %}
                    {{ "<strong class='js-installment-amount installment-amount'>{1}</strong> cuotas sin interés de <strong class='js-installment-price installment-price'>{2}</strong>" | t(null, null) }}
                  {% else %}
                    {{ "<strong class='js-installment-amount installment-amount'>{1}</strong> cuotas de <strong class='js-installment-price installment-price'>{2}</strong>" | t(null, null) }}
                  {% endif %}
                </div>
              {% endif %}
            {% endif %}
        {% endif %}
      </div>
    {% endif %}

    {% if product_detail and installments_info %}
      <div class="form-row align-items-center align-items-start-md mb-4">
        {% set has_payment_logos = settings.payments %}
        {% if has_payment_logos %}
          <ul class="list-inline col col-md-auto text-center text-md-left mb-1">
            {% for payment in settings.payments %}
                {# Payment methods flags #}
                {% if store.country == 'BR' %}
                  {% if payment in ['visa', 'mastercard'] %}
                    <li>     
                      {{ payment | payment_new_logo | img_tag('',{class: 'card-img card-img-small lazyload'}) }}
                    </li>
                  {% endif %}
                {% else %}
                    {% if payment in ['visa', 'amex', 'mastercard'] %}
                      <li>
                        {{ payment | payment_new_logo | img_tag('',{class: 'card-img card-img-small lazyload'}) }}
                      </li>
                    {% endif %}
                {% endif %}
            {% endfor %}
              <li>
                {% include "snipplets/svg/credit-card-blank.tpl" with {svg_custom_class: "icon-inline icon-w-18 icon-2x svg-icon-text"} %}
              </li>
          </ul>
        {% endif %}
        <div class="col-12 col-md-auto text-center">
          <a id="btn-installments" class="btn-link" {% if (not product.get_max_installments) and (not product.get_max_installments(false)) %}style="display: none;"{% endif %}>
            {% set store_set_for_new_installments_view = store.is_set_for_new_installments_view %}
            {% if store_set_for_new_installments_view %}
                {{ "Ver medios de pago" | translate }}
            {% else %}
                {{ "Ver el detalle de las cuotas" | translate }}
            {% endif %}
          </a>
        </div>
      </div>
    </div>
    {% endif %}  
  {% endif %}
{% else %}

  {# Cart installments #}
  
  {% if store.country == 'BR' %}
  {% if cart.installments.max_installments_without_interest > 1 %}
    {% set installment =  cart.installments.max_installments_without_interest  %}
    {% set total_installment = cart.total %}
    {% set interest = false %}
    {% set interest_value = 0 %}
  {% else %}
    {% set installment = cart.installments.max_installments_with_interest  %}
    {% set total_installment = (cart.total * (1 + cart.installments.interest)) %}
    {% set interest = true %}
    {% set interest_value = cart.installments.interest %}
  {% endif %}
  <div {% if installment < 2 %} style="display: none;" {% endif %} data-interest="{{ interest_value }}" data-cart-installment="{{ installment }}" class="js-installments-cart-total text-right"> 
    {{ 'O hasta' | translate }}
    <span class="js-cart-installments-amount">{{ installment }}</span> 
    {{ 'cuotas de' | translate }} 
    <span class="js-cart-installments">{{ (total_installment / installment) | money }}</span> 
    <span {% if interest == true %} style="display: none;" {% endif %}class="js-installments-type-interest">{{ 'sin interés' | translate}}</span>
  </div>
  {% endif %}
{% endif %}

payments.tpl 

En este archivo tenemos el componente del modal que incluimos usando un embed (más adelante vamos a crear este componente para evitar errores).

Dentro del modal están las tabs que sirven para que el usuario pueda ver las distintas alternativas de pago con cada medio: Mercado Pago, PayPal, Todo Pago, etc.

También está el llamado a los dos snipplets que describimos más abajo: payments-info.tpl y payments-info-banks.tpl

Todo lo que está por fuera de {% if store_set_for_new_installments_view %} muestra un listado de cuotas para tiendas que no son Argentinas o Brasileras.

{% set installments_info_base_variant = product.installments_info %}
{% set installments_info = product.installments_info_from_any_variant %}
{% if installments_info %}
{% set gateways = installments_info | length %}
{% set store_set_for_new_installments_view = store.is_set_for_new_installments_view %}


    {% embed "snipplets/modal.tpl" with{modal_id: 'installments-modal', modal_position: 'bottom', modal_transition: 'slide', modal_header: true, modal_footer: true, modal_width: 'centered'  } %}
        {% block modal_head %}
            {{'Medios de pago' | translate }}
        {% endblock %}
        {% block modal_body %}


            {# Modal header and gateways tab links #}


            <div class="js-tab-container">
                <ul class="js-tab-group tab-group">
                    {% for method, installments in installments_info %}
                        <li id="method_{{ method }}" class="js-refresh-installment-data js-installments-gw-tab js-tab tab {% if loop.first %} active {% endif %}" data-code="{{ method }}">
                            <a href="#installment_{{ method }}_{{ installment }}" class="js-tab-link tab-link">{{ method == 'paypal_multiple' ? 'PAYPAL' : (method == 'itaushopline'? 'ITAU SHOPLINE' : method == 'boleto_paghiper'? 'BOLETO PAGHIPER' : method | upper) }}</a>
                        </li>


                        {# Custom payment method #}


                        {% if loop.last and custom_payment is not null %}
                            <li id="method_{{ custom_payment.code }}" class="js-refresh-installment-data js-installments-gw-tab js-tab tab" data-code="{{ custom_payment.code }}">
                                <a href="#installment_{{ custom_payment.code }}" class="js-tab-link tab-link">{{ custom_payment.name | upper }}</a>
                            </li>
                        {% endif %}
                    {% endfor %}
                </ul>


                {# Gateways tab content #}


                <div class="js-tabs-content tab-content">
                    {% for method, installments in installments_info %}
                        {% set discount = product.get_gateway_discount(method) %}
                        <div id="installment_{{ method }}_" class="js-tab-panel tab-panel {% if loop.first %} active {% endif %} js-gw-tab-pane">
                            <div>


                                {% if store_set_for_new_installments_view %}


                                    {# Payments info with readonly #}


                                    {% if method == 'mercadopago' and store.country == 'AR' %}


                                        {# Payments Gateways with banks: at the moment only MP AR #}


                                        {% include 'snipplets/payments/payments-info-banks.tpl' %}
                                    {% else %}


                                        {# Payments Gateways with cards only #}


                                        {% include 'snipplets/payments/payments-info.tpl' %}
                                    {% endif %}    


                                {% else %}


                                    {# Installments list for ROLA stores #}


                                    {% for installment, data_installment in installments %}
                                        <div id="installment_{{ method }}_{{ installment }}">
                                            {% set rounded_installment_value = data_installment.installment_value | round(2) %}
                                            {% set total_value = (data_installment.without_interests ? data_installment.total_value : installment * data_installment.installment_value) %}
                                            {% set total_value_in_cents = total_value  | round(2) * 100 %}
                                            <strong class="js-installment-amount">{{ installment }}</strong> {% if store.country != 'BR' %}cuota{% if installment > 1 %}s{% endif %} de{% else %}x{% endif %} <strong class="js-installment-price">{{ (rounded_installment_value * 100) | money }}</strong>
                                            {% if data_installment.without_interests %} {{ 'sin interés' | t }}{% endif %}
                                        </div>
                                    {% endfor %}


                                {% endif %}
                            </div>
                        </div>


                        {# Custom payment method #}


                        {% if loop.last and custom_payment is not null %}
                            <div class="js-tab-panel tab-panel js-gw-tab-pane" id="installment_{{ custom_payment.code }}">
                                <div class="box">


                                    {# 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 %}
                                
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </div>
            
        {% endblock %}
        {% block modal_foot %}
            <div class="text-right">
                <span class="js-modal-close btn-link pull-right">{{ 'Volver al producto' | translate }}</span>
            </div>
        {% endblock %}
    {% endembed %}


{% endif %}

payments-info.tpl

Dentro de este tpl tenemos información sobre tarjetas de credito y cuotas para los medios de pago que no son Mercado Pago, por ejemplo PayPal. 

También incluimos una tabla de cuotas que solo aplica a medios de pago en tiendas que no sean argentinas, por eso el condicional {% if store.country != 'AR' %} 

Dentro de la información que mostramos en argentina en estos medios de pago tenemos:

  • Tipo de pago: Tarjeta de crédito y efectivo
  • Cantidad máxima de cuotas:
    • Si son sin interés mostramos el valor exacto de cada cuota, el CFT (costo financiero total), el total del pago y el total en un solo pago
    • Sin son con interés solo se muestra la cantidad máxima de cuotas, sin el valor exacto, por ejemplo “Hasta 12 cuotas” y el total en 1 solo pago.
  • Logos de las tarjetas de crédito aceptadas

{% set installments_data = installmentsv2['methods'][method] %}


{# Gateways without banks: cards only #}


{% if installments_data['cards'] %}


    {# Credit cards #}


    <h6 class="mb-1">{{'Tarjetas de crédito' | translate }}</h6>
    <div id="installment-credit-card-option-{{ method }}" class="box">


        {# Credit cards max installments only for AR stores #}


        {% if store.country == 'AR' %}


            {% if installments_data['max_without_interests'] != '0' %}
                <h4 class="font-weight-normal mb-1">
                    {{ installments_data['max_without_interests'] }}
                    {{ 'cuotas' | translate }}
                    <span>{{ 'sin interés' | t }}</span>
                    {{'de' | t}}
                    <strong class="js-modal-installment-price" data-installment="{{ installments_data['max_without_interests'] }}"> {{ (product.price / installments_data['max_without_interests']) | money }}</strong>
                </h4>
                <h6 class="font-weight-normal mb-2">
                    <span class="mr-1">
                        <span>{{ 'CFT: ' | translate }}</span><strong>0,00%</strong>
                    </span>
                    <span class="mr-1">
                        <span>{{ 'Total: ' | translate }}</span><strong class="js-installments-one-payment">{{ product.price | money }}</strong>
                    </span>
                    <span class="mr-1">
                        <span>{{ 'En 1 pago: ' | translate }}</span><strong class="js-installments-one-payment">{{ product.price | money }}</strong>
                    </span>
                </h6>
            {% elseif installments_data['max_with_interests'] > 0 %}
                <h4 class="font-weight-normal mb-1">
                    {{ 'Hasta' | translate }}
                    {{ installments_data['max_with_interests'] }}
                    {{ 'cuotas' | translate }}
                </h4>
                <h6 class="font-weight-normal mb-2">
                    <span>
                        <span>{{ 'O en 1 pago de: ' | translate }}</span><strong class="js-installments-one-payment">{{ product.price | money }}</strong>
                    </span>
                </h6>
            {% else %}
                <h4 class="font-weight-normal mb-1">
                    <span>{{ 'En 1 pago: ' | translate }}</span><strong class="js-installments-one-payment">{{ product.price | money }}</strong>
                </h4>
            {% endif %}


        {% endif %}


        {# Credit cards flags #}


        {% for logo in installments_data['cards'] %}
            <span class="mb-3">
                <img src="{{ 'images/empty-placeholder.png' | static_url }}" data-src="{{ logo | payment_new_logo }}" class="lazyload card-img card-img-medium">
            </span>
        {% endfor %}


        {% if store.country != 'AR' %}


            {# Installments list for non AR stores #}


            <table class="table">
                <thead>
                    <tr>
                        <th colspan="2">{{ 'Cuotas ' | translate }}</th>
                        <th class="text-right">{{ 'Total' | translate }}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for installment, data_installment in installments %}
                        {% set rounded_installment_value = data_installment.installment_value | round(2) %}
                        {% set total_value = (data_installment.without_interests ? data_installment.total_value : installment * data_installment.installment_value) %}
                        {% set total_value_in_cents = total_value  | round(2) * 100 %}
                        <tr id="installment_{{ method }}_{{ installment }}">


                            {# Installment amount #}


                            <td>
                                <strong><span class="js-installment-amount">{{ installment }}</span></strong>
                                </span>{% if installment > 1 %}{{ 'cuotas' | translate }}{% else %}{{ 'cuota' | translate }}{% endif %}</span>
                            </td>


                            {# Installment price #}


                            <td>
                                <span>{{ 'de ' | translate }}</span>
                                <strong><span class="js-installment-price">{{ (rounded_installment_value * 100) | money }}</span> </strong>


                                {% if data_installment.without_interests or installments_data['max_with_interests'] == 0 %}
                                    {{ 'sin interés' | t }}
                                {% endif %}
                            </td>


                            {# Total price #}


                            <td class="js-installment-total-price text-right">
                                {{ total_value_in_cents | money }}
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        {% endif %}
    </div>
{% endif %}


{# Cash methods #}


{% if installments_data['direct'] %}


    {# Cash module title #}


    <h6 class="mb-1">
        {% if store.country == 'BR' %}
            {% if wording_method_only_cash %}
                {{'Efectivo' | translate }}
            {% elseif wording_method_only_debit %}
                {{'Débito online' | translate }}
            {% else %}
                {{'Efectivo / Débito online' | translate }}
            {% endif %}
        {% else %}
            {{'Tarjeta de débito y efectivo' | translate }}
        {% endif %}
    </h6>


    {# If has debit card or cash #}


    <div id="installment-cash-option-{{ method }}" class="box">


        {# Cash flags #}


        <div class="">
            {% for logo in installments_data['direct'] %}
                <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>


        {# Cash total #}


        <h4 class="font-weight-normal mb-0">
            <span>{{ 'Total:' | translate }}</span><strong class="js-installments-one-payment">{{ product.price | money }}</strong>
        </h4>


        {# Boleto message #}


        {% if method in ['boleto_paghiper'] and discount > 0.0 %}
            <div> {{'Boleto Paghiper tiene un' | translate }} <strong>{{discount}}% {{'de descuento' | translate }}</strong> {{'que será aplicado sobre el costo total de la compra al finalizar la misma.' | translate }}</div>
        {% endif %}
    </div>
{% endif %}

payments-info-banks.tpl

Como su nombre lo indica, en este snipplet mostramos la información de pago en relación a los bancos. Solo aplica tiendas de Argentina con Mercado Pago.

La estructura es similar a los medios de pago en Argentina en payments-info.tpl solo que en lugar de mostrar un solo máximo de cuotas, mostramos varios bancos agrupados por la máxima cantidad de cuotas que ofrece cada uno. 

Para las cuotas con interés mostramos la cantidad máxima de cuotas y el precio en un pago.

Y debajo, las formas de pago en efectivo con el precio en 1 pago.

3. Agregamos el llamado a los snipplets creados en el paso 3 en el detalle del producto, el item del listado y el carrito.

Detalle del producto

Para el detalle del producto vamos a necesitar agregar installments.tpl y payments.tpl, en el theme Base lo hacemos en el snipplet product/product-form.tpl pero en tu diseño puede que tengas que hacerlo en el template templates/product.tpl

El llamado a la información de cuotas lo vamos a ubicar idealmente cerca del precio de la siguiente forma:

{# Product installments #}

{% include "snipplets/payments/installments.tpl" with {'product_detail' : true} %}

Mientras que el snipplet con el modal de detalles de pago lo podemos ubicar al final del snipplet o el template

{# Product payments details #}

{% include 'snipplets/payments/payments.tpl' %}

Item del listado

El item del listado de productos en Base se llama item.tpl pero puede que en tu diseño también sea single_product.tpl . Vamos a llamar a las cuotas así:

{% include 'snipplets/payments/installments.tpl' %}

Carrito de compras

Esto aplica solo a tiendas de Brasil, en el theme Base va a estar dentro del snipplet cart-totals.tpl, en tu diseño puede que sea el template templates/cart.tpl o snipplets/cart-panel-ajax.tpl, lo importante es que este debajo del total del carrito. Lo incluimos así:

{% include "snipplets/payments/installments.tpl" with {'product': false} %}

4. Vamos a necesitar agregar algunos IDs y clases en el detalle del producto para que las cuotas se actualicen al cambiar de variante. En el theme Base modificamos el template product.tpl y el snipplet product-form.tpl; pero en tu caso puede que solo necesites modificar product.tpl.

product.tpl

En el div padre que engloba a todo el contenido del detalle de producto agregar los siguientes IDs y selectores “js-...”

<div id="single-product" class=”js-product-detail js-product-container" data-variants="{{product.variants_object | json_encode }}" itemscope itemtype="http://schema.org/Product">

product-form.tpl

En este archivo vamos a reemplazar el código que tengas en relación al precio del producto por lo siguiente (recordá que este cambio aplica en este snipplet pero en tu caso podés aplicarlo donde sea que tengas el precio del producto)

{# Product price #}


<div class="price-container text-center text-sm-left" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
    <span class="d-inline-block">
       <h4 id="compare_price_display" class="js-compare-price-display price-compare {% if product_can_show_installments or (product.promotional_offer and not product.promotional_offer.script.is_percentage_off) %}mb-2{% endif %}" {% if not product.compare_at_price or not product.display_price %}style="display:none;"{% else %} style="display:block;"{% endif %}>{% if product.compare_at_price and product.display_price %}{{ product.compare_at_price | money }}{% endif %}</h4>
    </span>
    <spa class="d-inline-block">
        <h4 class="js-price-display {% if product_can_show_installments or (product.promotional_offer and not product.promotional_offer.script.is_percentage_off) %}mb-2{% endif %}" id="price_display" itemprop="price"{% if product.display_price %} content="{{ product.price / 100 }}"{% endif %} {% if not product.display_price %}style="display:none;"{% endif %}>{% if product.display_price %}{{ product.price | money }}{% endif %}</h4>
    </span>
    <meta itemprop="priceCurrency" content="{{ product.currency }}" />
    {% if product.stock_control %}
        <meta itemprop="inventoryLevel" content="{{ product.stock }}" />
        <meta itemprop="availability" href="http://schema.org/{{ product.stock ? 'InStock' : 'OutOfStock' }}" content="{{ product.stock ? 'In stock' : 'Out of stock' }}" />
    {% endif %}
</div>

También necesitamos agregar la clase js-addtocart al botón de “Agregar al carrito” quedando así:

{% set state = store.is_catalog ? 'catalog' : (product.available ? product.display_price ? 'cart' : 'contact' : 'nostock') %}
{% set texts = {'cart': "Agregar al carrito", 'contact': "Consultar precio", 'nostock': "Sin stock", 'catalog': "Consultar"} %}
<input type="submit" class="js-addtocart js-prod-submit-form btn btn-primary btn-block mb-4 {{ state }}" value="{{ texts[state] | translate }}" {% if state == 'nostock' %}disabled{% endif %} />

5. Ahora necesitamos crear el snipplet para el componente modal o popup dentro de la carpeta snipplets. Este tpl se llama modal.tpl y el código es:

{# /*============================================================================
  #Modal
==============================================================================*/

#Properties
    // ID
    // Position - Top, Right, Bottom, Left
    // Transition - Slide and Fade
    // Width - Full and Box
    // modal_form_action - For modals that has a form


#Head
    // Block - modal_head
#Body
    // Block - modal_body
#Footer
    // Block - modal_footer

#}


{% set modal_overlay = modal_overlay | default(true) %}


<div id="{{ modal_id }}" class="js-modal modal modal-{{ modal_class }} modal-{{modal_position}} transition-{{modal_transition}} modal-{{modal_width}} transition-soft" style="display: none;">
    {% if modal_form_action %}
    <form action="{{ modal_form_action }}" method="post" class="{{ modal_form_class }}">
    {% endif %}
    <div class="js-modal-close modal-header">
        <span class="modal-close">
            {% include "snipplets/svg/times.tpl" with {svg_custom_class: "icon-inline svg-icon-text"} %}
        </span>
        {% block modal_head %}{% endblock %}
    </div>
    <div class="modal-body">
        {% block modal_body %}{% endblock %}
    </div>
    {% if modal_footer %}
        <div class="modal-footer d-md-block">
            {% block modal_foot %}{% endblock %}
        </div>
    {% endif %}
    {% if modal_form_action %}
    </form>
    {% endif %}
</div>

6. Agregamos la clase js-variation-option dentro del select para las variantes del detalle del producto. En el theme Base esto está en el tpl product-variants.tpl dentro de la carpeta snipplets/product. En tu diseño puede que este archivo se llame variants.tpl o tengas que aplicar el cambio directamente en el template product.tpl

7. Por último para la parte de HTML, necesitamos agregar una carpeta SVG dentro de la carpeta snipplets. Acá vamos sumar los SVGs para el icono de la tarjeta de crédito en el detalle del producto con el nombre credit-card-blank.tpl, y el icono para cerrar el popup con el nombre times.tpl

credit-card-blank.tpl

<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M527.9 32H48.1C21.5 32 0 53.5 0 80v352c0 26.5 21.5 48 48.1 48h479.8c26.6 0 48.1-21.5 48.1-48V80c0-26.5-21.5-48-48.1-48zm-6 400H54.1c-3.3 0-6-2.7-6-6V86c0-3.3 2.7-6 6-6h467.8c3.3 0 6 2.7 6 6v340c0 3.3-2.7 6-6 6zM192 364v8c0 6.6-5.4 12-12 12h-72c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h72c6.6 0 12 5.4 12 12zm192 0v8c0 6.6-5.4 12-12 12H236c-6.6 0-12-5.4-12-12v-8c0-6.6 5.4-12 12-12h136c6.6 0 12 5.4 12 12z"/></svg>

times.tpl

<svg class="{{ svg_custom_class }}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>

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:

@mixin prefix($property, $value, $prefixes: ()) {
  @each $prefix in $prefixes {
      #{'-' + $prefix + '-' + $property}: $value;
  }
    #{$property}: $value;
}


/* // Wrappers */


.box{
  float: left;
  width: 100%;
  margin-bottom: 20px;
  padding:8px;
  border:1px solid rgba($main-foreground, .2);
}


/* // Dividers */ 


.divider{
  margin-top: 20px;
  margin-bottom: 20px;
  clear: both;
  border-bottom: 1px solid rgba($main-foreground, .1);
}


/* // Modals */


.modal{
  color: $main-foreground;
  background-color:$main-background;
}




/* // Links */


.btn-link{
  color: $primary-color;
  fill: $primary-color;
  text-transform: uppercase;
  border-bottom: 1px solid;
  font-weight: bold;
  cursor: pointer;
  &:hover,
  &:focus{
    color: rgba($primary-color, .5);
    fill: rgba($primary-color, .5);
  }
}


/* // Tables */ 


.table{
  background-color: $main-background;
  color: $main-foreground;
  tbody{
    tr:nth-child(odd){
      background-color: rgba($main-foreground, .05);
    }
  }
  th{
    padding: 8px;
    text-align: left;
  }
}


/* // Tabs */


.tab-group{
  border-bottom: 1px solid rgba($main-foreground, .1);
  .tab{
    &-link{
      color: $main-foreground;
    }
    &.active{
      .tab-link{
        border-bottom: 2px solid rgba($primary-color, .5);
        color: $primary-color;
      }
    }
  }
}

2. Agregar los estilos dentro del archivo static/style-critical.tpl 

Si en tu diseño usas una hoja de estilos para el CSS crítico, vamos a necesitar el siguiente código dentro de la misma, pero si no es el caso entonces podés unificar el CSS de los pasos 2 y 3 en un solo archivo.

/* // Images */


.card-img{
  margin: 0 5px 5px 0;
  border: 1px solid #00000012;
}
.card-img-small{
  height: 25px;
}
.card-img-medium{
  height: 35px;
}
.card-img-big{
  height: 50px;
}

3. Agregar los estilos dentro del archivo static/style-async.tpl 

Si en tu diseño usas una hoja de estilos para CSS asíncrono, vamos a necesitar el siguiente código dentro de la misma, pero si no es el caso entonces podés unificar el CSS de los pasos 2 y 3 en un solo archivo.

@mixin prefix($property, $value, $prefixes: ()) {
  @each $prefix in $prefixes {
      #{'-' + $prefix + '-' + $property}: $value;
  }
    #{$property}: $value;
}


/* // Modals */


.modal {
  position: fixed;
  top: 0;
  display: block;
  width: 80%;
  height: 100%;
  padding: 10px;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  transition: all .2s cubic-bezier(.16,.68,.43,.99);
  z-index: 20000;
  &-header{
    width: calc(100% + 20px);
    margin: -10px 0 10px -10px;
    padding: 10px 15px;
    font-size: 20px;
  }
  &-footer{
    padding: 10px;
    clear: both;
  }
  &-full {
    width: 100%;
  }
  &-docked-sm{
    width: 100%;
  }
  &-docked-small{
    width: 80%;
  }
  &-top{
    top: -100%;
    left: 0;
  }
  &-bottom{
    top: 100%;
    left: 0;
  }
  &-left{
    left: -100%;
  }
  &-right{
    right: -100%;
  }
  &-centered{
    height: 100%;
    width: 100%;
  }
  &-top.modal-show,
  &-bottom.modal-show {
    top: 0;
  }
  &-left.modal-show {
    left: 0;
  }
  &-right.modal-show {
    right: 0;
  }
  &-close { 
    display: inline-block;
    padding: 1px 5px 5px 0;
    margin-right: 5px;
    vertical-align: middle;
    cursor: pointer;
  }
  .tab-group{
    margin:  0 -10px 20px -10px;
  }
}

.modal-overlay{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #00000047;
  z-index: 10000;
}


/* // Tables */


.table{
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  thead{
    th{
      padding: 8px;
      &:first-of-type{
        padding-left: 0;
      }
    }
  }
  td{
    padding: 8px;
    text-align: left;
  }
}

/* // Tabs */

.tab-group{
  width: 100vw;
  padding: 0;
  overflow-x: scroll;
  white-space: nowrap;
  .tab{
    display: inline-flex;
    float: none;
    &-link{
      float: left;
      padding: 10px;
      text-align: center;
    }
  }
}


.tab-panel:not(.active){
  display: none;
}
.tab-panel.active{
  display: block;
}




/* // Min width 768px */


@media (min-width: 768px) { 


/* //// Components */


 /* Modals */


  .modal{
    &-centered{
      height: 80%;
      width: 80%;
      left: 10%;
      margin: 5% auto;
    }
    &-docked-sm{
      width: 500px;
    }
    &-docked-small{
      width: 350px;
    }
  }


 /* Tabs */


  .tab-group{
    width: calc(100% + 20px);
    overflow-x: auto;
    white-space: normal;
    .tab{
      float: left;
    }
  }
}

JS

1. El JavaScript necesitamos agregarlo en el archivo store.js.tpl (o donde tengas tus funciones de JS).  Agregamos el siguiente código :

{# /* // Installments */ #}


    {# Installments without interest #}


    function get_max_installments_without_interests(number_of_installment, installment_data, max_installments_without_interests) {
        if (parseInt(number_of_installment) > parseInt(max_installments_without_interests[0])) {
            if (installment_data.without_interests) {
                return [number_of_installment, installment_data.installment_value.toFixed(2)];
            }
        }
        return max_installments_without_interests;
    }


    {# Installments with interest #}


    function get_max_installments_with_interests(number_of_installment, installment_data, max_installments_with_interests) {
        if (parseInt(number_of_installment) > parseInt(max_installments_with_interests[0])) {
            if (installment_data.without_interests == false) {
                return [number_of_installment, installment_data.installment_value.toFixed(2)];
            }
        }
        return max_installments_with_interests;
    }


    {# Refresh installments inside detail popup #}


    function refreshInstallmentv2(price){
        $(".js-modal-installment-price" ).each(function( index ) {
            const installment = Number($(this).data('installment'));
            $(this).text(LS.currency.display_short + (price/installment).toLocaleString('de-DE', {maximumFractionDigits: 2, minimumFractionDigits: 2}));
        });
    }




Ubicá la función function changeVariant y reemplazala por lo siguiente:El código que necesitamos para el carrito es el siguiente:


{# Updates price, installments, labels and CTA on variant change #}


    function changeVariant(variant){
        $(".js-product-detail .js-shipping-calculator-response").hide();
        $("#shipping-variant-id").val(variant.id);


        var parent = $("body");
        if (variant.element){
            parent = $(variant.element);
        }


        var sku = parent.find('#sku');
        if(sku.length) {
            sku.text(variant.sku).show();
        }


        var installment_helper = function($element, amount, price){
            $element.find('.js-installment-amount').text(amount);
            $element.find('.js-installment-price').attr("data-value", price);
            $element.find('.js-installment-price').text(LS.currency.display_short + parseFloat(price).toLocaleString('de-DE', { minimumFractionDigits: 2 }));
            if(variant.price_short && Math.abs(variant.price_number - price * amount) < 1) {
                $element.find('.js-installment-total-price').text((variant.price_short).toLocaleString('de-DE', { minimumFractionDigits: 2 }));
            } else {
                $element.find('.js-installment-total-price').text(LS.currency.display_short + (price * amount).toLocaleString('de-DE', { minimumFractionDigits: 2 }));
            }
        };


        if (variant.installments_data) {
            var variant_installments = JSON.parse(variant.installments_data);
            var max_installments_without_interests = [0,0];
            var max_installments_with_interests = [0,0];
            $.each(variant_installments, function(payment_method, installments) {
                $.each(installments, function(number_of_installment, installment_data) {
                    max_installments_without_interests = get_max_installments_without_interests(number_of_installment, installment_data, max_installments_without_interests);
                    max_installments_with_interests = get_max_installments_with_interests(number_of_installment, installment_data, max_installments_with_interests);
                    var installment_container_selector = '#installment_' + payment_method + '_' + number_of_installment;


                    if(!parent.hasClass("js-quickshop-container")){
                        installment_helper($(installment_container_selector), number_of_installment, installment_data.installment_value.toFixed(2));
                    }
                });
            });
            var $installments_container = $(variant.element + ' .js-max-installments-container .js-max-installments');
            var $installments_modal_link = $(variant.element + ' #btn-installments');
            var $payments_module = $(variant.element + ' .js-product-payments-container');
            var $installmens_card_icon = $(variant.element + ' .js-installments-credit-card-icon');


            {% if product.has_direct_payment_only %}
            var installments_to_use = max_installments_without_interests[0] >= 1 ? max_installments_without_interests : max_installments_with_interests;


            if(installments_to_use[0] <= 0 ) {
            {%  else %}
            var installments_to_use = max_installments_without_interests[0] > 1 ? max_installments_without_interests : max_installments_with_interests;


            if(installments_to_use[0] <= 1 ) {
            {% endif %}
                $installments_container.hide();
                $installments_modal_link.hide();
                $payments_module.hide();
                $installmens_card_icon.hide();
            } else {
                $installments_container.show();
                $installments_modal_link.show();
                $payments_module.show();
                $installmens_card_icon.show();
                installment_helper($installments_container, installments_to_use[0], installments_to_use[1]);
            }
        }


        if(!parent.hasClass("js-quickshop-container")){
            $('#installments-modal .js-installments-one-payment').text(variant.price_short).attr("data-value", variant.price_number);
        }
        
        if (variant.price_short){
            parent.find('.js-price-display').text(variant.price_short).show();
            parent.find('.js-price-display').attr("content", variant.price_number);
        } else {
            parent.find('.js-price-display').hide();
        }


        if ((variant.compare_at_price_short) && !(parent.find(".js-price-display").css("display") == "none")) {
            parent.find('.js-compare-price-display').text(variant.compare_at_price_short).show();
        } else {
            parent.find('.js-compare-price-display').hide();
        }


        var button = parent.find('.js-addtocart');
        button.removeClass('cart').removeClass('contact').removeClass('nostock');
        var $product_shipping_calculator = parent.find("#product-shipping-container");
        {% if not store.is_catalog %}
        if (!variant.available){
            button.val('{{ "Sin stock" | translate }}');
            button.addClass('nostock');
            button.attr('disabled', 'disabled');
            $product_shipping_calculator.hide();
        } else if (variant.contact) {
            button.val('{{ "Consultar precio" | translate }}');
            button.addClass('contact');
            button.removeAttr('disabled');
            $product_shipping_calculator.hide();
        } else {
            button.val('{{ "Agregar al carrito" | translate }}');
            button.addClass('cart');
            button.removeAttr('disabled');
            $product_shipping_calculator.show();
        }


        {% endif %}


        {% if template == 'product' %}
            const base_price = Number($("#price_display").attr("content"));
            refreshInstallmentv2(base_price);
        {% endif %}
    }

Por último agregá la siguiente función:

    $(document).on("change", ".js-variation-option", function(e) {
        var $this_price = $(this).closest(".js-product-container").find(".js-price-display");
        var $installment_container = $(this).closest(".js-product-container").find(".js-product-payments-container");
        var $installment_text = $(this).closest(".js-product-container").find(".js-max-installments-container");


        if ($this_price.css('display') == 'none'){
            $installment_container.hide();
            $installment_text.hide();
        }else{
            $installment_text.show();
        }
    });

2. Pero también necesitamos agregar el JS que hace funcionar al componente del modal en general y para las tabs

{#/*============================================================================
      #Modals
    ==============================================================================*/ #}


    var $modal_close = $('.js-modal-close');
    var $modal_open = $('.js-modal-open');
    
    $modal_open.click(function (e) {
        e.preventDefault(); 
        var $modal_id = $(this).data('toggle');
        $(".js-modal-overlay").fadeToggle();
        if ($($modal_id).hasClass("modal-show")) {
            $($modal_id).removeClass("modal-show").delay(200).hide(0);
        } else {
            $($modal_id).detach().insertAfter(".js-modal-overlay").show(0).addClass("modal-show");
        }             
    });


    $modal_close.click(function (e) {
        e.preventDefault();  
        $(this).closest(".js-modal").removeClass("modal-show").delay(200).hide(0); 
        $(".js-modal-overlay").fadeOut(300);     
    });


    $(".js-modal-overlay").click(function (e) {
        e.preventDefault();  
        $(".js-modal.modal-show").removeClass("modal-show").delay(200).hide(0);   
        $(this).fadeOut(300);   
    });


    {#/*============================================================================
      #Tabs
    ==============================================================================*/ #}


    var $tab_open = $('.js-tab');


    $tab_open.click(function (e) {
        e.preventDefault(); 
        var $tab_container = $(this).closest(".js-tab-container");
        $tab_container.find(".js-tab, .js-tab-panel").removeClass("active");
        $(this).addClass("active");
        var tab_to_show = $(this).find(".js-tab-link").attr("href");
        $tab_container.find(tab_to_show).addClass("active");    
    });

3. Como en este tutorial usamos la técnica de lazy load con el plugin Lazysizes, necesitamos agregarlo. Para ver como hacerlo podés leer este corto artículo y luego continuar con este tutorial.

Traducciones

Para terminar agregamos los textos para las traducciones en el archivo config/translations.txt

--- Installments ---


es "<strong class='js-installment-amount installment-amount'>{1}</strong> cuotas de <strong class='js-installment-price installment-price'>{2}</strong>"
pt "<strong class='js-installment-amount installment-amount'>{1}</strong>x de <strong class='js-installment-price installment-price'>{2}</strong>"
en "In up to <strong class='js-installment-amount installment-amount'>{1}</strong> installments of <strong class='js-installment-price installment-price'>{2}</strong>"
es_mx "<strong class='js-installment-amount installment-amount'>{1}</strong> meses de <strong class='js-installment-price installment-price'>{2}</strong>"


es "<strong class='js-installment-amount installment-amount'>{1}</strong> cuotas sin interés de <strong class='js-installment-price installment-price'>{2}</strong>"
pt "<strong class='js-installment-amount installment-amount'>{1}</strong>x de <strong class='js-installment-price installment-price'>{2}</strong> sem juros"
en "In up to <strong class='js-installment-amount installment-amount'>{1}</strong> installments of <strong class='js-installment-price installment-price'>{2}</strong> without interest"
es_mx "<strong class='js-installment-amount installment-amount'>{1}</strong> meses sin intereses de <strong class='js-installment-price installment-price'>{2}</strong>"


es "En hasta <strong class='js-installment-amount installment-amount'>{1}</strong> cuotas"
pt "Em até <strong class='js-installment-amount installment-amount'>{1}</strong>x"
en "In up to <strong class='js-installment-amount installment-amount'>{1}</strong> installments"
es_mx "En hasta <strong class='js-installment-amount installment-amount'>{1}</strong> meses"


es "<strong class='js-installment-amount installment-amount'>{1}</strong> cuotas sin interés de <strong class='js-installment-price installment-price'>{2}</strong>"
pt "<strong class='js-installment-amount installment-amount'>{1}</strong>x de <strong class='js-installment-price installment-price'>{2}</strong> sem juros"
en "In up to <strong class='js-installment-amount installment-amount'>{1}</strong> installments of <strong class='js-installment-price installment-price'>{2}</strong> without interest"
es_mx "<strong class='js-installment-amount installment-amount'>{1}</strong> meses sin intereses de <strong class='js-installment-price installment-price'>{2}</strong>"


es "<strong class='installment-amount'>{1}</strong> cuotas de <strong class='installment-price'>{2}</strong>"
pt "<strong class='installment-amount'>{1}</strong>x de <strong class='installment-price'>{2}</strong>"
en "In up to <strong class='installment-amount'>{1}</strong> installments of <strong class='installment-price'>{2}</strong>"
es_mx "<strong class='installment-amount'>{1}</strong> meses de <strong class='installment-price'>{2}</strong>"


es "<strong class='installment-amount'>{1}</strong> cuotas sin interés de <strong class='installment-price'>{2}</strong>"
pt "<strong class='installment-amount'>{1}</strong>x de <strong class='installment-price'>{2}</strong> sem juros"
en "In up to <strong class='installment-amount'>{1}</strong> installments of <strong class='installment-price'>{2}</strong> without interest"
es_mx "<strong class='installment-amount'>{1}</strong> meses sin intereses de <strong class='installment-price'>{2}</strong>"


es "En hasta <strong class='installment-amount'>{1}</strong> cuotas"
pt "Em até <strong class='installment-amount'>{1}</strong>x"
en "In up to <strong class='installment-amount'>{1}</strong> installments"
es_mx "En hasta <strong class='installment-amount'>{1}</strong> meses"


es "<strong class='installment-amount'>{1}</strong> cuotas sin interés de <strong class='installment-price'>{2}</strong>"
pt "<strong class='installment-amount'>{1}</strong>x de <strong class='js-installment-price installment-price'>{2}</strong> sem juros"
en "In up to <strong class='installment-amount'>{1}</strong> installments of <strong class='installment-price'>{2}</strong> without interest"
es_mx "<strong class='installment-amount'>{1}</strong> meses sin intereses de <strong class='installment-price'>{2}</strong>"


es "{1} cuotas en tarjeta de crédito"
pt "{1}x no cartão"
en "In up to {1} installments"
es_mx "{1} meses con tarjeta de crédito"


es "¡{1} cuotas sin interés!"
pt "{1} x sem juros!"
en "{1} installments without interest!"
es_mx "¡{1} meses sin intereses!"


es "Ver el detalle de las cuotas"
pt "Ver detalhes das parcelas"
en "See installments details"
es_mx "Ver el detalle de las mensualidades"


es "Ver financiación y medios de pago"
pt "Ver financiación y medios de pago"
en "Ver financiación y medios de pago"
es_mx "Ver financiamiento y formas de pago"


es "Financiación y medios de pago"
pt "Financiación y medios de pago"
en "Financiación y medios de pago"
es_mx "financiamiento y formas de pago"


es "Detalles de las cuotas"
pt "Detalhes das parcelas"
en "Installments details"
es_mx "Detalle de las mensualidades"


es "sin interés"
pt "sem juros"
en "without interests"
es_mx "sin intereses"


es "Hasta <strong class='js-installment-amount installment-amount'>{1}</strong> cuotas"
pt "Até <strong class='js-installment-amount installment-amount'>{1}</strong>x"
en "Up to <strong class='js-installment-amount installment-amount'>{1}</strong> installments"
es_mx "Hasta <strong class='js-installment-amount installment-amount'>{1}</strong> meses"


es "CFT:"
pt "CFT:"
en "CFT:"
es_mx "CFT:"


es "Precio en 1 pago:"
pt "Preço em 1 parcela:"
en "1 payment price:"
es_mx "Precio en 1 mensualidad:"


es "PTF:"
pt "PTF:"
en "PTF:"
es_mx "PTF:"


es "TEA:"
pt "TEA:"
en "TEA:"
es_mx "TEA:"


es "Total:"
pt "Total:"
en "Total:"
es_mx "Total:"


es "Sin interés"
pt "Sem juros"
en "Without interest"
es_mx "Sin intereses"


es "sin interés"
pt "sem juros"
en "without interest"
es_mx "sin intereses"


es "cuotas sin interés"
pt "x sem juros"
en "installments without interest"
es_mx "meses sin intereses"


es "Conocé las opciones de pago con"
pt "Conheça as opções de pagamento com"
en "See the payment options with"
es_mx "Conoce las opciones de pago con"


es "Conocé la cantidad de cuotas"
pt "Conheça a quantidade de parcelas"
en "See our installments amount"
es_mx "Conoce el número de mensualidades"


es "Boleto Paghiper tiene un"
pt "Boleto PagHiper oferece"
en "Boleto Paghiper offers a"
es_mx "Boleto Paghiper tiene un"


es "de descuento"
pt "de desconto"
en "discount"
es_mx "de descuento"


es "que será aplicado sobre el costo total de la compra al finalizar la misma."
pt "a ser aplicado sobre o custo total da compra ao finalizá-la."
en "that will be applied over the total cost of the order when the checkout process is finished."
es_mx "que será aplicado sobre el costo total de la compra al finalizar la misma."


es "Cantidad de cuotas"
pt "Quantidade de parcelas"
en "Installments amount"
es_mx "Número de meses"


es "Ver medios de pago y financiación"
pt "Ver meios de pagamento e parcelamento"
en "See payment options and installments"
es_mx "Ver formas de pago y financiamiento"


es "Ver medios de pago"
pt "Ver meios de pagamento"
en "See payment options"
es_mx "Ver métodos de pago"


es "Ver más medios de pago y financiación"
pt "Ver mais meios de pagamento e parcelamento"
en "See more payment options and installments"
es_mx "Ver más métodos de pago y financiamiento"


es "Ver más medios de pago"
pt "Ver mais meios de pagamento"
en "See payment options"
es_mx "Ver más métodos de pago"


es "Medios de pago y financiación"
pt "Meios de pagamento e parcelamento"
en "Payment options and installments"
es_mx "Formas de pago y financiamiento"


es "Detalles de las cuotas"
pt "Detalhes das parcelas"
en "Installments details"
es_mx "Detalle de las mensualidades"


es "Opciones de pago y financiación que vas a poder elegir a la hora de pagar por tu compra"
pt "Estas são as opções de pagamento e parcelamento que poderá escolher na hora de pagar por sua compra"
en "Payment options and installments that you will choose when you finish your purchase"
es_mx "Opciones de pago y financiamiento que podrás elegir al pagar tu compra"


es "Medio de pago elegido:"
pt "Meio de pagamento escolhido:"
en "Payment method chosen:"
es_mx "Método de pago elegido:"


es "de"
pt "x"
en "of"
es_mx "de"


es "x de"
pt "x de"
en "x of"
es_mx "x de"


es "cuotas"
pt "x"
en "installments"
es_mx "meses"


es "cuota"
pt "x"
en "installment"
es_mx "mensualidad"


es "Elegí un banco para poder elegir las cuotas"
pt "Escolha um banco para definir suas parcelas"
en "Choose a bank so you can choose the installments"
es_mx "Selecciona un banco para las mensualidades"


es "de "
pt "de "
en "of "
es_mx "de "


es "Cerrar"
pt "Fechar"
en "Close"
es_mx "Cerrar"


es "12 cuotas con otras tarjetas"
pt "12x com outros cartões"
en "12 installments with other cards"
es_mx "12 meses con otras tarjetas"


es "Cuotas"
pt "x"
en "Installments"
es_mx "Meses"


es "sin interés de"
pt "sem juros de"
en "without interest of"
es_mx "sin intereses de"


es "Precio:"
pt "Preço:"
en "Price:"
es_mx "Precio:"


es "Volver al producto"
pt "Voltar ao produto"
en "Back to product"
es_mx "Regresar al producto"


es "Volver al carrito"
pt "Voltar ao carrinho"
en "Back to cart"
es_mx "Regresar al carrito"


es "Hasta"
pt "Até"
en "Up to"
es_mx "Hasta"


es "Tarjetas de crédito"
pt "Cartões de crédito"
en "Credit cards"
es_mx "Tarjetas de crédito"


es "Tarjetas de débito y efectivo"
pt "Cartões de débito e à vista"
en "Debit cards and cash"
es_mx "Tarjetas de débito y efectivo"


es "Transferencia o depósito"
pt "Transferência bancária ou depósito"
en "Wire transfer o deposit"
es_mx "Transferencia o depósito"


es "En 1 pago:"
pt "Em 1 parcela:"
en "1 payment price:"
es_mx "En 1 mensualidad:"


es "O en 1 pago de:"
pt "Ou em 1 parcela de:"
en "Or in 1 payment of:"
es_mx "O en 1 mensualidad de:"


es "tiene un"
pt "oferece"
en "offers a"
es_mx "tiene un"


es "Cuando termines la compra vas a ver la información de pago en relación a esta opción."
pt "Efetuada a compra, você verá as informações de pagamento em relação a esta opção."
en "When you finish the purchase you will se the payment information related to this option."
es_mx "Verás la información de pago de esta opción al finalizar la compra."


es "de "
pt "de "
en "of "
es_mx "de "


es "O hasta"
pt "Ou até"
en "Or up to"
es_mx "O hasta"


es "cuotas de"
pt "x de"
en "x of"
es_mx "meses de"


es "sin interés"
pt "sem juros"
en "without interest"
es_mx "sin intereses"


es "Cuotas "
pt "Parcelas"
en "Installments"
es_mx "Meses "


es "A convenir"
pt "A combinar"
en "To be defined"
es_mx "A convenir"


es "Ver más opciones"
pt "Ver mais opções"
en "See more options"
es_mx "Ver más opciones"


es "Ver menos opciones"
pt "Ver menos opções"
en "See less options"
es_mx "Ver menos opciones"


es "Hasta <strong class='installment-amount'>{1}</strong> cuotas"
pt "Até <strong class='installment-amount'>{1}</strong>x"
en "Up to <strong class='installment-amount'>{1}</strong> installments"
es_mx "Hasta <strong class='installment-amount'>{1}</strong> cuotas"


es "Tarjeta de débito / Efectivo / Depósito o transferencia"
pt "Cartão de débito / Dinheiro / Depósito ou transferência"
en "Debit card / Cash / Deposit or wire transfer"
es_mx "Tarjeta de débito / Efectivo / Depósito o transferencia"




es "Conocé las opciones de pago"
pt "Conheça as opções de pagamento"
en "See the payment options"
es_mx "Conocé las opciones de pago"

Listo, ya tenés en tu diseño la funcionalidad aplicada ¡Excelente!