Architecturing the router from design - ember.js

Question

I am struggling to document the router for my design of a shop. The shop consists mainly of a article/product slider. See the image below:
As you see:
on top an article navigation slider
in the center the current selected article
on the left the menu, which pages will be a popup over the current article
when the user clicks the shoppingcart, go to checkout, open up a page, log in their account, or whatever they do, there will be always an active article.
The router
So I thought - and correct me if I am wrong - to the design my router as follows:
Router.map(function() {
this.resource('articles', function() { // to fill the articles slider above
this.resource('article', function(path: ':article_id') { // to show the current selected article in the slider
// large popups - covers the current article almost
// completely with a little transparancy
this.resource('page', function(path: ':page_id')); // shows a page from the menu
this.resource('checkout', function(path: ':step_id')); // the checkout with multiple steps
// small popups at the bottom of the page
this.route('info'); // shows the additional product info popup
this.route('shipping'); // shows the shipping info popup
});
});
});
Additional information: I use Ember App Kit for developing and the slider will be Flexslider 2 mainly because they have touch support.
It looks like a valid router, however the question is whether it is the Ember way.