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

Question

我正在运行带有无限滚动插件的Wordpress Woocommerce-Shop,以自动加载我的商店页面上的下一组产品.

有一些带有下拉菜单的可变产品,在选择属性后显示价格(默认的woocommerce功能).

Unfortunatley此功能仅适用于初始页面加载和打破在向下滚动后加载无限滚动的产品.

所以我想我必须重新初始化每个infinte页面滚动后再次负责该函数的js脚本.无限滚动插件具有以下部分(function(newElements)..),用于在加载新元素后初始化函数.任何想法(如果可能更新安全)如何重新初始化变量产品的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 函数的简写

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

    });
}