Professional Documents
Culture Documents
Urvi Nargotra
18th September 2015
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
Introduction to Aurora
Introduced in WebSphere
Commerce V7 Feature Pack 5
Introduces a new store front with
Page no 3
Introduction to Aurora
Version
Feature Pack 5
Commerce-ComposerApplicability to
managed pages and layouts business models
No
Feature Pack 7
Feature Pack 8
Technologies
Used
Page no 4
CSS provider
Page Layouts
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
Page no 6
Page no 7
Page no 8
Business user
can select the
start date and
end date for a
layout
assignment
Page no 9
Step 2
Step 3
Step 4
Page no 10
Step 5
Step 6
Step 7
Page no 11
Page no 12
Page no 13
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
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);
}
}
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
Page no 16
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>
wc.render.updateContext('shippingAddressOPCContext', {'shippingAddress':addressId});
Page no 17
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 Section
1. Customer confirms
address
2. AjaxSetAddressIdOfOrd
erItems service called
Payment Section
1. Billing Address Section
2. Card Payment Section
3. PayPal Section
Page no 18
Thank You
Page no 19