我正在尝试让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\' );
在文件的一部分,我确实看到了无限滚动加载程序图标。但当然没有产品,因为该部分被注释掉了。
我发布这个问题是为了看看是否有人知道我在这里遗漏了什么。我看到了粘性的页脚,所以我知道这个无限卷轴正在启动,但我想我的问题是弄清楚要在里面使用哪一行代码
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/
希望这有帮助