You are on page 1of 19

Aurora Store Customisation

Urvi Nargotra
18th September 2015

Copyright IBM Corporation 2012

Agenda

Introduction to Aurora
Widgets and Page Layouts
Commerce Composer Tool
Ajax Interactions within the store
How Partial Refresh works
Widget Communication
Page no 2

2010 IBM Corporation


Copyright IBM Corporation 2012

Introduction to Aurora

Introduced in WebSphere
Commerce V7 Feature Pack 5
Introduces a new store front with

Page no 3

Ajax driven enhanced user


interface and navigation
enhancements
Modular page design /
Widgetization
Page layouts with Business
User Tool Support
RWD patterns

2010 IBM Corporation


Copyright IBM Corporation 2012

Introduction to Aurora
Version

Responsive Web Design (RWD)

Feature Pack 5

No, the store provides device-specific


layouts only

Commerce-ComposerApplicability to
managed pages and layouts business models
No

Consumer direct only

Feature Pack 7

Yes, the store provides responsive


Yes, the catalog browsing pages and
layouts for catalog browsing pages plus some additional pages are managed Consumer direct only
some additional pages
in the Commerce Composer tool

Feature Pack 8

Yes, the store provides responsive


Yes, the catalog browsing pages and
Both consumer direct
layouts for catalog browsing pages plus some additional pages are managed
and B2B direct
some additional pages
in the Commerce Composer tool

Technologies
Used

Page no 4

Combination of Ajax and Dojo


WebSphere Commerce services for all marketing, member,
and order component interactions.
Customizable REST services to facilitate the invocation of
classic controller commands and the activation of data
beans.

2010 IBM Corporation


Copyright IBM Corporation 2012

Widgets and Page layouts


Widgets:

Independent UI module providing a specific feature or function

Can be embedded and moved around in store pages

Capable of retrieving its own data while providing multiple


ways of rendering

Comprised of four parts including two JSP fragments:

Data provider (JSP page)

Java Script provider

User interface provider (JSP page)

CSS provider
Page Layouts

Page layouts are like wireframes of the page. Widgets are


positioned in layouts.

Example Files of a widget:


ShoppingCartDetail.jsp
ShoppingCartDetail_Data.jsp
(Data provider)
ShoppingCartDetail__UI.jsp
(User interface provider)
ShoppingCartDetail.js
(JavaScript provider)

Benefits

Business users can use the widgets to design and configure store pages without the need
for IT assistance.
Cleaner organization of code.
Separation of data and presentation.
Ease of reuse of code. For example, a Header widget and Footer widget can be easily used
in the layout for all store pages.

Page no 5

2010 IBM Corporation


Copyright IBM Corporation 2012

Widgets and Page layouts

Page no 6

2010 IBM Corporation


Copyright IBM Corporation 2012

Commerce Composer Tool

Page no 7

2010 IBM Corporation


Copyright IBM Corporation 2012

Commerce Composer Tool

Task / User Cases


IT can define
the default
Business user
layout to use for Business user
Business user
can select the
all categories,
can select the
can select the
layout to use for
all
layout to use for layout to use for
all the products
departments(to
a specific
a specific
under a
p level
category
product
category
category), and
all products

Page no 8

Business user
can select the
start date and
end date for a
layout
assignment

2010 IBM Corporation


Copyright IBM Corporation 2012

Ajax interactions within the store


Basket Page

Page no 9

2010 IBM Corporation


Copyright IBM Corporation 2012

One Page Checkout


Step 1

Step 2

Step 3

Step 4

Page no 10

2010 IBM Corporation


Copyright IBM Corporation 2012

One Page Checkout

Step 5

Step 6

Step 7

Page no 11

2010 IBM Corporation


Copyright IBM Corporation 2012

Websphere Commerce Ajax Framework

How Partial Refresh works?

Page no 12

An AJAX call is made to the server to update a business


object and sections of the page are refreshed with new
content if the update is successful

An AJAX call is made to refresh a section of the page


because of certain customer interactions.

An AJAX call is made to the WebSphere Commerce server to


update a business object and json is returned which can be
used to refresh the sections of the page using javascript and
DOM Manipulation API.

An AJAX call is made to the WebSphere Commerce server


requesting JSON data and sections of the page are then
updated using JavaScript and the DOM manipulation API.

2010 IBM Corporation


Copyright IBM Corporation 2012

How Partial Refresh works?

Page no 13

2010 IBM Corporation


Copyright IBM Corporation 2012

How Partial Refresh works : RefreshArea


RefreshArea (wc.widget.RefreshArea)
Definition : The RefreshArea widget is used to wrap a DOM node that may
need to be refreshed by replacing the innerHTML property with fresh HTML
loaded from the server.
Example:
<div dojoType="wc.widget.RefreshArea" widgetId="ShopCartDisplay"

id="ShopCartDisplay" controllerId="ShopCartDisplayController">
<%out.flush();%>
<c:import url="/WidgetsIBM/com.ibm.commerce.store.widgets.ShoppingCartDetail/Shopping
CartDetail.jsp"/>
<%out.flush();%>
</div>

