Header Ads Widget

Ticker

6/recent/ticker-posts

Cómo usar el widget emergente jQuery en Magento 2

Cualquier minorista sabe que una de las claves de las puertas del éxito del comercio electrónico es la buena experiencia del cliente. Pero, ¿qué puedes hacer para mejorarlo? Debe proporcionar un acceso simple a todas las páginas de productos o servicios de su sitio. Sin ninguna duda, el visitante de un sitio web debe saber qué acción realizar después, por ejemplo, de agregar un producto a un carrito de compras. Aquí aprenderá cómo usar los widgets emergentes de jQuery en Magento 2. Siga el artículo para encontrar todos los detalles.

Los widgets jQuery en Magento son una gran herramienta para las operaciones de conjuntos de datos. Al crear un sitio web fácil de navegar y usar, se asegura de que los clientes no se enfrenten a ningún inconveniente mientras compran en su tienda. Al navegar por diferentes sitios, a menudo se encuentra con widgets como ventanas modales o como clasificación y salida de datos necesarios. Los widgets son necesarios cuando necesita prescribir el comportamiento de la página bajo ciertas acciones del usuario.

La mayoría de las tiendas en línea siguen una estrategia: después de agregar un producto a un carrito, se redirige al usuario a una página de carrito. Sin embargo, recomendamos brindarle al usuario una opción: permanecer en esta página o ir a la página del carrito. Además de eso, es una buena idea informar al usuario cuando el producto ya está en el carrito. Puede mostrar un mensaje cuando finalice la operación.

En este artículo, consideraremos la extensión de un módulo estándar, Magento_Ui / js / modal / modal , y lo usaremos para la página del producto.

Cuando un usuario presiona el botón Agregar al carrito , aparecerá una ventana modal que informa sobre el resultado de una operación. Aquí, los usuarios tendrán que elegir entre 2 acciones:

1. Continuar comprando
2. Continuar con el carrito

Primero, necesitamos agregar nuestro módulo. Para hacerlo, cree una carpeta a lo largo de la ruta app / code / CompanyName / CompanyName (en nuestro ejemplo es app / code / BelVG / AddToCartPopup ).

Registre el directorio actual en el sistema como CompanyName_CompanyName . Para hacerlo, debe crear un archivo en la siguiente dirección: app / code / BelVG / AddToCartPopup / registration.php


CompanyName_CompanyName ' se utilizará para hacer referencia al módulo y sus archivos en Magento 2.

A continuación, creamos un archivo xml para inicializar el módulo en el sistema y configurar los ajustes de nuestro componente ( app / code / BelVG / AddToCartPopup / etc / module.xml )


Usando la etiqueta <sequence> en este archivo, indicamos el orden de carga de nuestro módulo. Informa al sistema que cargue el módulo Magento_Catalog antes de nuestra extensión.

Para registrar nuestro módulo en el sistema, necesitamos compilar el código.

php bin/magento setup:upgrade

Después de eso, el módulo aparecerá en la lista de módulos de Magento 2 (puede verificarlo en el archivo de la aplicación / etc / config.php ).

La página de producto estándar en Magento 2 ya tiene el  widget mage.catalogAddToCart . Para agregar una ventana emergente a esta página, necesitamos prescribir un mixin para extender la funcionalidad de un widget estándar.

Para hacerlo, necesitamos crear un nuevo archivo - app / code / BelVG / AddToCartPopup / view / frontend / web / js / catalog-add-to-cart-mixin.js , y usando la función define, nos conectamos las bibliotecas y archivos necesarios. Aquí necesitamos la biblioteca 'jquery', 'mage / translate'.

Necesitamos anular el método ajaxSubmit en el mixin:

(El código de archivo completo se puede encontrar aquí ).


En el código anterior, agregamos opciones para crear una ventana modal y las inicializamos según la respuesta ajax.

También eliminamos la transición automática a la página del carrito y agregamos botones a la ventana modal que se mencionó anteriormente.

Para permitir que nuestro mixin se cargue junto con el archivo principal, debe vincularlo al widget principal. Para hacerlo, usaremos app / code / BelVG / AddToCartPopup / view / frontend / requirejs-config.js


Al final del proceso, puede ver algo como esto:

Cómo usar el widget emergente jQuery en Magento 2

PD: Este ejemplo es un módulo de muestra para un tema personalizado. Es solo una explicación de cómo puede funcionar el widget jQuery.

Con suerte, el artículo le ha proporcionado la información que estaba buscando. Si no es así, necesita algo más o algunos pasos no son lo suficientemente claros, no dude en contactarnos y dejar sus preguntas o ideas en los comentarios a continuación. También puedes contactarnos directamente y estaremos encantados de ayudarte a solucionar cualquier problema de desarrollo.

Publicar un comentario

0 Comentarios