如何让Jetpack的无限卷轴与WooCommerce合作?

时间:2017-08-31 作者:Zach Smith

我正在尝试让JetKack的无限卷轴与WooCommerce产品归档模板一起工作。

安装Jetpack后,我在我的主题中添加了以下代码,我确实看到了启用无限滚动时显示的粘性页脚,我看到它加载了默认的七个产品,而不是正常的输出,这导致我假设无限滚动功能正在启动:

function mytheme_infinite_scroll_init() {
    add_theme_support( \'infinite-scroll\', array(
        \'container\' => \'content\',
        \'render\'    => \'mytheme_infinite_scroll_render\',
        \'footer\'    => \'wrapper\',
    ) );
}
add_action( \'init\', \'mytheme_infinite_scroll_init\' );
function mytheme_infinite_scroll_render() {
    //get_template_part( \'loop\' );
    wc_get_template_part( \'content\', \'product\' );
}
正常的在线教程说要使用

get_template_part(\'loop\');
在渲染函数中,可以进行无限滚动工作。但是,由于我试图让这项工作不适用于正常的职位,而是适用于WooCommerce,我在archive-template.php 文件内部/woocommerce/templates 并查看我假设他们使用什么来显示页面的此产品存档部分:

<?php
/**
* woocommerce_shop_loop hook.
*
* @hooked WC_Structured_Data::generate_product_data() - 10
*/
do_action( \'woocommerce_shop_loop\' );
?>
<?php wc_get_template_part( \'content\', \'product\' ); ?>
<?php endwhile; // end of the loop. ?>
查看此文件,我看到:

wc_get_template_part( \'content\', \'product\' );
因此,当我将其粘贴到无限滚动渲染函数中时:

function mytheme_infinite_scroll_render() {
        wc_get_template_part( \'content\', \'product\' );
    }
我仍然没有让它发挥作用。

有趣的是,当我进入/woocommerce/templates/archive-product.php 并注释掉wc_get_template_part( \'content\', \'product\' ); 在文件的一部分,我确实看到了无限滚动加载程序图标。但当然没有产品,因为该部分被注释掉了。

我发布这个问题是为了看看是否有人知道我在这里遗漏了什么。我看到了粘性的页脚,所以我知道这个无限卷轴正在启动,但我想我的问题是弄清楚要在里面使用哪一行代码

1 个回复
SO网友:Djordje Krstic

问题在于\'container\' => \'content\'.

这个container 参数是向主题添加无限卷轴的核心:它指定无限卷轴应向其添加其他帖子的HTML元素的ID。

您需要添加ID(例如:product-wrapper ) 将成为新价值的产品包装元素container 参数

\'container\' => \'product-wrapper\'

此包装元素为<ul class="products">, 可在中找到woocommerce/templates/loop/loop-start.php 文件所以只需添加ID即可<ul id="product-wrapper" class="products">.

这意味着您需要编辑此文件。这方面的最佳实践是将woocommerce文件夹添加到主题的根目录中,并从中获取任何需要编辑的文件woocommerce/templates 文件夹此方法覆盖woocommerce默认文件。

请务必严格按照中的方式遵循文件路径woocommerce/templates, 对你来说woocommerce/loop/loop-start.php 在主题根文件夹中。路径基本相同,除了排除templates 在主题路径中。

此方法可防止文件被woocommerce更新覆盖,并且您可以查看在woocommerce中编辑的文件。

因此,您的函数应该如下所示:

function mytheme_infinite_scroll_init() {
    add_theme_support( \'infinite-scroll\', array(
        \'container\' => \'product-wrapper\',
        \'render\'    => \'mytheme_infinite_scroll_render\',
        \'footer\'    => \'wrapper\',
    ) );
}
这部分你做对了:wc_get_template_part( \'content\', \'product\' ); 这将从products loop中获取产品列表。

这里对无限滚动的每个参数都有详细的说明:https://jetpack.com/support/infinite-scroll/

希望这有帮助

结束

相关推荐