Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Información de cuotas en productos

Esta funcionalidad permite mostrar la información de cuotas en el listado y página de productos.

Información de cuotas en el detalle de producto

1. Copiá el snipplet “installments_in_product.tpl” en la carpeta "Snipplets".

(En caso de no tener los archivos, podes descargar el código  de las plantillas de Tienda Nube).

2. Añadí el Javascript en layout.tpl (Importante: este script también funciona con la funcionalidad de variantes).  El script de 'installments' va dentro de changeVariant function.

Chequeá la referencia de JavaScript en caso de que no lo tenga. 

{{ '//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. Añadí el label 'installments' en single_product.tpl por debajo del <span> de precio (como en el caso de la plantilla 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. Añadí el botón de 'installments' dentro de product.tpl en la estructura de la descripción (esto dependerá de la plantilla en la que estés trabajando).

 {% 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. Añadí el modal de 'installments' abajo de todo del código 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. Agregá las traducciones a 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"

Sin compromiso de compra ni estadía mínima. No hay costo de registro o cancelación.