Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Informação de parcelas nos produtos

Informação de parcelas nos produtos permite mostrar as informações de parcelamento na página do produto. Essas informações dependem das configurações feitas no Administrador Nuvem assim como das características dos meios de pagamento escolhidos pelo lojista.

Abaixo você pode ver um exemplo de uma página de produto mostrando as informações de parcelamento:

Información de cuotas en el detalle de producto

1. Copie os snipplet “installments_in_product.tpl” para a pasta "Snipplets".

(caso você não tenha os arquivos faça download do código dos temas Nuvem Shop).

2. Adicione o seguinte código Javascript no arquivo layouts/layout.tpl (Importante: este script também adiciona a funcionalidade de variações). O script de 'installments' está dentro da função changeVariant.

Abaixo está a referencia do JavaScript caso você 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. Adicione o label "Parcelas" no snipplet snipplets/single_product.tpl abaixo do <span> do preço (no caso de você estar utilizando o template Luxury.

{% if product.show_installments %}
    {% set max_installments_without_interests = product.get_max_installments(false) %}
    {% if max_installments_without_interests %}
        <div class="max_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) }}</div>
    {% else %}
        {% set max_installments_with_interests = product.get_max_installments %}
        {% if max_installments_with_interests %}
            <div class="max_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) }}</div>
        {% endif %}
    {% endif %}
{% endif %}

4. Adicione o botão de "Parcelas" dentro do arquivo templates/product.tpl dentro da estrutura de descrição do produto. (Isso dependerá do template quer você estiver usando).

{% snipplet "installments_in_product.tpl" %}
{% if product.show_installments and product.display_price %}
    {% set installments_info = product.installments_info %}
    {% if installments_info %}
        <a id="button-installments" class="button secondary" href="#InstallmentsModal" role="button" data-toggle="modal">{{ "Ver el detalle de las cuotas" | translate }}</a>
    {% endif %}
 {% endif %}

5. Adicione o modal de "Parcelamentos" no fim do código do arquivo templates/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 seguintes traduções ao arquivo config/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"