Reinitialise Woocommerce Scripts again after loading Products with Wordpress Infinite Scroll

Question

I'm running a Wordpress Woocommerce-Shop with an infinite scroll plugin to automatically load the next set of products on my shop page.

There are some variable products with dropdown menus, which are displaying the price after selecting the attributes (default woocommerce function).

Unfortunately this function only works on the initial page Load and breaks on products which loaded with the infinite scroll after scrolling down.

So I guess I must reinitialize the js scripts which are responsible for the function again after each infinite page scroll. The infinite scroll plugin has the following part (function(newElements)..) to initialize functions after loading new elements. Any Idea (if possible update safe) how to reinitialize the woocommerce scripts for variable Products again? I guess it is at least the add-to-cart-variation.min.js

    if (obj_nes.infinitescroll != 'disable') {
    nextSelector = obj_nes.nextselector;
    nextSelector = '#navigation #navigation-next a';
    
    $masonry.infinitescroll({
        navSelector : '#navigation',
        nextSelector : nextSelector,
        itemSelector : '.product',
        prefill: true,
        bufferPx : 900,
        loading: {
            msgText: '', 
            img: '',
            finished: function() {}
        }
    }, function(newElements) {
        
        // Initialize again
                                
    });
}

More generally you might find this a good read: https://stackoverflow.com/questions/10920355/attaching-click-event-to-a-jquery-object-not-yet-added-to-the-dom — ficuscr, Jan 18 '18 at 19:30
@ficuscr - i dont get your point? I followed your link - but i do not understand how to connect it with my question? — evavienna, Jan 18 '18 at 20:14

evavienna · Accepted Answer · 2018-01-20T09:38:41.620

So i solved the problem. Hope this helps others to.

The most secure and almost "update save" way to make the variable products dropdown menus working, is to load the add-to-cart-variation.min.js after loading a new pair of products again. Please focus on the // Initialize again part:

if (obj_nes.infinitescroll != 'disable') {
nextSelector = obj_nes.nextselector;
nextSelector = '#navigation #navigation-next a';

$masonry.infinitescroll({
    navSelector : '#navigation',
    nextSelector : nextSelector,
    itemSelector : '.product',
    prefill: true,
    bufferPx : 900,
    loading: {
        msgText: '', 
        img: '',
        finished: function() {}
    }
    }, function(newElements) {

        // Initialize again

        // if wp is installed in a subfolder
        // $.getScript("../wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");

        $.getScript("/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js");

    });
}

UPDATE

A even better way with caching the script file too! The getScript() is calling the jQuery.get() witch is a shorthand Ajax function of

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

So by calling the getScript() you make an ajax call, and the jQuery did not keep any kind of cache of your files. To cache the file too use the following

if (obj_nes.infinitescroll != 'disable') {
nextSelector = obj_nes.nextselector;
nextSelector = '#navigation #navigation-next a';

$masonry.infinitescroll({
    navSelector : '#navigation',
    nextSelector : nextSelector,
    itemSelector : '.product',
    prefill: true,
    bufferPx : 900,
    loading: {
        msgText: '', 
        img: '',
        finished: function() {}
    }
    }, function(newElements) {

      // Initialize again

      $.ajax({
          type: "GET",

          // if wp is installed in a subfolder   
          // url: "../sichere-anwendung/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js",

          url: "/wp-content/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js"),
          cache: true
            });

    });
}

Thanks. this is working, I had a products shortcode loaded via ajax (based from category and tags dropdown). For the URL i used the following: `wp_localize_script( 'custom-js', 'myTheme', array( 'contenturl' => content_url(), 'axurl' => admin_url( 'admin-ajax.php' ) ) );` and `url: myTheme.contenturl + "/plugins/woocommerce/assets/js/frontend/add-to-cart-variation.min.js"` — Vincent Liong, Mar 30 '20 at 13:49
Absolute LEGEND. I was deflated after I got so far with my AJAX shop, but then the ajax-loaded variations didn't work! I knew I had to reload some JS, but I didn't know which one :D Thank-you! — Chad Reitsma, Apr 21 '20 at 06:45

Reinitialise Woocommerce Scripts again after loading Products with Wordpress Infinite Scroll

1 Answers1

Linked