2

On a successful trigger of Add to Cart button.

How we can get a modal like this picture?

Appreciate all your attention! enter image description here

  • Hello @Linda do you need this in product detail page or in the listing page. If it is in listing page then I have a solution. For detail page I'll have to see that. – Purushotam Sangroula Jan 2 '18 at 18:08
1

Please follow below steps

Step 1 Implement below code end of file, in my case the file path is app/design/frontend/{{companyname}}/{{themename}}/Magento_Catalog/templates/product/view/addtocart.phtml

<?php $geturl = $this->getBaseUrl()."checkout/cart"; ?>
<div class="model-popup" style="display:none;">
    <div class="addto-msg">Thank you for purchase this product.</div>
    <button class="action tocontinue primary action-dismiss" type="button" data-role="action"><span>Close</span></button>
    <a href="<?php echo $geturl; ?>" class="action tocart primary">View Cart</a>
</div>

Step 2 In success function approx line no 150 file path is app/design/frontend/{{companyname}}/{{themename}}/Magento_Catalog/web/js/catalog-add-to-cart.js

ajaxSubmit: function (form) {
        var self = this;

        $(self.options.minicartSelector).trigger('contentLoading');
        self.disableAddToCartButton(form);

        $.ajax({
            url: form.attr('action'),
            data: form.serialize(),
            type: 'post',
            dataType: 'json',

            /** @inheritdoc */
            success: function (res) {
                ............................
                ............................
                ............................
                /** add to cart popup modal **/
                var popup = $('.model-popup').modal({
                    modalClass: 'changelog',
                    });
                popup.modal('openModal');
                $('.modal-footer').hide();
                $('.modal-inner-wrap').addClass('checkoutpopup');
                $('.action-close').click(function() {
                  $('.modal-inner-wrap').removeClass('checkoutpopup');
                });
                $('button').click(function() {
                  $('.modal-inner-wrap').removeClass('checkoutpopup');
                });  
                /** add to cart popup**/
            }
        });
    },

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.