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
                                
    });
}

Answer 1

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
            });

    });
}