使用 Wordpress Infinite Scroll 加载产品后再次重新初始化 Woocommerce 脚本

Question

我正在运行一个带有 infinite scroll plugin 的 Wordpress Woocommerce-Shop，以便在我的商店页面上自动加载下一组产品。

有一些带有下拉菜单的可变产品，在选择属性后显示价格（默认woocommerce功能）。

很遗憾，此功能仅适用于初始页面加载并在向下滚动后无限滚动加载的产品上中断。

所以我想我必须在每次无限页面滚动后重新初始化负责该功能的 js 脚本。无限滚动插件有以下 部分(function(newElements)..) 在加载新元素后初始化函数。 任何想法（如果可能的话，更新安全）如何重新初始化变量 Products 的 woocommerce 脚本？ 我猜它至少是 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

所以我解决了这个问题。希望这对其他人有所帮助。

使可变产品下拉菜单工作的最安全且几乎“更新保存”的方法是在再次加载一对新产品后加载add-to-cart-variation.min.js。请关注// 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");

    });
}

更新

缓存脚本文件的更好方法！ getScript() 调用 jQuery.get() 女巫是 Ajax function 的简写

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

因此，通过调用 getScript() 可以进行 ajax 调用，而 jQuery 不会保留任何类型的文件缓存。要缓存文件也使用以下

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

    });
}