Label com porcentagem de desconto

Mostrar aos cliente quanto em porcentagem de desconto está economizando em um produto que se encontra em oferta é fundamental para dar visibilidade quanto em dinheiro que ele irá economizar com essa compra.

Neste artigo vamos deixar para trás o label chamado "Oferta" para mostrar a porcentagem de desconto tanto no produto da lista quanto no detalhe do mesmo.

Lista de produtos:

Detalhe do produto

Para poder adicionar esta funcionalidade em sua loja, siga os seguinte passos baseado no modelo Silent:

1. Começaremos mudando o arquivo single_product.tpl. O primeiro passo que deverá fazer é adicionar o seguinte cálculo do twig (no inicio do tpl) que se encarga de calcular matematicamente a porcentagem do desconto do produto:

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

Logo deverá alterar a palavra "Oferta" que se encontra dentro do label pelo valor do calculo mostrado anteriormente.

Deixaria de ter algo assim:

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

Para ter algo assim:

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

Com isso você já terá a funcionalidade para a Lista de produtos.

2. Agora deverá fazer algumas mudanças similares ao passo 1 mas nos arquivos product.tpl ou product-image.tpl (dependendo do modelo que está baseado seu layout) e quick-shop.tpl. 

Novamente será necessário adicionar o código que faz o cálculo do desconto através do twig no começo de ambos os arquivos:

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

Logo terá que alterar o modelo que contem o label que agora está "Oferta" para o novo label que mostra o cálculo de porcentagem de desconto.

Deixaria de ter algo assim:

<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>

Para ter algo assim:

<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 ou product-image.tpl (dependendo do modelo em que está baseado seu layout) e quick-shop.tpl será necessário adicionar as seguintes classes de CSS, as quais serão relacionadas com o javascript para atualizar os valores de desconto e mudar as variantes de um produto.

A) No input que adiciona o produto ao carrinho e envia o formulário de produto será necessário adicionar a classe "js-prod-submit-form", tornando o código similar ao seguinte:

<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) No container principal que contém todo o código do detalhe do produto terá que adicionar a casse "js-product-container", deixando algo como isto:

<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) Na div que contém a mensagem de "Oferta" adicione a classe "js-offer-label". É provável que isto já tenha sido feito no passo 2, mas deveria ficar algo assim:

<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) No container que mostra o preço original e tem o id "price_display", adicione a classe de CSS "js-proce-display", quanto ao container que mostra o preço promocional e tem o id "compare_price_display" adicione a classe de CSS "js-compare-price-display".

E) O passo final do passo 3 é adicionar a classe de CSS "js-variation-option" ao select de HTML encarregado de mudar as variações de um produto. Este pode ser localizado dentro de product.tpl e quick-shop.tpl, ou diretamente dentro do tpl chamado variants.tpl.

Deve ficar da seguinte 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. Por último basta adicionar o javascript correspondente dentro do arquivo layout.tpl abaixo de onde se encontra todo o código Javascript da loja.

$(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();
    }
});

Pronto! Agora sua loja está pronta para mostrar a porcentagem dos descontos.