Modx EVO - DITTO and InfiniteScroll
I need to implement Infinite Scrolling (Paul Irish InfiniteScrolling) to work with ModX EVO Ditto.
*** Phase/milestone 1 ***:
(a-1) NO extra code and NO new templates! Only use Ditto and Paul Irish Infinite Scroll. All code is already there but the result is not correct as you can see.
Layout is 3-column and responsive and with same CSS styling / formatting as in all articles and overview pages - The layout for Home-page and all category pages (Sports, business, news, etc.) is good how it is now, thus 3-column layout, responsive and well-structured top-bottom-left-right with same padding.
(b-1) You need to make CSS structure changes so that the column width for all devices (smartphones, tablets, etc.) is optimal, and all works the same for all browsers (IE7,8,9,10, etc., Chrome, Firefox, etc.). Now it is not optimal, my item-sizes are a little bit too big/wide, for example on smartphone. Also there is too much white space on right and left side of the 3-column articles block when I view my site on large desktop.
InfiniteScroll needs to be implemented on:
(c-1) ** Home page (mixed overview of all category articles sorted by createdon date)
(c-2) ** on all Category pages (Sports, Business, News, Lifestyle) (overview of all articles within each category, also sorted by createdon date)
(c-3) ** Search results page (AjaxSearch - if a user searches for all articles about "football", then all articles have to list the same way as in Home-page and category pages – each search result has to come in a separate individual DIV with the same article components as in the Home-page overview (thus, 3-column layout and components include article image, video thumbnail, author, author image, search result intro-text truncated, publication date, etc., and all search result articles in separate DIV need to be sorted by createdon date!), and when the search results are many (such as for example 23 articles), then InfiniteScrolling needs to apply as well with &display=`7`
(c-4) ** Complete-Article-Read (single page view) (if a user reads the full article, then when he reaches the end, the next full article needs to load with InfiniteScrolling (the next full article also includes the Social Media links, the Advertisement, and the Comments box, and in the right side-bar the <divs> that include advertisements, hot stories articles, etc. (see website for example that will explain my requirement – my demo-site also has all full-article components included already for for the structure). Remember all articles always have to be sorted by "createdon date".
(d-1) Set the &display parameter at "7" in your Ditto calls (I can easily change later for I want for each section, home-page, category-page, search results page. Ofcourse, for complete-article-read page the &display parameter can only be "1".
(e-1) When InfiniteScroll activates then I want to see a SPINNER-image in the MIDDLE of the page with the text "More articles are being loaded".
(f-1) For single page (thus complete-article-read pages) when the next full article loads, the URL needs to change to show the new article-title. Also when user clicks the "back" button then the previous URL (=article-title) loads. This is the SEO friendliness that I need (same as in example website).