How to use Ajax for the newsletter subscription in Magento 2
Hi everybody, I am Cuong, Welcome back to my Magento 2 tutorial video series.
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 appcode
– Create the module named Newsletter in the path appcodePHPCuong
– Create the file named registration.php in the path appcodePHPCuongNewsletter
– Create the file named module.xml in the path appcodePHPCuongNewsletteretc
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 appcodePHPCuongPriceDecimaletcfrontend
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 appcodePHPCuongNewsletterOverrideNewsletterControllerSubscriber
Step 3: Create a new Jquery Widget named phpcuong.Newsletter
– Create the new file named newsletter-subscription.js in the path appcodePHPCuongNewsletterviewfrontendwebjs
– Create the new file named default.xml in the path appcodePHPCuongNewsletterviewfrontendlayout
– Create the new file named ajax-newsletter-subscription.phtml in the path appcodePHPCuongNewsletterviewfrontendtemplates
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