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.
