Informação de meios de pagamento e parcelas

Neste tutorial, vamos adicionar visibilidade aos meios de pagamento e parcelas em seu design:

O código neste tutorial inclui:

  • Parcelas na lista de produtos, detalhes do produto e carrinho (aplica-se apenas em lojas no Brasil)
  • Modal que mostra o detalhe dos meios de pagamento oferecidos pela loja

Item da lista de produtos

Formulário de detalhes do produto

Modal de detalhes de meios de pagamento

HTML

A primeira coisa que vamos fazer é criar os tpls necessários para a funcionalidade.

1. Adicionamos a pasta com o nome payments dentro da pasta snipplets

2. Dentro desta pasta, criamos os seguintes arquivos, cada um com seu respectivo código. É importante manter os IDs e classes "js -..." para garantir sua operação quando adicionamos JavaScript

Installments.tpl

Usamos esse arquivo para mostrar a melhor opção de parcelas tanto no detalhe do produto quanto na lista e no carrinho de compras (somente em lojas no Brasil).

Antes de ver o código, revisaremos algumas condições:

  • {% if product%} nós o usamos para incluir o snipplet para mostrar parcelas de um produto específico ou parcelas abaixo do total do carrinho (somente em lojas no Brasil)
  • {% if product_detail%} define se usaremos o código para parcelas nos detalhes do produto ou na listagem. Dessa forma, podemos adicionar classes "js -..." ou "IDs" para atualizar as cotas usando JavaScript quando o usuário alterar as variantes.
  • {% if store.country == 'AR'%} ou {% se store.country == BR%} for usado para exibir parcelas de maneira diferente dependendo de cada país.

O código deste tpl é o seguinte:

{% 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" 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 %}

    {% 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 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 %}
          {% if store.country != 'AR' or product_detail %}
            {% 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 {% if template == 'cart' %}text-md-center{% endif %}"> 
    {{ '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 

Neste arquivo, temos o componente modal que incluímos usando um embed (mais tarde, criaremos esse componente para evitar erros).

Dentro do modal estão as tabs que permitem ao usuário visualizar as diferentes alternativas de pagamento com cada meio: Pagseguro, Mercado Pago, PayPal, etc.

Há também a chamada para os dois snipplets descritos abaixo: payments-info.tpl e payments-info-banks.tpl

Tudo fora de {% if store_set_for_new_installments_view%} mostra uma lista de parcelas para lojas não argentinas ou brasileiras.

{% 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 deste tpl temos informações sobre cartões de crédito e parcelas para os meios de pagamento em lojas de Brasil.

Incluímos uma tabela de parcelas que se aplica apenas a métodos de pagamento em lojas que não são da Argentina, portanto, o condicional {% if store.country! = 'AR'%}

  • Tipo de pagamento: cartão de crédito, boleto, debito, etc
  • Parcelas com e sem juros:
    • Valor de cada parcela
    • Total do valor do produto em cada parcelado
  • Logotipos de cartão de crédito aceitos

{% 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

Este arquivo mostra as alternativas de pagamento com o Mercado Pago, apenas em lojas na Argentina, onde precisamos mostrar informações de pagamento para cada banco. A estrutura é semelhante ao payments-info.tpl em relação às lojas argentinas.

3. Adicionamos a chamada aos snipplets criados na etapa 3 no detalhe do produto, no item listado e no carrinho.

Detalhe do produto

Para o detalhe do produto, precisaremos adicionar installments.tpl e payments.tpl, no layout Base, fazemos isso no produto snipplet/product-form.tpl, mas no seu design você pode ter que fazer isso no template templates/product.tpl

A chamada para informações sobre parcelas será idealmente localizada perto do preço da seguinte forma:

{# Product installments #}

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

Enquanto o snipplet com o modal de detalhes de pagamento pode ser localizado no final do snipplet ou o modelo

{# Product payments details #}

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

Item do listado

O item na lista de produtos em Base é chamado item.tpl, mas também pode ser single_product.tpl em seu design. Vamos chamar as taxas assim:

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

Carrinho de compras

Isto aplica-se apenas a lojas no Brasil, no layout Base estará dentro do snipplet cart-totals.tpl, em seu design pode ser o template templates/cart.tpl ou snipplets/cart-panel-ajax.tpl, o importante é que está abaixo do total do carrinho. Nós incluímos assim:

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

4. Teremos que adicionar alguns IDs e classes nos detalhes do produto para que as cotas sejam atualizadas ao alterar a variante. No layout Base, modificamos o template product.tpl e o snipplet product-form.tpl; mas no seu caso, você só precisa modificar product.tpl.

product.tpl

No div pai que abrange todo o conteúdo do detalhe do produto, inclua os seguintes IDs e seletores "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

Neste arquivo iremos substituir o código que você tem em relação ao preço do produto com o seguinte (lembre-se que esta alteração se aplica neste snipplet mas no seu caso você pode aplicá-lo onde quer que você tenha o preço do produto)

{# 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>

Também precisamos adicionar a classe js-addtocart ao botão “Comprar”, assim:

{% 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. Agora precisamos criar o snipplet para o componente modal ou pop-up dentro da pasta snipplets. Este tpl é chamado modal.tpl e o código é:

{# /*============================================================================
  #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. Adicionamos a classe js-variation-option no select para variantes de detalhes do produto. No layout Base, isso está no tpl product-variants.tpl dentro da pasta snipplets/product. Em seu design, esse arquivo pode ser chamado de variants.tpl ou você deve aplicar a alteração diretamente no modelo product.tpl

7. Finalmente, para a parte HTML, precisamos adicionar uma pasta SVG dentro da pasta snipplets. Aqui vamos adicionar os SVGs para o ícone do cartão de crédito no detalhe do produto com o nome credit-card-blank.tpl, e o ícone para fechar o popup com o nome 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:

Ter adicionado helper classes em seu layout. Você pode seguir este pequeno tutorial para fazer isso (é só copiar e colar algumas classes, não leva mais que 1 minuto).

1. Adicionamos o seguinte SASS de cores em style-colors.scss.tpl (ou na stylesheet do seu layout que possui as cores e fontes da loja). Lembre-se de que as variáveis de cores e fontes podem variar em relação ao seu layout:

@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. Adicione os estilos no arquivo static/style-critical.tpl

Se em seu layout você usar um stylesheet para o CSS crítico, precisaremos do seguinte código dentro dele, do contrário, você pode unificar o CSS dos passos 2 e 3 em um único arquivo.

/* // 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. Adicione os estilos no arquivo static/style-async.tpl

Se em seu layout você usar um stylesheet CSS assíncrono, precisaremos do seguinte código dentro dela, do contrário, você pode unificar o CSS dos passos 2 e 3 em um único arquivo.

@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. JavaScript precisam ser adicionados no arquivo store.js.tpl (ou onde você tem suas funções JS). O código que precisamos é o seguinte:

{# /* // 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}));
        });
    }

Localize a função changeVariant da função e substitua-a pelo seguinte: O código que precisamos para o carrinho é o seguinte:

{# 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 fim, adicione a seguinte função:

    $(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 neste tutorial usamos a técnica de lazy load com o plugin Lazysizes, precisamos adicioná-lo. Para ver como fazer isso, você pode ler este pequeno artigo e continuar com este tutorial.

Traduções

Nesta etapa, adicionamos os textos para as traduções no arquivo 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"

Pronto! Já tem a funcionalidade aplicada. Parabéns!