-
Posts
-
Hi I am using WP Scalability Pro and Auto Infinite Scroll on a large Enfold site (116,000 variable products).
Auto Infinite Scroll works fine for the Products pages but it breaks on the blog.
The Pagination on the blog is nested within Main – Whereas on the Products page, The elements containing the following selectors .pagination is outside of the .products css class.
See example in private content.
To fix I have added a css class to <main> manually in the parent theme – Main Template (index.php) Line 34.Two possible solutions
1. Place the blog in a new div so pagination follows it – Like on the woocommerce product archives pages where pagination sits outside of the products div.
On the prooduct archives:
<div class=”entry-content-wrapper”> <ul class=”products”></ul> Pagination is outside of the ul class. <nav class=”pagination”></nav> </div>Suggestion on blog:
<main> <newdiv> <article> </article> </newdiv> These now sit outside of the posts loop: <single-big> <pagination> </pagination> </single-big> </main>2. Can you add a class to <main> on the blog pages so I can use it as the selector? (See example in private content).
2a.Is there a filter already set up in Enfold to add a class here?Hey Thomas,
What I can offer is a filter to add custom classes to main tag. Changing the div structure is too critical to break existing sites with customizations.
You certainly know, but in html tag you have a class like e.g. html_entry_id_30165 or you can use filter avf_custom_body_classes (enfold\header.php line 167) to add classes to body which you can use to limit selectors for the main tag (like “.your-body-class main”).
Does that help you or would you still prefer an own filter for main tag?
Best regards,
GünterHi Gunter,
Thank you for looking into this – I thought this might be the case.The problem is it is looking for a single selector (Unless I am mistaken). So I cannot populate the box in the plugin with a class containing more than one selector – Just comma seperated single selectors.
So I will need to add a filter to add a class to <main> on line 34 in Main Template (index.php)
OR
If you are able to add a class to this like blogloop or something that has no other function I could use that to exclude. The worry is another dev will come and remove the css for not having a purpose at a later date so a filter would probably be better.This allows for full compatibility with Auto Infinite Scroll.
This particular site is one of three extremely large ecommerce sites I am working on. Two of which have Auto Infinite Scroll installed to speed up index pages.
Paginated pages dont get preloaded by WP-Rocket or appear on yoast sitemaps so this was a way to cache as many pages as possible within a 116,000 product store.
Hi,
Then a filter would be the best (avf_custom_main_classes). Probably I will add it to main tag on other pages also.
I will let you know here when I know more. I will try for next release.
Best regards,
GünterHi,
Filter is added to 5.6.7. Here an example how to use it:
Will be available in base templates.
If you already want to add it to your sites prior to release, here is the modified file:
https://github.com/KriesiMedia/enfold-library/blob/master/temp_fixes/Enfold_5_6_6/index.php
Best regards,
GünterThanks Gunter, I wasnt expecting this so fast.
Just checking this only needs to apply to the blog page not all pages. Otherwise the infinite scroll may try to apply its settings to the wrong content?
Hi,
You can add the logic in the filter.
Check if you are on a blog page and then add your class tjajax.
Add this additional check inside the if statement of our example in https://github.com/KriesiMedia/enfold-library/blob/master/actions%20and%20filters/Basic%20Templates/All%20Templates/avf_custom_main_classes.php
Best regards,
GünterHi Gunter,
For those looking to add auto infinite scroll from WP Intense to their Enfold site:
Auto Infinite Scroll Settings:
Set the distance to 1000px
css wrapper: .products, .yourcustomclassfornewspage
Pagination wrapper: .pagination
Next Page Selector: next_pageCss for the load more button: (plus hide the pagination on the blog page)
#isw-load-more-button { border: none; padding: 20px 50px 20px 50px; background-color: #007a74; color: #ffffff; font-size: 18px; font-weight: bold; transition-duration: 1s; } #isw-load-more-button:hover { border: none; background-color: #39a6a1; color: #000000; } .yourcustomclassfornewspage .pagination { display:none !important; }Snippet for functions.php to insert the new CSS class to just the blog page:
add_filter( 'avf_custom_main_classes', 'custom_avf_custom_main_classes', 10, 2 ); function custom_avf_custom_main_classes( $class_string = '', $context = 'index.php' ) { // fallback check if( ! is_string( $class_string ) ) { $class_string = ''; } // e.g. add custom class to index.php Make sure there is a space before the class! if( 'index.php' == $context ) { $class_string .= ' yourcustomclassfornewspage'; } return $class_string; }Hi,
Thank you for sharing your solution, it looks like Auto Infinite Scroll from WP Intense is a paid plugin, I didn’t find a free version for it, but I imagine that you have found it helpful due to the time you put into getting it to work with Enfold, thanks I’m sure others in the future will appreciate your effort. Do you want this thread to remain open to answer future questions, or shall we close it?Best regards,
MikeHi Mike,
Yep a paid plugin but absolutely brilliant.
It forms part of an advanced WooCommerce performance stack I am now using.WPScalability Pro and Auto Infinite Scroll are both by WP Intense and together make WooCommerce much faster. Particularly larger sites.
Scalability Pro also speeds up Enfold and WordPress in general.
There is an option in Scalability Pro to compliment Auto Infinite Scroll – Improving the load time of WooCommerce archive pages.
You can close this issue. I have sent a link to the plugin developer informing them of the solution above.
- The topic ‘Bug: additional class for blog page nested pagination’ is closed to new replies.