Reinitialise Woocommerce Scripts again after downloading products using Wordpress Infinite Scroll

Question

Im launching the Wordpress Woocommerce-Shop with an endless scroll plugin to automatically download the next set of products on my store page.

There are some variable products with drop-down menus that display the price after selecting attributes (woocommerce function by default).

Unfortunatley this feature only works on the start page. Loads and breaks products that are loaded by endless scrolling after scrolling down.

So, I think I should reinitialize the js scripts that are responsible for the function again after scrolling through each infinte page. The infinite scroll plugin has the following part (function(newElements)..) for initializing functions after loading new elements. Any idea (if possible, safe update) how to reinitialize woocommerce scripts for product variables again? I think this is at least 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 other people.

The safest and almost “updated way to save” in order to make the drop-down menu of the variable products work is to load add-to-cart-variation.min.js after loading a new pair of products again. Please focus on the part // Initialize again :

 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

An even better way to cache a script file! GetScript () calls jQuery.get () witch is a shorthand Ajax function

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

So, by calling getScript (), you are calling an ajax call, and jQuery does not store any cache of your files. To cache the file also 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 }); }); }