Tutorial: parcelamentos

Por: Dannie Karam
Criado em: 24/06/15.
Atualizado em 16/02/18.
5 min
de leitura

Índice

    Se você deseja colocar o parcelamento aceito pela loja em todas as páginas do produto, categoria e até na home da loja, esse tutorial é ideal. Deixe as lojas de seus clientes ainda mais organizadas seguindo os passos abaixo:

    1. Copie o “installlments_in_product.tpl snipplet dentro da pasta snipplet (confira a pasta de temas snipplets).

    2. Adicione o Javascript em layout.tpl. (Importante: este script também funciona com as funcionalidades de variáveis). Os scripts instalados estão dentro da função changeVariant (mudar variável). Idealmente, copie e cole o código abaixo. Cheque as referências do JavaScript caso ainda não tenha.

    {{ '//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js' | script_tag }}
    
    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;
     }
    
    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;
     }
    
    function changeVariant(variant){
     var parent = $("body");
     if (variant.element){
     parent = $(variant.element);
     }
    
    var sku = parent.find('#sku');
     if(sku.length) {
     sku.text(variant.sku).show();
     }
    
    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);
     $('#installment_' + payment_method + '_' + number_of_installment).text(
     number_of_installment + ' - R$' + installment_data.installment_value.toFixed(2) +
     (installment_data.without_interests? ' sem juros' : '')
     );
     });
     });
     if (max_installments_without_interests[0] != 0) {
     $('.installments.max_installments_container .max_installments').text('Até ' + max_installments_without_interests[0] + 'x de R$' + max_installments_without_interests[1] + ' sem juros');
     } else {
     $('.installments.max_installments_container .max_installments').text('Até ' + max_installments_with_interests[0] + 'x de R$' + max_installments_with_interests[1]);
     }
     }
    
    if (variant.price_long){
     parent.find('#price_display').text(variant.price_long).show();
     } else {
     parent.find('#price_display').hide();
     }
    
    if (variant.compare_at_price_long){
     parent.find('#compare_price_display').text(variant.compare_at_price_long).show();
     } else {
     parent.find('#compare_price_display').hide();
     }
    
    if(variant.contact) {
     parent.find('.container-box').hide();
     } else {
     parent.find('.container-box').show();
     }
    
    var button = parent.find('.addToCart');
     button.removeClass('cart').removeClass('contact').removeClass('nostock');
     {% if not store.is_catalog %}
     if (!variant.available){
     button.val('{{ "Sin stock" | translate }}');
     button.addClass('nostock');
     button.attr('disabled', 'disabled');
     $("#shipping-calculator-form").hide();
     } else if (variant.contact) {
     button.val('{{ "Consultar precio" | translate }}');
     button.addClass('contact');
     button.removeAttr('disabled');
     $("#shipping-calculator-form").hide();
     } else {
     button.val('{{ "Agregar al carrito" | translate }}');
     button.addClass('cart');
     button.removeAttr('disabled');
     $("#shipping-calculator-form").show();
     }
     {% endif %}
    
    }

    3. Instale as “etiquetas” de parcelas em single_product.tpl bem abaixo do preço (no caso do tema Luxury).

    {% if product.show_installments %}
     {% set max_installments_without_interests = product.get_max_installments(false) %}
     {% if max_installments_without_interests %}
    
    {{ ‘{1} cuotas de {2} sin interés’ | t(max_installments_without_interests.installment, max_installments_without_interests.installment_data.installment_value_cents | money ) }}

    {% else %} {% set max_installments_with_interests = product.get_max_installments %} {% if max_installments_with_interests %}

    {{ ‘{1} cuotas de {2}’ | t(max_installments_with_interests.installment, max_installments_with_interests.installment_data.installment_value_cents | money) }}

    {% endif %} {% endif %} {% endif %}

    4. Adicione os botões de parcelamento dentro de product.tpl na estrutura de descrição (isso varia de acordo com o tema).

    {% snipplet "installments_in_product.tpl" %}
     {% if product.show_installments and product.display_price %}
     {% set installments_info = product.installments_info %}
     {% if installments_info %}
     {{ "Ver el detalle de las cuotas" | translate }}
     {% endif %}
     {% endif %}

    5. Adicione o modal de parcelamento no rodapé de product.tpl.

    {% if installments_info %}
     {% set gateways = installments_info | length %}
    <div id="InstallmentsModal" class="modal hide fade{% if gateways <= '3' %} two-gates{% endif %}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
     <div class="modal-body">
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
     <div class="installments">
     <ul class="nav nav-tabs">
     {% for method, installments in installments_info %}
     <li id="method_{{ method }}" {% if loop.first %}class="active"{% endif %}><a href="#installment_{{ method }}_{{ installment }}" data-toggle="tab">{{ method == 'paypal_multiple' ? 'PAYPAL' : (method == 'itaushopline'? 'ITAU SHOPLINE' : method | upper) }}</a></li>
     {% endfor %}
     </ul>
     <div class="tab-content">
     {% for method, installments in installments_info %}
     <div class="tab-pane{% if loop.first %} active{% endif %}" id="installment_{{ method }}_{{ installment }}">
     <div class="span4">
     {% for installment, data_installment in installments %}
     <span id="installment_{{ method }}_{{ installment }}">
     {{ installment ~ ' x ' ~ data_installment.installment_value_cents | money }}
     {% if data_installment.without_interests %} {{ 'sin interés' | t }}{% endif %}
     </span>
     {% if installment == 12 %}</div><div class="span4">{% endif %}
     {% endfor %}
     </div>
     </div>
     {% endfor %}
     </div>
     </div>
     </div>
    </div>
    {% endif %}

    6. Adicione as traduções no arquivo translations.txt.

    es "{1} cuotas de {2}"
    pt "{1}x de {2}"
    en "In up to {1} installments of {2}"
    
    es "{1} cuotas de {2} sin interés"
    pt "{1}x de {2} sem juros"
    en "In up to {1} installments of {2} without interest"
    
    es "{1} cuotas en tarjeta de crédito"
    pt "{1}x no cartão"
    en "In up to {1} installments"
    
    es "Ver el detalle de las cuotas"
    pt "Ver detalhes das parcelas"
    en "See installments details"
    
    es "sin interés"
    pt "sem juros"
    en "without interests"

    E se você ainda não é parceiro Nuvem mas gostaria de atender seus (E NOSSOS) clientes com uma solução de e-commerce, cadastre-se agora e conheça todos os benefícios.

    Dannie Karam

    Com mais de 10 anos de experiência em gerenciamento de projetos digitais, Danniela é comunicadora, escritora e líder do time de Branding da Nuvem Shop. Gosta de música, viagem, pessoas e culturas. E sempre fala demais, especialmente quando escreve de si em terceira pessoa.


      Registre-se gratuitamente

      Receba posts sobre marketing e empreendedorismo diretamente no seu e-mail.

      Coloque o conhecimento na prática

      +15 mil alunos já aplicaram o aprendizado na Universidade e criaram seus negócios com a Nuvemshop.

      Teste 15 dias grátis

      Faça sua marca crescer

      Cria sua loja virtual com a Nuvemshop e venda de maneira profissional como eles:

      Osmoze - www.osmozestore.com.br
      Morango Brasil - morangobrasil.com.br
      Osram - loja.osram.com.br
      Testar 15 dias grátis