admin管理员组文章数量:1122846
I am trying to get Jetpkack's infinite scroll to work with the WooCommerce product archive template.
I have added the following code to my theme, after installing Jetpack, and I do see the sticky footer that shows when infinite scroll is enabled, and I see it loading default seven products instead of normal output, which leads me to assume the infinite scroll function is firing:
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' );
}
The normal online tutorials say to use
get_template_part('loop');
inside the render function to have infinite scroll work. But since I am trying to get this to work not for normal posts, but for WooCommerce specifically, I peak inside the archive-template.php
file inside /woocommerce/templates
and see what I assume they are using to display this product archive section of the page:
<?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. ?>
Looking at this file, I see:
wc_get_template_part( 'content', 'product' );
So when I paste this inside my infinite scroll render function:
function mytheme_infinite_scroll_render() {
wc_get_template_part( 'content', 'product' );
}
I still do not get it to work.
Interestingly enough, when I go into /woocommerce/templates/archive-product.php
and comment out the wc_get_template_part( 'content', 'product' );
part of the file, I do see the infinite scroll loader icon. But of course no products since that part is commented out.
I am posting this question to see if anyone has an idea of what I am missing here. I see the sticky footer so I know this infinite scroll is firing, but I guess my problem is figuring out which line of code to use inside
I am trying to get Jetpkack's infinite scroll to work with the WooCommerce product archive template.
I have added the following code to my theme, after installing Jetpack, and I do see the sticky footer that shows when infinite scroll is enabled, and I see it loading default seven products instead of normal output, which leads me to assume the infinite scroll function is firing:
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' );
}
The normal online tutorials say to use
get_template_part('loop');
inside the render function to have infinite scroll work. But since I am trying to get this to work not for normal posts, but for WooCommerce specifically, I peak inside the archive-template.php
file inside /woocommerce/templates
and see what I assume they are using to display this product archive section of the page:
<?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. ?>
Looking at this file, I see:
wc_get_template_part( 'content', 'product' );
So when I paste this inside my infinite scroll render function:
function mytheme_infinite_scroll_render() {
wc_get_template_part( 'content', 'product' );
}
I still do not get it to work.
Interestingly enough, when I go into /woocommerce/templates/archive-product.php
and comment out the wc_get_template_part( 'content', 'product' );
part of the file, I do see the infinite scroll loader icon. But of course no products since that part is commented out.
I am posting this question to see if anyone has an idea of what I am missing here. I see the sticky footer so I know this infinite scroll is firing, but I guess my problem is figuring out which line of code to use inside
Share Improve this question asked Aug 31, 2017 at 10:58 Zach SmithZach Smith 5862 gold badges9 silver badges23 bronze badges1 Answer
Reset to default 1The problem lies in the 'container' => 'content'
.
The container
parameter is the core of adding infinite scroll to your theme: it specifies the ID of the HTML element to which infinite scroll should add additional posts to.
You need to add ID ( for example: product-wrapper
) to products wrapping element which is going to be new value for container
parameter.
'container' => 'product-wrapper'
This wrapping element is <ul class="products">
, which is found in woocommerce/templates/loop/loop-start.php
file. So just add ID to it <ul id="product-wrapper" class="products">
.
This means that you need to edit this file. Best practice for this is to add woocommerce folder to root of your theme, and take what ever file you need to edit from woocommerce/templates
folder.
This method overwrites woocommerce default file.
Be careful to follow file path exactly like in woocommerce/templates
, in your case it's going to be woocommerce/loop/loop-start.php
inside your theme root folder.
The path is basically the same except for exclusion of templates
in your theme path.
This method protects the file from being overwritten by woocommerce update, and you have overview of files that you edited inside woocommerce.
So your function should look like this:
function mytheme_infinite_scroll_init() {
add_theme_support( 'infinite-scroll', array(
'container' => 'product-wrapper',
'render' => 'mytheme_infinite_scroll_render',
'footer' => 'wrapper',
) );
}
This part you got right: wc_get_template_part( 'content', 'product' );
that will get you list of products from products loop.
There's a detailed explanation about every parameter of Infinite Scroll here: https://jetpack.com/support/infinite-scroll/
本文标签: how to get jetpack39s infinite scroll to work with woocommerce
版权声明:本文标题:how to get jetpack's infinite scroll to work with woocommerce? 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1736299635a1930527.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论