Howto implement an AJAX based shopping experience in Dynamicweb eCommerce

One of the developers in Dynamicweb wrote a blogpost on this subject, but that was based on having custom code to power the features, in this blogpost I’ll guide you through the basics of how to set this up without writing any custom .net functionality.

Steps to complete

  • Create a “magic” hidden page
  • Write some great javascript with jQuery

Create a “magic” hidden page

The speak is a raw first-take and my brain is thinking in danish :)

Write some great javascript with jQuery

The speak is a raw first-take and my brain is thinking in danish :)

Hope you find it simple enough to make your own implementation.

And if you’ve got any questions fire away.

UPDATE 2012-05-11: How to do this in “Designs and layout”

, , , ,

13 Kommentarer

  • Building AJAX functionality with standard DW is in my opponion a much smoother approach, since you have less places something can go wrong.
    And any frontender can do it, you dont need to know .NET, just a little jQuery and your Url paramenters :-)

    Thanks for a nice tutorial.

    Regards
    Martin.

  • Rune grønkjær siger:

    Hi Kevin,

    Nice snippet. That would be the way to do it in DW. Have you used it on a new shop resently? Could you use this approach to render products and their variants as well. Changing the productinformation in the ui when selecting a new variant!? The standard implementation of that really sucks.

    /Rune

  • Kevin Steffer siger:

    @Martin, you’re welcome :)

    @Rune, First, yes we have used it on a shop http://mixofluxe.spiritwholesale.com/Produktvisning-550.aspx?ProductID=01085ML
    Second, you can pull out anything from the CMS, it’s just a matter of setting up the paragraphs and modules with the xml-kind templates and you’re rolling.
    We are experimenting having getting the data as JSON instead of XML because it saves a lot of javascript work to handle JSON over parsing XML, but it’s currently not possible on standard solutions because Dynamicweb outputs the performance comment at the bottom of each rendered page with is not valid JSON, but I hope they’ll change that in near future.

  • Ah yes, the performance comment. Curse it.

    Nice looking shop for Me Too. Simple and effektive.

    I will be setting up a webshop this month. Looking forward to that and hope that their designer will invent some cool effects and maybe come up with a challenge. Told him to go crazy :)

    /Rune

  • […] Update: Kevin Steffer has pointed out that the same results can be achieved without writing any custom code. Take a look at how he does it: Howto implement an AJAX based shopping experience in Dynamicweb eCommerce. […]

  • Jlock siger:

    Hi Kevin,

    Thank you very much for the guide.

    Nice and simple approach instead of using custom .net code, which is difficult for us frontenders :)

    Have a great day

  • Michael Nielsen siger:

    I’m experiencing problems in IE with this method … Take a look here

    http://developer.dynamicweb-cms.com/forum/templates/ajax-call-fails-only-in-ie.aspx

  • Jacob S. Jensen siger:

    Hi Kevin, I can’t seem to get this approach to work when using the Designs & Layouts approach to implementing designs. Would this be possible?

  • Kevin Steffer siger:

    @Jacob, Yes it is possible :) I have created a 3 minute screencast on howto take a look http://www.youtube.com/watch?v=DWyxlKMyBbA

  • Jacob S. Jensen siger:

    @Kevin, Nice approach! :-)
    After speaking to you yesterday I got it working somewhat similar, but your approach is a bit more “clean in the corners” 😉 The client site is online and already taking orders.

    I think I better get a blog running, the idea of sharing the good stuff is rather appealing! :-)

  • Jacob S. Jensen siger:

    Btw. I think your server clock is one hour behind schedule… :-) My wrist watch and my Mac says 22:43…

  • @Jacob A slightly different approach to Kevins method is to create a blank template that only renders content from your Content Areas.

    This i what i use: http://jsfiddle.net/boedlen/nSzqF/1/

    Then when you make calls to your Ajax cart page you call it with:

    /Ajax.aspx?LayoutTemplate=/Designs/DesignFolder/blank.html

    This keeps you normal page template cleaner, and you avoid the extra wrapper that i think Kevins example will create.

  • Kevin Steffer siger:

    @Martin, credits for that one, but its a freaking hack to write if(1=2) hahaha

Skriv et svar

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>