Add Billing Address section developed using Dojo Accordian Pane in Aurora Store



Step 1: Create AccordianPane.jsp  which is the parent JSP that contains billling Address form.

<%@ taglib uri="http://commerce.ibm.com/foundation" prefix="wcf" %>
<%@ taglib uri="http://commerce.ibm.com/coremetrics"  prefix="cm" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="flow.tld" prefix="flow" %>
<%@ include file="Common/EnvironmentSetup.jspf" %>
<%@ include file="Common/nocache.jspf" %>
<%@ include file="include/ErrorMessageSetup.jspf" %>
<%@ include file="common/MessageDisplay.jspf" %>
<%@include file="Common/CommonJSToInclude.jspf" %>

<!-- <script type="text/javascript" src="<c:out value="${dojoFile}"/>" djConfig="${dojoConfigParams}"></script>  -->

<script type="text/javascript" src="<c:out value="${jsAssetsDir}javascript/Common/ShoppingActions.js"/>"></script>
<script type="text/javascript" src="<c:out value="${jsAssetsDir}javascript/CommonContextsDeclarations.js"/>"></script>
<script type="text/javascript" src="<c:out value="${jsAssetsDir}javascript/CommonControllersDeclaration.js"/>"></script>
<script type="text/javascript" src="<c:out value="${jsAssetsDir}javascript/AccordianPane/AccordianPaneServicesDeclaration.js"/>"></script>
<script type="text/javascript" src="<c:out value="${jsAssetsDir}javascript/StoreCommonUtilities.js"/>"></script>
<script type="text/javascript" src="${jsAssetsDir}javascript/MessageHelper.js"></script>


<c:set var="divNum" value="1"/>

<script type="text/javascript">

dojo.require("dojo.parser");
dojo.require("dijit.layout.AccordionContainer");
dojo.require("dijit.form.Form");   


