Magento 2: newsletter subscribe by ajax

January 23, 2020at 2:09 pm | Author : arpit kumar | Category : Magento, Magento 2 | : Thumbtack

In this tutorial we learn how to use plugin in magento 2.
In below code we create a plugin to make a ajax hit for newsletter subscription for users rest of all setting are same as default magento provides.

Di.xml

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

<?xml version="1.0"?>

<plugin name="Newsletter_Subscriber_NewAction"

type="Arpitk\AjaxNewsLetter\Controller\Plugin\Subscriber\NewAction" sortOrder="10" disabled="false" />

</type>

</config>

New Controller extended from Magento\Newsletter\Controller\Subscriber\NewAction

&lt;?php
namespace Arpitk\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() &amp;&amp; $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. %1',$e->getMessage()),
                ];
            }
        }

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

100

101

<?php

namespace Arpitk\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. %1',$e->getMessage()),

];

}

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

}

newsletter_subscripe.phtml (Override it for core newsletter_subscripe.phtml)

&lt;div class="block newsletter">
    &lt;div class="title">&lt;strong>Newsletter &lt;/strong>&lt;/div>
    &lt;div class="content">
        &lt;form class="form subscribe"
            method="post"
            data-mage-init='{"validation": {"errorClass": "mage-error"}}'
            id="newsletter-validate-detail">
            
            &lt;div class="field newsletter">
                &lt;label class="label" for="newsletter">&lt;span>&lt;?php /* @escapeNotVerified */ echo __('Sign Up for Our Newsletter:') ?>&lt;/span>&lt;/label>
                &lt;div class="control">
                    &lt;input name="email" type="email" id="newsletter"
                                placeholder="&lt;?php /* @escapeNotVerified */ echo __('Enter your email address') ?>"
                                data-validate="{required:true, 'validate-email':true}"/>
                &lt;/div>
            &lt;/div>
            &lt;div class="actions">
                &lt;button class="action subscribe primary submit" title="&lt;?php /* @escapeNotVerified */ echo __('Subscribe sad') ?>" type="submit">
                    &lt;span>&lt;?php /* @escapeNotVerified */ echo __('Subscribe') ?>&lt;/span>
                &lt;/button>
            &lt;/div>
            &lt;div class="scg-msg">
                &lt;div class="messages">
                &lt;/div>
            &lt;/div>
        &lt;/form>
    &lt;/div>
&lt;/div>
&lt;?php 
 $ajaxurl = $block->escapeHtml($block->getFormActionUrl()); 
 $formid = "#newsletter-validate-detail";
?>
&lt;script type="text/x-magento-init">
    {
        "#newsletter-validate-detail": {
            "Arpitk_AjaxNewsLetter/js/formsubmitnow": {
                    "AjaxUrl": "&lt;?php echo $ajaxurl; ?>",
		    "FormId": "&lt;?php echo $formid; ?>"
                }
        }
    }
&lt;/script>

<div class="title"><strong>Newsletter </strong></div>

<form class="form subscribe"

method="post"

data-mage-init='{"validation": {"errorClass": "mage-error"}}'

id="newsletter-validate-detail">

<input name="email" type="email" id="newsletter"

placeholder="<?php /* @escapeNotVerified */ echo __('Enter your email address') ?>"

data-validate="{required:true, 'validate-email':true}"/>

</div>

<button class="action subscribe primary submit" title="<?php /* @escapeNotVerified */ echo __('Subscribe sad') ?>" type="submit">

</button>

</div>

</div>

</form>

</div>

<?php

$ajaxurl = $block->escapeHtml($block->getFormActionUrl());

$formid = "#newsletter-validate-detail";

{

"#newsletter-validate-detail": {

"Arpitk_AjaxNewsLetter/js/formsubmitnow": {

"AjaxUrl": "<?php echo $ajaxurl; ?>",

"FormId": "<?php echo $formid; ?>"

}

</script>

formsubmitnow.js file for Ajax request

define([
    "jquery",
    "jquery/ui"
], function($){
    "use strict";

    function main(config, element) {
        var $element = $(element);
        var AjaxUrl = config.AjaxUrl;
	var FormId = config.FormId;   
        $(document).on('click','.submit',function() {
            event.preventDefault();
            var dataForm = $(FormId);
            dataForm.mage('validation', {});
                if (dataForm.valid()){
                    var param = dataForm.serialize();
                    ajaxformsubmit(param,AjaxUrl,FormId);
                }
            });
    };

    function ajaxformsubmit(param,AjaxUrl,formId){
       $.ajax({
            url: AjaxUrl,
            prefilterUrl: function(url) {
              return url &amp;&amp; url.replace(new RegExp('^https://'), 'http://');
            },
            type: 'POST',
            data: param,
           success: function (data){
                            if(data.status != "ERROR"){
				$(".submit").attr("disabled", false);
                                $('.input-blank').val('');
                                $(formId+' .scg-msg > .messages').html('&lt;div class="message-success success message" >&lt;div >' +
                                    data.msg + '&lt;/div>&lt;/div>');
                            }else{
                                $(formId+' .scg-msg > .messages').html('&lt;div class="message-error error message" >' +
                                    '&lt;div>'+data.msg +'&lt;/div>&lt;/div>');
                            }
                            loadingMessage.html(data.msg);
                        },
     });        
    }
return main;   
});

define([

"jquery",

"jquery/ui"

], function($){

"use strict";

function main(config, element) {

var $element = $(element);

var AjaxUrl = config.AjaxUrl;

var FormId = config.FormId;

$(document).on('click','.submit',function() {

event.preventDefault();

var dataForm = $(FormId);

dataForm.mage('validation', {});

if (dataForm.valid()){

var param = dataForm.serialize();

ajaxformsubmit(param,AjaxUrl,FormId);

}

});

};

function ajaxformsubmit(param,AjaxUrl,formId){

$.ajax({

url: AjaxUrl,

prefilterUrl: function(url) {

return url && url.replace(new RegExp('^https://'), 'http://');

type: 'POST',

data: param,

success: function (data){

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

$(".submit").attr("disabled", false);

$('.input-blank').val('');

$(formId+' .scg-msg > .messages').html('<div class="message-success success message" ><div >' +

data.msg + '</div></div>');

}else{

$(formId+' .scg-msg > .messages').html('<div class="message-error error message" >' +

'<div>'+data.msg +'</div></div>');

}

loadingMessage.html(data.msg);

});

}

return main;

});

Magento 2 tutorial

Magento 2: newsletter subscribe by ajax

Tags :

Oppps! Empty

Leave a Reply Cancel reply

A nice attention grabbing header!