Documentação para Web Designers

Crie seus próprios layouts na Nuvem Shop

Funcionalidade de promoções

A funcionalidade de promoções oferece a possibilidade de criar benefícios econômicos para os clientes da loja online.

Podem ser geradas promoções do tipo 2x1 e 3x2.

A mesmas são criadas a partir do Administrador Nuvem, na seção Marketing > Cupons e promoções. No caso de não encontrar essa opção, entre em contato conosco através do e-mail contato@nuvemshop.com.br, para que habilitemos a funcionalidade.

Fazer visíveis as promoções criadas no Administrador Nuvem

Apesar de que ao criar as promoções elas já serão aplicadas nas compras dos clientes, é fundamental que as mesmas estejam visíveis na loja online. Desta maneira, os compradores poderão vê-las e conhecer os benefícios de cada uma, o que aumentará as oportunidades de venda!

Esclarecimento
É de grande importância ter em conta que o seguinte tutorial está baseado no modelo New Linked Man (designs Man e Woman).

Se quando abrir o FTP selecionar outro design, é possível que o código tenha pequenas modificações e podem existir variações referentes aos estilos de cada modelo.

Também, cabe esclarecer que este layout usa Bootstrap 2. No caso de usar um com Bootstrap 3, provavelmente deverá substituir algumas classes de CSS, como “visible-phone” e “hidden-phone” por “visible-xs” e “hidden-xs”.

1. Mostrar a promoção na lista de produtos:

Para adicionar o cartel com o tipo de promoção que tem o produto, necessitará modificar o seguinte tpl: snipplets/single_product.tpl

Dentro do arquivo, deve encontrar o seguinte código:

{% set grid_product_show_labels = product.free_shipping or product.compare_at_price or not product.has_stock %}

E definir que também considere os produtos que tenham promoções:

{% set grid_product_show_labels = product.free_shipping or product.compare_at_price or not product.has_stock or product.promotional_offer %}

Você deve mudar a condição onde geramos atualmente o cartel de promoções, no caso de que o produto tenha um preço promocional.


A condição que usamos hoje é:

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

Você deve modificá-la, para primeiro perguntar se o produto tem preço promocional ou não:

{% if product.promotional_offer %}
	<div class="product-item_label product-item_label-offer product-label offer-product {% if not product.display_price %} d-none{% endif %}">
		<span>
		{% if store.country == 'BR' %}
			{{ "Leve {1} Pague {2}" | translate(product.promotional_offer.script.quantity_to_take, product.promotional_offer.script.quantity_to_pay) }}
		{% else %}
			{{ "Promo" | translate }} {{ product.promotional_offer.script.type }}
		{% endif %}
		</span>
	</div>
{% elseif product.compare_at_price > product.price %}
	<div class="product-item_label product-item_label-offer product-label offer-product {% if not product.display_price %} d-none{% endif %}">

* É importante que se pergunte primeiro se há uma promoção e, depois, se tem preço promocional, e não ao contrário.

2. Mostrar a promoção no produto específico:

Para adicionar a informação a modificar nesta seção, trabalhe no seguinte tpl: /templates/product.tpl

Primeiro, assegure-se de encontrar a parte do código onde se cria o cartel com a % de desconto que se está aplicando:

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

Uma vez que tenha feito isso, modifique-o para que também considere as promoções geradas:

<div class="offer-product {% if not product.promotional_offer %}js-offer-label{% endif %}" {% if not (product.compare_at_price or product.promotional_offer) or not product.display_price %}style="display:none;"{% endif %}>
	<span>
        {% if product.promotional_offer %}
		{% if store.country == 'BR' %}
			{{ "Leve {1} Pague {2}" | translate(product.promotional_offer.script.quantity_to_take, product.promotional_offer.script.quantity_to_pay) }}
		{% else %}
			{{ "Promo" | translate }} {{ product.promotional_offer.script.type }}
		{% endif %}
	{% elseif product.compare_at_price > product.price %}
		<span class="js-offer-percentage">{{ price_discount_percentage |round }}</span>% OFF
	{% endif %}
	</span>	
