Once The Product Is Added To Cart Show A Popup With Two Buttons

Create a custom module in your Magento 2 installation. Let's call it Custom_Catalog. You'll need to create the necessary module structure with files and folders:

Once The Product Is Added To Cart Show A Popup With Two Buttons

app/code/Custom/Module/registration.php
app/code/Custom/Module/etc/module.xml

Declare the Module:


In registration.php, register your module:

<?php
use Magento\Framework\Component\ComponentRegistrar;

ComponentRegistrar::register(ComponentRegistrar::MODULE, 'Custom_Module', __DIR__);

Module Configuration:

In etc/module.xml, define your module:

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Custom_Module" setup_version="1.0.0"/>
</config>

Override the require.config.js file:


var config = {

    config: {

        mixins: {

            'Magento_Catalog/js/catalog-add-to-cart': {

                'Custom_Module/js/catalog-add-to-cart': true

            }

        }

    }
};

Override the catalog-add-to-cart.js:

app/code/Custom/Module/view/frontend/web/js/catalog-add-to-cart.js

define([

    'jquery',

    'mage/translate',

    'underscore',

    'Magento_Catalog/js/product/view/product-ids-resolver',

    'Magento_Catalog/js/product/view/product-info-resolver',

    'jquery-ui-modules/widget'

], function ($, $t, _, idsResolver, productInfoResolver) {

    'use strict';

    return function (widget) {

        $.widget('mage.catalogAddToCart', widget, {

            options: {

                processStart: null,

                processStop: null,

                bindSubmit: true,

                minicartSelector: '[data-block="minicart"]',

                messagesSelector: '[data-placeholder="messages"]',

                productStatusSelector: '.stock.available',

                addToCartButtonSelector: '.action.tocart',

                addToCartButtonDisabledClass: 'disabled',

                addToCartButtonTextWhileAdding: '',

                addToCartButtonTextAdded: '',

                addToCartButtonTextDefault: '',

                productInfoResolver: productInfoResolver

            },

            ajaxSubmit: function (form) {

                var self = this,

                    productIds = idsResolver(form),

                    productInfo = self.options.productInfoResolver(form),

                    formData;

                $(self.options.minicartSelector).trigger('contentLoading');

                self.disableAddToCartButton(form);

                formData = new FormData(form[0]);

                $.ajax({

                    url: form.attr('action'),

                    data: formData,

                    type: 'post',

                    dataType: 'json',

                    cache: false,

                    contentType: false,

                    processData: false,

                    /** @inheritdoc */

                    beforeSend: function () {

                        if (self.isLoaderEnabled()) {

                            $('body').trigger(self.options.processStart);

                        }

                    },

                    /** @inheritdoc */

                    success: function (res) {

                        var eventData, parameters;

                        $(document).trigger('ajax:addToCart', {

                            'sku': form.data().productSku,

                            'productIds': productIds,

                            'productInfo': productInfo,

                            'form': form,

                            'response': res

                        });

                        if (self.isLoaderEnabled()) {

                            $('body').trigger(self.options.processStop);

                        }

                        if (res.backUrl) {

                            eventData = {

                                'form': form,

                                'redirectParameters': []

                            };

                            $('body').trigger('catalogCategoryAddToCartRedirect', eventData);

                            if (eventData.redirectParameters.length > 0 &&

                                window.location.href.split(/[?#]/)[0] === res.backUrl

                            ) {

                                parameters = res.backUrl.split('#');

                                parameters.push(eventData.redirectParameters.join('&'));

                                res.backUrl = parameters.join('#');

                            }

                            self._redirect(res.backUrl);

                            return;

                        }

                        if (res.messages) {

                            $(self.options.messagesSelector).html(res.messages);

                        }

                        if (res.minicart) {

                            $(self.options.minicartSelector).replaceWith(res.minicart);

                            $(self.options.minicartSelector).trigger('contentUpdated');

                        }

                        if (res.product && res.product.statusText) {

                            $(self.options.productStatusSelector)

                                .removeClass('available')

                                .addClass('unavailable')

                                .find('span')

                                .html(res.product.statusText);

                        }

                        self.enableAddToCartButton(form);

                        var popup = $('<div class="add-to-cart-modal-popup"/>').html($('.page-title span').text() + '<span> has been added to cart.</span>').modal({

                            modalClass: 'add-to-cart-popup',

                            title: $.mage.__("AJAX POPUP"),

                            buttons: [

                                {

                                    text: 'Continue',

                                    click: function () {

                                        this.closeModal();

                                    }

                                },

                                {

                                    text: 'Checkout',

                                    click: function () {

                                        window.location = window.checkout.checkoutUrl

                                    }

                                }

                            ]

                        });

                        popup.modal('openModal');

                    },

                    /** @inheritdoc */

                    error: function (res) {

                        $(document).trigger('ajax:addToCart:error', {

                            'sku': form.data().productSku,

                            'productIds': productIds,

                            'productInfo': productInfo,

                            'form': form,

                            'response': res

                        });

                    },

                    /** @inheritdoc */

                    complete: function (res) {

                        if (res.state() === 'rejected') {

                            location.reload();

                        }

                    }

                });

            },

        });

        return $.mage.catalogAddToCart;

    }

});

Enable the Module:

Enable the module and clear the cache as explained in the previous example:

php bin/magento module:enable Custom_Module
php bin/magento setup:upgrade
php bin/magento cache:clean



















Once The Product Is Added To Cart Show A Popup With Two Buttons Once The Product Is Added To Cart Show A Popup With Two Buttons Reviewed by Technical on August 21, 2023 Rating: 5

No comments:

Powered by Blogger.