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

Question

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

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

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

所以我想我必须在每次无限页面滚动后重新初始化负责该功能的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 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
            });

    });
}