</div>

Como também é fundamental mostrar aos clientes uma informação mais detalhada da promoção que está sendo aplicada, há que buscar onde se diz:

{% if product.show_installments and product.display_price %}

E imediatamente antes, adicionar o seguinte código:

{% if product.promotional_offer and product.display_price %}
	<div class="row-fluid m-half-bottom m-top m-none-top-xs">
		<h4 class="promo-title text-secondary"><strong>
			{{ "Llevá {1} y pagá {2}!" | translate(product.promotional_offer.script.quantity_to_take, product.promotional_offer.script.quantity_to_pay) }}</strong>
		</h4> 
		{% if product.promotional_offer.scope_type == 'categories' %}
			<p class="promo-message text-secondary">{{ "Válido para" | translate }} {{ "este producto y todos los de la categoría" | translate }}:  
			{% for scope_value in product.promotional_offer.scope_value_info %}
				{{ scope_value.name }}{% if not loop.last %}, {% else %}.{% endif %}
			{% endfor %}</br>{{ "Podés combinar esta promoción con otros productos de la misma categoría." | translate }}</p>
		{% elseif product.promotional_offer.scope_type == 'all'  %}
			<p class="promo-message text-secondary">{{ "Válido para" | translate }} {{ "todos los productos" | translate }}.</br>{{ "Vas a poder aprovechar esta promoción en cualquier producto de la tienda." | translate }}</p>
		{% endif %}  
	</div> 
{% endif %}

* No caso de estar usando outro modelo, pode ser que seja necessário modificar, um pouco, onde pegamos este código, para que fique de acordo ao restante do detalhe do produto. Em geral, te recomendamos mostrá-lo depois de que é gerado o preço e o preço promocional.

3. Mostrar a promoção no pop-up de compra rápida:

Se a loja tem habilitada a opção de pop-up de compra rápida, também irá necessitar que a promoção se mostre neste tpl: snipplets/quick-shop.tpl

Como no detalhe do produto, neste ponto recomendamos mostrar o cartel com o tipo de promoção que tem o referido produto, e uma descrição um pouco mais detalhada sobre a promoção específica.

 

Para mostrar o cartel, você deve mudar este código:

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

Por este:

<div class="offer-product {% if not product.promotional_offer %}js-offer-label{% endif %}" {% if not (product.compare_at_price or product.promotional_offer) or not product.display_price %}style="display:none;"{% endif %}>
<span>
		{% if product.promotional_offer %}
			{% if store.country == 'BR' %}
				 {{ "Leve {1} Pague {2}" | translate(product.promotional_offer.script.quantity_to_take, product.promotional_offer.script.quantity_to_pay) }}
			{% else %}
				{{ "Promo" | translate }} {{ product.promotional_offer.script.type }}
			{% endif %}
		{% elseif product.compare_at_price > product.price %}
			<span class="js-offer-percentage">{{ price_discount_percentage |round }}</span>% OFF
		{% endif %}
</span>
</div>

E para acrescentar uma descrição mais detalhada, você pode colocar, antes deste código:

{% if product.display_price %}
	<div class="m-half-top pull-left ful-width">
{% snipplet "installments_in_product.tpl" %}
</div>
{% endif %}

Este:

{% if product.promotional_offer and product.display_price %}
	<div class="row-fluid m-half-bottom">
		<h4 class="promo-title text-secondary"><strong>
			{{ "Llevá {1} y pagá {2}!" | translate(product.promotional_offer.script.quantity_to_take, product.promotional_offer.script.quantity_to_pay) }}</strong>
		</h4> 
		{% if product.promotional_offer.scope_type == 'categories' %}
			<p class="promo-message text-secondary">{{ "Válido para" | translate }} {{ "este producto y todos los de la categoría" | translate }}: 
			{% for scope_value in product.promotional_offer.scope_value_info %}
				{{ scope_value.name }}{% if not loop.last %}, {% else %}.{% endif %}
			{% endfor %}</br>{{ "Podés combinar esta promoción con otros productos de la misma categoría." | translate }}</p>
		{% elseif product.promotional_offer.scope_type == 'all'  %}
			<p class="promo-message text-secondary">{{ "Válido para" | translate }} {{ "todos los productos" | translate }}.</br>{{ "Vas a poder aprovechar esta promoción en cualquier producto de la tienda." | translate }}</p>
		{% endif %}   
	</div> 
{% endif %}

