Magento2 Ajax Newsletter

Create di.xml at app/code/Magemonkeys/AjaxNewsletter/etc/di.xml folder.

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Newsletter\Controller\Subscriber\NewAction">
        <plugin name="Newsletter_Subscriber_NewAction"
                type="Magemonkeys\AjaxNewsletter\Controller\Plugin\Subscriber\NewAction" sortOrder="10" disabled="false" />
    </type>
</config>

<?xml version="1.0"?>

<plugin name="Newsletter_Subscriber_NewAction"

type="Magemonkeys\AjaxNewsletter\Controller\Plugin\Subscriber\NewAction" sortOrder="10" disabled="false" />

</type>

</config>

create NewAction.php at app/code/Magemonkeys/AjaxNewsletter/Controller/Plugin/Subscriber folder

<?php
/**
 *
 */
namespace Magemonkeys\AjaxNewsletter\Controller\Plugin\Subscriber;
 
use Magento\Customer\Api\AccountManagementInterface as CustomerAccountManagement;
use Magento\Customer\Model\Session;
use Magento\Customer\Model\Url as CustomerUrl;
use Magento\Framework\App\Action\Context;
use Magento\Store\Model\StoreManagerInterface;
use Magento\Newsletter\Model\SubscriberFactory;
 
/**
 * Class NewAction
 */
class NewAction extends \Magento\Newsletter\Controller\Subscriber\NewAction
{
    /**
     * @var CustomerAccountManagement
     */
    protected $customerAccountManagement;
 
    protected $resultJsonFactory;
 
    /**
     * Initialize dependencies.
     *
     * @param Context $context
     * @param SubscriberFactory $subscriberFactory
     * @param Session $customerSession
     * @param StoreManagerInterface $storeManager
     * @param CustomerUrl $customerUrl
     * @param CustomerAccountManagement $customerAccountManagement
     */
    public function __construct(
        Context $context,
        SubscriberFactory $subscriberFactory,
        Session $customerSession,
        StoreManagerInterface $storeManager,
        CustomerUrl $customerUrl,
        CustomerAccountManagement $customerAccountManagement,
        \Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory
    ) {
        $this->customerAccountManagement = $customerAccountManagement;
        $this->resultJsonFactory = $resultJsonFactory;
        parent::__construct(
            $context,
            $subscriberFactory,
            $customerSession,
            $storeManager,
            $customerUrl,
            $customerAccountManagement
        );
    }
 
    /**
     * Retrieve available Order fields list
     *
     * @return array
     */
    public function aroundExecute($subject, $procede)
    {
        $response = [];
        if ($this->getRequest()->isPost() && $this->getRequest()->getPost('email')) {
            $email = (string)$this->getRequest()->getPost('email');
 
            try {
                $this->validateEmailFormat($email);
                $this->validateGuestSubscription();
                $this->validateEmailAvailable($email);
 
                $status = $this->_subscriberFactory->create()->subscribe($email);
                if ($status == \Magento\Newsletter\Model\Subscriber::STATUS_NOT_ACTIVE) {
                    $response = [
                        'status' => 'OK',
                        'msg' => 'The confirmation request has been sent.',
                    ];
                } else {
                    $response = [
                        'status' => 'OK',
                        'msg' => 'Thank you for your subscription.',
                    ];
                }
            } catch (\Magento\Framework\Exception\LocalizedException $e) {
                $response = [
                    'status' => 'ERROR',
                    'msg' => __('There was a problem with the subscription: %1', $e->getMessage()),
                ];
            } catch (\Exception $e) {
                $response = [
                    'status' => 'ERROR',
                    'msg' => __('Something went wrong with the subscription.'),
                ];
            }
        }
 
        return $this->resultJsonFactory->create()->setData($response);
    }
 
}

100

101

<?php

