Aurora Store

Copyright IBM Corporation 2012

Aurora Store Customisation

Urvi Nargotra18th September 2015

© 2010 IBM CorporationCopyright IBM Corporation 2012

Agenda

Page no 2

Introduction to Aurora

Widgets and Page Layouts

Commerce Composer Tool

Ajax Interactions within the store

How Partial Refresh works

Widget Communication


Page no 3

Introduction to Aurora

• Introduced in WebSphere Commerce V7 Feature Pack 5

• Introduces a new store front with• Ajax driven enhanced user

interface and navigation enhancements

• Modular page design / Widgetization

• Page layouts with Business User Tool Support

• RWD patterns


Page no 4

Introduction to Aurora…

Version Responsive Web Design (RWD)Commerce-Composer-

managed pages and layoutsApplicability to

business models

Feature Pack 5No, the store provides device-specific

layouts onlyNo Consumer direct only

Feature Pack 7Yes, the store provides responsive

layouts for catalog browsing pages plus some additional pages

Yes, the catalog browsing pages and some additional pages are

managed in the Commerce Composer tool

Consumer direct only

Feature Pack 8Yes, the store provides responsive

layouts for catalog browsing pages plus some additional pages

Yes, the catalog browsing pages and some additional pages are

managed in the Commerce Composer tool

Both consumer direct and B2B direct

Technologies

Used

• 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.


Page no 5

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.

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

• 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.

Benefits

Example Files of a widget:


Page no 6

Widgets and Page layouts…


Commerce Composer Tool

Page no 7


Page no 8

Task / User Cases

IT can define the default

layout to use for all categories,

all departments(to

p level category), and

all products

Business user can select the

layout to use for a specific category


layout to use for a specific product


layout to use for all the products

under a category

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

layout assignment

Commerce Composer Tool…


Page no 9

Basket Page

Ajax interactions within the store


One Page Checkout

Page no 10Page no 10

Step 1

Step 2

Step 3

Step 4


One Page Checkout…

Page no 11

Step 5

Step 6

Step 7


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.W

ebsp

here

Com

mer

ce A

jax

Fra

mew

ork

How Partial Refresh works?


Page no 13

How Partial Refresh works?


Page no 14

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="/Widgets-IBM/com.ibm.commerce.store.widgets.ShoppingCartDetail/ShoppingCartDetail.jsp"/>

<%out.flush();%></div>


Page no 15

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");

},

failureHandler: function(serviceResponse) {if (serviceResponse.errorMessage) {

alert(serviceResponse.errorMessage);}

}}),


Page no 16

How Partial Refresh works : ControllersControllers

• 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 successfullyrenderContextChangedHandler – when the context is updatedurl - 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 17

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: ""

,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();

}});

</script>

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


Page no 18

Widget Communication

Order Summary Section

1. Listens to the event for updating the delivery option for the order2. AJAX call to get updated HTML reflecting the shipping charges for the delivery option selected and the order total

Payment Section

1. Billing Address Section2. Card Payment Section3. PayPal Section

Delivery Address Section

1. Customer confirms address

2. AjaxSetAddressIdOfOrderItems service called

Delivery Section

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

Home Delivery Summary Section

1. Listens to the event for updating the delivery option for the order

2. AJAX call to get updated HTML3. Hides the Delivery div and makes

the summary div visible in its place

Widget Communication is handled using Dojo publish/subscribe event handlers


Page no 19

Thank You

Date post:	10-Dec-2015
Category:	Documents
Upload:	nitish-bhide
View:	227 times
Download:	4 times

Aurora Store

Documents