Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

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.