SammyJS json demo - how to create a modal product popup?

Question

Does anyone have an example of creating product details for a SammyJS json demo in a modal plugin like FancyBox ?

Here's a block of code from the json store - what do I need to do to represent it in a FancyBox model?

this.get('#/item/:id', function(context) { this.item = this.items[this.params['id']]; if (!this.item) { return this.notFound(); } this.partial('templates/item_detail.template'); }); 

Answer 1

You probably want to use the Sammy RenderContext render() method:

 this.get('#/item/:id', function(context) { this.item = this.items[this.params['id']]; if (!this.item) { return this.notFound(); } this.render('templates/item_detail.template').then(function(content) { $.fancybox({ content: content, // set box size to fit the product details autoDimensions: false, width: 800, height: 500 }); }); }); 

EDIT As @drozzy pointed out, the location bar will still be modified using this method. To get around this behavior, we need to grab a click on the link that should open a popup window and explicitly launch Sammy's route:

 $(document).delegate("a[href^=#/item/]", "click", function(linkElement) { // Determine and explicitly start Sammy route for the clicked link var path = linkElement.currentTarget.href.replace(/^[^#]*/, ""); Sammy('#main').runRoute('get', path); // cancel the default behaviour return false; }); 

Note that this example uses links matching the selector, with routes starting with #/item/ . If this is not specific enough, there should probably be something more suitable, for example. marker classes.

(This uses jQuery 1.4.3, as used in the JSON Store demo.)

Answer 2

The code from this template file looks like this:

 <div class="item-detail"> <div class="item-image"><img src="<%= item.large_image %>" alt="<%= item.title %>" /></div> <div class="item-info"> <div class="item-artist"><%= item.artist %></div> <div class="item-title"><%= item.title %></div> <div class="item-price">$<%= item.price %></div> <div class="item-link"><a href="<%= item.url %>">Buy this item on Amazon</a></div> <div class="back-link"><a href="#/">&laquo; Back to Items</a></div> </div> </div> 

So, you can target the link in div.item-link to open href in fancybox, for example:

 var $link = $('div.item-link a'); $link.fancybox({href:$link.attr('href')}); 

That should do the trick.