Magento 2 minicart not updating after custom popup add to cart completed

Question

I have created custom Popup on category page and added custom button with form data for add to cart. After popup button is clicked the custom controller is adding product to cart. But its not updating the minicart. I have used AJAX add to cart. It throws below console error if I reload minicart programmatically: How I reload minicart in my custom .js code:

customform.phtml

          <form data-role="tocart-form" id="add-to-cart-form" action="<?php echo $baseUrl; ?>quickview/cart/add" method="post">
                <div class="modal-group">
                    <?php $block->getChildBlock("custom.options.quickview")->setProduct($product);  ?>
                    <?php echo $block->getChildHtml("custom.options.quickview"); ?>
                </div>
                <div class="modal-group">
                    <div class="row">
                        <?php
                        $sizesBlock = $block->getChildBlock("quickview.sizes.only");
                        $sizesBlock->setProduct($product);
                        ?>
                        <?php if($sizesBlock): ?>
                            <?php echo $sizesBlock->toHtml(); ?>
                        <?php endif; ?>
                        <input type="hidden" id="sizeoption" />
                    </div>
                </div>
                <input type="hidden" value="<?php echo $formKey->getFormKey(); ?>" name="form_key" />
                <input type="hidden" name="product" value="<?php echo $product->getId(); ?>" />
                <input type="hidden" id="base_price" value="<?php echo $product->getFinalPrice(); ?>" />
                <input type="hidden" name="category" id="category"  value="<?php echo $category; ?>"/>
                <div class="modal-group">
                    <div class="input-group chia-seed">
                        <!-- Reglar price -->
                        <div class="product-info-price celery price_detail_page div-price-regular"><div class="price-box price-final_price" data-role="priceBox" data-product-id="<?php echo $product->getId(); ?>">
                                <span class="currency-symbol">$</span>
                                <span class="price-container price-final_price tax weee rewards_earn price show" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer"> <span id="product-price-<?php echo $product->getId(); ?>" data-price-amount="<?php echo $product->getFinalPrice(); ?>" data-price-type="finalPrice" class="price-wrapper price show" itemprop="price"></span><meta itemprop="priceCurrency" content="USD"></span>
                            </div>
                        </div>
                        <!-- Special price -->
                        <div class="price-box price-final_price price_detail_page div-price-special" style="display: none;" data-role="priceBox" data-product-id="<?php echo $product->getId(); ?>">
                            <span class="special-price">
                                <span class="price-container price-final_price tax weee rewards_earn" itemprop="offers" itemscope="" itemtype="http://schema.org/Offer">
                                <span class="price-label quick-view-price celery">Special Price</span>
                                <span id="product-price-<?php echo $product->getId(); ?>" data-price-type="finalPrice" class="price-wrapper " itemprop="price">
                                    <span class="currency-symbol-special celery">$</span><span class="quick-view-price newPriceText celery price_detail_page"></span></span>
                                <meta itemprop="priceCurrency" content="USD">
                                </span>
                                </span>
                                <span class="old-price sly-old-price celery" style="display: inline;">
                                <span class="price-container price-final_price tax weee rewards_earn" >
                                    <span class="price-label celery quick-view-price" >Regular Price</span>
                                        <span id="old-price-<?php echo $product->getId(); ?>" data-price-type="oldPrice" class="price-wrapper celery" ><span class="currency-symbol-special celery">$</span><span class="oldPriceText celery price_detail_page quick-view-price"></span></span>
                                    </span>
                                </span>
                        </div>
                        <?php
                            /*if (!null == $product->getEhScheduleStatus() && $product->getAttributeText('eh_schedule_status') == 'Enable' ):
                                    if ( ! ($product->getEhScheduleStartDate() > $end_date_time) &&
                                             ! ($product->getEhScheduleEndDate() < $start_date_time)):*/
                        ?>
                        <div class="selectdiv">
                            <input type="text" value="1" name="qty" class="form-control form-lg grey" />
                        </div>
                        <span class="input-group-btn">
                            <button id="add-cart-btn" class="btn" type="submit">Add To Cart</button>
                        </span>
                                <?php //endif; ?>
                            <?php //endif; ?>
                    </div>
                </div>
            </form>

<script type="text/javascript">
   require(
        [
            'uiComponent',
            'Magento_Customer/js/customer-data',
            'jquery',
            'ko',
            'underscore'
        ],
        function(Component, customerData, $, ko, _) {
            var deliveryUrl = '<?php echo $baseUrl; ?>storepickupext/popup';
            var addToCartUrl = '<?php echo $baseUrl; ?>quickview/cart/add';
            $("#add-cart-btn").click(function(){

                $("#add-to-cart-form").submit(function(e) {
                    console.log('first');
                    $('.quickview-content').trigger('processStart');
                    e.preventDefault(); 
                    var form = $(this);
                    var url = form.attr('action');

                    $.ajax({
                        type: "POST",
                        url: url,
                        data: form.serialize(), 

                        success: function(data)
                        {   
                            console.log(data);
                        }
                    });
                });
            });
        });

</script>

On above js code I am reloading cart by this way:

var sections = ['cart'];
            customerData.invalidate(sections);
            customerData.reload(sections, true);

But I am getting below error in console. Minicart is getting updated but not in proper way.

Answer 1

You can update your mini cart using sections.xml by below code

app\code\Vendor\Module\etc\frontend\sections.xml

<?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="quickview/cart/add"><!-- your controller path -->
        <section name="cart"/>
    </action>
</config>

Or you can update using js

miniCart = $('[data-block=\'minicart\']');
miniCart.trigger('contentUpdated');

UPDATE

<script type="text/javascript">
    require(['jquery'], function($) {
        var deliveryUrl = '<?php echo $baseUrl; ?>storepickupext/popup';
        var addToCartUrl = '<?php echo $baseUrl; ?>quickview/cart/add';
        $("#add-cart-btn").click(function(){

            $("#add-to-cart-form").submit(function(e) {
                console.log('first');
                $('.quickview-content').trigger('processStart');
                e.preventDefault(); 
                var form = $(this);
                var url = form.attr('action');

                $.ajax({
                    type: "POST",
                    url: url,
                    data: form.serialize(), 
                    success: function(data)
                    {   
                        console.log(data);
                        miniCart = $('[data-block=\'minicart\']');
                        miniCart.trigger('contentUpdated');
                    }
                });
            });
        });
    });
</script>