dojo.addOnLoad(function() {
//dojo.parser.parse();

AccordianPaneServicesDeclarationJS.setCommonParameters('<c:out value='${langId}'/>','<c:out value='${WCParam.storeId}'/>','<c:out value='${WCParam.catalogId}'/>');
AccordianPaneServicesDeclarationJS.setStateDivName("<c:out value="stateDiv${divNum}"/>");

<fmt:message key="ERROR_RecipientTooLong" var="ERROR_RecipientTooLong" />
<fmt:message key="ERROR_FirstNameTooLong" var="ERROR_FirstNameTooLong" />
<fmt:message key="ERROR_LastNameTooLong" var="ERROR_LastNameTooLong" />
<fmt:message key="ERROR_AddressTooLong" var="ERROR_AddressTooLong" />
<fmt:message key="ERROR_CityTooLong" var="ERROR_CityTooLong" />
<fmt:message key="ERROR_StateTooLong" var="ERROR_StateTooLong" />
<fmt:message key="ERROR_CountryTooLong" var="ERROR_CountryTooLong" />
<fmt:message key="ERROR_ZipCodeTooLong" var="ERROR_ZipCodeTooLong" />
<fmt:message key="ERROR_EmailTooLong" var="ERROR_EmailTooLong" />
<fmt:message key="ERROR_PhoneTooLong" var="ERROR_PhoneTooLong" />
<fmt:message key="ERROR_RecipientEmpty" var="ERROR_RecipientEmpty" />
<fmt:message key="ERROR_LastNameEmpty" var="ERROR_LastNameEmpty" />
<fmt:message key="ERROR_AddressEmpty" var="ERROR_AddressEmpty" />
<fmt:message key="ERROR_CityEmpty" var="ERROR_CityEmpty" />
<fmt:message key="ERROR_StateEmpty" var="ERROR_StateEmpty" />
<fmt:message key="ERROR_CountryEmpty" var="ERROR_CountryEmpty" />
<fmt:message key="ERROR_ZipCodeEmpty" var="ERROR_ZipCodeEmpty" />
<fmt:message key="ERROR_EmailEmpty" var="ERROR_EmailEmpty" />
<fmt:message key="ERROR_FirstNameEmpty" var="ERROR_FirstNameEmpty" />
<fmt:message key="ERROR_INVALIDEMAILFORMAT" var="ERROR_INVALIDEMAILFORMAT" />
<fmt:message key="ERROR_INVALIDPHONE" var="ERROR_INVALIDPHONE" />
                             
 MessageHelper.setMessage("ERROR_RecipientTooLong", <wcf:json object="${ERROR_RecipientTooLong}"/>);
 MessageHelper.setMessage("ERROR_FirstNameTooLong", <wcf:json object="${ERROR_FirstNameTooLong}"/>);
 MessageHelper.setMessage("ERROR_LastNameTooLong", <wcf:json object="${ERROR_LastNameTooLong}"/>);
 MessageHelper.setMessage("ERROR_AddressTooLong", <wcf:json object="${ERROR_AddressTooLong}"/>);
 MessageHelper.setMessage("ERROR_CityTooLong", <wcf:json object="${ERROR_CityTooLong}"/>);
 MessageHelper.setMessage("ERROR_StateTooLong", <wcf:json object="${ERROR_StateTooLong}"/>);
 MessageHelper.setMessage("ERROR_CountryTooLong", <wcf:json object="${ERROR_CountryTooLong}"/>);
 MessageHelper.setMessage("ERROR_ZipCodeTooLong", <wcf:json object="${ERROR_ZipCodeTooLong}"/>);
 MessageHelper.setMessage("ERROR_EmailTooLong", <wcf:json object="${ERROR_EmailTooLong}"/>);
 MessageHelper.setMessage("ERROR_PhoneTooLong", <wcf:json object="${ERROR_PhoneTooLong}"/>);
 MessageHelper.setMessage("ERROR_RecipientEmpty", <wcf:json object="${ERROR_RecipientEmpty}"/>);
 MessageHelper.setMessage("ERROR_LastNameEmpty", <wcf:json object="${ERROR_LastNameEmpty}"/>);
 MessageHelper.setMessage("ERROR_AddressEmpty", <wcf:json object="${ERROR_AddressEmpty}"/>);
 MessageHelper.setMessage("ERROR_CityEmpty", <wcf:json object="${ERROR_CityEmpty}"/>);
 MessageHelper.setMessage("ERROR_StateEmpty", <wcf:json object="${ERROR_StateEmpty}"/>);
 MessageHelper.setMessage("ERROR_CountryEmpty", <wcf:json object="${ERROR_CountryEmpty}"/>);
 MessageHelper.setMessage("ERROR_ZipCodeEmpty", <wcf:json object="${ERROR_ZipCodeEmpty}"/>);
 MessageHelper.setMessage("ERROR_EmailEmpty", <wcf:json object="${ERROR_EmailEmpty}"/>);
 MessageHelper.setMessage("ERROR_FirstNameEmpty", <wcf:json object="${ERROR_FirstNameEmpty}"/>);
 MessageHelper.setMessage("ERROR_INVALIDEMAILFORMAT", <wcf:json object="${ERROR_INVALIDEMAILFORMAT}"/>);
 MessageHelper.setMessage("ERROR_INVALIDPHONE", <wcf:json object="${ERROR_INVALIDPHONE}"/>);

});
              
                             
</script>                            

<c:out value="stateDiv${divNum}"/>

<link rel="stylesheet" href="<c:out value="${jspStoreImgDir}${env_vfileStylesheet}"/>"  type="text/css"/>                             
                             
<style type="text/css">
 /* bring in the claro theme */
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.5/dijit/themes/claro/claro.css";
</style>

<html>

              
<wcbase:useBean id="countryBean" classname="com.ibm.commerce.user.beans.CountryStateListDataBean">
<c:set target="${countryBean}" property="countryCode" value="${selectedContact.address.country}"/>
</wcbase:useBean>

<body class="claro">

<!-- The container must be a dijit.layout.AccordionContainer -->
<div id="accordion" dojoType="dijit.layout.AccordionContainer">

 <!-- Accordion item -->
<div class="element" title="Address" dojoType="dijit.layout.ContentPane" selected="true" >
<p>Accordian Item1</p>
                                            
<form id="billingAddressCreateEditFormDiv_1" name="billingAddressCreateEditFormDiv_1" class="address"  data-dojo-type="dijit.form.Form" >

<input type="hidden" id="AddressForm_FieldsOrderByLocale" value="NICK_NAME,first_name,LAST_NAME,ADDRESS,ZIP,CITY,state/province,COUNTRY/REGION,phone1,EMAIL1"/>

<input type="hidden" name="storeId" value="<c:out value="${storeId}" />" id="WC_UnregisteredCheckout_inputs_1"/>
<input type="hidden" name="catalogId" value="<c:out value="${catalogId}" />" id="WC_UnregisteredCheckout_inputs_2"/>
<input type="hidden" name="langId" value="<c:out value="${langId}" />" id="WC_UnregisteredCheckout_inputs_3"/>
<input type="hidden" name="status" value="Billing" id="WC_UnregisteredCheckout_inputs_4"/>
<input type="hidden" name="addressType" value="Billing" id="WC_UnregisteredCheckout_inputs_5"/>
<input type="hidden" name="authToken" value="${authToken}" id="WC_UnregisteredCheckout_inputs_authToken_billing"/>
                                            
<div id="WC_${formName}_requiredfield_div_1" class="denote_required_field">
<span class="required-field"  id="WC_${formName}_requiredfield_div_2"> *</span>
<fmt:message key="REQUIRED_FIELDS"/>
</div>

<div class="label_spacer" id="WC_${formName}_nickName_div_3">
<span class="spanacce">
<label for="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}nickName'/>">
<fmt:message key="SHIPPING_AND_BILLING_ADDRESS_LABEL_TEXT2">
<fmt:param><fmt:message key="AB_RECIPIENT"/></fmt:param>
<fmt:param>${address}</fmt:param></fmt:message>
</label>
</span>

<span class="required-field"  id="WC_${formName}_nickName_div_4"> *</span>
<fmt:message key="AB_RECIPIENT"/>
</div>

<div id="WC_${formName}_nickName_div_5">
 <c:choose>
<c:when test="${!empty addressId && addressId != -1}" >
<input type="hidden" name="addressId" value="<c:out value="${addressId}" />" id="WC_${formName}_nickName_inputs_1"/>
<input type="text" readonly="true" id="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}nickName'/>" name="nickName" size="35" class="form_input" value="<c:out value="${contact.contactInfoIdentifier.externalIdentifier.contactInfoNickName}"/>" />
</c:when>
<c:otherwise>
<input type="text" aria-required="true" id="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}nickName'/>" name="nickName" size="35" class="form_input" value="" />
</c:otherwise>
</c:choose>
</div>
<%-- first name --%>
<div class="label_spacer" id="WC_${formName}_firstName_div_6">
<span class="spanacce">
<label for="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}firstName_1'/>">
<fmt:message key="SHIPPING_AND_BILLING_ADDRESS_LABEL_TEXT2">
<fmt:param><fmt:message key="FIRST_NAME"/></fmt:param>
<fmt:param>${address}</fmt:param></fmt:message>
</label>
 </span>
<fmt:message key="FIRST_NAME"/></div>

<div id="WC_${formName}_firstName_div_7">
<input type="text" name="firstName" id="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}firstName_1'/>" size="35" class="form_input" value="<c:out value='${contact.contactName.firstName}'/>" />
</div>
              
<%-- last name --%> <div class="label_spacer" id="WC_${formName}_lastName_div_8">
<span class="spanacce">
<label for="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}lastName_1'/>">
<fmt:message key="SHIPPING_AND_BILLING_ADDRESS_LABEL_TEXT2">
<fmt:param><fmt:message key="LAST_NAME"/></fmt:param>
<fmt:param>${address}</fmt:param></fmt:message>
</label>
</span>
<span class="required-field"  id="WC_${formName}_lastName_div_9"> *</span>
<fmt:message key="LAST_NAME"/></div>                 
<div id="WC_${formName}_lastName_div_10">
<input type="text" aria-required="true" name="lastName" id="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}lastName_1'/>" size="35" class="form_input" value="<c:out value='${contact.contactName.lastName}'/>" />
</div>
              

