Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
85 views

Jquery & Additemtocart Ajax Minicart: Servlet

This document provides steps to add an item to the cart using JQuery and AJAX. It involves: 1. Including JQuery on the page and creating header and minicart fragments 2. Creating a product page form with SKU and quantity selects and a button to call the addToCart function 3. The addToCart function builds a URL to call the AddItemToCart servlet via AJAX, passing SKU and quantity. It loads the cart and displays it. The servlet adds the item to the cart by SKU, product ID and quantity provided in the URL parameters. JQuery is used to asynchronously update and display the minicart.

Uploaded by

I@Sydney
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
85 views

Jquery & Additemtocart Ajax Minicart: Servlet

This document provides steps to add an item to the cart using JQuery and AJAX. It involves: 1. Including JQuery on the page and creating header and minicart fragments 2. Creating a product page form with SKU and quantity selects and a button to call the addToCart function 3. The addToCart function builds a URL to call the AddItemToCart servlet via AJAX, passing SKU and quantity. It loads the cart and displays it. The servlet adds the item to the cart by SKU, product ID and quantity provided in the URL parameters. JQuery is used to asynchronously update and display the minicart.

Uploaded by

I@Sydney
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 5

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/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 header.jsp holds 2 things: the connecting javascript (which there is little of) and the
hidden div to hold the cart.

frags/header.jsp
<%@ taglib uri="dsp" prefix="dsp"%>
<dsp:page>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<%-- accepts param from include for title, keywords, and description --
%>
<title><dsp:valueof param="pageTitle">petsovernight.com - 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/jquery-1.2.3.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function addtocart() {
var selObject = returnObjById("selectSKU");
var selIndex = selObject.selectedIndex;
var selQuantity = returnObjById("quantity");
if(selObject.value == "") {
alert("please select a size");
return false;
}
if(selQuantity.value == "") {
alert("please select a quantity");
return false;
}
updateCartURL = "frags/minicart.jsp?
dcs_action=additemtocart&url_catalog_ref_id=" +
selObject.options[selIndex].value + "&url_product_id=<dsp:valueof
param="productId"/>&url_quantity=" + selQuantity.value;
cartsummaryURL = "frags/cartsummary.jsp";
$('#minicart').load(updateCartURL,function(){$
('#cartsummary').load(cartsummaryURL);});
$('#minicart').slideDown('slow');
}
function returnObjById(id) {
if (document.getElementById) {
var returnVar = document.getElementById(id);
} else {
if (document.all) {
var returnVar = document.all[id];
} else {
if (document.layers) {
var returnVar = document.layers[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 minicart.jsp contains - you guessed it, the cart contents.

frags/minicart.jsp
<%@ 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="ShoppingCart.currentEmpty" />
<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="ShoppingCartFormHandler.Order.ShippingGroups"
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="ShippingGroup.CommerceItemRelationships" />
<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="CiRelationship.commerceItem.auxiliaryData.catalogRef.displayName"
/></div>
<p><dsp:valueof
param="CiRelationship.commerceItem.priceInfo.amount"
converter="currency" /></p>
<p>Color: <b><dsp:valueof
param="CiRelationship.commerceItem.auxiliaryData.catalogRef.color.colorN
ame" /></b></p>
<p>Size: <b><dsp:valueof
param="CiRelationship.commerceItem.auxiliaryData.catalogRef.size"
/></b></p>
<p>Quantity: <b><dsp:valueof
param="CiRelationship.commerceItem.quantity" /></b></p>
</div>
</p>
</div>
</dsp:oparam>
</dsp:droplet>
</dsp:oparam>
</dsp:droplet>
</div>
<p>total items = <dsp:valueof
bean="ShoppingCart.current.totalCommerceItemCount" /><br />
grand total = <dsp:valueof
bean="ShoppingCart.current.priceInfo.amount" 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.

product.jsp
<%@ 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/header.jsp" />


<dsp:droplet name="ProductBrowsed">
<dsp:param param="product" name="eventobject"/>
</dsp:droplet>
<h1><dsp:valueof param="product.displayName" /></h1>
<!-- display images, related content, etc... -->
...
<dsp:form action="." method="post" id="addtocart">
<input name="id" type="hidden" value='<dsp:valueof
param="product.repositoryId"/>' />
<select id="selectSKU">
<dsp:droplet name="ForEach">
<dsp:param name="array" param="product.childSKUs"/>
<dsp:oparam name="output">
<option value="<dsp:valueof
param="element.id" />" ><dsp:valueof param="element.size" /> </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/add2cart.jpg" 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.

You might also like