Building single page scrolling web sites

Thought I might create a thread to discuss various peoples approaches to building single page type scrolling websites within MODX.

What are some of the tools and methods you have used for this sort of site? How did they integrate within MODX?

In the past I created Carnival of Courage without modx using tools such as stellar.js.

Whilst stellar and a few other simple tools look like they will work with fairly small sites, moving onto large sites will require something a little more robust such as javascript library framework.

Looking around on the web I found this article Considerations When Building Single Page Web Apps.

I am building this one, based on the Bootstrap "Agency" free template, using a Collection and pdoResources to pull it together. http://templates.sottwell.modxcloud.com/?mode=Bootstrap

I'm learning to use ContentBlocks for the MODX Cookbook, and while that's not going to be a single-page site, I can see how easy it would be to use it to make one. If I get another free license at another MODXpo, I'll install it on the templates site to build another single-page template.

I don't like onepage sites that much but for some purposes it can be pritty handy.
I use Evo to build sites but the same can be done with Rev.

There are prolly a couple of ways to do it.
I think the easiest way is to use 1 template with getresources / ditto to grab content of the other templates. Make sure the pages are not being indexed.

Other way could be (evo) making custom tabs and TV's.

@Sottwell, thats the same one I found for my portfolio nice template.

Hi,

I'm also considering building a SPW (single page website). there are several ways to skin this cat but i'm not sure which way is best.
@Sottwell: - Do you also use a JS framework to manage your SPW? If yes which one
- when you use contentblocks how would you manage a scrolling menu like scrollspy or magellan?
- IS it possible with contentblocks to assign specific TV's to a block? or are the TV's only accessable on the resource level?

@fourroses666:
- what do you mean by

grab content of the other templates.

?
- Would you grab all the content form different resources in an AJAX call and feed the result to an JS framework (like Angular )?

Does MODX offer a integrated way of doing REST for AJAX calls? Right now i have to make a snippet , put that on a page and call that resource in my AJAX call.
would be less cumbersome to be able to call the snippet directly (less cluttered resource-tree)

Tnx
RDG

I'm using Bootstrap, and a StartBootstrap template called Agency for this site. When I'm finished, you'll be able to do everything from the landing page, although inner pages will be available.

http://mobile.sottwell.modxcloud.com/

I'm using the optional custom parser from the pdoTools installation, and using tags like this in the homepage template:

The trickiest part will be the "yarn and fibers" modal overlays. Some modals will have accordions. But they'll all have all of the products with "add to cart" buttons, so everything that can be found on the inner pages will be on the home page. I'm thinking AJAX for loading the modals on demand.

Hi Susan,

How did you build this page (or how will it be maintained by your client)
By having several resources beneath your main page, 1 resource for every 'section' ?
Or is it this main page1 resource, with contentblocks?
PDOtools isn't very well documented so i have no idea how to use that
Tnx
RDG

I have separate resources for each section. The custom [[#id.field]] tags (the custom parser is the same one that FastField uses) fetch the fields from the resources for the sections of the home page.

I use Collections for the products, and some products have their own resources, while others like the Jewelry have a MIGX TV grid for the individual products. This is because other products, like the yarns, don't really have a fixed structure or definition.

So everything is pulled onto the home page either using the custom field tags, while on the resources the tags are loading, lists of products are generated with pdoResources (or getResources), or in the case of MIGX, getImageList.

There are links from the home page to the inner pages, but they won't be necessary once I have everything getting pulled up into modal overlays.

Of course, exactly how she organizes and structures her product's content will probably get changed as she becomes more accustomed to how the system works.

For example, the list of events is handled with a nested MIGX grid... the outer grid for year, and the inner grid for the year's events.

Plus, I'm also building up a "Documentation" section for her http://mobile.sottwell.modxcloud.com/documentation/managing-yarns-and-fibers.html