Tutorial: parcelamentos

Í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 %}

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

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