Masonry an Woocommerce Cart widget conflict?

Question

I've posted some questions about Masonry on de Woocommerce shop page. Bottom line I had an image overlap issue. I found a solution at masonry desandro . I needed the imagesLoaded script. OK that works. The second problem I encountered was that the shopping cart was not visible on my pages, just the widget title. You can see here the post about that topic.

I found with help that the issue was in the Masonry script as I had implement it. The way I did it came from a course on lynda.com.

Here is the code:

function twentytwelve_child_masonry() {
if (!is_admin()) {
    wp_enqueue_script('masonry');

    add_action('wp_footer', 'twentytwelve_child_add_masonry');      
    function twentytwelve_child_add_masonry() { ?>
        <script>
                    (function( $ ) {
                        "use strict";
                        $(function() {
                        //set the container that Masonry will be inside of in a var
                        var container = document.querySelector('.products');
                        //create empty var msnry
                        var msnry;
                        // initialize Masonry after all images have loaded
  //->                      imagesLoaded( container, function() {
                            msnry = new Masonry( container, {
                                itemSelector: '.product',
                                isAnimated: true
                            });
                        });
  //->                  });
                        }(jQuery));
        </script>
    <?php 
    }
  }
}
add_action('init', 'twentytwelve_child_masonry');

The two lines marked with //-> are responsiple for running or not running the imagesLoaded script.

However when this imagesLoaded script runs the masonry works perfect, the woocommorce cart widget is not. When the imagesLoaded script is commented out, de masonry is a mess (overlapping images) but the woocommerce cart widget works lik a charm.

Anyone an idea? I'm e bit of a newbie so any help is much appreciated.

EDIT

See updated code below.

function script_imagesLoaded (){
wp_register_script ('images_loaded' , get_stylesheet_directory_uri() . '/js/imagesloaded.js' , Array() , '3.1.8' ,true);
wp_enqueue_script ('images_loaded');
}
add_action('init' , 'script_imagesLoaded');

function twentytwelve_child_masonry() {
if (!is_admin()) {
    wp_enqueue_script('masonry');

    add_action('wp_footer', 'twentytwelve_child_add_masonry');      
    function twentytwelve_child_add_masonry() { ?>
        <script>                                             
                    (function( $ ) {
                        "use strict";
                        $(function() { 
                         imagesLoaded( 'body', function() {
                            alert ('All images have loaded!');
                        });    
                        //set the container that Masonry will be inside of in a var
                        var container = document.querySelector('.products');
                        //create empty var msnry
                        var msnry;
                        // initialize Masonry after all images have loaded
                        imagesLoaded( container, function() {
                            msnry = new Masonry( container, {
                                itemSelector: '.product',
                                isAnimated: true
                            });

                            });
                        });
                        }(jQuery));
        </script>
    <?php 
    }
}
}
add_action('init', 'twentytwelve_child_masonry');

EDIT3

Answer 1

From your comments it sounds like imagesLoaded.js is not being loaded, which is why you're having issues:

1. Go to the Images Loaded page on Github and download the latest version.
2. Put downloaded files in your theme folder with your other JS files.
3. Enqueue the script using wp_enqueue_script - here's a pretty good guide on how to do this if you've never done it before. Loading it in the footer should be fine.

Once you've done all that you can confirm it's loaded and running by popping the following JS on the page/in your script files:

imagesLoaded( 'body', function() {
    alert ('All images have loaded!');
});

That should trigger an alert when all the images on the page have loaded.

Incidentally you mentioned that you got this code from a course at Lynda.com - do you have a link to this? I'm surprised they didn't point out that you need to make sure that you the ImagesLoaded scripts included.

Answer 2

Got it working at last. It was needed to download a total of 4 js scripts from GitHub.

masonry.pkgd.min.js
inagesloaded.js
eventie.js
eventemitter.js

Next I created the following function:

 function twentytwelve_child_masonry() {
 if (!is_admin()) {

            wp_register_script ('eventemitter_loaded' , get_stylesheet_directory_uri() . '/js/eventEmitter.js' , Array() , '4.2.11' ,true);
            wp_enqueue_script ('eventemitter_loaded');

            wp_register_script ('eventie_loaded' , get_stylesheet_directory_uri() . '/js/eventie.js' , Array() , '1.0.5' ,true);
            wp_enqueue_script ('eventie_loaded');

            wp_register_script ('images_loaded' , get_stylesheet_directory_uri() . '/js/imagesloaded.js' , Array() , '3.1.8' ,true);
            wp_enqueue_script ('images_loaded');

            wp_register_script('twentytwelve_child_masonry', get_stylesheet_directory_uri() . '/js/masonry.pkgd.min.js' , array(),'3.2.1', true);
            wp_enqueue_script('twentytwelve_child_masonry');

           add_action('wp_footer', 'twentytwelve_child_add_masonry');       
           function twentytwelve_child_add_masonry() { ?>
              <script>
                    (function( $ ) {
                        "use strict";
                        $(function() {
                        //set the container that Masonry will be inside of in a var
                        var container = document.querySelector('#masonry_wrapper');
                        //create empty var msnry
                        var msnry;
                        // initialize Masonry after all images have loaded
                        imagesLoaded( container, function() {
                            msnry = new Masonry( container, {
                                itemSelector: '.product',
                                isAnimated: true
                            });
                            });
                        });
                        }(jQuery));
        </script>
    <?php 
    }
 }
 }

In the product-archive.php file I wrapped the loop in a separate div. (#masonry_wrapper). Next and last I called the function above from within product-archive.php. Special thanks to Dre who helped me a lot. See the comments above.