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”
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.
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
@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. […]
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
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
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?
@Jacob, Yes it is possible
I have created a 3 minute screencast on howto take a look http://www.youtube.com/watch?v=DWyxlKMyBbA
@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!
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.
@Martin, credits for that one, but its a freaking hack to write if(1=2) hahaha