<%-- address --%>
<div class="label_spacer" id="WC_${formName}_address1_div_11">
<span class="spanacce">
<label for="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}address1_1'/>">
<fmt:message key="SHIPPING_AND_BILLING_ADDRESS_LABEL_TEXT2">
<fmt:param><fmt:message key="STREET_ADDRESS_LINE_1"/></fmt:param>
<fmt:param>${address}</fmt:param></fmt:message>
</label>
</span>
<span class="required-field"  id="WC_${formName}_address1_div_12"> *</span>
<fmt:message key="STREET_ADDRESS"/></div>
                             
<div id="WC_${formName}_address1_div_13">
<input type="text" aria-required="true" name="address1" id="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}address1_1'/>" size="35" class="form_input" value="<c:out value='${contact.address.addressLine[0]}'/>" />
<span class="spanacce">
<label for="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}address2_1'/>">
<fmt:message key="SHIPPING_AND_BILLING_ADDRESS_LABEL_TEXT2">
<fmt:param><fmt:message key="STREET_ADDRESS_LINE_2"/></fmt:param>
<fmt:param>${address}</fmt:param></fmt:message>
</label>
</span>
<input type="text" name="address2" id="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}address2_1'/>" size="35" class="form_input" value="<c:out value='${contact.address.addressLine[1]}'/>" />
</div>

<%-- city --%>
<div class="label_spacer" id="WC_${formName}_city_div_14">
<span class="spanacce">
<label for="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}city_1'/>">
<fmt:message key="SHIPPING_AND_BILLING_ADDRESS_LABEL_TEXT2">
<fmt:param><fmt:message key="CITY2"/></fmt:param>
<fmt:param>${address}</fmt:param></fmt:message>
</label>
</span>
<span class="required-field"  id="WC_${formName}_city_div_15"> *</span>
<fmt:message key="CITY2"/></div>
              
              
<div id="WC_${formName}_city_div_16">
<input type="text" aria-required="true" name="city" id="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}city_1'/>" size="35" class="form_input" value="<c:out value='${contact.address.city}'/>" />
</div>
              
<%-- country/region --%>
<div class="label_spacer" id="WC_${formName}_country_div_17">
<span class="spanacce">
<label for="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}country_1'/>">
<fmt:message key="SHIPPING_AND_BILLING_ADDRESS_LABEL_TEXT_COUNTRY2_ACCE">
<fmt:param>${address}</fmt:param>
</fmt:message>
</label>
</span>
<span class="required-field"  id="WC_${formName}_country_div_18"> *</span>
<fmt:message key="COUNTRY2"/></div>
              
                             
<div id="WC_${formName}_country_div_19">
<c:set var="lang" value="${locale}" />
<c:set var="country_language_select" value="${fn:split(lang, '_')}" />              
<select aria-required="true" name="country" size="1" id="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}country_1'/>" class="drop_down_checkout" onkeydown="saveTabPress(event)" onblur="setFocus('WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}state_1')" onchange="javascript:AddressHelper.loadStatesUI('<c:out value='${formName}'/>','<c:out value='${paramPrefix}'/>','<c:out value='${paramPrefix}stateDiv${divNum}'/>','<c:out value="WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}state_1"/>')">
<c:forEach var="country" items="${countryBean.countries}">
<option value="<c:out value='${country.code}'/>"
<c:choose>
<c:when test="${!empty contact.address.country}">
<c:if test="${country.code eq contact.address.country || country.displayName eq contact.address.country}">
selected="selected"
<c:set var="country1" value="${contact.address.country}"/>
</c:if>
</c:when>
<c:otherwise>
<c:if test="${country.code eq country_language_select[1]}">
selected="selected"
<c:set var="country1" value="${country.code}"/>
</c:if>
</c:otherwise>
</c:choose>
>
<c:out value="${country.displayName}"/>
</option>
</c:forEach>
</select>
</div>
              

<%-- state/province --%>
<div class="label_spacer" id="WC_${formName}_state_div_20">
<span class="spanacce">
<label for="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}state_1'/>">
<fmt:message key="SHIPPING_AND_BILLING_ADDRESS_LABEL_TEXT2">
<fmt:param><fmt:message key="REG_STATE"/></fmt:param>
<fmt:param>${address}</fmt:param></fmt:message>
</label>
</span>
<span class="required-field"  id="WC_${formName}_state_div_21"> *</span>
<fmt:message key="REG_STATE"/>
</div>
              

