Magento 2 Module

How to use Ajax for the newsletter subscription in Magento 2

Hide/Show description

Hi everybody, I am Cuong, Welcome back to my Magento 2 tutorial video series. #Magento2Tutorial #AjaxNewsletterSubscription Today, I am going to show everybody the best practice, How to use Ajax for the newsletter subscription in Magento 2. By default, Magento 2 provides us with a module called Magento_Newsletter, that allows the customer to subscribe to the newsletter by submitting the form showing on the footer. However, when the customer submits the form, the current page must be reloaded, this is not good. To improve the experience of the customer avoiding reloads the current page, we use the Ajax for submitting the form. So what will we do in this practice? 1. We will create a new module named PHPCuong_Newsletter 2. We will use the preference to override the action named NewAction of the controller named Subscriber in the module Magento_Newsletter 3. We will create a new Jquery Widget called phpcuong.Newsletter for submitting the newsletter form by Ajax. Okie, let's go. Let's do this practice, you need to follow steps by step: Step 1: Declaring the new module called PHPCuong_Newsletter - Create the namespace PHPCuong in the path app\code - Create the module named Newsletter in the path app\code\PHPCuong - Create the file named registration.php in the path app\code\PHPCuong\Newsletter - Create the file named module.xml in the path app\code\PHPCuong\Newsletter\etc End of step #1, I have been completed the codes to create the new module called PHPCuong_Newsletter. Step 2: Override the action named NewAction of the controller named Subscriber in the module Magento_Newsletter You can see this action here - Create the new file named di.xml in the path app\code\PHPCuong\PriceDecimal\etc\frontend This is the action used in the newsletter subscription form, we need to override it to use with the Ajax. - Create the new file named NewAction.php in the path app\code\PHPCuong\Newsletter\Override\Newsletter\Controller\Subscriber Step 3: Create a new Jquery Widget named phpcuong.Newsletter - Create the new file named newsletter-subscription.js in the path app\code\PHPCuong\Newsletter\view\frontend\web\js - Create the new file named default.xml in the path app\code\PHPCuong\Newsletter\view\frontend\layout - Create the new file named ajax-newsletter-subscription.phtml in the path app\code\PHPCuong\Newsletter\view\frontend\templates Step 4: Test and see the results 1. Run the following command lines: php bin/magento setup:upgrade You can see the new module is added in the table named setup_module php bin/magento setup:di:compile (You can skip this command line) php bin/magento setup:static-content:deploy -f If you are using Magento 2.1.x, you can remove "-f" so it will be "php bin/magento setup:static-content:deploy" 2. Test the results Go to the storefront. Yeah, it works perfectly. You can see the emails subscribed in the table named newsletter_subscriber Thank you for your watching. If you have any questions about this practice, please feel free to leave a comment below. Don't forget to like, comment, share my videos and subscribe to my channel for getting the latest videos. Please do not hesitate to contact me, if you need me to join your Magento project. My rate is $25/hour in Magento 1 and $30/hour in Magento 2. Get the source codes of this tutorial in the github https://github.com/php-cuong/magento2-ajax-newsletter-subscription

Today Hex Color Code

#052418
#264539
#47665a
#68877b
#89a89c
#aac9bd