Estás leyendo la publicación: Cómo mostrar una ventana emergente después de la acción “Agregar al carrito” en Magento 2
Una buena experiencia del cliente impacta en la lealtad a la marca y la retención de clientes. Un comerciante puede facilitar el proceso de compra de los clientes y mejorar la experiencia en el sitio.
Una buena experiencia de cliente siempre es más persuasiva que cualquier buena publicidad.
Por lo tanto, se me ocurrió una de esas soluciones que facilitará a los clientes proceder al pago y acelerar el proceso de conversión.
En la tienda Magento 2 predeterminada, el cliente solo recibe un pequeño aviso que dice “Usted agregó el producto a su carrito de compras”. en la parte superior o inferior de la página cuando hace clic en el botón Agregar al carrito.
En lugar de eso, ofrezca a sus clientes una verificación visual inmediata sin tener que desplazarse hacia arriba o hacia abajo mostrando una ventana emergente cuando agreguen un producto al carrito.
¡Un beneficio adicional es que la ventana emergente mejora el diseño y el diseño de su tienda!
Por lo tanto, muestre una ventana emergente en la acción “agregar al carrito” en su tienda usando el método que se muestra aquí:
Método para mostrar una ventana emergente después de la acción “Agregar al carrito” en Magento 2
- Copiar catalog-add-to-cart.js a tu tema de
proveedor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js a app/design/frontend/Theme/ThemeName/Magento_Catalog/web/js/catalog-add-to-cart.js
o anular catalog-add-to-cart.js a su módulo personalizado. - Crear requirejs-config.js presentar en app\code\Vendor\Module\view\frontend y usa el siguiente código.
var config = { map: { ‘*’: { ‘Magento_Catalog/js/catalog-add-to-cart’: ‘Vendor_Module/js/catalog-add-to-cart’ } } };
var configuración =
{
mapa:
{
‘*’:
{
‘Magento_Catalog/js/catalog-add-to-cart’: ‘Vendor_Module/js/catalog-add-to-cart’
}
}
};
- Encontrar ajaxEnviar: función y agregue el siguiente código después self.enableAddToCartButton(formulario);
// código modal emergente var popup = $(‘
‘).html($(‘.page-title span’).text() + ‘< span> se ha agregado al carrito.‘).modal({ modalClass: ‘add-to-cart-popup’, title: $.mage.__(“Título emergente”), botones: [
{
text: ‘Continue Shopping’,
click: function () {
this.closeModal();
}
},
{
text: ‘Proceed to Checkout’,
click: function () {
window.location = window.checkout.checkoutUrl
}
}
]
}); popup.modal(‘openModal’);1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
dieciséis
17
18
19
20
// código modal emergente
var popup = $(‘
‘).html($(‘.page-title span’).text() + ‘ ha sido agregado al carrito.‘).modal({modalClass: ‘agregar al carrito-ventana emergente’,
título: $.mage.__(“Título emergente”),
botones: [
{
text: ‘Continue Shopping’,
click: function () {
this.closeModal();
}
},
{
text: ‘Proceed to Checkout’,
click: function () {
window.location = window.checkout.checkoutUrl
}
}
]
});
popup.modal(‘openModal’);
Pase un título emergente según sus requisitos.
La ventana emergente con el botón “Continuar comprando” y “Proceder al pago” se mostrará como la imagen a continuación:
¡Ofrezca a sus clientes una descripción general clara de los productos que han agregado al carrito usando este método!
¡Eso es todo!
Si tiene alguna duda con respecto a esta publicación, solo menciónela en la sección de Comentarios a continuación.
Me gustaría ayudar.
No dude en compartir la solución con la comunidad de Magento a través de las redes sociales.
Gracias
