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:
.png)
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
Reviewed by Technical
on
August 21, 2023
Rating:
.png)
No comments: