Chap WordPress theme
Chap

YITH Infinite Scrolling

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:

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 > main, .full.height > .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:

HTML
Hack
//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:

HTML
Hack
//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.