/**

namespace Magemonkeys\AjaxNewsletter\Controller\Plugin\Subscriber;

use Magento\Customer\Api\AccountManagementInterface as CustomerAccountManagement;

use Magento\Customer\Model\Session;

use Magento\Customer\Model\Url as CustomerUrl;

use Magento\Framework\App\Action\Context;

use Magento\Store\Model\StoreManagerInterface;

use Magento\Newsletter\Model\SubscriberFactory;

/**

* Class NewAction

class NewAction extends \Magento\Newsletter\Controller\Subscriber\NewAction

{

/**

* @var CustomerAccountManagement

protected $customerAccountManagement;

protected $resultJsonFactory;

/**

* Initialize dependencies.

* @param Context $context

* @param SubscriberFactory $subscriberFactory

* @param Session $customerSession

* @param StoreManagerInterface $storeManager

* @param CustomerUrl $customerUrl

* @param CustomerAccountManagement $customerAccountManagement

public function __construct(

Context $context,

SubscriberFactory $subscriberFactory,

Session $customerSession,

StoreManagerInterface $storeManager,

CustomerUrl $customerUrl,

CustomerAccountManagement $customerAccountManagement,

\Magento\Framework\Controller\Result\JsonFactory $resultJsonFactory

) {

$this->customerAccountManagement = $customerAccountManagement;

$this->resultJsonFactory = $resultJsonFactory;

parent::__construct(

$context,

$subscriberFactory,

$customerSession,

$storeManager,

$customerUrl,

$customerAccountManagement

);

}

/**

* Retrieve available Order fields list

* @return array

public function aroundExecute($subject, $procede)

{

$response = [];

if ($this->getRequest()->isPost() && $this->getRequest()->getPost('email')) {

$email = (string)$this->getRequest()->getPost('email');

try {

$this->validateEmailFormat($email);

$this->validateGuestSubscription();

$this->validateEmailAvailable($email);

$status = $this->_subscriberFactory->create()->subscribe($email);

if ($status == \Magento\Newsletter\Model\Subscriber::STATUS_NOT_ACTIVE) {

$response = [

'status' => 'OK',

'msg' => 'The confirmation request has been sent.',

];

} else {

$response = [

'status' => 'OK',

'msg' => 'Thank you for your subscription.',

];

}

} catch (\Magento\Framework\Exception\LocalizedException $e) {

$response = [

'status' => 'ERROR',

'msg' => __('There was a problem with the subscription: %1', $e->getMessage()),

];

} catch (\Exception $e) {

$response = [

'status' => 'ERROR',

'msg' => __('Something went wrong with the subscription.'),

];

}

return $this->resultJsonFactory->create()->setData($response);

}

Make a copy of “vendor/magento/module-newsletter/view/frontend/templates/subscribe.phtml” and place it inside your Magento Theme (e.g. app/design/frontend/NAMESPACE/MY_CUSTOM_THEME/Magento_Newsletter/templates/subscribe.phtml
Add the following javascript to the end of the subscribe.phtml:

{ "*": { "js/newsletter_subscriber_ajax": { } } }

1
2
3
4
5

{
        "*": {
            "js/newsletter_subscriber_ajax": { }
        }
    }
Create newsletter_subscriber_ajax.js at app/design/frontend/NAMESPACE/MY_CUSTOM_THEME/web/js/ folder

require.config({
    deps: [
        'jquery'
    ],
    callback: function ($) {
        var form = $('form.subscribe');
 
        form.submit(function(e) {
            if(form.validation('isValid')){
                var email = $("#newsletter").val();
                var url = form.attr('action');
                var loadingMessage = $('#loading-message');
 
                if(loadingMessage.length == 0) {
                    form.find('.control').append('<div id="loading-message" style="display:none;padding-top:10px;">&nbsp;</div>');
                    var loadingMessage = $('#loading-message');
                }
 
                e.preventDefault();
                try{
                    loadingMessage.html('Submitting...').show();
                    $.ajax({
                        url: url,
                        dataType: 'json',
                        type: 'POST',
                        data: {email: email},
                        success: function (data){
                            if(data.status != "ERROR"){
                                $('#newsletter').val('');
                            }
                            loadingMessage.html(data.msg);
                        },
                        complete: function(){
                            setTimeout(function(){
                                loadingMessage.hide();
                            },5000);
                        }
                    });
                } catch (e){
                    loadingMessage.html(e.message);
                }
            }
            return false;
        });
    }
})

require.config({

deps: [

'jquery'

callback: function ($) {

var form = $('form.subscribe');

form.submit(function(e) {

if(form.validation('isValid')){

var email = $("#newsletter").val();

var url = form.attr('action');

var loadingMessage = $('#loading-message');

if(loadingMessage.length == 0) {

form.find('.control').append('<div id="loading-message" style="display:none;padding-top:10px;"> </div>');

var loadingMessage = $('#loading-message');

}

e.preventDefault();

try{

loadingMessage.html('Submitting...').show();

$.ajax({

url: url,

dataType: 'json',

type: 'POST',

data: {email: email},

success: function (data){

if(data.status != "ERROR"){

$('#newsletter').val('');

}

loadingMessage.html(data.msg);

complete: function(){

setTimeout(function(){

loadingMessage.hide();

},5000);

}

});

} catch (e){

loadingMessage.html(e.message);

}

return false;

});

}

})

Fill the below form if you have any Magento programming need.

Add an image programmatically from any url in Magento 2
[crayon-633c3c115d9b9098884690/] Using above fucntion Images can be imported directly from...
Magento 2 : Override the Category view block file
Override view block using di.xml and add the below code...
How to check list of Layout XML called for a specific page in Magento 2?
You can check a list of called layout XML for...
Magento 2 : Setup PWA from Scratch
Follow the below steps to install and set up PWA...
How to remove leading zero’s from the order, invoice and shipment number in Magento 2?
If you want to remove all leading zero's from order,...

Author Info

Magento Certified Developer

Hire J. Lakum

Let’s have a call

Fill the form & Get Installation Support

Any Question or Concerns?
Let's discuss