<div id="<c:out value='${paramPrefix}stateDiv${divNum}'/>">
<wcbase:useBean id="countryBean" classname="com.ibm.commerce.user.beans.CountryStateListDataBean">
<c:set target="${countryBean}" property="countryCode" value="${country1}"/>
</wcbase:useBean>
<jsp:setProperty name="countryBean" property="countryCode" value="${country1}" />
<c:choose>
<c:when test="${!empty countryBean.countryCodeStates}">
<select aria-required="true" id="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}state_1'/>" name="state" class="drop_down_checkout">
<c:forEach var="state" items="${countryBean.countryCodeStates}">
<option value="<c:out value='${state.code}'/>"
<c:if test="${state.code eq contact.address.stateOrProvinceName || state.displayName eq contact.address.stateOrProvinceName}">
selected="selected"
</c:if>
>
<c:out value="${state.displayName}"/>
</option>
</c:forEach>
</select>
</c:when>
<c:otherwise>
<input type="text" aria-required="true" name="state" id="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}state_1'/>" size="35" class="form_input" value="<c:out value='${contact.address.stateOrProvinceName}'/>" />
</c:otherwise>
</c:choose>
</div>
              

<%-- zipcode --%>
<div class="label_spacer" id="WC_${formName}_zipCode_div_22">
<c:choose>
<c:when test="${isBrazilStore eq 'true'}"><!-- Brazil CEP# ( similar to zipcode ) -->
<span class="spanacce">
<label for="<c:out  value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}zipCode_1'/>">
<fmt:message key="SHIPPING_AND_BILLING_ADDRESS_LABEL_TEXT2">
<fmt:param><fmt:message key="CEP_CODE" bundle="${brazilStoreText}"/></fmt:param>
<fmt:param>${address}</fmt:param></fmt:message>
</label>
</span>
<span class="required-field"  id="WC_${formName}_zipCode_div_23"> *</span>
<fmt:message key="CEP_CODE" bundle="${brazilStoreText}"/>
</c:when>
<c:otherwise> <!-- Madisons zipcode -->
<span class="spanacce">
<label for="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}zipCode_1'/>">
<fmt:message key="SHIPPING_AND_BILLING_ADDRESS_LABEL_TEXT2">
<fmt:param><fmt:message key="ZIP_CODE"/></fmt:param>
<fmt:param>${address}</fmt:param></fmt:message>
</label>
</span>
<span class="required-field"  id="WC_${formName}_zipCode_div_23"> *</span>
<fmt:message key="ZIP_CODE"/>
</c:otherwise>
</c:choose>

</div>
              

<div id="WC_${formName}_zipCode_div_24">
<input type="text" aria-required="true" name="zipCode" id="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}zipCode_1'/>" size="35" class="form_input" value="<c:out value='${contact.address.postalCode}'/>" />
</div>

<%-- phone --%>
<div class="label_spacer" id="WC_${formName}_phone1_div_25">
<span class="spanacce">
<label for="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}phone1_1'/>">
<fmt:message key="SHIPPING_AND_BILLING_ADDRESS_LABEL_TEXT2">
<fmt:param><fmt:message key="PHONE_NUMBER2"/></fmt:param>
<fmt:param>${address}</fmt:param></fmt:message>
</label>
</span>
<fmt:message key="PHONE_NUMBER2"/>
</div>

<div id="WC_${formName}_phone1_div_26">
<input type="tel" name="phone1" id="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}phone1_1'/>" size="35" class="form_input" value="<c:out value='${contact.telephone1.value}'/>" />
</div>

<%-- email --%>
<div class="label_spacer" id="WC_${formName}_email1_div_27">
<span class="spanacce">
<label for="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}email1_1'/>">
<fmt:message key="SHIPPING_AND_BILLING_ADDRESS_LABEL_TEXT2">
<fmt:param><fmt:message key="EMAIL"/></fmt:param>
<fmt:param>${address}</fmt:param></fmt:message>
</label>
</span>
<span class="required-field"  id="WC_${formName}_email1_div_28"> *</span>
<fmt:message key="EMAIL"/></div>
                                            
