0

I need to show a modal after a product is placed inside cart. This is what i have so far.

This is my default.xml 

<body>
    <referenceContainer name="content">
        <block class="Magento\Framework\View\Element\Template" name="minicart.lightwindow" template="Company_MiniCartLightWindow::minicart_lightWindow.phtml"/>
    </referenceContainer>
</body>

This is my template

    <div class="modal" id="add-to-cart-modal">
    Hello word.
    </div>
    <script type="text/x-magento-init">
    {
       "[data-block='minicart']" : {
       "Company_MiniCartLightWindow/js/view/minicart_lightwindow" : {}
        }
    }
</script>

finally this is my js file

    define(["jquery/ui","jquery"], function(Component, $){
       return function(config, element){
       var minicart = $(element);
       minicart.on('contentLoading', function () {
           minicart.on('contentUpdated', function () {
                    alert('hello');
           });
       });
     }
   });

Not even the alert is triggered after adding product to cart. No errors on js require on console either.

Thank You.

Improve this question

1 Answer 1

Reset to default
0

Try

define(["jquery/ui","jquery"], function(Component, $){
   return function(config, element){
     var minicart = $(element);
     minicart.on('contentLoading', function () {
       alert('hello');
     });
  }
});

A quick test on EE 2.1.2 product detail page shows that res.minicart return undefined therefore contentUpdated will not get triggered.

See

/vendor/magento/module-catalog/view/frontend/web/js/catalog-add-to-cart.js

    ajaxSubmit: function(form) {
        var self = this;
        $(self.options.minicartSelector).trigger('contentLoading');
        self.disableAddToCartButton(form);

        $.ajax({
            .....
            success: function(res) {
                ......
                if (res.minicart) {
                    $(self.options.minicartSelector).replaceWith(res.minicart);
                    $(self.options.minicartSelector).trigger('contentUpdated');
                }

Update - I'm testing from a highly customized version of 2.1.2 so try the code below. (nesting 'contentUpdated' inside of 'contentLoading' will only get bind after the first call to 'contentUpdated' so you will need to add (maybe) 2 items before it will get triggered.

    define(["jquery/ui","jquery"], function(Component, $){
       return function(config, element){
          var minicart = $(element);
          minicart.on('contentLoading', function () {
             alert('hello loading');
          });

         minicart.on('contentUpdated', function () {
           alert('hello Updated');
         });
     }
   });
Improve this answer
3
  • Thank you very much It works but ( at least it enters to ContentUpdated it skips contentLoading) but my problem with this is now is that i am noticing that contentUpdated is call every time the page realoads, so if you didnt add a new product it will enter too.So maybe i am looking into the wrong trigger?
    – Christian Emanuel Frigo
    Commented Nov 11, 2016 at 17:46
  • If there is no item in cart it will not access ContentUpdated event. But if there is one item in cart i will access every time the page loads =(
    – Christian Emanuel Frigo
    Commented Nov 11, 2016 at 17:57
  • I would recommend looking into add to cart logic or build some additional logic like checking the number of item in and only display the alert if it change
    – MagePal Extensions
    Commented Nov 11, 2016 at 18:12

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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