BLOG . Adobe Commerce . Magento

Magento 2 is a powerful platform for ecommerce websites, offering a wide range of features for store management, including newsletters. Enabling the subscription of the Ajax newsletter in Magento 2 improves the user experience by allowing customers to subscribe without needing to reload the page. 

This blog post will help you with the steps to enable an Ajax newsletter in Magento 2.

Why Use Ajax for Newsletter Subscription in Magento 2?

• Faster User Experience: With Ajax, the form can submit and receive data without a full page reload, providing a smooth, quick experience for users.
• Better User Engagement: Customers can subscribe to newsletters without interruption, which can increase conversion rates.
• Modern Look & Feel: Ajax gives your website an interactive, modern feel, improving customer satisfaction.

Steps to Enable Ajax Newsletter in Magento 2

Let’s have a look at how you can improve the user experience of your store by enabling Ajax Newsletter in Magento 2.

Step 1: Create the Module registration file

You need to register your custom module using registration.php.

Path: app/code/Klizer/Newsletter/registration.php

<?php

/**
 * Klizer
 *
 * @category  Klizer
 * @package   Klizer_Newsletter
 * @copyright Copyright © 2025 Klizer. All rights reserved.
 * @author    Klizer - info@klizer.com
 */

\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Klizer_Newsletter',
    __DIR__
);

Step 2: Define the Module in module.xml
Path: app/code/Klizer/Newsletter/etc/module.xml
<?xml version="1.0"?>
<!--
/**
 * Klizer
 *
 * @category  Klizer
 * @package   Klizer_Newsletter
 * @copyright Copyright © 2025 Klizer. All rights reserved.
 * @author    Klizer - info@klizer.com
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Klizer_Newsletter" setup_version="0.0.1" />
</config>

Step 3: Define the Dependency in di.xml

Path: app/code/Klizer/Newsletter/etc/di.xml

<?xml version="1.0" ?>
<!--
/**
 * Klizer
 *
 * @category  Klizer
 * @package   Klizer_Newsletter
 * @copyright Copyright © 2025 Klizer. All rights reserved.
 * @author    Klizer - info@klizer.com
*/
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <preference for="Magento\Newsletter\Controller\Subscriber\NewAction" type="Klizer\Newsletter\Controller\Override\Newsletter\Subscriber\NewAction" />
</config>

Step 4: Create Override Newsletter Controller file: NewAction.php

Path: app/code/Klizer/Newsletter/Controller/Override/Newsletter/Subscriber/NewAction.php

<?php

/**
 * Klizer
 *
 * @category  Klizer
 * @package   Klizer_Newsletter
 * @copyright Copyright © 2025 Klizer. All rights reserved.
 * @author    Klizer - info@klizer.com
 */

namespace Klizer\Newsletter\Controller\Override\Newsletter\Subscriber;

use Magento\Framework\App\ObjectManager;

class NewAction extends \Magento\Newsletter\Controller\Subscriber\NewAction
{
    /**
     * @var \Magento\Framework\Controller\Result\Json
     */
    protected $_resultJson;

    /**
     * New subscription action
     *
     * @throws \Magento\Framework\Exception\LocalizedException
     * @return void
     */
    public function execute()
    {
        $result = [];
        $result['error'] = true;
        $result['message'] = __('');
        if ($this->getRequest()->isPost() && $this->getRequest()->getPost('email')) {
            $email = (string)$this->getRequest()->getPost('email');

            try {
                $this->validateEmailFormat($email);
                $this->validateGuestSubscription();
                $this->validateEmailAvailable($email);

                $subscriber = $this->_subscriberFactory->create()->loadByEmail($email);
                if ($subscriber->getId()
                    && $subscriber->getSubscriberStatus() == \Magento\Newsletter\Model\Subscriber::STATUS_SUBSCRIBED
                ) {
                    $result['message'] = __('This email address is already subscribed.');
                } else {
                    $status = $this->_subscriberFactory->create()->subscribe($email);
                    if ($status == \Magento\Newsletter\Model\Subscriber::STATUS_NOT_ACTIVE) {
                        $result['message'] = __('The confirmation request has been sent.');
                        $result['error'] = false;
                    } else {
                        $result['message'] = __('Thank you for your subscription.');
                        $result['error'] = false;
                    }
                }
            } catch (\Magento\Framework\Exception\LocalizedException $e) {
                $result['message'] = __('There was a problem with the subscription: %1', $e->getMessage());
            } catch (\Exception $e) {
                $result['message'] = $e->getMessage();
            }
        }
        return $this->getResultJson()->setData($result);
    }

    /**
     * @return \Magento\Framework\Controller\Result\Json
     */
    protected function getResultJson()
    {
        if ($this->_resultJson === null) {
            $this->_resultJson = ObjectManager::getInstance()->get(\Magento\Framework\Controller\Result\Json::class);
        }
        return $this->_resultJson;
    }
}

Step 5: Create a layout file to call phtml: default.xml

Path: app/code/Klizer/Newsletter/view/frontend/layout/default.xml

<?xml version="1.0" ?>
<!--
/**
 * Klizer
 *
 * @category  Klizer
 * @package   Klizer_Newsletter
 * @copyright Copyright © 2025 Klizer. All rights reserved.
 * @author    Klizer - info@klizer.com
*/
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="newsletter_head_components">
            <block class="Magento\Framework\View\Element\Js\Components" name="ajax_newsletter_subscription" template="Klizer_Newsletter::ajax-newsletter-subscription.phtml"/>
        </referenceBlock>
    </body>
</page>

Step 6: Now Create phtml file: ajax-newsletter-subscription.phtml

Path: app/code/Klizer/Newsletter/view/frontend/templates/ajax-newsletter-subscription.phtml

<?php

/**
 * Klizer
 *
 * @category  Klizer
 * @package   Klizer_Newsletter
 * @copyright Copyright © 2025 Klizer. All rights reserved.
 * @author    Klizer - info@klizer.com
 */

 /** @var \Magento\Framework\View\Element\Js\Components $block */
?>
<script type="text/x-magento-init">
    {
        "#newsletter-validate-detail": {
            "Klizer_Newsletter/js/newsletter-subscription": {}
        }
    }
</script>

The Frontend of Ajax Newsletter in Magento 2

Below is the screenshot mentioned that tells what the frontend of the Ajax Newsletter in Magento 2 looks like:

Enable Subscription of Ajax Newsletter in Magento 2 with Klizer

Enabling Ajax for the newsletter subscription form in Magento 2 is a great way to improve the user experience on your ecommerce site. By following the steps above, you can quickly implement Ajax functionality with or without the use of an extension. Whether you choose to install a third-party module or manually implement the feature, the result will be a smoother, more engaging subscription process for your customers.

Klizer is a Magento ecommerce development company that can help you enable the Ajax Newsletter subscription in Magento. Get in touch with our experts to learn more about our services and offerings.