Managing your shopping cart using AJAX

Hi everybody,

This short article is inspired by several forum posts on our developer portal – people were asking about the ability to add items to the shopping cart without reloading the entire page. Furthermore there was a question about how to update the status of the shopping cart (total number of products as well as the total price) after the new product has been added to the cart this way. You can read the entire conversations here and here.

Well, I must say that it’s quite easy to implement this kind of behavior by using the eCommerce Extensibility API. So I spend some time and wrote a simple extension that incorporates the above mentioned functionality.

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.

Where to get it

The extension can be downloaded from the following location: Download – AsyncCart.zip. The package consists of the following items:

  • Server-side extension (bin\AsyncCart.dll)
  • Stylesheet just to make it look a bit prettier (AsyncCart.css)
  • Small Javascript library that is responsible for all client-side interactions (AsyncCart.js).
  • Custom “Show cart” template (AsyncCart.html).

How to install

First of all the following requirements must be met before you can use the extension:

  • The version of Dynamicweb application must be 19.2.4.0 or higher.
  • You must have the Cart v2 module installed (as well as eCom Catalog module of course).
  • Either jQuery or Prototype JS must be enabled in the frontend (you can do it by going to Management Center -> System -> Solution Settings and selecting the desired framework under the Google API Includes section).
The process of installing the extension is pretty straightforward:
  • Copy bin\AsyncCart.dll file into the /bin folder of your Dynamicweb installation.
  • Copy AsyncCart.js, AsyncCart.css, AsyncCart.html into /Files/Templates/eCom7/Cartv2/Step.
  • Create new page and put both Cart v2 and eCom Catalog module on it.
  • Go to the paragraph settings of the Cart v2 module, under the Steps section click Edit button next to the Show cart step. Choose AsyncCart.html as a template, click OK and save the paragraph.
  • Go to the paragraph settings of the eCom Catalog module and open the product list template for editing. Find your “Add to cart” button/link and add the “onclick” attribute as shown below.

The “addToCart” function is defined in the AsyncCart.html template.

Further development

There is a certain room for improvements of this extension For example, maybe you’d like to render the entire cart instead of updating just two numbers (items total and the total price) or maybe there’s a bug that I didn’t see. For those of you who are interested in improving the extension (and also for all those who’s just curious about how the code works) I’ve put the complete source code for download. You can get it here: Download – AsyncCart-src.zip.

Conclusion

I hope that this small extension will help someone implementing another great eCommerce solution. If you have any questions – feel free to contact me (you can either post the comment here or you can go to our developer forum ask your question there).

Take care.

Advertisements

15 Comments

  1. Posted May 27, 2011 at 9:54 pm | Permalink | Reply

    Cool, but we actually do this on any standard Dynamicweb solution (without any custom code) by having a special set of templates that can output cart/catalog data on a page in XML or JSON format.
    Our JavaScript then interacts with theses pages to add/remove/modify items to cart and also rendering the updates of the cart itself.

    You can see one of our latest implementations here: http://mixofluxe.spiritwholesale.com/Produktvisning-550.aspx?ProductID=01059ML

  2. Posted February 21, 2013 at 2:44 am | Permalink | Reply

    Jeśli macie życzenie to sugeruję wykorzystywać kabiny prysznicowe.

    Jest to bardzo ciekawa opcja, która pozwala uczynić z łazienki wspólne miejsce, gdzie można ukoić skołatane nerwy oraz co najwżniejsze sybko wziąć przysznic.

    Zrezygnowanie z wanny na korzyść kabiny prysznicowej pociąga za sobą zauważalne
    różnice w rachunkach za wode i ogrzewanie. Korzystając z przysznica zużywamy
    mniej wody i prądu. Po za tym, kabina prysznicowa jest dużo bardziej łatwiejszy w używaniu najbardziej dla ludzi , którzy mają problemy ze stawami i wchodzenie i wychodzenie z wanny jest
    klopotliwe.

  3. Posted March 4, 2013 at 7:34 am | Permalink | Reply

    I am actually delighted to glance at this webpage posts which includes lots of helpful
    information, thanks for providing these kinds of information.
    Read the Full Document

  4. Posted June 16, 2013 at 3:28 am | Permalink | Reply

    Excellent goods from you, man. I have understand your stuff previous to and
    you’re just too great. I actually like what you’ve acquired here, certainly like what you are stating and the way in which you say
    it. You make it entertaining and you still care for to keep it sensible.
    I can not wait to read much more from you. This is actually a wonderful website.

  5. Posted June 17, 2013 at 12:08 am | Permalink | Reply

    This is a good tip particularly to those fresh to the blogosphere.
    Simple but very accurate info… Appreciate your sharing this one.
    A must read post!

  6. Posted July 6, 2013 at 9:21 pm | Permalink | Reply

    Hi there to every body, it’s my first visit of this weblog; this weblog includes awesome and really good data for readers.

  7. Posted July 9, 2013 at 5:58 pm | Permalink | Reply

    Thank you for the good writeup. It actually used
    to be a amusement account it. Glance complex to more added agreeable from you!
    However, how can we be in contact?

  8. Posted August 29, 2013 at 8:00 am | Permalink | Reply

    Tremendous issues here. I’m very satisfied to see
    your article. Thanks so much and I am having a look ahead to contact you.
    Will you please drop me a e-mail?

  9. Posted September 21, 2013 at 7:03 am | Permalink | Reply

    So following time you go to the source retailer, get your hamster a chewing toy.
    Pet coverage cost in most circumstances is the 1st thing pet homeowners just take into consideration
    prior to even wanting at a pet insurance coverage policy.

  10. Posted October 20, 2014 at 2:50 pm | Permalink | Reply

    The One Touch Glucose Meter comes along witgh their own diagnostic tests
    strips and also lancet. Zalman FTP client 2010 contains an additional feature of
    logic layer and therefore every specific action can be tracked.
    These types of serial killers tend to have below average intelligent levels and are considered to be socially inadequate; often living alone and someone who does not date.

  11. Posted October 26, 2014 at 6:48 pm | Permalink | Reply

    You could possibly get exclusive bonuses by ordering early.

    Bang is ordered find a scientist who was abducted, because this scientist created the doomsday bomb, a bomb capable of
    destroying the entire planet. The biggest problem with such a system iis that there is little room
    for public opinion.

  12. Posted November 12, 2014 at 6:27 pm | Permalink | Reply

    If you happen to be working Windows 7 on your own outdated program then make it sure it has
    atlwast one GB RAM house obtainable. Now that
    you have a Windows 7 computer, how would you connect your wireless devices which aree Bluetooth enabled, to your PC.
    ‘ This should be turned on later after the initial updates are installed.

  13. Posted November 27, 2014 at 9:42 am | Permalink | Reply

    Min – Win Microsoft is laboratory design is a revolutionary new kernel.
    Today, most professionals and companies rely on computers running Windows.
    * In the left-side of the menu, click Adjust indexing options.

Post a Comment

Required fields are marked *

*
*

%d bloggers like this: