Cross selling

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.