YITH Infinite Scrolling plugin allows to automatically load more content when user scrolls down.

Here are the settings for YITH Infinate Scrolling that work with Chap theme:

YITH infinate scrolling settings

The selectors work for archives, search results and products.
Here are the selectors in text-form so they can be copied:

Navigation Selector
.ui.pagination
Next Selector
.next.item, .nav-previous.item
Item Selector
.product.card, article.item, article.column, article.card
Content Selector
.full.height {gt} main, .full.height {gt} .main.grid
Loading animation

The plugin comes with a default loading gif, but that doesn’t look very attractive. Since the loading image input isn’t escaped it’s possible to use a slight hack to use HTML instead of a loading gif by using the following code in the “Loading Image” input field:

Hack
HTML
//placehold.it/1" class="invisible"><div class="ui active loader"></div><input type="hidden

First we load a 1x1px size invisible image as the loading gif and then close the image tag. Now we use Semantic UI’s .ui.loader as the loading animation. And finally a hidden input is used to deal with the leftover html.

We can also add some text or change size:

Hack
HTML
//placehold.it/1" class="invisible"><div class="ui large active text loader">Loading</div><input type="hidden
Loading
Semantic UI’s Loader element is not enabled by default. If you don’t see any loading animation go to Chap Compiler, check “definitions/elements/loader.less”, save changes and then recompile.

Leave a comment

Your email address will not be published. Required fields are marked *