1

I'm having the problem currently where I need to run some jQuery on my Minicart. However, I can't select anything from the Minicart because the jQuery is executing before the Minicart is actually loaded on to the page.

My jQuery is contained within:

Magento_Checkout/templates/cart/minicart.phtml

and the jQuery is as follows:

<script>
    require(["jquery"], function ($) {
        //jQuery(document).ready(function(){
        jQuery(window).on('load', function(){
            let counter = 0;
            $("#minicart-content-wrapper").children().each(function(){
                counter++;
            });
            console.log("Num items in minicart: " + counter);
        });
    });
</script>

You can see from this I have tried both document ready and window on load but both return 0 in the counter. I have managed to select the parent of the Minicart and that outputs 1 so the jQuery is working as intended.

So my question is, is there an alternative place I can run some jQuery so that it will execute once the Minicart has finished loading on the page?

Update:

I have figured out a short-term solution where I can execute some jQuery once the Minicart logo is clicked however, this is not ideal as I want to edit the styling of the Minicart. This styling should be done straight away rather than when a user clicks the logo because on slower devices this could affect the look and feel as elements change on the page.

  • you should put your script at the bottom – magefms Apr 10 at 14:38
  • and since you define dollar sign in the function, you should use it also in document ready event instead of jQuery – magefms Apr 10 at 14:40
  • like $(document).ready(function() – magefms Apr 10 at 14:41
  • @magefms my script already is at the bottom of the minicart.phtml file. I figured putting it at the bottom would make it load later but no dice. And unfortunately adding the dollar sign make no difference to the selector. I really appreciate the fast help though :) - A – A. Fletcher Apr 10 at 15:16
  • I see. how about storing your jquery script into a function then call the function in body onload – magefms Apr 10 at 15:21
0

Since you defined the dollar sign in the function, you should use it also in the document ready event.

<script>
    require(["jquery"], function ($) {
        $(document).ready(function(){
            let counter = 0;
            $("#minicart-content-wrapper").children().each(function(){
                counter++;
            });
            console.log("Num items in minicart: " + counter);
        });
    });
</script>
0

Try this.

<script type="text/javascript">
    require(['jquery'], function($) {
        $(function(){
            try{
                var mage = localStorage.getItem('mage-cache-storage');
                mage = $.parseJSON(mage);
                console.log("Num items in minicart: " + mage.cart.items.length);    
            }
            catch(e)
            {
                console.log('need to reload customer section');
            }


            $(document).on('customer-data-reload', function (event, sectionNames)  {
                if(sectionNames.indexOf('cart') != -1)
                {
                    setTimeout(function() {
                        var counter = $("#minicart-content-wrapper ol#mini-cart > li").length;
                        console.log("Num items in minicart: " + counter);
                    }, 1000);
                }
            });
        });
    });
</script>

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.