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"