Customers subscribe to the newsletter in your store for many reasons such as to understand your product, to get discounts, to educate themselves or even by accident! Yes! It happens!! But they may find it irritating to wait for the page to be refreshed and then continue their activity on the page when they subscribe to the newsletter.<\/p>\n\n\n\n
To avoid page reloading and to give the output of successful subscription message, admin can enable Ajax Newsletter in Magento 2<\/strong><\/i> store! It will use the Ajax technology for newsletter subscription and allow customers to subscribe to newsletter without a page refresh.<\/p>\n\n\n\n Here, I\u2019ll show how you can improve the user experience of your store by enabling Ajax Newsletter in Magento 2.<\/strong><\/i><\/p>\n\n\n\n Create di.xml at Vendor\\Extension\\etc<\/strong><\/strong> folder<\/p>\n\n\n\n Create NewAction.php<\/strong> at Vendor\\Extension\\Controller\\Plugin\\Subscriber<\/strong><\/strong> folder<\/p>\n\n\n\n In your newsletter.phtml<\/strong> file, add below code<\/p>\n\n\n\n Follow the above steps and you\u2019ll get a fully functional Ajax Newsletter in Magento 2<\/em> store so that your valuable customers would not have to wait for the page reload!<\/p>\n\n\n\n If you want to show the newsletter subscription<\/a> status in the Magento 2 customer grid, you can check out: How to Add Newsletter Subscription Column to Customer Grid in Magento 2<\/a><\/p>\n","protected":false},"excerpt":{"rendered":" Customers subscribe to the newsletter in your store for many reasons such as to understand your product, to get discounts, to educate themselves or even…<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34],"tags":[],"class_list":["post-183","post","type-post","status-publish","format-standard","hentry","category-magento"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/183","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=183"}],"version-history":[{"count":5,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/183\/revisions"}],"predecessor-version":[{"id":15597,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/183\/revisions\/15597"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=183"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=183"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=183"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Steps to Enable AJAX Newsletter in Magento 2:<\/h2>\n\n\n\n
<?xml version=\"1.0\"?>\n<config xmlns:xsi=\"http:\/\/www.w3.org\/2001\/XMLSchema-instance\" xsi:noNamespaceSchemaLocation=\"urn:magento:framework:ObjectManager\/etc\/config.xsd\">\n <type name=\"Magento\\Newsletter\\Controller\\Subscriber\\NewAction\">\n <plugin name=\"Newsletter_Subscriber_NewAction\"\n type=\"Vendor\\Extension\\Controller\\Plugin\\Subscriber\\NewAction\" sortOrder=\"10\" disabled=\"false\" \/>\n <\/type>\n<\/config><\/pre>\n\n\n\n
<?php\n\/**\n *\n *\/\n \nnamespace Vendor\\Extension\\Controller\\Plugin\\Subscriber;\n \nuse Magento\\Customer\\Api\\AccountManagementInterface as CustomerAccountManagement;\nuse Magento\\Customer\\Model\\Session;\nuse Magento\\Customer\\Model\\Url as CustomerUrl;\nuse Magento\\Framework\\App\\Action\\Context;\nuse Magento\\Store\\Model\\StoreManagerInterface;\nuse Magento\\Newsletter\\Model\\SubscriberFactory;\n \n\/**\n * Class NewAction\n *\/\nclass NewAction extends \\Magento\\Newsletter\\Controller\\Subscriber\\NewAction\n{\n \/**\n * @var CustomerAccountManagement\n *\/\n protected $customerAccountManagement;\n \n protected $resultJsonFactory;\n \n \/**\n * Initialize dependencies.\n *\n * @param Context $context\n * @param SubscriberFactory $subscriberFactory\n * @param Session $customerSession\n * @param StoreManagerInterface $storeManager\n * @param CustomerUrl $customerUrl\n * @param CustomerAccountManagement $customerAccountManagement\n *\/\n public function __construct(\n Context $context,\n SubscriberFactory $subscriberFactory,\n Session $customerSession,\n StoreManagerInterface $storeManager,\n CustomerUrl $customerUrl,\n CustomerAccountManagement $customerAccountManagement,\n \\Magento\\Framework\\Controller\\Result\\JsonFactory $resultJsonFactory\n )\n {\n $this->customerAccountManagement = $customerAccountManagement;\n $this->resultJsonFactory = $resultJsonFactory;\n parent::__construct(\n $context,\n $subscriberFactory,\n $customerSession,\n $storeManager,\n $customerUrl,\n $customerAccountManagement\n );\n }\n \n \/**\n * Retrieve available Order fields list\n *\n * @return array\n *\/\n public function aroundExecute($subject, $procede)\n {\n $response = [];\n if ($this->getRequest()->isPost() && $this->getRequest()->getPost('email')) {\n $email = (string)$this->getRequest()->getPost('email');\n \n try {\n $this->validateEmailFormat($email);\n $this->validateGuestSubscription();\n $this->validateEmailAvailable($email);\n \n $status = $this->_subscriberFactory->create()->subscribe($email);\n if ($status == \\Magento\\Newsletter\\Model\\Subscriber::STATUS_NOT_ACTIVE) {\n $response = [\n 'status' => 'OK',\n 'msg' => 'The confirmation request has been sent.',\n ];\n } else {\n $response = [\n 'status' => 'OK',\n 'msg' => 'Thank you for your subscription.',\n ];\n }\n } catch (\\Magento\\Framework\\Exception\\LocalizedException $e) {\n $response = [\n 'status' => 'ERROR',\n 'msg' => __('There was a problem with the subscription: %1', $e->getMessage()),\n ];\n } catch (\\Exception $e) {\n $response = [\n 'status' => 'ERROR',\n 'msg' => __('Something went wrong with the subscription.'),\n ];\n }\n }\n \n return $this->resultJsonFactory->create()->setData($response);\n }\n}<\/pre>\n\n\n\n<div class=\"block newsletter\">\n <div class=\"title\"><strong>Newsletter <\/strong><\/div>\n <div class=\"content\">\n <form class=\"form subscribe\"\n novalidate\n action=\"<?php \/* @escapeNotVerified *\/ echo $block->getFormActionUrl() ?>\"\n method=\"post\"\n data-mage-init='{\"validation\": {\"errorClass\": \"mage-error\"}}'\n id=\"newsletter-validate-detail\">\n \n <div class=\"field newsletter\">\n <label class=\"label\" for=\"newsletter\"><span><?php \/* @escapeNotVerified *\/ echo __('Sign Up for Our Newsletter:') ?><\/span><\/label>\n <div class=\"control\">\n <input name=\"email\" type=\"email\" id=\"newsletter\"\n placeholder=\"<?php \/* @escapeNotVerified *\/ echo __('Enter your email address') ?>\"\n data-validate=\"{required:true, 'validate-email':true}\"\/>\n <\/div>\n <\/div>\n <div class=\"actions\">\n <button class=\"action subscribe primary\" title=\"<?php \/* @escapeNotVerified *\/ echo __('Subscribe sad') ?>\" type=\"submit\">\n <span><?php \/* @escapeNotVerified *\/ echo __('Subscribe') ?><\/span>\n <\/button>\n <\/div>\n <div class=\"scg-msg\">\n <div class=\"messages\">\n <\/div>\n <\/div>\n <\/form>\n <\/div>\n<\/div>\n \n \n<script>\n require(['jquery'],function($){\n var form = $('#newsletter-validate-detail');\n form.submit(function(e) {\n if(form.validation('isValid')){\n var email = $(\"#newsletter-validate-detail #newsletter\").val();\n var url = form.attr('action');\n var loadingMessage = $('#loading-message');\n \n if(loadingMessage.length == 0) {\n form.find('.input-group').append('<div id=\"loading-message\" style=\"display:none;padding-top:10px;color: red;font-size: 13px;\"> <\/div>');\n var loadingMessage = $('#loading-message');\n }\n \n e.preventDefault();\n try{\n loadingMessage.html('Submitting...').show();\n $('.scg-msg > messages').html();\n \n $.ajax({\n url: url,\n dataType: 'json',\n type: 'POST',\n data: {email: email},\n success: function (data){\n if(data.status != \"ERROR\"){\n $(\"#newsletter-validate-detail #newsletter\").val('');\n $('#newsletter-validate-detail .scg-msg > .messages').html('<div class=\"message-success success message\" ><div >' +\n data.msg + '<\/div><\/div>');\n }else{\n $('#newsletter-validate-detail .scg-msg > .messages').html('<div class=\"message-error error message\" >' +\n '<div>'+data.msg +'<\/div><\/div>');\n }\n loadingMessage.html(data.msg);\n },\n });\n } catch (e){\n loadingMessage.html(e.message);\n }\n }\n });\n })\n<\/script><\/pre>\n\n\n\n