Continuing from the last video, I'll basically just copy the steps needed here, with mostly updated code and a few other updates, for better visualization.
First some technical self reference: I took this as a personal project to evolve my business there, as I said before. So most of the code is now on its own CDN ( by using rawgit as exposed in the first line ) and on a new repository. Just compiling this post alone, despite being mostly copied from previous ones, took me about 1 hour. Then little less than 1 extra hour to tweak scripts a bit more, polish it, and finally another one for the video production!
Instead of renaming the old shop, I've left it with the same name and created a new page called
shop-list (instead of using the
new-shop, which I left there).
Keep in mind
The scripts have a few lines that rely on both
/shop-list page names, the URL Slug as it's called under page settings. If you rename any of the two pages, please remember to rename it there in the code too. Fortunately that shouldn't happen that often!
There are a few things needed to recreate it from scratch, in case you do need to do it:
1) A page with a grid summary block inside and displaying thumbnail and price only (haven't even tested with other options). Column width here won't matter and there is no more paging abstraction, so number of items also won't matter (better just leave it at 1).
2) That page need to have an animated GIF with the loading image animation, and a clickthrough URL link set to
3) Still on the same page, copy and paste the file
endless-scrolling.html to that page's advanced settings, under page header code injection
endless-scrolling-print.html on the shop page to fix the product item
< SHOP "back" button. I've uncommented the line from before so there will be no "print" function this time. Also replaced
shop-list as advised under "keep in mind" up there:
<!--meta http-equiv="refresh" content="0; url=/shop-list"-->
<script name="endless scrolling" author="cregox.com">
// main settings
// change this to the correspondent URL Slug
var shopList = '/shop-list';
var thisPage = Static.SQUARESPACE_CONTEXT.collection.fullUrl;
if (location.pathname === thisPage)
var pageId = window.location.href.split('/').pop();
Y.all('a[href$="'+ thisPage +'"]').set('href', shopList + '/#p@' + pageId);
5) Copy and paste the
endless-scrolling.less file into Custom CSS, tweak it at your will, and have fun!
Here's the video of me applying those steps: