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

Question

Does anyone have an example of making the product details of the SammyJS json store demo show up in a modal plugin like FancyBox?

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

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');
});

I've got the same problem: http://stackoverflow.com/questions/8827136/modal-dialog-in-sammy-js But I think your question is more specific. In fact, I will put a bounty on it. — Andriy Drozdyuk, Jan 12 '12 at 17:45

Julian D. · Accepted Answer · 2012-01-18T17:52:28.743

6

You probably want to use Sammy's 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 pointed out by @drozzy the location bar will still change with this method. To work around this behaviour we will need to intercept the click on the link that should open the popup and explicitly start Sammy's route:

$(document).delegate("a[href^=#/item/]", "click", function(linkElement) {

  // Determine and explicitly start Sammy's 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 a selector matching links with routes starting with #/item/. If this is not specific enough one should probably something more suitable, e.g. marker classes.

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

edited Jan 18 '12 at 17:52

answered Jan 18 '12 at 14:44

Julian D.

5,464
1
25
35

2

Wouldn't this just pass `content` as a string? I'm pretty sure you don't need the single quotes around it, so you would insert the full HTML returned by the `render` method. – leo.vingi Jan 18 '12 at 14:51
Interesting solution! But doesn't this change the url to the "/item/blah" - and then keep it like that even if the user closes the modal window? Would be nice to have something like what amazon does for their book preview (where you can scroll through the book - and the url does not change) – Andriy Drozdyuk Jan 18 '12 at 16:35
@drozzy: indeed, I did not think of the location bar. Since Sammy triggers it's routes when the location bar changes, one will have to prevent the default behaviour and explicitly start a route. I will update my answer to include this case. – Julian D. Jan 18 '12 at 17:35
Man, this is cool! I like the intercept of the click, too bad Sammy can't do it natively... Do you use Sammy.js a lot or did you just figure this out for the answer? Also, what are the marker classes? – Andriy Drozdyuk Jan 18 '12 at 20:01
+1 - I really wanted to snag this bounty, but your answer is great. Thanks @drozzy for putting the points behind it. – one.beat.consumer Jan 19 '12 at 06:17
Thanks for your kind feedback. Actually, no, I haven't really worked with Sammy yet, but I love some recreational Javascript programming after a long day of Objective-C ;). – Julian D. Jan 19 '12 at 09:13
@drozzy: I use the term _marker class_ when I use a CSS class e.g. to mark the links that are supposed to open a popup (in our example, change the link definition in `item.template` to something like `...`). These classes usually have no styles associated with them and are only used to select the elements in Javascript (here with the selector `"a.popup"`). – Julian D. Jan 19 '12 at 09:17

score 1 · Answer 2 · answered Jan 16 '12 at 23:40

The code from that template file looks like:

<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 could target the link in div.item-link to open it's href in fancybox like:

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

That should do the trick.

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

2 Answers2