Monday, April 10th, 2006

Single Page Ajax Store

Category: Showcase

<>p>HiDefDvd.com is a new ecommerce site that is implemented as a single-page Ajax application.

Some items make a lot of sense. Adding to your cart is an ajax operation. Ditto with your wish list. However, does it make sense to click on a category, see a “loading”message, and then re-render in the same page? I don’t really think so. For this, separate pages works better, so don’t go crazy doing Ajax for every possible operation.

DVD Store

Related Content:

  • How to master single-page application development
    A single-page application offers easier adaption to multiple devices and lifecycle...
  • Developing composite applications with PHP - Advanced AJAX
    A better way to store client-side ID, main work on the server side (requiring close collaboration between the server-side PHP script and the...
  • Ajax hype vs. reality
    Ajax is a powerful rich Internet application technology, but Burton Group cautions against overkill and notes that tools and frameworks for using it...
  • Ajax hype vs. reality
    Ajax is a powerful rich Internet application technology, but Burton Group cautions against overkill and notes that tools and frameworks for using it...
  • Ajax hype vs. reality
    Ajax is a powerful rich Internet application technology, but Burton Group cautions against overkill and notes that tools and frameworks for using it...

Posted by Dion Almaer at 6:04 am
25 Comments

+++--
3.8 rating from 51 votes

25 Comments »

Comments feed TrackBack URI

To be honest, I dont really see a problem with re-rendering in the same page for the contents of a new category. What are your arguments for not doing it, besides ‘works better’ ? :-)

Comment by jax — April 10, 2006

It doesn’t make sense, and it doesn’t work good to re-render the page that way. Sure, they don’t break the back button; but how about i-just-found-this-nice-movie-and-mail-the-link-to-a-friend situation? Being able to link to a movie or category should be considered very important for a web store imho.

Comment by Berserk — April 10, 2006

Ah true. But the mail-a-friend-this-ultracool-direct-link problem can easily be solved by adding a ‘mail a friend’ option.. Might even be more user friendly as well. :-)

Comment by jax — April 10, 2006

What, on the other hand, really IS a problem is that the ‘save to wishlist’ function doesn’t work. That is, doesn’t work on my suse distro with firefox 1.5…

Comment by jax — April 10, 2006

there is a Permanent Link option on the item pages that is a hard link to the page.

The wishlist works for me ?! You need to be logged in for it to work most likely.

Comment by Jack Attajax — April 10, 2006

BUG: Try changing the currency

This things another AJAX mess, the user feedback is completely lacking, not to mention there’s no way to tell where you are on the site as you click, completely confusing.

A web site or any form documentation must have a navigation structure, this is good example of how AJAX can ruin browsing the web.

Comment by Jonathan — April 10, 2006

Having the option to generate a permalink is good. “Mail a friend” is not. If I ever get an email sent via some web site’s “Mail a friend” system, I’m pretty annoyed that now some web site I probably don’t even care about has my email address. URLs should be user-friendly enough to pass around directly, and web pages should offer a means of allowing this (obviously not applicable in every situation).

Comment by Erik — April 10, 2006

I noticed that Amazon.com is using AJAX for paging in certain areas (sorry can’t remember where exactly). When I clicked “next” it did an animated scroll back to the top of the page, then loaded the next page of results. Totally broke the “back” button functionality – terrible!

Comment by Patrick Fitzgerald — April 10, 2006

I was about to reply to the mail-a-friend/permalink issue, but the other Erik beat me to it :). I can add that I was searching for a permanent link link, but couldn’t find it before… A light blue on white and ~5px big is almost unreadable. Also, if one sends the permanent link to a friend, and that friend starts navigating the site, that address will (of course) be in his address field no matter which category/item he has navigated to – totally breaking the idea with URIs.

Comment by Berserk — April 10, 2006

I found the XHR worked well, making the pages “load” a LOT quicker than I would expect when loading a whole new page, as well as seeming to make the render times faster.

Comment by Tarwin — April 10, 2006

They did a great job. I used to have a problem with “All Ajax” pages, but this one proved me wrong. It might not be SEO’ed, but that’s something they could fix by making some honeypots with the permanent link page.

Really well done. Suddenly AJAX as fundamental technology break seems completely possible. This also tells me you probably will need something a lot stronger than your average xmlhttp abstraction.

Comment by Ivan — April 10, 2006

Dude, this is much faster then having to reload pages. This is the right way to do a site not the wrong way… If every website was like this I think we’d be far better off. The only problem is that he shouldn’t be wiping out the existing content and replacing it with a loading image. Instead he should squeeze a loading image on top of the existing content until it is redered with new content. This is what I do with my stuff and the users love it… LA LA LA LA LOVE IT.

Comment by Rob Cluett — April 10, 2006

If a hardlink is used, Ajax shopping cart still worksm which is good. I would prefer a mixed architecture, having regular pages with full bookmarkable URLs, and Ajax shopping cart.

This particular site does not use full power of Ajax. Say I browse a list of titles, then I select one, then I click Back. It goes back, this is great. But the whole center portion of the page is reloaded. Why??? If they simply employed full page load with cachable pages, the pages would not have been reloaded at all.

So, in this particular case, Ajax is a gimmick (save for shopping cart).

Comment by Michael Jouravlev — April 10, 2006

Hey Guys,

First the disclaimer .. this is my site. It’s been interesting in reading the comments on the site.

The biggest issue I see raised is the “url” issue. Unfortunatly this is a “nature of the beast” issue that comes along with Ajax. I’m looking for ways to re-write the url, I’ve had some success.. but not enough to put it on to the live site.

I’m not 100% sold that the url matters .. as long as the user can still move freely back and forward via the browser buttons – something most ajax apps don’t do btw :) – then atleast to me what is showing in the URL is irrelevent.

I agree the Permanent Link is too small .. and most likely in the wrong location. I was hoping to get the URL-rewrite in place making the permlink pointless anyway.

Rob: I agree 100% on having the loading overlay the content rather than replace it.. this is something we had originally, but for some reason we switched it back to the full load. I also think the overlay affect would make the load time appear to be slower.

Keep the comments coming, it’s interesting to see what Ajax developers think about it.

Comment by Shaun Guidolin — April 10, 2006

Michael: The why of it is this .. we originally had a nice caching model built, but then we implemented a fix to allow the back-forward browser motion, which didn’t play nicely with the cache. The whole center reloads because the routine is re-ran. This isn’t something I like either, and I’ll be looking to adjust it.

Comment by Shaun Guidolin — April 10, 2006

Shaun, thanks for explanation.

Another thing, the site does not work with Javascript turned off. It detects that Javascript is turned off and shows a warning message (this is a plus, many websites do not bother checking is Javascript enabled), but it does not work without Javascript at all. I personally think this is a weak point, but maybe I am just too old-fashioned. After all, it is 2006 now ;)

Comment by Michael Jouravlev — April 10, 2006

Everyone’s assuming URLs are impossible with a single page app, thanks to the Magic Hash. Not perfect to be sure, not necessarily better than pae refreshes, but certainly feasible.

http://codinginparadise.org/weblog/2005_09_20_archive.html
http://www.contentwithstyle.co.uk/Articles/38/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps
http://ajaxpatterns.org/Unique_URLs

Shaun, curious to know if you investigated the possibility, were there too many issues with it?

Comment by Michael Mahemoff — April 10, 2006

Michael:

http://www.donotremove.co.uk/extra/ajax-nav/index.html

This one is pretty close to what we had rolling, however we had some issues getting the back button to work correctly in all browsers using this setup. We will examine this code a little closer to see if we are missing something. Thanks for the tip.

Comment by Shaun Guidolin — April 10, 2006

This doesn’t seem like a good idea from an SEO standpoint. A single URL that will only get ranked for so many things. I would definitely not pursue this route for any site where the content should be exposed to search engines. AJAX is great for a lot of things, but only use it where it truly makes sense.

Comment by Chaz — April 11, 2006

I do not see a benefit of implementation AJAX as “web-single page” (WSP). Functionally it does look a lot like 1999 frames enabled site… Reloading content looks similar to reloading in the inner frame. Additionally – the site itself is slow, which makes spinning wheels (reloading image) is extremerely annoying – good they didnt add a background music to it “please wait, calling Ajax ” :-). I do like use of AJAX for “currency change” – works and looks nice and certain areas on the page. Agree with Shaun Guidolin that “use it where it truly makes sense”… and improves user experience.

Comment by Natalia — April 11, 2006

Well.. not everything is built for search engines.
But still it’s important to remember to make your pages available to search engines. We have a sitemap with direct links to every item in our site, very SEO friendly. Now if only Google would crawl it :)

Comment by Shaun Guidolin — April 11, 2006

I agreee that it doesn’t make sens to use ajax in loading categories content. Using this sure is nice for the end user but it’s a real pain to make a good SEO!

Comment by Nicolas BUI — April 11, 2006

[...] And entire eStore in one page – with Ajax.  Hmmm – that can be done easily with Laszlo.  What’s the big deal? [...]

Pingback by Marc’s Voice » Blog Archive » Wassup in the blogosphere — April 11, 2006

Shaun, you should use the Really Simple History library I wrote to get both bookmarking and back/forward button support; it’s BSD licensed and freely usable by both commercial and open source projects. Doing robust bookmarking and back/forward support is hard, and I don’t recommend people roll their own libraries when things like RSH will do it for you easily: http://codinginparadise.org/projects/dhtml_history/README.html

Shaun, feel free to mail me at bkn3@columbia.edu if you have any questions and I can help you use the framework in your site.

Comment by Brad Neuberg — April 13, 2006

It would like to know, if it has the possibility to buy the codigo-source. I am programmer of Brazil…

Comment by Alexandre — May 7, 2006

Leave a comment

You must be logged in to post a comment.