Documentación para Diseñadores

Crea tus propias plantillas en Tienda Nube

Funcionalidad de promociones

La funcionalidad de promociones brinda la posibilidad de crear beneficios económicos para los clientes de la tienda online. Se pueden generar promociones del tipo 2x1 y 3x2. Las mismas se crean desde el Administrador Nube, en la sección Marketing > Cupones y promociones.

En el caso de no encontrar esa opción, comunicate con nosotros a través del email hola@tiendanube.com, para que habilitemos la funcionalidad.

Hacer visibles las promociones creadas en el Administrador Nube


Si bien al crear las promociones, ya se van a aplicar en las compras de los clientes, es fundamental que las mismas estén visibles en la tienda online. De esta manera, los compradores van a poder verlas y conocer los beneficios de cada una, lo que ¡incrementará las oportunidades de venta!
 

Aclaración

Es de gran importancia tener en cuenta que el siguiente tutorial está basado en la plantilla New Linked Man (diseños Man y Woman).

Si cuando abriste el FTP seleccionaste otro diseño, es posible que el código tenga pequeñas modificaciones y  pueden existir variaciones con respecto a los estilos de cada plantilla.

También, cabe aclarar que este layout usa Bootstrap 2. En caso de usar uno con Bootstrap 3, probablemente deberás reemplazar algunas clases de CSS, como "visible-phone" y "hidden-phone" por "visible-xs" y "hidden-xs".


1. Mostrar la promoción en el listado de productos:

Para agregar el cartel con el tipo de promoción que tiene el producto, vas a necesitar modificar el siguiente tpl: snipplets/single_product.tpl

Dentro del archivo, hay que encontrar el siguiente código:

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

Y definir que también considere los productos que tengan promociones:

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

Tenés que cambiar la condición en donde generamos actualmente el cartel de promociones, en el caso de que el producto tenga un precio promocional.

La condición que usamos hoy es:

{% 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 %}

Debés modificarla, para primero preguntar si el producto tiene precio promocional o no:

{% 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 %}">

* Es importante que se pregunte primero si hay una promoción y, después, si tiene precio promocional, y no al revés.

2. Mostrar la promoción en el producto específico:

Para agregar la información a modificar en esta sección, trabajá en el siguiente tpl: /templates/product.tpl

Primero, asegurate de encontrar la parte del código en donde se crea el cartel con el % de descuento 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>

Una vez que lo hayas hecho, modificalo para que también considere las promociones generadas:

<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 también es fundamental mostrar a los clientes información más detallada de la promoción que se está aplicando, hay que buscar en donde dice:

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

E inmediatamente antes, agregar el siguiente 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 %}

* En caso de estar usando otra plantilla, puede que sea necesario modificar, un poco, en dónde pegamos este código, para que quede acorde al resto del detalle del producto. En general, te recomendamos mostrarlo después de que se genera el precio y el precio promocional.

3. Mostrar la promoción en el pop-up de compra rápida:

Si la tienda tiene habilitada la opción del pop-up de compra rápida, también vas a necesitar que la promoción se muestre en este tpl: snipplets/quick-shop.tpl

Como en el detalle del producto, en este punto recomendamos mostrar el cartel con el tipo de promoción que tiene dicho producto, y una descripción un poco más detallada sobre la promoción específica.

Para mostrar el cartel, debés cambiar 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>

Y para agregar descripción más detallada, podés colocar, antes de este 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 las promociones en el carrito de compra:

Más allá de que es necesario que los clientes vean las promociones antes de comprar, es probable que también quieran saber cómo esto va afectando sus compras.

El precio final se va a ver correctamente (con las promocioness aplicadas), aunque no agregues esta información, pero es primordial darles visibilidad, ya que es un momento muy importante en el proceso de compra.

En el caso de tener habilitada la opción de “carrito de compras rápidas”, vas a necesitar modificar el siguiente archivo: snipplets/cart-panel-ajax.tpl

Lo único que tenés que hacer, es 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>

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

También, hay que modificar el siguiente archivo: templates/cart.tpl

Acá solo necesitás 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>

Y reemplazarlo por este otro:

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

Si estás usando la plantilla Man, vas a necesitar hacer lo siguiente en este mismo archivo:

Reemplazar 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.total }}">
<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. Modificaciones en la hoja de estilos:

El CSS a agregar para que las promociones se vean correctamente, es el siguiente:

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

El mismo se encuentra en el archivo de static/custom.scss.tpl

Y en tu archivo de CSS, es necesario adicionar el siguiente 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;
}

Recordá que dependiendo de los cambios que hayas hecho, puede que tengas que hacer pequeñas modificaciones para que las promociones se vean con el mismo estilo de la tienda. 

6. Modificaciones en los archivos de traducción:

Por último, en el archivo de config/translations.txt es importante agregar las siguientes traducciones:

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"

¡Listo! Con los pasos detallados en el instructivo, las promociones deberían visualizarse correctamente en la tienda.
 

Importante: Te aconsejamos probarlo bien para asegurarte de que todo se vea como lo querés

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