Magento 2: Update custom div content after ajax add to cart

Question

I want to update the content of a custom div when a user adds a product to cart via Ajax.

By using observer I am able to do this when I am not using Ajax Add to Cart functionality, but with Ajax Add to Cart, I could not make it happen.

Can anyone help me accomplish my requirement?

score 0 · Answer 1 · answered Nov 17 '17 at 09:32

It's not difficult. This method can trigger JS codes after adding product to cart:

Create a new module. I assume you know how to create a module. If not, refer to here. The name of module is Vendor_Module in my example.

Create a new layout file catalog_product_view.xml under app/code/Vendor/Module/view/frontend/layout/ with the following content:

<?xml version="1.0" encoding="UTF-8"?>
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceBlock name="head.additional">
            <block class="Vendor\Module\Block\Product" name="module_product" template="Vendor_Module::product/head.phtml" cacheable="false"/>
        </referenceBlock>
    </body>
</page>

Create an empty Block file Product.php under app/code/Vendor/Module/Block with the following content:

<?php

namespace Vendor\Module\Block;

class Product extends \Magento\Framework\View\Element\Template
{

    public function __construct(
        \Magento\Framework\View\Element\Template\Context $context,
        array $data = [])
    {
        parent::__construct($context, $data);
    }
}

Create new template head.phtml under app/code/Vendor/Module/view/frontend/templates/product/ with the following content:

<script type="text/x-magento-init">
{
    "#product_addtocart_form": {
        "CustomAddToCart": {
            //Depends on your need, you may add parameter inside here
        }
    }
}
</script>

Create requirejs-config.js under app/code/Vendor/Module/view/frontend/ with the following content:

var config = {
    map: {
        '*': {
            'CustomAddToCart': 'Vendor_Module/js/CustomAddToCart'
        }
    }
};

Finally, create JS file CustomAddToCart.js under app/code/Vendor/Module/view/frontend/web/js/ with the following content:

define([
    'jquery',
    'jquery/ui',
    'Magento_Catalog/js/catalog-add-to-cart'
], function($){
    "use strict";

    $.widget('Vendor.CustomAddToCart', $.mage.catalogAddToCart, {
        submitForm: function(form) {
            //Run your JS codes
        }
    });
    return $.Vendor.CustomAddToCart;
});

Thank you for your answer. However, I want to show a custom dynamic message after the product has been added to the cart using ajax add to cart. — Mohit Kumar Arora, Nov 17 '17 at 11:46

Magento 2: Update custom div content after ajax add to cart

1 Answers1