Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Cartel de porcentaje de descuento

Mostrarle a los clientes cuanto porcentaje de descuento se están ahorrando en un producto que se encuentra en oferta es clave para darle visibilidad al dinero que se van a ahorrar con esa compra.

En este artículo vamos a dejar atrás el cartel que decía "Oferta" para mostrar el porcentaje de descuento tanto en el listado de productos como en el detalle de los mismo.

Listado de productos:

Detalle del producto

Para poder agregar esta funcionalidad en tu tienda, seguí los siguientes pasos basados en la plantilla Silent:

1. Comenzaremos cambiando el archivo single_product.tpl. Lo primero que deberás hacer es agregar el siguiente calculo de twig (al comienzo del tpl) que se encarga de calcular matemáticamente el porcentaje de descuento del producto:

{% if product.compare_at_price > product.price %}
    {% set price_discount_percentage = ((product.compare_at_price) - (product.price)) * 100 / (product.compare_at_price) %}
{% endif %}

Luego deberás reemplazar la palabra "Oferta" que se encuentra dentro del cartel por el valor de este calculo hecho anteriormente.

Pasarías de tener algo así:

{% if product.compare_at_price %}
    <div class="offer-product {% if not product.display_price %} d-none{% endif %}">{{ "Oferta" | translate }}</div>
{% endif %}

A tener algo así:

{% if product.compare_at_price %}
    <div class="offer-product {% if not product.display_price %} d-none{% endif %}">{{ price_discount_percentage |round }}% OFF</div>
{% endif %}

Con esto ya tendrás lista la funcionalidad para el listado de productos.

2. Ahora deberás hacer algunos cambios similares al paso 1 pero en los archivos product.tpl o product-image.tpl (dependiendo la plantilla en la que este basada tu diseño) y quick-shop.tpl.

Nuevamente necesitarás agregar el código que hace el calculo del descuento mediante twig al comienzo de ambos archivos:

{% if product.compare_at_price > product.price %}
    {% set price_discount_percentage = ((product.compare_at_price) - (product.price)) * 100 / (product.compare_at_price) %}
{% endif %}

Luego tenés que reemplazar la maqueta que contiene al cartel que ahora dice "Oferta" por la nueva maqueta que muestra el calculo del porcentaje de descuento.

Pasarías de algo como esto:

<div class="offer-product js-offer-label"{% if not product.compare_at_price or not product.display_price %}style="display:none;"{% endif %}>
    {{ "Oferta" | translate }}
</div>

A algo como esto:

<div class="offer-product js-offer-label"{% if not product.compare_at_price or not product.display_price %}style="display:none;"{% endif %}>
    <span>
        <span class="js-offer-percentage">{{ price_discount_percentage |round }}</span>% OFF
    </span>
</div>

3. Tanto para product.tpl o product-image.tpl (dependiendo la plantilla en la que este basada tu diseño) y quick-shop.tpl vas a necesitar agregar las siguientes clases de CSS, las cuales se conectaran con Javascript para actualizar los valores de descuento al cambiar las variantes de un producto.

A) Al input que agrega el producto al carrito y envía el formulario de producto necesitarás agregarle la clase "js-prod-submit-form", quedando con un código similar al siguiente:

<div class="addToCartButton clear full-width pull-left">
    {% set state = store.is_catalog ? 'catalog' : (product.available ? product.display_price ? 'cart' : 'contact' : 'nostock') %}
    {% set texts = {'cart': "Agregar al carrito +", 'contact': "Consultar precio", 'nostock': "Sin stock", 'catalog': "Consultar"} %}
    <input type="submit" class="js-prod-submit-form js-addtocart button addToCart {{state}}" value="{{ texts[state] | translate }}" {% if state == 'nostock' %}disabled{% endif %}/>
</div>

B) Al contenedor general que contiene todo el código del detalle de producto tendrás que agregar la clase "js-product-container", dejando algo como esto:

<div class="content-fluid js-product-container product-detail" id="prod-page" itemscope itemtype="http://schema.org/Product" data-variants="{{product.variants_object | json_encode }}">
    <div class="row-fluid">
        <div class="span10 offset1"> {% snipplet "breadcrumbs.tpl" %} </div>
    </div>
...
</div>

C) Al div que contiene al mensaje de "Oferta" agregale la clase "js-offer-label" . Es probable que esto lo hayas hecho en el paso 2 pero debería quedar algo así:

<div class="offer-product js-offer-label"{% if not product.compare_at_price or not product.display_price %}style="display:none;"{% endif %}>
    <span>
    ...
</div>

D) Al contendedor que muestra el precio original y tiene el id "price_display", agregale la clase de CSS "js-price-display", mientras que al contenedor que muestra el precio promocional y tiene el id "compare_price_display" agregale la clase de CSS "js-compare-price-display".

E) El paso final del paso 3 es agregarle la clase de CSS "js-variation-option" al select de HTML encargado de cambiar las variantes de un producto. Este puede estar ubicado dentro de product.tpl y quick-shop.tpl, o directamente dentro del tpl llamado variants.tpl.

Debería quedar de la siguiente forma:

<select class="js-variation-option variation-option" name="variation[{{ variation.id }}]" onchange="LS.changeVariant(changeVariant, '#prod-page')">
    {% for option in variation.options %}
      <option value="{{ option.id }}" {% if product.default_options[variation.id] == option.id %}selected="selected"{% endif %}>{{ option.name }}</option>
    {% endfor %}
</select>

4. Finalmente solo queda agregar el Javascript correspondiente dentro del archivo layout.tpl debajo de todo donde se encuentra el resto del Javascript de la tienda.

$(document).on("change", ".js-variation-option", function(e) {
    var $this_compare_price =  $(this).closest(".js-product-container").find(".js-compare-price-display");
    var $this_price = $(this).closest(".js-product-container").find(".js-price-display");
    var $this_product_container = $(this).closest(".js-product-container");
    var $this_add_to_cart =  $(this).closest(".js-product-container").find(".js-prod-submit-form");
    // Get the current product discount percentage value
    var current_percentage_value = $this_product_container.find(".js-offer-percentage");
    // Get the current product price and promotional price
    var compare_price_value = $this_compare_price.html();
    var price_value = $this_price.html();
    // Filter prices to only have numbers
    old_price_value_filtered = parseInt(compare_price_value.replace(/[^0-9]/gi, ''), 10)/100;
    current_price_value_filtered = parseInt(price_value.replace(/[^0-9]/gi, ''), 10)/100;
    // Calculate new discount percentage based on difference between filtered old and new prices
    price_difference = (old_price_value_filtered-current_price_value_filtered);
    updated_discount_percentage = Math.round(((price_difference*100)/old_price_value_filtered));
    $this_product_container.find(".js-offer-percentage").html(updated_discount_percentage);
    

​   // Código opcional para mostrar u ocultar el cartel de Oferta y Sin Stock al cambiar las variantes
   
    if ($this_compare_price.css("display") == "none") {
        $this_product_container.find(".js-offer-label").hide();
    }
    else {
        $this_product_container.find(".js-offer-label").show();
    }
    if ($this_add_to_cart.hasClass("nostock")) {
        $this_product_container.find(".js-stock-label").show();
    }
    else {
        $this_product_container.find(".js-stock-label").hide();
    }
});

Listo! ya estas listo para mostrar los porcentajes de descuento!

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