JQuery & AddItemToCart Servlet AJAX
minicart
I know a lot of stuff in ATG uses Dojo for javascript, but I have had good luck with
JQuery as well.
Step 1: Download JQuery and put it in your war.
I put it under scripts/[Link] for the purposes of this example.
Step 2: create a header and a cart page fragment.
I created a frags directory, with a [Link] & [Link].
The [Link] holds 2 things: the connecting javascript (which there is little of) and the
hidden div to hold the cart.
frags/[Link]
<%@ taglib uri="dsp" prefix="dsp"%>
<dsp:page>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"[Link]
<html xmlns="[Link] >
<head>
<%-- accepts param from include for title, keywords, and description --
%>
<title><dsp:valueof param="pageTitle">[Link] - any pet,
anywhere, overnight!</dsp:valueof></title>
<meta name="keywords" content="<dsp:valueof param="metaKeywords" />" />
<meta name="description" content="<dsp:valueof
param="metaDescription" />" />
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-
1" />
<script src="scripts/[Link]" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function addtocart() {
var selObject = returnObjById("selectSKU");
var selIndex = [Link];
var selQuantity = returnObjById("quantity");
if([Link] == "") {
alert("please select a size");
return false;
}
if([Link] == "") {
alert("please select a quantity");
return false;
}
updateCartURL = "frags/[Link]?
dcs_action=additemtocart&url_catalog_ref_id=" +
[Link][selIndex].value + "&url_product_id=<dsp:valueof
param="productId"/>&url_quantity=" + [Link];
cartsummaryURL = "frags/[Link]";
$('#minicart').load(updateCartURL,function(){$
('#cartsummary').load(cartsummaryURL);});
$('#minicart').slideDown('slow');
}
function returnObjById(id) {
if ([Link]) {
var returnVar = [Link](id);
} else {
if ([Link]) {
var returnVar = [Link][id];
} else {
if ([Link]) {
var returnVar = [Link][id];
}
}
}
return returnVar;
}
</script>
<div id="minicart" style="width: 300px;z-index: 150;position:
absolute;top: 30px;left: 200px;color: #fff;display: none;">
.
</div>
...
The [Link] contains - you guessed it, the cart contents.
frags/[Link]
<%@ taglib uri="dsp" prefix="dsp"%>
<%@ taglib uri="c" prefix="c"%>
<dsp:page>
<dsp:importbean
bean="/atg/commerce/order/formhandler/ShoppingCartFormHandler" />
<dsp:importbean bean="/atg/commerce/ShoppingCart" />
<dsp:importbean
bean="/atg/commerce/order/purchase/RepriceOrderDroplet" />
<dsp:importbean bean="/atg/dynamo/droplet/ForEach" />
<dsp:importbean bean="/atg/dynamo/droplet/Switch" />
<dsp:importbean bean="/atg/dynamo/droplet/IsNull" />
<dsp:droplet name="RepriceOrderDroplet">
<dsp:param value="ORDER_SUBTOTAL" name="pricingOp" />
</dsp:droplet>
<script type="text/javascript">
$('a#continueshop').click(function() {
$('#minicart').slideUp(400);
return false;
});
</script>
<div id="cartmain" class="cart">
<dsp:droplet name="Switch">
<dsp:param name="value" bean="[Link]" />
<dsp:oparam name="true">
<div class="cartshippad">Your cart is currently empty.</div>
</dsp:oparam>
<dsp:oparam name="default">
<div class="cartwrapper">
<dsp:droplet name="ForEach">
<dsp:param bean="[Link]"
name="array"/>
<dsp:param name="elementName" value="ShippingGroup"/>
<dsp:param name="indexName" value="shippingGroupIndex"/>
<dsp:oparam name="output">
<dsp:droplet name="ForEach">
<dsp:param name="array"
param="[Link]" />
<dsp:param name="elementName" value="CiRelationship" />
<dsp:param name="indexName" value="index" />
<dsp:oparam name="output">
<div class="cartdetailwrapper">
<div class="cartdetailsection">
<div class="cartdetailtitle"><dsp:valueof
param="[Link]"
/></div>
<p><dsp:valueof
param="[Link]"
converter="currency" /></p>
<p>Color: <b><dsp:valueof
param="[Link]
ame" /></b></p>
<p>Size: <b><dsp:valueof
param="[Link]"
/></b></p>
<p>Quantity: <b><dsp:valueof
param="[Link]" /></b></p>
</div>
</p>
</div>
</dsp:oparam>
</dsp:droplet>
</dsp:oparam>
</dsp:droplet>
</div>
<p>total items = <dsp:valueof
bean="[Link]" /><br />
grand total = <dsp:valueof
bean="[Link]" converter="currency" />
</p>
<p><a href="#" id="continueshop">continue</a> | <dsp:a
page="/checkout/">checkout</dsp:a></p>
</dsp:oparam>
</dsp:droplet>
</div>
</dsp:page>
Step 3: create the form in your product page
For this example, you have to have a select with the sku in it (called "selectSku"), a select
with the quantity (called "quantity") and a javascript submit button that calls
addItemToCart.
[Link]
<%@ taglib uri="dsp" prefix="dsp"%>
<dsp:page>
<dsp:importbean bean="/atg/commerce/catalog/ProductLookup" />
<dsp:importbean bean="/atg/commerce/catalog/CategoryLookup" />
<dsp:importbean bean="/atg/commerce/catalog/ProductLookup" />
<dsp:importbean bean="/atg/commerce/pricing/PriceItem" />
<dsp:importbean bean="/atg/dynamo/droplet/Switch" />
<dsp:importbean bean="/atg/targeting/TargetingForEach" />
<dsp:importbean bean="/atg/commerce/catalog/ProductBrowsed" />
<dsp:importbean bean="/atg/dynamo/droplet/IsNull" />
<dsp:include page="/frags/[Link]" />
<dsp:droplet name="ProductBrowsed">
<dsp:param param="product" name="eventobject"/>
</dsp:droplet>
<h1><dsp:valueof param="[Link]" /></h1>
<!-- display images, related content, etc... -->
...
<dsp:form action="." method="post" id="addtocart">
<input name="id" type="hidden" value='<dsp:valueof
param="[Link]"/>' />
<select id="selectSKU">
<dsp:droplet name="ForEach">
<dsp:param name="array" param="[Link]"/>
<dsp:oparam name="output">
<option value="<dsp:valueof
param="[Link]" />" ><dsp:valueof param="[Link]" /> </option>
</dsp:oparam>
</dsp:droplet>
</select>
<select id="quantity">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<a href="#"><img src="images/[Link]" onclick="addtocart()"
alt="Add To Cart" border="0" /></a>
</dsp:form>
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.
So, basically, the form sets the sku and the quantity, and the javascript on the button calls
addtocart() javascript function.
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.
