Menu Close
    Searching for an experienced Magento 2 Development Company ?

    How to Update Item Quantity in Minicart Magento2

    Here we learn, How to Update Item Quantity in Minicart Magento2

    1. Add custom controller to the customer data section, so when quantity will change then, it will update minicart automatically.
    This is because when any ajax request get complete, then the Magento looks for the section to be update.

    you can see in this file: Magento/Customer/view/frontend/web/js/customer-data.js

    /**
         * Events listener
         */
        $(document).on('ajaxComplete', function (event, xhr, settings) {
            var sections,
                redirects;
    
            if (settings.type.match(/post|put/i)) {
                sections = sectionConfig.getAffectedSections(settings.url);
                if (sections) {
                    customerData.invalidate(sections);
                    redirects = ['redirect', 'backUrl'];
    
                    if (_.isObject(xhr.responseJSON) && !_.isEmpty(_.pick(xhr.responseJSON, redirects))) {
                        return;
                    }
                    customerData.reload(sections, true);
                }
            }
        });

    When any request gets complete on DOM it’s looks for the section, if section is there it reload
    the section.

    Let’s create Webkul/Knockout/etc/frontend/sections.xml file

    <?xml version="1.0"?>
    
    <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
            xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Customer:etc/sections.xsd">
        <action name="knockout/ajax/cartUpdate">
            <section name="cart"/>
        </action>
    </config>

    here you can see we have defined our Controller path.

    2. Now Create js file where you need to updated the Minicart.

    define([
        'jquery',
        'uiComponent',
        'mage/validation',
        'ko',
        'mage/storage',
        'mage/url',
        'mage/cookies'
        ], function ($, Component, validation, ko, storage, urlBuilder) {
            'use strict';
            return Component.extend({
                defaults: {
                    template: 'Webkul_Knockout/knockout-test'
                },
    
                initialize: function () {
                    this._super();
                },
                //call this function on button click
                updateMinicart: function () {
                    this._ajax('knockout/ajax/cartUpdate', {
                        item_id: 85, //change item id according to test
                        item_qty: 2 //qty you want to update
                    });
                },
                /**
                 * @param {String} url - ajax url
                 * @param {Object} data - post data for ajax call
                 * @param {Object} elem - element that initiated the event
                 * @param {Function} callback - callback method to execute after AJAX success
                 */
                _ajax: function (url, data) {
                    $.extend(data, {
                        'form_key': $.mage.cookies.get('form_key')
                    });
                    $.ajax({
                        url: urlBuilder.build(url),
                        data: data,
                        type: 'post',
                        dataType: 'json',
                        context: this,
                    }).done(function (response) {
                            alert('hey! you updated successfully, checkout mini cart.')
                        })
                        .fail(function (error) {
                            console.log(JSON.stringify(error));
                        });
                },
            });
        }
    );

    3. Finally the last thing is to create Controller File:
    Webkul/Knockout/Controller/Ajax/CartUpdate.php

    <?php
    
    namespace Webkul\Knockout\Controller\Ajax;
    
    use Magento\Checkout\Model\Sidebar;
    use Magento\Framework\App\Action\Action;
    use Magento\Framework\App\Action\Context;
    use Magento\Framework\App\Response\Http;
    use Magento\Framework\Exception\LocalizedException;
    use Magento\Framework\Json\Helper\Data;
    use Psr\Log\LoggerInterface;
    use Magento\Checkout\Model\Cart;
    
    class CartUpdate extends Action
    {
        /**
         * @var Sidebar
         */
        protected $sidebar;
    
        /**
         * @var LoggerInterface
         */
        protected $logger;
    
        /**
         * @var Data
         */
        protected $jsonHelper;
    
        /**
         * @var Cart
         */
        protected $cart;
    
        /**
         * @param Context $context
         * @param Sidebar $sidebar
         * @param LoggerInterface $logger
         * @param Data $jsonHelper
         * @codeCoverageIgnore
         */
        public function __construct(
            Context $context,
            Cart $cart,
            \Magento\Checkout\Model\Session $checkoutSession,
            Sidebar $sidebar,
            LoggerInterface $logger,
            Data $jsonHelper
        ) {
            $this->sidebar = $sidebar;
            $this->logger = $logger;
            $this->jsonHelper = $jsonHelper;
            $this->_checkoutSession = $checkoutSession;
            $this->cart = $cart;
            parent::__construct($context);
        }
    
        /**
         * @return $this
         */
        public function execute()
        {
            $itemId = (int)$this->getRequest()->getParam('item_id');
            $itemQty = (int)$this->getRequest()->getParam('item_qty');
    
            try {
                $this->updateQuoteItem($itemId, $itemQty);
                return $this->jsonResponse();
            } catch (LocalizedException $e) {
                return $this->jsonResponse($e->getMessage());
            } catch (\Exception $e) {
                $this->logger->critical($e);
                return $this->jsonResponse($e->getMessage());
            }
        }
    
        /**
         * Update quote item
         *
         * @param int $itemId
         * @param int $itemQty
         * @throws LocalizedException
         * @return $this
         */
        public function updateQuoteItem($itemId, $itemQty)
        {
            $itemData = [$itemId => ['qty' => $itemQty]];
            $this->cart->updateItems($itemData)->save();
        }
    
        /**
         * Get quote object associated with cart. By default it is current customer session quote
         *
         * @return \Magento\Quote\Model\Quote
         */
        public function getQuote()
        {
            return $this->_checkoutSession->getQuote();
        }
    
    
        /**
         * Compile JSON response
         *
         * @param string $error
         * @return Http
         */
        protected function jsonResponse($error = '')
        {
            return $this->getResponse()->representJson(
                $this->jsonHelper->jsonEncode($this->sidebar->getResponseData($error))
            );
        }
    }

    That’s it.

    . . .
    Discuss on Helpdesk

    Leave a Comment

    Your email address will not be published. Required fields are marked*


    4 comments

  • Pooja Mistry
    Where is ‘knockout-test’ template file ??
  • Andreas von Studnitz
    You should fix an error: the file is called “sections.xml” instead of “section.xml”. With that change, it works perfectly, it has helped me a lot!
    • Webkul Support
      Thanks for the information
  • Back to Top