4. Mostrar as promoções no carrinho de compra:

Além da necessidade de que os clientes vejam as promoções antes de comprar, é provável que também queiram saber como isso vai afetando suas compras.  

O preço final será visto corretamente (com as promoções aplicadas), ainda que não acrescente esta informação, mas é primordial dar-lhes visibilidade, já que é um momento muito importante no processo de compra.

No caso de ter habilitada a opção de “carrinho de compras rápidas”, necessitará modificar o seguinte arquivo: snipplets/cart-panel-ajax.tpl

A única coisa que deve fazer, é encontrar este código:

<h3 id="cart-table-total" class="m-none d-inline-block text-primary" {% if store.editable_ajax_cart_enabled %}data-priceraw="{{ cart.total }}"{% endif %}>{{ cart.total | money }}</h3>
</div>

 E substituí-lo por este:

<h3 id="cart-table-total" class="m-none d-inline-block text-primary" {% if store.editable_ajax_cart_enabled %}data-priceraw="{{ cart.subtotal }}"{% endif %}>{{ cart.subtotal | money }}</h3>
</div>
<div class="overflow-none text-right m-right js-total-promotions total-promotions" {% if cart.items_count == 0 %}style="display:none;"{% endif %}>
	<span class="js-promo-title" style="display:none;">{{ "Promo" | translate }}</span>
	<span class="js-promo-in" style="display:none;">{{ "en" | translate }}</span>
	<span class="js-promo-all" style="display:none;">{{ "todos los productos" | translate }}</span>
	{% for promotion in cart.promotional_discount.promotions_applied %}
	<div class="p-quarter-bottom p-quarter-top">
		{% if(promotion.scope_value_id) %}
			{% set id = promotion.scope_value_id %}
		{% else %}
			{% set id = 'all' %}
		{% endif %}
		<span class="js-total-promotions-detail-row" id="{{ id }}">{{ "Promo" | translate }} {{ promotion.discount_script_type }} {{ "en" | translate }} {% if id == 'all' %}{{ "todos los productos" | translate }}{% else %}{{ promotion.scope_value_name }}{% endif %}:  <span class="font-bold">-{{ promotion.total_discount_amount_short }}</span></span>
	</div>
	{% endfor %}
</div>

Também, há que modificar o seguinte arquivo: templates/cart.tpl

Aqui você só necessita buscar este código:

<div class="totals-container hidden-phone">
<div class='subtotal-price span7' data-priceraw="{{ cart.total }}">
<p>{{ "Subtotal" | translate }}: {{ cart.total | money }}</p>
</div>

E substituí-lo por este outro:

<div class="totals-container hidden-phone">
<div class='subtotal-price span7 subtotal-information' data-priceraw="{{ cart.subtotal }}">
	<p>{{ "Subtotal" | translate }}: {{ cart.subtotal | money }}</p>
</div>
<div class="js-total-promotions total-promotions">
	<span class="js-promo-title" style="display:none;">{{ "Promo" | translate }}</span>
	<span class="js-promo-in" style="display:none;">{{ "en" | translate }}</span>
	<span class="js-promo-all" style="display:none;">{{ "todos los productos" | translate }}</span>
	{% for promotion in cart.promotional_discount.promotions_applied %}
	<div class="p-quarter-bottom p-quarter-top">
		{% if(promotion.scope_value_id) %}
			{% set id = promotion.scope_value_id %}
		{% else %}
			{% set id = 'all' %}
		{% endif %}
		<span class="js-total-promotions-detail-row" id="{{ id }}">{{ "Promo" | translate }} {{ promotion.discount_script_type }} {{ "en" | translate }} {% if id == 'all' %}{{ "todos los productos" | translate }}{% else %}{{ promotion.scope_value_name }}{% endif %}:  <span class="font-bold">-{{ promotion.total_discount_amount_short }}</span></span>
	</div>
	{% endfor %}
