En este tutorial, vamos a implementar la promoción de cross selling al agregar un producto al carrito.
HTML
1. Vamos a crear un nuevo snipplet llamado snipplets/cross-selling.tpl dentro de la carpeta snipplets. En este archivo, utilizaremos el componente privado cross-selling-form.
El código correspondiente es el siguiente:
{# Cross selling promotion form #}
{% if promotion %}
{{ component(
'promotions/cross-selling-form', {
css_classes: {
main_container: 'm-auto',
image_container: 'position-relative',
discount_percentage_label: 'label label-accent position-absolute label-top-left',
image: 'img-fluid w-100 lazyload product-image-limited',
form_container: 'px-4 py-3',
product_name: 'font-big text-center mb-2',
prices_container: 'price-container text-center mb-3',
price_wrapper: 'd-inline-block',
original_price: 'price-compare font-weight-normal mb-0',
promo_price: 'text-primary mb-0',
variant_selection_group: 'form-group px-2 mb-2',
variant_selection_label: 'form-label',
variant_select: 'form-select',
variant_select_icon_container: 'form-select-icon',
add_to_cart_button: 'btn btn-primary btn-block mt-3 mb-1 cart'
},
icon_config: {
use_svg_icon: false,
use_custom_icon: true,
custom_icon_markup: include("snipplets/svg/chevron-down.tpl", { svg_custom_class: "icon-inline icon-w-12 icon-md mr-3" })
}
})
}}
{% endif %}
2. Hacia el final del archivo snipplets/header/header.tpl, es necesario agregar el siguiente extracto de código:
{# Cross selling promotion notification on add to cart #}
{% embed "snipplets/modal.tpl" with {
modal_id: 'js-cross-selling-modal',
modal_class: 'bottom modal-bottom-sheet h-auto overflow-none modal-body-scrollable-auto',
modal_header: true,
modal_header_class: 'm-0 w-100',
modal_position: 'bottom',
modal_transition: 'slide',
modal_footer: true,
modal_width: 'centered-md m-0 p-0 modal-full-width modal-md-width-400px'
} %}
{% block modal_head %}
{{ '¡Descuento exclusivo!' | translate }}
{% endblock %}
{% block modal_body %}
{# Promotion info and actions #}
<div class="js-cross-selling-modal-body" style="display: none"></div>
{% endblock %}
{% endembed %}
3. Ahora bien, para que el modal pueda abrirse y mostrar la promoción correctamente es necesario que en snipplets/modal.tpl contemos con el parámetro {{ modal_header_class }}
. En caso de no tenerlo es necesario modificar el componente. Para ello, debemos buscar la siguiente línea en ese archivo:
<div class="js-modal-close {% if modal_mobile_full_screen %}js-fullscreen-modal-close{% endif %} modal-header">
Y reemplazarla por esta:
<div class="js-modal-close {% if modal_mobile_full_screen %}js-fullscreen-modal-close{% endif %} modal-header {{ modal_header_class }}">
4. Es necesario ajustar el resumen del carrito para mostrar el descuento aplicado por cross selling. Para ello, en snipplets/cart-totals.tpl, debemos buscar la siguiente línea, que debería aparecer dos veces:
<span class="js-promo-in" style="display:none;">{{ "en" | translate }}</span>
Y justo encima de esa línea, agregar lo siguiente:
<span class="js-promo-discount" style="display:none;"> {{ "Descuento" | translate }}</span>
Posteriormente, debemos buscar:
{% elseif promotion.isBuyXPayY %}
{{ promotion.buy }}x{{ promotion.pay }}
Y debajo incorporar:
{% elseif promotion.isCrossSelling %}
{{ "Descuento" | translate }}
Ambos cambios deberían aparecer dos veces en el mismo archivo.
CSS
Requisito:
Tener agregados en tu diseño las clases helpers. Puedes seguir este este pequeño tutorial para hacerlo (simplemente es copiar y pegar algunas clases, no tomará más de 1 minuto).
1. Para que los estilos se apliquen correctamente, es necesario ubicarlos en el lugar adecuado. Todos los cambios se realizarán en static/css/style-async.scss.tpl.
Buscamos el selector .modal
que está fuera de los media queries. Luego, dentro de esta, buscamos el selector &-centered
, y allí insertamos lo siguiente:
&-md.modal-show {
left: 50%;
transform: translateX(-50%);
&.modal-bottom-md,
&.modal-bottom {
top: 50%;
bottom: auto;
left: 50%;
height: fit-content;
transform: translate(-50%, -50%);
}
}
2. Luego, debemos agregar estos estilos, verificando que no queden dentro de ninguna media query:
.modal-full-width {
width: 100%;
max-width: 100%;
}
.modal-body-scrollable-auto .modal-body {
max-height: calc(100vh - 100px);
overflow-y: auto;
}
.label-top-left {
top: 25px;
left: 25px;
z-index: 2;
}
.product-image-limited {
max-height: 320px;
max-width: 100%;
object-fit: contain;
}
3. Por último, en la sección de media queries agregamos lo siguiente:
{# /* // Max width 767px */ #}
@media (max-width: 767px) {
.product-image-limited {
max-height: 210px;
}
}
4. Dentro de la misma sección, debemos buscar la media query de min-width: 768px
y, dentro de ella, localizar la definición de .modal
, como antes, pero esta vez para la versión desktop. En este caso, lo que debemos agregar es lo siguiente:
&-centered-md.modal-show {
left: initial;
transform: none;
&.modal-bottom {
top: 50%;
}
}
Y, más abajo:
&-md-width-400px {
width: 400px;
max-width: 90vw;
}
JS
1. Es necesario modificar la función de callback que se ejecuta al agregar un producto al carrito. Para ello, debemos ir al archivo base/static/js/store.js.tpl y buscar la siguiente línea:
var callback_add_to_cart = function(html_notification_related_products){
Luego, reemplazarla por:
var callback_add_to_cart = function(html_notification_related_products, html_notification_cross_selling) {
2. Dentro del mismo callback, agregamos el siguiente código al final de la función:
{# Display cross-selling promotion modal #}
if (html_notification_cross_selling != null) {
jQueryNuvem('.js-cross-selling-modal-body').html("");
modalOpen('#js-cross-selling-modal');
jQueryNuvem('.js-cross-selling-modal-body').html(html_notification_cross_selling).show();
}
{
# Change prices on cross-selling promotion modal #
}
const crossSellingContainer = document.querySelector('.js-cross-selling-container');
if (crossSellingContainer) {
LS.fillCrossSelling(crossSellingContainer);
}
Traducciones
En este paso agregamos los textos para las traducciones en el archivo config/translations.txt:
es "¡Descuento exclusivo!"
pt "Desconto exclusivo!"
en "Exclusive discount!"
es_mx "¡Descuento exclusivo!"
es "Descuento"
pt "Desconto"
en "Discount"
es_mx "Descuento"
Activación
Para activar la funcionalidad, accede al administrador de la tienda y dirígete a la sección Descuentos > Promociones. Desde allí, crea una nueva promoción, configura los parámetros según sea necesario y guarda los cambios.