Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Informação de meios de pagamento e parcelas

Esta funcionalidade permitirá dar mais visibilidade em sua loja, não apenas sobre as parcelas, mas também, sobre cada meio de pagamento disponível, como, por exemplo, um cartão de crédito ou pagamento em dinheiro.

A mudança resultará em algo semelhante ao exibido abaixo:

Todas as alterações que faremos a seguir são baseadas no modelo Trend que usa o Bootstrap 3, no entanto, uma implementação baseada em um modelo com o Bootstrap 2 não sofrerá muitas mudanças.

Importante:

Para aplicar essa funcionalidade, é necessário ter a versão anterior dessa mesma funcionalidade chamada informação de parcelamento em produtos.

Sendo assim, para adicioná-la em sua loja, basta seguir os passos abaixo:

1. Vamos criar uma nova pasta dentro da pasta snipplets chamada de payments:

2. Então dentro desta pasta você deverá adicionar os seguintes arquivos:

payments.tpl: Este arquivo é o pop-up exibido no detalhamento do produto quando você clica em "ver meios de pagamento"

{% if installments_info %}
{% set gateways = installments_info | length %}
{% set store_fit_for_payments = store.country == 'AR' or store.country == 'BR'  %}
    <div id="installments-modal" class="modal fade js-mobile-installments-panel modal-xs modal-xs-right bottom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <a class="js-mobile-toggle-installments modal-xs-header visible-xs" href="#" data-dismiss="modal">
            <i class="fa fa-2x fa-angle-left modal-xs-header-icon"></i>
            <span class="modal-xs-header-text modal-xs-right-header-text">
                {% if store_fit_for_payments %}
                    {{ 'Medios de pago' | translate }}
                {% else %}
                    {{ 'Detalles de las cuotas' | translate }}
                {% endif %}
            </span>
        </a>
        <div class="modal-dialog modal-lg modal-xs-dialog">
            <div class="js-installments-details-container modal-content">
                <div class="modal-body modal-xs-body">
                
                    {# Modal header and gateways tab links #}

                    <div class="nav-tabs-container horizontal-container overide-container-width">
                        <ul class="nav nav-tabs m-right-double m-none-xs">
                            {% for method, installments in installments_info %}
                                <li id="method_{{ method }}" class="js-refresh-installment-data js-installments-gw-tab tab m-bottom-none {% if loop.first %} active {% endif %}" data-code="{{ method }}">
                                    <a href="#installment_{{ method }}_{{ installment }}" class="tab-link" data-toggle="tab">{{ 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 tab m-bottom-none" data-code="{{ custom_payment.code }}">
                                        <a href="#installment_{{ custom_payment.code }}" class="tab-link" data-toggle="tab">{{ custom_payment.name | upper }}</a>
                                    </li>
                                {% endif %}
                            {% endfor %}
                        </ul>
                         <span class="btn btn-floating pull-right hidden-xs" data-dismiss="modal" aria-label="Close">
                          <i class="fa fa-times fa-lg pull-left m-none"></i>
                        </span>
                    </div>

                    {# Gateways tab content #}

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

                                    {% if store_fit_for_payments %}

                                        {# 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 class="m-bottom-quarter p-left-quarter" 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-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="tab-pane js-gw-tab-pane" id="installment_{{ custom_payment.code }}">
                                    <div class="box-container">

                                        {# Custom method instructions #}

                                        <p class="weight-strong m-bottom-half">{{ 'Cuando termines la compra vas a ver la información de pago en relación a esta opción.' | translate }}</p>

                                        {# Price total #}

                                        <h4 class="m-top-quarter">
                                            <span class="m-right-quarter">{{ 'Total:' | translate }}</span><span class="js-installments-one-payment weight-strong text-primary">{{ product.price | money }}</span>
                                        </h4>

                                        {% if custom_payment.discount > 0 %}
                                            <div class="m-top-half"> {{ 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>

                {# Modal footer and close button #}

                <div class="modal-footer p-top-none-xs">
                    <a href="#" class="btn-link pull-right pull-left-xs p-none" data-dismiss="modal"><i class="fa fa-chevron-left visible-xs d-inline-block-xs m-right-quarter" aria-hidden="true"></i>{{ 'Volver al producto' | translate }}</a>
                </div>
            </div>
        </div>
    </div>
{% endif %}

pagamentos-info-banks.tpl: Aqui estão as informações para os meios de pagamento que envolvem promoções com bancos, até agora só é usado para o Mercado Pago Argentina. Este tpl é utilizado dentro do popup, portanto, dentro de payments.tpl.

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

{# Gateways with banks #}

{# Credit cards #}
{% if gateways.cc is not null %}
  <div class="box-title">{{'Tarjetas de crédito' | translate }}</div>
  <div class="box-container">
      <div class="pull-left full-width border-box">

        {# Installments without interest modules by groups, E.g: 3, 6, 9, 12 #}

        {% if gateways.cc is null or gateways.cc is empty is not null %}
          {% for installment, banks in gateways.cc.no_interest %}
            <div class="installments-container">

              {# Installment amount, cost, CFT, 1 payment info and total cost #}

              <h4 class="m-top-none m-bottom-quarter">
                {{ installment }}
                {{ 'cuotas' | translate }}
                {{ 'sin interés de' | t }}
                <span class="js-modal-installment-price text-primary weight-strong" data-installment="{{installment}}"> {{ (product.price / installment) | money }}</span>
              </h4>
              <div class="legal-info p-bottom-half">
                <span class="m-right-quarter">
                  <span>{{ 'CFT: ' | translate }}</span><span class="weight-strong">0,00%</span>
                </span>
                <span class="m-right-quarter">
                  <span>{{ 'Total: ' | translate }}</span><span class="js-installments-one-payment weight-strong">{{ product.price | money }}</span>
                </span>
                <span class="m-right-quarter">
                  <span>{{ 'En 1 pago: ' | translate }}</span><span class="js-installments-one-payment weight-strong">{{ product.price | money }}</span>
                </span>
              </div>

              {# Banks with installments without interest flags #}

              <div class="flags-container">
                {% for bank in banks %}
                  <span class="installments-card">
                    <img src="{{ bank | bank_code_by_name | payment_new_logo }}" class="card-img card-img-big" alt="{{ bank }}">
                  </span>
                {% endfor %}
              </div>
              <div class="divider-dotted"></div>
            </div>
          {% endfor %}
        {% endif %}

        {# Installments with interest in one module #}

        {% if gateways.cc.interest is not null %}
          <div class="installments-container">

            {# Installment amount #}

            <h4 class="m-top-none m-bottom-quarter">
              {{ gateways.max_with_interests ~ ' cuotas con otras tarjetas' | translate }}
            </h4>
            <div class="legal-info p-bottom-half">
              <span>{{ 'O en 1 pago de: ' | translate }}</span>
              <span class="js-installments-one-payment weight-strong text-primary">{{ product.price | money }}</span>
            </div>

            {# Banks with installments with interest flags #}

            {% for bank in gateways.cc.interest %}
              <span class="installments-card js-installments-flag-tab js-installments-cash-tab">
                <img src="{{ bank | bank_code_by_name | payment_new_logo }}" class="card-img card-img-big" alt="{{ bank }}">
              </span>
            {% endfor %}
          </div>
        {% endif %}
      </div>
  </div>
{% endif %}

{# Cash methods #}

{% if gateways.debit is not null or gateways.cash is not null or gateways.transfer is not null %}
  <div class="box-title">{{'Tarjeta de débito y efectivo' | translate }}</div>
  <div class="box-container">

    {# Debit card #}

    {% if gateways.debit is not null %}

      {# Debit price #}

      <h4 class="m-top-none m-bottom-quarter">{{ 'Débito' | translate }}</h4>
      <div class="h6-xs m-bottom-half">
        <span>{{ 'Precio:' | translate }} </span><span class="js-installments-one-payment weight-strong text-primary"> {{ product.price | money }}</span>
      </div>

      {# Debit flags #}

      {% for logo in gateways.debit %}
        <span class="installments-card" data-type="dd" data-code="{{ card }}">
          <img src="{{ logo | payment_new_logo }}" class="card-img card-img-big">
        </span>
      {% endfor %}

      <div class="divider-dotted"></div>

    {% endif %}

    {# Cash #}

    {% if gateways.cash is not null %}

      {# Cash price #}

      <h4 class="m-top-none m-bottom-quarter">{{'Efectivo' | translate }}</h4>
      <div class="h6-xs m-bottom-half">
        <span>{{ 'Precio:' | translate }} </span><span class="js-installments-one-payment weight-strong text-primary"> {{ product.price | money }}</span>
      </div>

      {# Cash flags #}

      {% for logo in gateways.cash %}
        <span class="installments-card" data-type="dd" data-code="{{ card }}">
          <img src="{{ logo | payment_new_logo }}" class="card-img card-img-big">
        </span>
      {% endfor %}

      <div class="divider-dotted"></div>

    {% endif %}

    {# Wire transfer #}

    {% if gateways.transfer is not null %}

      {# Transfer price #}

      <h4 class="m-top-none m-bottom-quarter">{{ 'Transferencia o déposito' | translate }}</h4>
      <div class="h6-xs m-bottom-half">
        <span>{{ 'Precio:' | translate }} </span><span class="js-installments-one-payment weight-strong text-primary"> {{ product.price | money }}</span>
      </div>

      {# Transfer logos #}

      {% for logo in gateways.transfer %}
        <span class="installments-card js-installments-flag-tab js-installments-cash-tab" data-type="dd" data-code="{{ card }}">
          <img src="{{ logo | payment_new_logo }}" class="card-img card-img-big">
        </span>
      {% endfor %}
    {% endif %}
  </div>
{% endif %}

payments-info.tpl: Este arquivo contém informações relacionadas a meios de pagamento que não têm promoções com bancos, por exemplo, PayPal.

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

{# Gateways without banks: cards only #}

{% if installments_data['cards'] %}

    {# Credit cards #}

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

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

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

            {% if installments_data['max_without_interests'] != '0' %}
                <h4 class="m-top-none m-bottom-quarter">
                    {{ installments_data['max_without_interests'] }}
                    {{ 'cuotas' | translate }}
                    {{ 'sin interés de' | t }}
                    <span class="js-modal-installment-price text-primary weight-strong" data-installment="{{ installments_data['max_without_interests'] }}"> {{ (product.price / installments_data['max_without_interests']) | money }}</span>
                </h4>
                <div class="legal-info p-bottom-half">
                    <span class="m-right-quarter">
                        <span>{{ 'CFT: ' | translate }}</span><span class="weight-strong">0,00%</span>
                    </span>
                    <span class="m-right-quarter">
                        <span>{{ 'Total: ' | translate }}</span><span class="js-installments-one-payment weight-strong">{{ product.price | money }}</span>
                    </span>
                    <span class="m-right-quarter">
                        <span>{{ 'En 1 pago: ' | translate }}</span><span class="js-installments-one-payment weight-strong">{{ product.price | money }}</span>
                    </span>
                </div>
            {% elseif installments_data['max_with_interests'] > 0 %}
                <h4 class="m-top-none m-bottom-quarter">
                    {{ 'Hasta' | translate }}
                    {{ installments_data['max_with_interests'] }}
                    {{ 'cuotas' | translate }}
                </h4>
                <div class="legal-info p-bottom-half">
                    <span class="m-right-quarter">
                        <span>{{ 'O en 1 pago de: ' | translate }}</span><span class="js-installments-one-payment weight-strong text-primary">{{ product.price | money }}</span>
                    </span>
                </div>
            {% else %}
                <h4 class="m-top-none p-bottom-half">
                    <span>{{ 'En 1 pago: ' | translate }}</span><span class="js-installments-one-payment text-primary">{{ product.price | money }}</span>
                </h4>
            {% endif %}
        {% endif %}

        {# Credit cards flags #}

        {% for logo in installments_data['cards'] %}
            <span class="installments-card ">
                <img src="{{ logo | payment_new_logo }}" class="card-img card-img-medium">
            </span>
        {% endfor %}

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

            {# Installments list for non AR stores #}

            <div class="divider-dotted m-top-half m-bottom-half"></div>

            <table class="table table-striped m-none">
                <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 class="p-right-none-xs">
                                <strong><span class="js-installment-amount">{{ installment }}</span></strong>
                                </span>{% if installment > 1 %}{{ 'cuotas' | translate }}{% else %}{{ 'cuota' | translate }}{% endif %}</span>
                            </td>

                            {# Installment price #}

                            <td class="p-right-none-xs">
                                <span>{{ 'de ' | translate }}</span>
                                <strong><span class="js-installment-price text-primary">{{ (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 #}

    <div class="box-title">
        {% 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 %}
    </div>

    {# If has debit card or cash #}

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

        {# Cash flags #}

        <div>
            {% for logo in installments_data['direct'] %}
                <span class="installments-card ">
                    <img src="{{ logo | payment_new_logo }}" class="card-img card-img-medium">
                </span>
            {% endfor %}
        </div>

        <div class="divider-dotted"></div>

        {# Cash total #}

        <h4 class="m-top-quarter">
            <span class="m-right-quarter">{{ 'Total:' | translate }}</span><span class="js-installments-one-payment weight-strong text-primary">{{ product.price | money }}</span>
        </h4>

        {# Boleto message #}

        {% if method in ['boleto_paghiper'] and discount > 0.0 %}
            <div class="m-top-half"> {{'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 %}

3. Se no seu modelo houver sugestão de busca, você deverá modificar o tpl search-results.tpl logo abaixo de onde o preço do produto é exibido. Você terá que excluir o que tinha anteriormente relacionado ao parcelamento e colocar o código conforme mostrado abaixo:

{% set product_can_show_installments = product.show_installments and product.display_price and product.get_max_installments.installment > 1 %}
    {% if product_can_show_installments %}
        <span class="hidden-xs font-small">
            {% set max_installments_without_interests = product.get_max_installments(false) %}
            {% if store.country == 'AR' %}
                {% set max_installments_with_interests = product.get_max_installments %}
                {% if max_installments_without_interests and max_installments_without_interests.installment > 1 %}
                    <div class="installments m-top-quarter">{{ "Hasta <strong class='installment-amount'>{1}</strong> cuotas sin interés" | t(max_installments_without_interests.installment, max_installments_without_interests.installment_data.installment_value_cents | money) }}</div>
                {% else %}
                    {% if max_installments_with_interests %}
                        <div class="installments m-top-quarter">{{ "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>
                    {% endif %}
                {% endif %}
            {% else %}
                {% if max_installments_without_interests and max_installments_without_interests.installment > 1 %}
                    <div class="installments m-none">{{ "<strong class='installment-amount'>{1}</strong> cuotas sin interés de <strong class='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="installments m-none">{{ "<strong class='installment-amount'>{1}</strong> cuotas de <strong class='installment-price'>{2}</strong>" | t(max_installments_with_interests.installment, max_installments_with_interests.installment_data.installment_value_cents | money) }}</div>
                    {% endif %}
                {% endif %}
            {% endif %}
        </span>
    {% endif %}
{% endif %}

4. Dentro do tpl single_product.tpl, que representa um produto dentro da   lista, você deverá fazer algo semelhante ao passo 3. Logo abaixo do preço está a informação de parcelamento, apague o antigo e mude para o novo:

{% set product_can_show_installments = product.show_installments and product.display_price and product.get_max_installments.installment > 1 %}
{% if product_can_show_installments %}
    {% set max_installments_without_interests = product.get_max_installments(false) %}
    {% if store.country == 'AR' %}
        {% set max_installments_with_interests = product.get_max_installments %}
        {% if max_installments_without_interests and max_installments_without_interests.installment > 1 %}
            <div class="installments font-small-xs m-top-quarter">{{ "Hasta <strong class='installment-amount'>{1}</strong> cuotas sin interés" | t(max_installments_without_interests.installment, max_installments_without_interests.installment_data.installment_value_cents | money) }}</div>
        {% else %}
            {% if max_installments_with_interests %}
                <div class="installments font-small-xs m-top-quarter">{{ "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>
            {% endif %}
        {% endif %}
    {% else %}
        {% if max_installments_without_interests and max_installments_without_interests.installment > 1 %}
            <span class="installments font-small-xs item-installments">{{ "<strong class='installment-amount'>{1}</strong> cuotas sin interés de <strong class='installment-price'>{2}</strong>" | t(max_installments_without_interests.installment, max_installments_without_interests.installment_data.installment_value_cents | money) }}</span>
        {% else %}
            {% set max_installments_with_interests = product.get_max_installments %}
            {% if max_installments_with_interests %}
                <span class="installments font-small-xs item-installments">{{ "<strong class='installment-amount'>{1}</strong> cuotas de <strong class='installment-price'>{2}</strong>" | t(max_installments_with_interests.installment, max_installments_with_interests.installment_data.installment_value_cents | money) }}</span>
            {% endif %}
        {% endif %}
    {% endif %}
{% endif %}

5. Você também precisará modificar o tpl installments_in_product.tpl, que é responsável por exibir as parcelas logo abaixo do preço de um produto em seu detalhamento. Eu recomendo fazê-lo diretamente substituindo o antigo pelo novo:

{% set product_can_show_installments = product.show_installments and product.display_price and product.get_max_installments.installment > 1 %}
{% if product_can_show_installments %}
    <div class="js-max-installments-container installments">
        <i class="fa fa-credit-card m-right-quarter" aria-hidden="true"></i>
        {% 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_without_interests and max_installments_without_interests.installment > 1 %}
                <div class="product-installments d-inline-block">{{ "Hasta <strong class='installment-amount'>{1}</strong> cuotas sin interés" | t(max_installments_without_interests.installment, max_installments_without_interests.installment_data.installment_value_cents | money) }}</div>
            {% else %}
                {% if max_installments_with_interests %}
                    <div class="product-installments d-inline-block">{{ "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>
                {% endif %}
            {% endif %}
        {% else %}
            {% if max_installments_without_interests and max_installments_without_interests.installment > 1 %}
                    <div class="js-max-installments installments d-inline-block">{{ "<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 installments d-inline-block">{{ "<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 installments d-inline-block" 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 %}

6. Dentro do arquivo variants.tpl, localize a seleção que você colocou para alterar a variável de um produto, se você não tiver esse arquivo, procure a seleção dentro de product.tpl.

<select class="js-refresh-installment-data js-variation-option variant-select form-control select" id="variation_{{loop.index}}" name="variation[{{ variation.id }}]" onchange="LS.changeVariant(changeVariant, '#single-product')">
{% for option in variation.options %}
    <option value="{{ option.id }}" {% if product.default_options[variation.id] == option.id %}selected="selected"{% endif %}>{{ option.name }}</option>
{% endfor %}
</select>

7. Em product.tpl, teremos que adicionar o link que abre o novo popup, mas primeiramente, será necessário limpar alguns códigos.

Localize o seguinte condicional:

% if installments_info %} 

Provavelmente você o encontrará entre as últimas linhas do arquivo. A ideia é apagar tudo o que está dentro ou tudo que se refere ao popup antigo que usamos até agora.

Em seguida, adicione o novo pop-up ao final do arquivo com a seguinte linha:

{# Payments details #}

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

Por outro lado, você deverá excluir tudo o que for relacionado ao link que abria o pop-up antigo, que geralmente é logo antes de abrir a tag <form> do produto.

Uma vez localizado, exclua-o e substitua-o pelo seguinte:

{# Product Installments button and info #}
{% 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 installments_info %}
        <div href="#installments-modal" data-toggle="modal" class="js-refresh-installment-data js-product-payments-container visible-when-content-ready link-modal-xs-right" {% if (not product.get_max_installments) and (not product.get_max_installments(false)) %}style="display: none;"{% endif %}>
            {% snipplet "installments_in_product.tpl" %}
            {% if product.show_installments and product.display_price %}
                <a id="btn-installments" class="btn-link btn-link-small-extra" {% if (not product.get_max_installments) and (not product.get_max_installments(false)) %}style="display: none;"{% endif %}>
                    {% set store_fit_for_payments = store.country == 'AR' or store.country == 'BR'  %}
                    {% if store_fit_for_payments %}
                        {{ "Ver medios de pago" | translate }}
                    {% else %}
                        {{ "Ver el detalle de las cuotas" | translate }}
                    {% endif %}
                </a>
                <div class="visible-xs link-modal-xs-right-icon">
                    {% include "snipplets/svg/angle-right.tpl" %}
                </div> 
            {% endif %}
        </div>
    {% endif %}
{% endif %}

8. No layout.tpl teremos que atualizar e adicionar um novo Javascript.

Se você possui algo parecido com o seguinte nesse arquivo, eu recomendo excluir tudo o que se encontra dentro do if (incluindo o próprio if).

{% if store.installments_on_steroids_enabled %}
...
{% endif %}

Por outro lado, se você realmente tinha a informação passada acima, então você provavelmente tem o seguinte:

{% if store.installments_on_steroids_enabled and product.has_direct_payment_only %}

Modifique-o para que fique assim:

{% if product.has_direct_payment_only %}

Localize a função changeVariant dentro do arquivo, ela deve começar assim:

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);
    }
...

Antes de abrir essa função, adiciona esta outra:

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}));
        });
    }

e antes de fechar o changeVariant adicione o seguinte:

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

Dentro da função changeVariant adicione esta linha:

$('#installments-modal .js-installments-one-payment').text(variant.price_short).attr("data-value", variant.price_number);

Dependendo de como seus arquivos estão atualizados em relação aos nossos modelos, você pode ter que substituir algumas classes por outras em layout.tpl. Mude as classes:

  • installment-amount por js-installment-amount (determina a quantidade de parcelas)

  • installment-price por js-installment-price (determina o valor de cada parcela)

  • installment-total-price por js-installment-total-price (determina o valor total das parcelas)

  • max_installments_container por js-max-installments-container (é o espaço que contém informações de parcelamento logo abaixo do produto)

  • max_installments por js-max-installments

js-mobile-toggle-installments por js-product-payments-container (é o espaço que contém o link que abre o pop-up de parcelamento).

9. Agora é hora de adicionar o CSS relacionado a essa nova funcionalidade.

Se você tem uma folha de estilo para CSS crítico como critical-css.tpl, adicione o seguinte (se você não tiver este arquivo, você pode adicioná-lo na sua folha de estilo comum antes de todo o CSS que adicionaremos abaixo):

@media (max-width: 769px){

    {# /* Modals */ #}

      {# /* Critical mobile modal animation - rest of animations on style.scss.tpl */ #}

      .modal-xs-right.modal.fade,
      .modal-xs-right-out{
        transition: all 1.5s cubic-bezier(.16,.68,.43,.99);
        -webkit-transform: translate3d(200%,0,0);
        -moz-transform: translate3d(200%,0,0);
        -ms-transform: translate3d(200%,0,0);
        -o-transform: translate3d(200%,0,0);
        transform: translate3d(200%,0,0);
      }
}

Adicione a seguinte informação dentro do arquivo SASS, o qual define as cores da loja; nesse caso, ele é chamado de main-color.scss.tpl. Lembre-se de que os nomes das variáveis podem mudar dependendo do seu código ou do modelo que você está utilizando.

body,
.font-body {
    font-size: 14px;
}
.font-medium {
    font-size: 16px;
}
.font-small {
    font-size: 12px;
}
.font-small-extra {
    font-size: 10px;
}


.box-container{
    float: left;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 20px;
    padding:8px;
    border:1px solid rgba($primary-color, 0.4);
}


{# /* // Dividers */ #}


.divider-solid{
    float: left;
    width: 100%;
    margin: 20px 0;
    border-bottom:1px solid rgba($primary-color, 0.2);
}


{# /* // Modals */ #}


.modal-body,
.modal-right{
  background: $white-color;
  color: $primary-color;
}


.modal-body{
  float: left;
  width: 100%;
}


.modal-footer {
  background: $white-color;
  color: $primary-color;
  border-top:1px solid rgba($primary-color, 0.1);
  box-shadow:none;
}


{# /* // Tabs */ #}


.nav-tabs-container{
  border-bottom:1px solid rgba($primary-color, 0.1);
}
.nav-tabs-links{
  border-bottom:0;
  color: $primary-color;
}
.nav-tabs {
    .tab-link,
    .tab-check-link-text{
        color: $primary-color;
    }
    .tab.active{
        .tab-link{
          color: $secondary-color;
          background-color:transparent;
          border:0;
          border-bottom:3px solid $secondary-color;
        }
    }
    .tab-link{
        background-color: transparent;
        &:hover,
        &:focus{
            background-color: transparent!important;
            border:0;
        }
    }
    .tab-check.active{
        .tab-check-link,
        .tab-check-link:focus{
          outline:2px solid $secondary-color;
        }
    }
    .tab-check-link-text{
        outline:1px solid rgba($primary-color, .3);
    }
    .tab-check-icon{
        color: $secondary-color;
        .fa-inverse{
            color:$white-color;
        }
    }
}


{# /* // Tables */ #}


.table-striped {
    >tbody>tr:nth-child(odd) {
        background-color: transparent;
        >th,
        >td {
            background-color: rgba($primary-color, .03);
            border-top: 0;
        }
        >tr>td {
            border-top: 0;
        }
    }
    thead>tr>th,
    >tbody>tr>td {
        border-bottom: 0;
    }
}
.table {
    >thead>tr>th,
    >tbody>tr>th,
    >tfoot>tr>th,
    >thead>tr>td,
    >tbody>tr>td,
    >tfoot>tr>td{
        border:0;
    }
}

@media (max-width: 769px) {

    {# /* Modals */ #}

    .modal-xs,
    .modal{
        background-color:$white-color;
        &-header{
          color: $primary-color;
          &:active{
            background-color:$secondary-color;
            color:$white-color;
            &-icon{
                color:$white-color;
                fill:$white-color;
            }
          }
        }
        &.inverse{
            background-color: $primary-color;
            .modal-xs-header{
                color: $white-color;
            }
            .modal-xs-header-icon{
                color:$white-color;
                fill:$white-color;
            }
        }
        &-footer {
            border: 0;
        }
    }


    .modal-xs-list-item{
        color: $primary-color;
        border-bottom: 1px solid rgba($primary-color, .25);
        &.darker{
            background-color:rgba($primary-color, 0.02);
        }
        .modal-xs-list-icon{
            fill:$secondary-color;
        }
        &:active{
            background-color:$secondary-color;
            color:$white-color;
            .modal-xs-list-icon{
                color:$white-color;
                fill:$white-color;
            }
        }
        &.selected{
            color: $white-color;
            border-right: 0;
            border-left: 0;
            border-bottom: 0;
            background: $secondary-color;
            .modal-xs-radio-icon {
                background: $white-color;
                i{
                    visibility: visible;
                    color: $secondary-color;
                }
            }
        }
        .modal-xs-radio-icon {
            background: rgba($secondary-color, .4);
            color: $secondary-color;
        }
        &.inverse{
            color:rgba($white-color, .8);
            border-bottom: 1px solid rgba($white-color, .05);
            .modal-xs-list-icon{
                fill:$white-color;
            }
        }
    }


    {# /* Links that call the modal from right */ #}


    .btn-modal-xs-right {
        color: $primary-color;
        border: 1px solid rgba($primary-color, .2);
        border-radius: 0;
        background: $white-color;
        &:hover
        &:focus{
          color: $primary-color;
        }
        &-icon{
          fill:$secondary-color;
        }
    }


    .link-modal-xs-right{
        border-top: 1px solid rgba($primary-color, .1);
        border-bottom: 1px solid rgba($primary-color, .1);
    }


    .link-modal-xs-right-icon{
        fill:$primary-color;
    }
}

Então você precisará adicionar o CSS que não está relacionado a cores. Pode ser que você o tenha em uma folha CSS completa ou em uma folha com SASS também.

/* Icons */


.fa-min {
  font-size: 8px;
}
.fa-huge{
  font-size: 6em;
}


/* Titles */


.box-title {
  float: left;
  width: 100%;
  padding-bottom: 10px;
  font-weight: bold;
}


/* // Images */


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


/* // Tables */


.table td,
.table th {
  border-top: 0;
}


/* // Modals */


.modal-right {
  position: fixed;
  top: 0;
  right: 0;
  width: 500px;
  height: 100%;
  z-index: 999999;
  border-left: 1px solid #eee;
  overflow-y: scroll;
  text-align: left;
}
.modal-right-header {
  padding: 15px;
}
.modal-right-body {
  padding: 0 15px 15px 15px;
}


/* Modal Quickshop */
.modal-content{
  border-radius: 0;
}
.modal-body .close{
  position: absolute;
  top: 0;
  right: 6px;
}




.link-modal-xs-right{
  float: left;
  width: 100%;
  padding: 10px 0;
  margin-bottom: 10px;
  cursor: pointer;
}


{# /* // Tabs */ #}


.nav-tabs{
  margin-bottom: 0px;
  border-bottom: 0;
}
.nav-tabs > li {
  display: inline-block;
  float: none; 
}
.tab-link {
  padding: 12px 15px;
  font-size: 14px;
}
.tab-link,
.tab-check-link{
    border-radius: 0;
    border:0;
}
.nav-tabs .tab-check{
  position: relative;
  margin: 2px 5px 2px 2px;
}
.nav-tabs .tab-check .tab-check-icon{
  display:none;
  position: absolute;
  top: -7px;
  right: -5px;
}


.nav-tabs .tab-check-link{
  padding:2px;
  background-color: transparent;
}
.tab-check-link:hover,
.tab-check-link:focus{
  opacity: 0.8;
  background-color: transparent;
  outline-offset:0;
}
.nav-tabs .tab-check-link-text{
  padding: 10px;
  font-size: 14px;
  line-height: 12px;
}
.nav-tabs .tab-check.active .tab-check-link, 
.nav-tabs .tab-check.active .tab-check-link:focus{
  background-color: transparent;
  border: 0;
  line-height: 12px;
  outline-offset: 0;
}
.nav-tabs .tab-check.active .tab-check-icon {
  display: block;
}

@media (max-width: 769px) {


    /* //// Components */ 


    /* Wrappers */ 


    .box-title {
        font-size: 16px;
    }


    /* // Modals */


    .modal-backdrop{
      display: none;
    }
    .modal-open{
      overflow: hidden;
    }
    .modal{
      z-index: 5000;
    }


    .modal-content {
      box-shadow: none;
      border:0;
    }


    .modal-dialog {
      margin: 0;
      -webkit-transform: translate3d(0, 0, 0) !important;
      -ms-transform: translate3d(0, 0, 0) !important;
      -moz-transform: translate3d(0, 0, 0) !important;
      transform: translate3d(0, 0, 0) !important;
    }


    .modal-body {
      padding: 10px;
    }


    .modal-xs {
      display: block;
      position: fixed;
      top: 0;
      z-index: 4000;
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      opacity: 1;
      box-sizing: border-box;
      overflow: auto;
    }
    .modal-xs-header {
      position: relative;
      display: block;
      padding: 15px;
      clear: both;
      text-decoration: none;
      ms-word-break: break-all;
      word-wrap: break-word;
      -webkit-hyphens: auto;
      -moz-hyphens: auto;
      hyphens: auto;
      -webkit-tap-highlight-color: transparent;
    }


    .modal-xs-header-text{
      display: inline-block;
      clear: both;
      font-size: 18px;
    }


    .modal-xs-header-text.modal-xs-right-header-text{
      margin-left: 30px;
    }


    .modal-xs-header-icon{
      position: absolute;
      top: 20px;
    }


    .modal-xs-right {
      left: inherit;
      padding: 0 0 200px 0;
      -webkit-box-shadow: -4px 0 17px 0 rgba(0, 0, 0, 0.23);
      -ms-box-shadow: -4px 0 17px 0 rgba(0, 0, 0, 0.23);
      -moz-box-shadow: -4px 0 17px 0 rgba(0, 0, 0, 0.23);
      box-shadow: -4px 0 17px 0 rgba(0, 0, 0, 0.23);
      -webkit-overflow-scrolling: touch;
    }


    .modal-xs-right.modal.fade.in, 
    .modal-xs-right-in {
      transition: all 0.5s cubic-bezier(0.16, 0.68, 0.43, 0.99);
      -webkit-transform: translate3d(0, 0, 0);
      -ms-transform: translate3d(0, 0, 0);
      -moz-transform: translate3d(0, 0, 0);
      -o-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
    }


    .modal-xs-right.modal.fade.in,
    .modal-xs-right.modal.fade{
      top: 0;
    }


    .link-modal-xs-right,
    .btn-modal-xs-right{
      display: block;
      position: relative;
      float: left;
      width: 100%;
      clear: both;
      box-sizing:border-box;
      padding: 15px 0;
    }


    .link-modal-xs-right:hover,
    .btn-modal-xs-right:hover {
      opacity: 0.8;
    }


    .btn-modal-xs-right {
      margin: 0 0 20px 0;
      padding: 10px 40px 10px 10px;
      -webkit-tap-highlight-color: rgba(0,0,0,0);
      text-align: left;
      text-transform: uppercase;
      font-size: 16px;
    }


    .link-modal-xs-right-icon,
    .btn-modal-xs-right-icon {
      width: 36px;
      height: 36px;
      position: absolute;
      right: 0;
      float: right;
      display: block;
      top: 50%;
      margin-top: -20px;
    }


    /* // Tabs */ 


    .nav-tabs>li{
      display: inline-block;
    }
    .nav-tabs .tab-check{
      margin: 2px 5px 8px 2px;
    }


     /* // Images */ 


    .card-img-big{
      height: 60px;
    }
}

E por último, se você tiver o arquivo critical-css.tpl, você terá que adicionar as seguintes classes.

Dependendo de qual for a versão do código, você pode tentar com a alternativa 1 ou  2. A versão que usamos neste tutorial é a 2.

Se você não tiver um arquivo critical-css.tpl, poderá adicioná-lo ao seu CSS comum no final de todo o processo.

Alternativa 1:

/** PROPERTIES HELPERS ***/

/*CSS properties helpers minified, to unminify it you have to copy the code and paste it here http://unminify.com/, after that paste the unminified code here */

.font-normal,.font-weight-normal{font-weight:400!important}.text-danger{color:red!important}.input-error{border:1px solid #cc4845!important}.border-box{box-sizing:border-box!important}.c-pointer{cursor:pointer!important}.f-none{float:none!important}.d-none{display:none}.d-inline{display:inline}.d-block{display:block}.d-inline-block{display:inline-block}.p-relative{position:relative}.p-absolute{position:absolute!important}.p-fixed{position:fixed!important}.clear-both{clear:both!important}.opacity-80{opacity:.8!important}.opacity-50{opacity:.5!important}.opacity-10{opacity:.1!important}.full-height{height:100%!important}.full-width{width:100%!important}.z-index-above{z-index:999999!important}.m-top{margin-top:20px!important}.m-bottom{margin-bottom:20px!important}.m-right{margin-right:20px!important}.m-left{margin-left:20px!important}.m-all{margin:20px!important}.m-half-top{margin-top:10px!important}.m-half-bottom{margin-bottom:10px!important}.m-half-right{margin-right:10px!important}.m-half-left{margin-left:10px!important}.m-half-all{margin:10px!important}.m-quarter-top{margin-top:5px!important}.m-quarter-right{margin-right:5px!important}.m-quarter-bottom{margin-bottom:5px!important}.m-quarter-left{margin-left:5px!important}.m-none-left{margin-left:0!important}.m-quarter-all{margin:5px!important}.m-double-top{margin-top:40px!important}.m-double-right{margin-right:40px!important}.m-double-bottom{margin-bottom:40px!important}.m-auto{margin:auto!important}.m-none{margin:0!important}.m-none-bottom{margin-bottom:0!important}.m-none-top{margin-top:0!important}.m-center{margin:0 auto!important;position:relative!important;display:block!important}.p-double-top{padding-top:40px!important}.p-double-right{padding-right:40px!important}.p-double-bottom{padding-bottom:40px!important}.p-double-left{padding-left:40px!important}.p-top{padding-top:20px!important}.p-none-top{padding-top:0!important}.p-right{padding-right:20px!important}.p-right-none{padding-right:0!important}.p-left-none{padding-left:0!important}.p-bottom{padding-bottom:20px!important}.p-none-bottom{padding-bottom:0!important}.p-left{padding-left:20px!important}.p-all{padding:20px!important}.p-half-top{padding-top:10px!important}.p-half-right{padding-right:10px!important}.p-half-bottom{padding-bottom:10px!important}.p-half-left{padding-left:10px!important}.p-half-all{padding:10px!important}.p-quarter-top{padding-top:5px!important}.p-quarter-right{padding-right:5px!important}.p-quarter-bottom{padding-bottom:5px!important}.p-quarter-left{padding-left:5px!important}.p-quarter-all{padding:5px!important}.p-none{padding:0!important}.col-tight{padding-left:8px!important;padding-right:8px!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-nowrap{white-space:nowrap!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-wrap{-ms-word-break:break-all!important;word-wrap:break-word!important;-webkit-hyphens:auto!important;-moz-hyphens:auto!important;hyphens:auto!important}.text-decoration-none{text-decoration:none!important}.text-line-through{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.font-italic{font-style:italic!important}.font-bold{font-weight:700!important}.line-height-inherit{line-height:inherit!important}.line-height-initial{line-height:initial!important}ul.list-style-none li{list-style:none!important}.mail-to a,.mail-to a:hover,.no-link,.no-link:focus,.no-link:hover{text-decoration:none!important}.border-radius-none{border-radius:0!important}.overflow-initial{overflow:initial!important}.overflow-inherit{overflow:inherit!important}.overflow-none{overflow:hidden!important}.overflow-y{overflow-y:auto!important}


/* Mobile Helpers */
@media (max-width: 769px) {
    .clear-both-xs{clear:both!important}.f-none-xs{float:none!important}.pull-left-xs{float:left!important}.pull-right-xs{float:right!important}.d-inline-block-xs{display:inline-block!important}.p-half-all-xs{padding:10px!important}.p-none-xs{padding:0!important}.p-left-none-xs{padding-left:0!important}.p-right-none-xs{padding-right:0!important}.p-half-left-xs{padding-left:10px!important}.p-quarter-left-xs{padding-left:5px!important}.p-quarter-right-xs{padding-right:5px!important}.p-half-right-xs{padding-right:10px!important}.p-top-xs{padding-top:20px!important}.p-quarter-top-xs{padding-top:5px!important}.p-half-top-xs{padding-top:10px!important}.p-bottom-xs{padding-bottom:20px!important}.p-half-bottom-xs{padding-bottom:10px!important}.p-double-bottom-xs{padding-bottom:40px!important}.m-none-bottom-xs{margin-bottom:0!important}.m-none-xs{margin:0!important}.m-bottom-xs{margin-bottom:20px!important}.m-half-bottom-xs{margin-bottom:10px!important}.m-quarter-bottom-xs{margin-bottom:5px!important}.m-top-xs{margin-top:20px!important}.m-half-top-xs{margin-top:10px!important}.m-quarter-top-xs{margin-top:5px!important}.m-none-top-xs{margin-top:0!important}.m-quarter-left-xs{margin-left:5px!important}.text-center-xs{text-align:center!important}.text-left-xs{text-align:left!important}.col-tight-xs{padding-left:8px!important;padding-right:8px!important}.drop-shadow-xs{-moz-box-shadow:0 0 3px #ccc!important;-webkit-box-shadow:0 0 3px #ccc!important;box-shadow:0 0 3px #ccc!important}.border-top-none-xs{border-top:0!important}.border-bottom-none-xs{border-bottom:0!important}.full-width-xs{width:100%!important}.horizontal-container{overflow-x:scroll!important;width:100%!important;margin:0}.horizontal-container::-webkit-scrollbar{width:1px!important;height:0!important}.horizontal-container::-webkit-scrollbar-track{background:0 0!important;border-radius:10px!important}.horizontal-container::-webkit-scrollbar-thumb{border-radius:1px!important}.horizontal-container ul,.horizontal-products-scroller{white-space:nowrap!important}
}

Alternativa 2:

/*CSS properties like margins, paddings and text align minified, to unminify it you have to copy the code and paste it here http://unminify.com/, after that paste the unminified code here */ 

.overide-container-width{margin-left:-15px!important;margin-right:-15px!important}.text-danger{color:red!important}.input-error{border:1px solid #cc4845!important}.d-flex{display:flex}.d-inline{display:inline}.d-block{display:block}.d-inline-block{display:inline-block}.d-inline-block-xs{display:none}.center-content{justify-content:center}.p-relative{position:relative!important}.p-absolute{position:absolute!important}.p-fixed{position:fixed}.clear-both{clear:both!important}.opacity-80{opacity:.8!important}.opacity-50{opacity:.5!important}.opacity-10{opacity:.1!important}.full-height{height:100%!important}.full-width{width:100%!important}.m-top{margin-top:20px!important}.m-top-double{margin-top:40px!important}.m-top-half{margin-top:10px!important}.m-top-quarter{margin-top:5px!important}.m-top-none{margin-top:0!important}.m-right{margin-right:20px!important}.m-right-double{margin-right:40px!important}.m-right-half{margin-right:10px!important}.m-right-quarter{margin-right:5px!important}.m-right-none{margin-right:0!important}.m-bottom{margin-bottom:20px!important}.m-bottom-double{margin-bottom:40px!important}.m-bottom-half{margin-bottom:10px!important}.m-bottom-quarter{margin-bottom:5px!important}.m-bottom-none{margin-bottom:0!important}.m-left{margin-left:20px!important}.m-left-half{margin-left:10px!important}.m-left-quarter{margin-left:5px!important}.m-left-none{margin-left:0!important}.m-all{margin:20px!important}.m-all-half{margin:10px!important}.m-all-quarter{margin:5px!important}.m-auto{margin:auto!important}.m-none{margin:0!important}.p-top{padding-top:20px!important}.p-top-double{padding-top:40px!important}.p-top-half{padding-top:10px!important}.p-top-quarter{padding-top:5px!important}.p-top-none{padding-top:0!important}.p-right{padding-right:20px!important}.p-right-double{padding-right:40px!important}.p-right-half{padding-right:10px!important}.p-right-quarter{padding-right:5px!important}.p-right-none{padding-right:0!important}.p-bottom{padding-bottom:20px!important}.p-bottom-double{padding-bottom:40px!important}.p-bottom-half{padding-bottom:10px!important}.p-bottom-quarter{padding-bottom:5px!important}.p-bottom-none{padding-bottom:0!important}.p-left{padding-left:20px!important}.p-left-double{padding-left:40px!important}.p-left-half{padding-left:10px!important}.p-left-quarter{padding-left:5px!important}.p-left-none{padding-left:0!important}.p-all{padding:20px!important}.p-all-half{padding:10px!important}.p-all-quarter{padding:5px!important}.p-none{padding:0!important}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-nowrap{white-space:nowrap!important}.text-lowercase{text-transform:lowercase!important}.text-uppercase{text-transform:uppercase!important}.text-capitalize{text-transform:capitalize!important}.text-wrap{-ms-word-break:break-all!important;word-wrap:break-word!important;-webkit-hyphens:auto!important;-moz-hyphens:auto!important;hyphens:auto!important}.text-underline{text-decoration:underline}.list-unstyled-spaced li{margin-bottom:5px}.list-unstyled-spaced i{margin-right:5px}.overflow-none{overflow:hidden}

/* // Mobile helpers */ 

@media (max-width: 767px) {
  .overide-container-width,.overide-container-width-xs{width:100vw!important}.clear-both-xs{clear:both!important}.f-none-xs{float:none!important}.pull-left-xs{float:left!important}.d-inline-block-xs{display:inline-block!important}.full-width-xs{width:100%!important}.p-all-half-xs{padding:10px!important}.p-all-quarter-xs{padding: 5px!important}.p-none-xs{padding:0!important}.p-top-xs{padding-top:20px!important}.p-right-double-xs{padding-right:40px!important}.p-top-half-xs{padding-top:10px!important}.p-top-quarter-xs{padding-top:5px!important}.p-right-half-xs{padding-right:10px!important}.p-right-quarter-xs{padding-right:5px!important}.p-right-none-xs{padding-right:0!important}.p-bottom-xs{padding-bottom:20px!important}.p-bottom-double-xs{padding-bottom:40px!important}.p-bottom-half-xs{padding-bottom:10px!important}.p-left-half-xs{padding-left:10px!important}.p-left-quarter-xs{padding-left:5px!important}.p-left-none-xs{padding-left:0!important}.m-none-xs{margin:0!important}.m-top-xs{margin-top:20px!important}.m-top-half-xs{margin-top:10px!important}.m-top-quarter-xs{margin-top:5px!important}.m-top-none-xs{margin-top:0!important}.m-right-half-xs{margin-right: 10px!important}.m-bottom-xs{margin-bottom:20px!important}.m-bottom-half-xs{margin-bottom:10px!important}.m-bottom-quarter-xs{margin-bottom:5px!important}.m-bottom-none-xs{margin-bottom:0!important}.m-left-xs{margin-left:20px!important}.m-left-half-xs{margin-left:10px!important}.border-none-xs{border:0!important}.text-center-xs{text-align:center!important}.text-left-xs{text-align:left!important}.horizontal-container{overflow-x:scroll!important;margin:0}.horizontal-container::-webkit-scrollbar{width:1px!important;height:0!important}.horizontal-container::-webkit-scrollbar-track{background:0 0!important;border-radius:10px!important}.horizontal-container::-webkit-scrollbar-thumb{border-radius:1px!important}.horizontal-container ul,.horizontal-products-scroller{white-space:nowrap!important}.list-unstyled-spaced li{margin-bottom:10px}
}

10. A etapa final é adicionar os textos com suas respectivas traduções no arquivo translations.txt (pode ser que alguns já tenham):

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 "Tarjeta de crédito"
pt "Cartão de crédito"
en "Credit card"


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 "Efectivo / Débito online"
pt "À vista / Débito online"
en "Cash / Online debit"


es "Efectivo"
pt "À vista"
en "Cash"


es "Débito online"
pt "Débito online"
en "Online debit"


es "Bancos con"
pt "Bancos com"
en "Banks with"


es "Otros bancos"
pt "Outros bancos"
en "Other banks"


es "Pagás"
pt "Você paga"
en "You pay"


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


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


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


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


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


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


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


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


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


es "Conocé la cantidad de cuotas"
pt "Conheça a quantidade de parcelas"
en "See our installments amount"


es "Boleto Paghiper tiene un"
pt "Boleto PagHiper ofrece"
en "Boleto Paghiper offers a"


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


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 "Cantidad de cuotas"
pt "Quantidade de parcelas"
en "Installments amount"


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


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 "Medios de pago y financiación"
pt "Meios de pagamento e parcelamento"
en "Payment options and installments"


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


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 "Aceptar"
pt "Aceitar"
en "Accept"


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


es "Medio de pago elegido:"
pt "Meio de pagamento escolhido:"
en "Payment method chosen:"


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


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


es "cuotas"
pt "parcelas"
en "installments"


es "cuota"
pt "parcela"
en "installment"


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 "<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 "<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 "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 "<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 "<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 "<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 "Conocé las opciones de pago con"
pt "Conheça as opções de pagamento com"
en "See the payment options with"


es "Conocé la cantidad de cuotas"
pt "Conheça a quantidade de parcelas"
en "See our installments amount"


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


es "Cuotas"
pt "x"
en "Installments"


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


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


es "Volver al producto"
pt "Voltar ao produto"
en "Return to product"


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


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


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


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


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


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


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 "de "
pt "de "
en "of "


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


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


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




es "cuotas"
pt "x"
en "installments"


es "Cuotas"
pt "x"
en "Installments"


es "cuota"
pt "x"
en "installment"


es "Cuotas "
pt "Parcelas"
en "Installments"

Isso é tudo! Agora sua loja está pronta para exibir os meios de pagamento de forma muito mais clara!