Page no 14

2010 IBM Corporation


Copyright IBM Corporation 2012

How Partial Refresh works : Services


Services

Definition : A service is a server URL that performs a server object create, update, delete or other
server processing in WebSphere Commerce. When the service completes successfully, a JSON
object containing the response properties of the URL request is returned to the JavaScript functions
defined by successHandler or failureHandler, in case of success or failure respectively.

Example:
<action parameter="order.updateOrderItem" path="/AjaxOrderChangeServiceItemUpdate"
type="com.ibm.commerce.struts.AjaxComponentServiceAction">
<set-property property="authenticate" value="0:0"/>
<set-property property="https" value="0:1"/>
</action>
wc.service.declare({
id: "AjaxUpdateOrderItem",
actionId: "AjaxUpdateOrderItem",
url: getAbsoluteURL() + "AjaxOrderChangeServiceItemUpdate",
formId: "",
successHandler: function(serviceResponse) {
alert("success");
},

}),

Page no 15

failureHandler: function(serviceResponse) {
if (serviceResponse.errorMessage) {
alert(serviceResponse.errorMessage);
}
}

2010 IBM Corporation


Copyright IBM Corporation 2012

How Partial Refresh works : Controllers

Controllers

Definition : A RefreshArea widget is associated with a registered refresh controller that listens for
events that will require this widget to be refreshed.
Example:
modelChangedHandler when the service completes successfully

renderContextChangedHandler when the context is updated


url - used to retrieve the refreshed content for the RefreshArea widget.
/**
* Declares a new render context for Shopping Cart with pagination,
* and initializes it with the beginning index value.
*/
wc.render.declareContext("ShopCartPaginationDisplay_Context",{},""),
wc.render.declareRefreshController({
id: "ShopCartDisplayController",
renderContext: wc.render.getContextById("ShopCartPaginationDisplay_Context"),
url: "ShopCartDisplayView",
formId: "",
modelChangedHandler: function(message, widget) {
if(message.actionId in order_updated){
widget.refresh();
}
},
renderContextChangedHandler: function(message, widget) {
},
postRefreshHandler: function(widget) {
}
});
<wcf:url var="ShopCartDisplayViewURL" value="ShopCartDisplayView" type="Ajax">
<wcf:param name="langId" value="${langId}" />
<wcf:param name="storeId" value="${WCParam.storeId}" />
<wcf:param name="catalogId" value="${WCParam.catalogId}" />
<wcf:param name="shipmentType" value="single" />
</wcf:url>
<script type="text/javascript">
dojo.addOnLoad(function() {
CommonControllersDeclarationJS.setControllerURL('ShopCartDisplayController','<c:out value="${ShopCartDisplayViewURL}"/>');
});
</script>

Page no 16

2010 IBM Corporation


Copyright IBM Corporation 2012

How Partial Refresh works : Context


Context (wc.render.declareContext (id, properties, updateContextURL))

Definition : This function declares a new render context and initializes it with the specified render
context properties.The update context URL reports changes to the render context to the server. A
render context is a set of client-side context information to keep track off on a page. This context
information can be used to decide if changes to RefreshAreas are needed
Example:
<<script type="text/javascript">
wc.render.declareContext("shippingAddressOPCContext",{shippingAddress: ""},"");
wc.render.declareRefreshController({
id: "shippingAdddressDisplayAreaOPCController",
renderContext: wc.render.getContextById("shippingAddressOPCContext"),
url: "${AddressDisplayURL}",
formId: ""

</script>

,renderContextChangedHandler: function(message, widget) {


var controller = this;
var renderContext = this.renderContext;
if (controller.testForChangedRC(["shippingAddress"])) {
var addressId = renderContext.properties["shippingAddress"];
widget.refresh({"addressId": addressId});
}
cursor_clear();
}
});

wc.render.updateContext('shippingAddressOPCContext', {'shippingAddress':addressId});

Page no 17

2010 IBM Corporation


Copyright IBM Corporation 2012

Widget Communication
Widget Communication is handled using Dojo publish/subscribe event handlers
Order Summary Section
1. Listens to the event for updating the delivery option for the order
2. AJAX call to get updated HTML reflecting the shipping charges for the delivery option selected and the order
total

Delivery Address Section

Delivery Section

Home Delivery Summary Section

1. Customer confirms
address
2. AjaxSetAddressIdOfOrd
erItems service called

1. Listens to the event for


updating the address for the
order
2. AJAX call to get updated
HTML
3. Hides the Address div and
makes the delivery options
div visible in its place
4. Customer selects the delivery
option

1. Listens to the event for updating the


delivery option for the order
2. AJAX call to get updated HTML
3. Hides the Delivery div and makes
the summary div visible in its place

Payment Section
1. Billing Address Section
2. Card Payment Section
3. PayPal Section
Page no 18

2010 IBM Corporation


Copyright IBM Corporation 2012

Thank You

Page no 19

2010 IBM Corporation


Copyright IBM Corporation 2012