</div>

Se está usando o modelo Man, necessitará fazer o seguinte com este mesmo arquivo:

Substituir este código
:

<div class="totals-container visible-phone mobile-totals-container clear">
<div class='subtotal-price span7' data-priceraw="{{ cart.total }}">
<p>{{ "Subtotal" | translate }}: {{ cart.total | money }}</p>
</div>

Por este:

<div class="totals-container visible-phone mobile-totals-container clear">
<div class='subtotal-price span7' data-priceraw="{{ cart.subtotal }}">
<p>{{ "Subtotal" | translate }}: {{ cart.subtotal | money }}</p>
</div>
<div class="js-total-promotions total-promotions">
	{% for promotion in cart.promotional_discount.promotions_applied %}
	<div class="p-quarter-bottom">
		{% if(promotion.scope_value_id) %}
			{% set id = promotion.scope_value_id %}
		{% else %}
			{% set id = 'all' %}
		{% endif %}
		<span class="js-total-promotions-detail-row" id="{{ id }}">{{ "Promo" | translate }} {{ promotion.discount_script_type }} {{ "en" | translate }} {% if id == 'all' %}{{ "todos los productos" | translate }}{% else %}{{ promotion.scope_value_name }}{% endif %}:  <span class="font-bold">-{{ promotion.total_discount_amount_short }}</span></span>
	</div>
	{% endfor %}
</div>

5. Modificações na folha de estilos:

O CSS a adicionar para que as promoções sejam vistas corretamente, é o seguinte:

.text-secondary {
	color: {{ settings.button_secondary_bg }};
}

O mesmo se encontra no arquivo de static/custom.scss.tpl

E em seu arquivo de CSS, é necessário adicionar o seguinte código:

.promo-message{
	font-size: 12px;
	line-height: initial;
	margin-top: 5px;
}

#shoppingCartPage .cart-contents .totals-container .subtotal-information {
	margin-bottom: 5px;
}
#shoppingCartPage .cart-contents .totals-container .subtotal-price {
	float: right;
}
#shoppingCartPage .cart-contents .totals-container .total-price {
	margin-top: 10px;
}
#shoppingCartPage .cart-contents .totals-container .total-promotions {
	font-size: 16px;
	clear: both;
	padding-top: 10px;
	line-height: 1.5;
}
#ajax-cart-details .total-promotions {
	font-size: 16px;
	line-height: 1.5;
}

Recorde que dependendo das mudanças que tenha feito, pode ser que tenha que fazer pequenas modificações para que as promoções sejam vistas com o mesmo estilo da loja.

6. Modificações nos arquivos de tradução:

Por último, no arquivo de config/translations.txt é importante adicionar as seguintes traduções:

es "Promo"
pt "Promoção"
en "Promo"

es "¡Llevá {1} y pagá {2}!"
pt "Leve {1} e pague {2}!"
en "Buy {1} and only pay for {2}"

pt "Leve {1} Pague {2}"

es "Válido para"
pt "Válido para"
en "Available for"

es "este producto y todos los de la categoría"
pt "este produto e todos da categoria"
en "this product and all of the products of category: "

es "todos los productos"
pt "todos os produtos"
en "all products"

es "en"
pt "em"
en "on"

es "Vas a poder aprovechar esta promoción en cualquier producto de la tienda."
pt "Você pode aproveitar esta promoção em qualquer produto da loja."
en "You will be able to use this promotion on any product of the shop"

es "Podés combinar esta promoción con otros productos de la misma categoría."
pt "Nesta promoção você pode combinar este produto com outros da mesma categoria."
en "You can combine this offer with other products of the same category"

Pronto! Com os passos detalhados na instrução, as promoções devem ser visualizadas corretamente na loja.


Importante
Te aconselhamos fazer testes para assegurar que tudo seja visto como quer.