This blog post was originally posted in the ATG Developer Community by Spark::red’s co-founding partner Russell Moore in 2008.
Step 1: Download JQuery and put it in your war
I put it under scripts/jquery-1.2.3.js for the purposes of this example.
Step 2: Create a header and a cart page fragment
I created a frags directory, with a header.jsp & minicart.jsp.
The minicart.jsp contains – you guessed it, the cart contents.
Step 3: Create the form in your product page
How it works?
jQuery makes it really easy to fill divs with the content of external pages. It also has some nice functions for transitions.
This allows us to treat the page fragments as individual objects to some extent.
The AddITemToCartServlet is mapped in the pipeline to look for any page request with specific parameters. parameters are actually caught and forwarded to it by the CommerceCommandServlet. For more information, look up “Adding an Item to an Order via a URL” in the ATGCommerceProgrammingGuide.
The Servlet takes the following params that we are interested in:
- dcs_action – in this case it is “addItemToCart” – tells CommerceCommandServlet to pass to the AddITemToCartServlet
- url_catalog_ref_id – the sku ID
- url_product_id – the product ID
- url_quantity – the quantity to add
There are other params that this servlet takes as well – you could even create a form to update/edit items in the cart.
The addtocart() function inspects the form values, creates the URL to call (the minicart page, plus the URL paramaters to invoke the AddITemToCartServlet). It then fills a hidden div with the content of the ajax response, and slides the cart open for the user to see.