<div id="WC_${formName}_email1_div_29">
<input type="text" aria-required="true" name="email1" id="<c:out value='WC_${pageName}_ShoppingCartAddressEntryForm_${formName}_${paramPrefix}email1_1'/>" size="35" class="form_input" value="<c:out value='${contact.email1.value}'/>" />
</div>
</form>
</br>
</br>   
</br>
</br>
   
<div id="WC_UnregisteredCheckout_div_16" style="display:block" >                                                                                                                                                     
<a href="#" role="button" class="button_secondary" id="WC_UnregisteredCheckout_links_3" onclick="javascript:setPageLocation('<c:out value="${ShoppingCartURL}"/>')">
<div class="left_border"></div>
<div class="button_text"><fmt:message key="UC_BACK" /></div>
<div class="right_border"></div>
</a>
<a href="#" role="button" class="button_primary button_left_padding" id="WC_UnregisteredCheckout_links_4" onclick="JavaScript:setCurrentId('WC_UnregisteredCheckout_links_4'); AccordianPaneServicesDeclarationJS.saveBillingAddress('billingAddressCreateEditFormDiv_1',  '<c:out value='${stateDivName1}'/>');">
<div class="left_border"></div>
<div class="button_text"><fmt:message key="UC_NEXT" /></div>
<div class="right_border"></div>
</a>
<span class="button_right_side_message"><fmt:message key="UC_NEXTSTEP"/></span>
</div>
                                               
<%-- This will be used as the URL which will call server Page--%>
<wcf:url var="BillingAddressPage" value="AccordianBillingAddressDisplayView" type="Ajax">
<wcf:param name="storeId" value="${WCParam.storeId}" />
<wcf:param name="catalogId" value="${WCParam.catalogId}" />
<wcf:param name="langId" value="${WCParam.langId}" />
</wcf:url>
                                                           
<%-- Refresh Area Widget --%>
<div dojoType="wc.widget.RefreshArea" widgetId="BillingRefreshAreaDisplay"
id="RefreshAreaDisplay" controllerId="BillingAddressAreaRefreshController"
role="wairole:region" waistate:live="polite" waistate:atomic="false"
waistate:relevant="all">
</div>

<%-- this will parse the widget --%>
<%-- Sets the url for controller to refresh the area --%>
<script type="text/javascript">
dojo.addOnLoad(function() {
parseWidget("BillingRefreshAreaDisplay");
CommonControllersDeclarationJS.setControllerURL('BillingAddressAreaRefreshController','<c:out value='${BillingAddressPage}'/>');
});
</script>                            
     
</div>
<!-- Accordion item -->
<div class="element" title="Accordian Pane2"  dojoType="dijit.layout.ContentPane">
<p> Accordian Item2...</p>
</div>
              
<!-- Accordion item -->
<div class="element" title="Accordian Pane3" dojoType="dijit.layout.ContentPane">
<p> Accordian Item3</p>
</div>
              
</div>

</body>

</html>

Step 2: Create AccordianBillingAddressDisplay.jsp  which is  the JSP that displays the added billing address.

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://commerce.ibm.com/base" prefix="wcbase" %>
<%@ include file="Common/nocache.jspf" %>
<%@ include file="Common/EnvironmentSetup.jspf" %>
<%@ page import="address.beans.TestDataBean" %>

<table id="order_details" cellpadding="0" cellspacing="0" border="0"  width="100%" height="100%">

<% out.flush(); %>

<wcbase:useBean id="billingAddressDataBean" classname="address.beans.TestDataBean">
<c:set target="${billingAddressDataBean}" property="addressId" value="${WCParam.billingAddressId}"/>
</wcbase:useBean>
  
<c:out value="${billingAddressDataBean.firstName}"/>
<c:out value="${billingAddressDataBean.lastName}"/>
<c:out value="${billingAddressDataBean.email1}"/>   
<c:out value="${billingAddressDataBean.city}"/>   
<c:out value="${billingAddressDataBean.zipCode}"/>   
   
<% out.flush(); %>

</table>

Step 3: Create Strutsconfig-ext.xml entries for the parent and result JSP .

<forward className="com.ibm.commerce.struts.ECActionForward" name="AccordianPaneView/11051" path="/AccordianPane.jsp"/>
<forward className="com.ibm.commerce.struts.ECActionForward" name="AccordianBillingAddressDisplayView/11051" path="/AccordianBillingAddressDisplay.jsp"/>
<action path="/AccordianPaneView" type="com.ibm.commerce.struts.BaseAction"/>  
<action path="/AccordianBillingAddressDisplayView" type="com.ibm.commerce.struts.BaseAction"/>    


Step 4: Create AccordianPaneServicesDeclaration.js which contains validations and service calls.

dojo.require("wc.service.common");
dojo.require("wc.render.common");

/**
* Declares a new render context for creating/editing the billing address
*/
wc.render.declareContext ("BillingRefreshArea_Context",{billingAddressId: ""},"");

/**
* Declares a new
RefreshController */
 
wc.render.declareRefreshController( {
id : "BillingAddressAreaRefreshController",
renderContext : wc.render.getContextById("BillingRefreshArea_Context"),
url : "",
formId : "",
   
renderContextChangedHandler : function(message, widget) {
var controller = this;
var renderContext = this.renderContext;
widget.refresh(renderContext.properties);
},
postRefreshHandler : function(widget) {
}
);

/**
* @class This class stores common parameters needed to make the service call.
*/
AccordianPaneServicesDeclarationJS = {
/* The common parameters used in service calls */
       
langId: "-1",
storeId: "",
catalogId: "",
   
/* The name of the state field div. */
stateDivName : "stateDiv",
/* styling class for the state field. */
 stateClass   : null,

setCommonParameters:function(langId,storeId,catalogId){
this.langId = langId;
this.storeId = storeId;
this.catalogId = catalogId;
},
   
/* The name of the state field div. */
stateDivName : "stateDiv",
/* styling class for the state field. */
stateClass   : null,
   
/**
* This function sets the name for the state field.
* @param {string} stateDivName The name to be set for the state field. 
*/
setStateDivName:function(stateDivName){
this.stateDivName = stateDivName;
},
   
/**
* This function sets the styling class for the state field.
* @param {string} stateClass The name of the styling class to be set for the state field.
*/
setStateClass:function(stateClass){
this.stateClass = stateClass;
},

/**
* This function saves the address entry form on an unregistered user's checkout page.
* @param {string} formName1 The name of the billing address form.
* @param {string} stateDivName1 The name of the state field in the billing address form.
*/
   
saveBillingAddress: function(formName1, stateDivName1)    {
var form1 = document.forms[formName1];
this.setStateDivName(stateDivName1);
/*Validate form input fields */
if(this.validateAddressForm(form1)){
this.saveAddress('AddBillingAddress', 'billingAddressCreateEditFormDiv_1');
}
},

saveAddress:function(serviceId, formName) {
var form = document.forms[formName];
var addressService = wc.service.getServiceById(serviceId);
addressService.formId = formName;
/* For Handling multiple clicks */
/*if(!submitRequest()){
return;
}  */         
cursor_wait();
wc.service.invoke(serviceId);
},

validateAddressForm: function(form,prefix){
return true; 
}
   
   
 /**
 * This service adds a billing address to the order(s).
 */
 wc.service.declare({
 id: "AddBillingAddress",
 actionId: "AddBillingAddress",
 url: "AjaxPersonChangeServiceAddressAdd",
 formId: ""

/**
*     calls the saveAddress function defined in the AddressHelper class.
*  @param (object) serviceResponse The service response object, which is the
*  JSON object returned by the service invocation.
*/
,successHandler: function(serviceResponse) {
requestSubmitted = false;
dijit.byId("billingAddressCreateEditFormDiv_1").domNode.style.visibility = 'hidden';
dojo.setStyle("WC_UnregisteredCheckout_div_16", {"display": "none"});
wc.render.updateContext('BillingRefreshArea_Context',{'billingAddressId':serviceResponse.addressId});
             
}

 /**
 * display an error message.
 * @param (object) serviceResponse The service response object, which is the
 * JSON object returned by the service invocation.
 */
 ,failureHandler: function(serviceResponse) {
 if (serviceResponse.errorMessage) {
 MessageHelper.displayErrorMessage(serviceResponse.errorMessage);
 } else {
 if (serviceResponse.errorMessageKey) {
 MessageHelper.displayErrorMessage(serviceResponse.errorMessageKey);
 }
 }
 }

 })

 

 

No comments:

Post a Comment