Creating horizontal scroller for list and detail

Jan 17, 2010 at 9:43 PM

In the docs I read about setting up Custom Javascript but....

I have a product catalog project where we're trying to do the following:
1 - Clicing on a category take you to that categorys list template, but where the list template is a horizontal scroller showing just a few products (large images and so on)
2 - Clicking on a given product, takes you to that products detail template, also here with a horizontal scroller, now with added text and gallery images etc...

Questions:
1) Is it possible on the detail page to scroll between products in the same category?

2) If yes, how do I proceed, are there any examples, similar implementations or other pages to take a look at?

Appreciating any input, as beeing a complete newbie on NB Store I certainly has a lot to learn
IMHO this is one sweet module and will have my attention for years to come.

Sincerely, Ron

Coordinator
Jan 17, 2010 at 11:05 PM

Hi Ron,

Because you can create and apply different templates per product list module, you can generally add any suitable script from places like Dynamic Drive, and using the store tokens, make a special productlist template to suit.

One item on our list to discuss for a future release is to generate RSS feeds of products - by category, newest, specials, featured etc. This would then make it dead simple to add animated product displays to other pages (and other sites) by way of the various modules available on Snowcovered that accept RSS feeds for display. This is just up for discussion at this point however.

Regarding navigating from product to product on the details page - No, I'm afraid this isn't possible right now, but a method for implementing this was discussed and noted last Friday. The idea would be to temporarily store a limited number of the items either currently listed, or returned as a search result, and then move back and forth through those. This is also only on the discussion list at the moment.

Regards,
Rob

Jan 17, 2010 at 11:29 PM
Edited Jan 17, 2010 at 11:33 PM

Hi Rob, and thanks for the swift answer.

Could the detail iteration/scrolling issue be solved by substituting the Category list detail link with one that links to anoter List template, with a slightly bigger template that visually looks like a detail template and simply skip the Detail level alltogether?

Normal path: Category -> List -> Detail
My quixkfix path: Category - List (small items) -> List (large items)

Appreciate the RSS as well, my vote for that one.

-Ron

Coordinator
Jan 17, 2010 at 11:51 PM

Hi Ron,

You can operate a store with only a list template and I'm doing that on one site, however there are some caveats:

  • You can't use all tokens in the list template - This mainly effects product models and options. I'm using it on a site selling items where the only option is the quantity box, and it works fine.
     
  • You still normally have to provide a suitable details template for when a person finds a product by some other means, such as a DNN site search or a google search. This doesn't happen often, but it does happen. I've just made a simple template, looking much the same as the list view, but with a link leading back to the catalogue if the person doesn't buy the item.

However, I'm not sure the idea will work for your case. You can link from the small list to the large list, but the question is how to get the large list to display the clicked item... Dave might have an answer for that. Also, the items left and right of the selected item might always be the defaults specified in the module settings of the large product list rather than what was being viewed in the small product list... again, this may or may not matter for you.

Hope that helps

Rob

Jan 18, 2010 at 12:21 AM

It helps alot. Thank you very much for your knowledge. 

I might be able to persuade the customer to leave the scroller on the list page all alone...  but then....

I have figured out where to put startup scripts, css, references to the js files an libs.
But there is some details I must be missing here. I am trying to figure out where to place the different codebits for the listing template. There is naturally some code that makes up the start, repeating and end section of the template. 
The repeating DIV part is easy... :-)

But I cannot figure out where to add the parts containing the surrounding DIV tags and just have the inner DIV be populated by the repeating code...scrathing my head on this one.. 

-Ron

 

Coordinator
Jan 18, 2010 at 1:15 AM

hmm I see.... There's no header/body/footer templates in this.. just the repeater, so it may not work with some layouts.. but I'd assume that a scroller would just have a repeating section.. what's surrounding it?

There is the option of using a special container and there are also header/footer fields in the module advanced settings that could be used for some html if needed.

Perhaps another way to deal with the entire issue is to get a different module altogether for the homepage featured list and just let the store operator upload a few items into that. There are lots of nice content rotator modules on Snowcovered. I use digNuke's digRotate and digScatter, but there are plenty of others. This module would then serve as a lead into the main cart. Each rotated item can be linked to anything, a specific product, a whole category, or even another site page.

Rob

Jan 18, 2010 at 1:48 AM

The part surrounding each product is the DIV frames, buttons, actions and so on for controlling the navigation between products in the repeating part, much like the module itself does by adding TR and TD in addition to the Pager in the footer.

I see a lot of powerful usage scenarios for this functionality. The best IMHO would be an option of three part template; header, repeater, footer for list templates. As well as an option of disabling the modules own 'ancient' TABLE TR TD based repeater code... We're living in the CSS era now after all. This way those needing to have full CSS layout control like myself would be smiling - until we meet a new unforeseen problem... :-)

But the main reason for me started using NB Store in the first place is its flexibility without beeing too complex.
This functionality might make it too complex again or maybe not if implemented in an logical way.

Meanwhile I'll keep hacking....

-Ron

Jan 18, 2010 at 1:59 AM

If we could get rid of all garbage code, and have a clean 'feed' of uncluttered TAG's would't it be easy to make a 'kind' of laymans RSS stream just using templates head, repeat and footer sections based on the selection beeing made in the category hierarchy and search results?  This is definitely something I would spnsor.

-Ron

Coordinator
Jan 18, 2010 at 3:30 AM

Ok, I see, it's not just a simple scroller. This same problem also happens with other modules like Ventrians' ones, that have the split templates - the three sections are put together but then still displayed within table cells generated by the asp grid control. The tabular display of catalogue data in this manner is however the correct usage of tables and is not likely to be going anywhere.

Let's see what Dave says later today about the possibility of generating RSS feeds. If the feed could spit out a title, description, image and link, then that could be used to generate an unordered list, which is pretty much the only way to create a similar tabular layout in CSS 2.x. I recall some discussion somewhere about geting the grid to not create cells, so there may be a possiblity there as well.

Rob

Coordinator
Jan 18, 2010 at 7:04 AM

Hi,

With the table thing Benoit Sarton (from DNN Store) wrote a blog on the matter, which you can read here: http://www.dotnetnuke.com/Community/Blogs/tabid/825/EntryId/2169/Store-XHTML-and-the-Tables-dilemna.aspx

With the "laymans RSS" feed idea, what could be done is to spit out the product data in the list module as xml and then allow an xml formatting on it.  contact me on codeplex and we can talk about a possible funded development.

Dave.