使用Wordpress Infinite Scroll加载产品后，再次重新初始化Woocommerce脚本 [英] Reinitialise Woocommerce Scripts again after loading Products with Wordpress Infinite Scroll

问题描述

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

Im running a Wordpress Woocommerce-Shop with an infinite scroll plugin to automatically load the next set of products on my shop page.

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

There are some variable products with dropdown menus, wich are displaying the price after selecting the attributes (default woocommerce function).

不幸的是，此功能仅在初始页面上有效.向下滚动后，在加载有无限滚动的产品上会中断.

Unfortunatley this function only works on the initial page Load and breaks on products wich loaded with the infinite scroll after scrolling down.

因此，我想我必须在每次无限页面滚动后再次初始化负责该功能的js脚本.无限滚动插件具有以下内容 (function(newElements)..)部分以在加载新元素后初始化函数. 任何想法(如果可能的话，请确保安全更新)如何再次为可变产品重新初始化woocommerce脚本?我想至少是add-to-cart-variation.min.js

So i guess i must reinitialise the js scripts wich are responsible for the function again after each infinte 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 reinitialise 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

    });
}

推荐答案

所以我解决了这个问题.希望这可以帮助其他人.

使可变产品下拉菜单最安全且几乎更新保存"的方法是在再次加载一对新产品之后加载add-to-cart-variation.min.js.请专注于// Initialize again部分:

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

    });
}

更新

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

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

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

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

    });
}

这篇关于使用Wordpress Infinite Scroll加载产品后，再次重新初始化Woocommerce脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！