1

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. enter image description here

0

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>
9
  • I have tried this code also. Its still showing same error. I am not sure I found some blogs they are saying the knockout template is not found thats why its showing these types of error. But still no clue ? – Dinesh Rajput Dec 3 '19 at 12:25
  • I thought the error appears after you added this js var sections = ['cart'];customerData.invalidate(sections);customerData.reload(sections, true); – Ranganathan Dec 3 '19 at 12:33
  • Exactly when you got this error? – Ranganathan Dec 3 '19 at 12:34
  • yes, you are correct, the error appears only after I added this js. I am getting this error after add to cart. – Dinesh Rajput Dec 3 '19 at 12:43
  • remove this js code....It is not necessary... Add section.xml – Ranganathan Dec 3 '19 at 12:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.