Any retailer knows that one of the keys to the doors of an ecommerce success is good customer experience. But what can you do to improve it? You need to provide a simple access to all your site’s service or product pages. Without any doubts, a website visitor should know what action to perform after, for example, adding a product to a shopping cart. Here you will learn how to use jQuery popup widgets in Magento 2. Follow up the article to find all the details.
jQuery Widgets in Magento are a great tool for dataset operations. Creating an easy to navigate and use website, you make sure that customers will not face any inconvenience while shopping at your store. Surfing different sites, you quite often meet widgets as modal windows or necessary data’s sorting and outputting. Widgets are necessary when you need to prescribe page behavior under certain user actions.
The majority of online stores follow one strategy – after adding a product to a cart, a user is redirected to a cart page. However, we recommend providing a user with a choice: either stay on this page or proceed to the cart page. On top of that, it is a good idea to let the user know when the product is already in the cart. You can display a message when the operation is complete.
In this article, we will consider the extension of a standard module – Magento_Ui/js/modal/modal – and use it for the product page.
When a user presses the Add to the cart button, a modal window informing about the result of an operation will show up. Here, the users will have to choose between 2 actions:
1. Continue shopping
2. Proceed to the cart
First, we need to add our module. In order to do it, create a folder along the path app/code/CompanyName/CompanyName (in our example it is app/code/BelVG/AddToCartPopup).
Register the current directory in the system as CompanyName_CompanyName. In order to do it, you need to create a file at the following address: app/code/BelVG/AddToCartPopup/registration.php
|
1 2 3 4 5 6 7 |
<?php \Magento\Framework\Component\ComponentRegistrar::register( \Magento\Framework\Component\ComponentRegistrar::MODULE, 'CompanyName_CompanyName', __DIR__ ); ?> |
‘CompanyName_CompanyName‘ will be used to refer to the module and its files in Magento 2.
Next, we create an xml-file to initialize the module in the system and configure the settings for our component (app/code/BelVG/AddToCartPopup/etc/module.xml)
|
1 2 3 4 5 6 7 8 |
<?xml version="1.0"?> <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd"> <module name="BelVG_AddToCartPopup" setup_version="1.0.0"> <sequence> <module name="Magento_Catalog" /> </sequence> </module> </config> |
Using the <sequence> tag in this file, we indicate the loading order for our module. It informs the system to load the Magento_Catalog module before our extension.
To register our module in the system, we need to compile the code.
php bin/magento setup:upgrade
After that, the module will appear in the Magento 2 modules list (you can check it in the app/etc/config.php file).
The standard product page in Magento 2 already has the mage.catalogAddToCart widget. To add a popup to this page, we need to prescribe a mixin to extend the functionality of a standard widget.
In order to do it, we need to create a new file – app/code/BelVG/AddToCartPopup/view/frontend/web/js/catalog-add-to-cart-mixin.js, and using the define function, we connect the necessary libraries and files. Here we need the ‘jquery’, ‘mage/translate’ library.
We need to override the ajaxSubmit method in the mixin:
(The full file code you can find here).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
ajaxSubmit: function (form) { var self = this; $.ajax({ url: form.attr('action'), data: form.serialize(), type: 'post', dataType: 'json', success: function (res) { let titleModal, classModal, textModal = typeof(res.messages) == 'undefined' ? '' : (typeof(res.messages[0]) == 'undefined' ? '' : res.messages[0].text), messType = typeof(res.messages) == 'undefined' ? 'error' : (typeof(res.messages[0]) == 'undefined' ? 'error' : res.messages[0].type), popup, buttons; if (messType == "success") { titleModal = $t("This product was added to the cart"); classModal = 'success'; textModal = ""; customerData.reload([section_name], true); } else { if (messType == "notice") { titleModal = $t("Notice"); classModal = 'notice'; customerData.reload([section_name], true); } else { if (messType == "warning") { titleModal = $t("Warning"); classModal = 'warning'; } if (messType == "error") { titleModal = $t("Error"); classModal = 'error'; } } } ... if (messType == "warning" || messType == "error") { buttons = [ { text: $t("Close"), class: 'action primary black', click: function () { this.closeModal(); } } ]; } else { buttons = [ { text: $t("Continue shopping"), class: 'action primary', click: function () { this.closeModal(); } }, { text: $t("Go to cart"), class: 'action primary black', click: function () { window.location = res.backUrl; } } ]; } popup = $('<div>').html(textModal).modal({ modalClass: 'add-to-cart-popup ' + classModal, title: titleModal, buttons: buttons }); popup.modal('openModal'); }, ... }); } }); return $.mage.catalogAddToCart; } }); |
In the code above, we added options to create a modal window and initialized them depending on ajax-response.
We also removed the automatic transition to the cart page and added buttons to the modal window which was mentioned above.
To let our mixin load together with the main file, you need to bind it to the main widget. In order to do it, we will use app/code/BelVG/AddToCartPopup/view/frontend/requirejs-config.js
|
1 2 3 4 5 6 7 8 9 |
var config = { config: { mixins: { 'Magento_Catalog/js/catalog-add-to-cart': { 'BelVG_AddToCartPopup/js/catalog-add-to-cart-mixin': true } } } }; |
At the end of the process, you can see something like this:
PS: This example is a sample module for a custom theme. It is only an explanation on how jQuery widget can function.
Hopefully, the article has given you the information you were looking for. If not, you need something else or some steps are not clear enough, feel free to contact us and leave your questions or ideas in the comments below. You can also contact us directly and we will be glad to help you solve any development problem.
Partner With Us
Looking for a partner to grow your business? We are the right company to bring your webstore to success.
Talk to Andrey
