How To: Enhancing Existing Functionality in the OOB Storefront

Further reading
jQuery version 1.7.1

Tutorial
The SharePoint Out-Of-Box Storefront is designed to be extensible at numerous points of the shopping experience without having to completely rewrite your custom client-side code. The design is similar to the jQuery Events model where additional functionality can be attached to/removed from (on and off prefixes) a particular event. The following is an example of adding custom functionality before AddToCart is called and after :
var addToCartVM = new Microsoft.Retail..(abbr)..AddToCartViewModel(services, $view); // Performed before AddToCart addToCartVM.OnAddToCart(function (event) { alert('Adding item to cart'); }); // Performed after a successful AddToCart call. addToCartVM.OnAddToCart(function (event, data) { alert('Item Added. Total shopping cart items = ' + data.Items.length); });

The following is a list of support objects and the events exposed through them. The data column represents the context data that is available to consume and manipulate. Microsoft.Dynamics.Retail.SharePoint.Web.UI.ViewModel.AddToCartViewModel On/off Method Name Data Obj Description OnAddToCart/ N/A Raised upon a call to the AddToCart method.
OffAddToCart OnAddToCartSuccess/ OffAddToCartSuccess
OnAddToCartFailure/ OffAddToCartFailure

ShoppingCart Raised upon receiving a successful response to the above AddToCart method call. N/A Raised upon failing to receive a response (network issues, timeouts, disconnects, etc) to the above AddToCart method call.

Microsoft.Dynamics.Retail.SharePoint.Web.UI.ViewModel.CheckoutViewModel On/off Method Name Data Obj Description OnCheckout/ None Raised upon a call to the AddToCart method.
OffCheckout OnNoItemCheckout/ OffNoItemCheckout

None

Raised upon receiving a successful response to the above AddToCart method call.

Microsoft.Dynamics.Retail.SharePoint.Web.UI.ViewModel.ShoppingCartViewModel On/off Method Name Data Description OnBeforeRender/ ShoppingCart Raised upon a call to the Render method of the shopping OffBeforeRender cart view. OnAfterRender/ ShoppingCart Raised after executing the Render method of the shopping OffAfterRender cart view. OnRemoveFromCart/ ShoppingCart Raised upon a call to the AddToCart method.
OffRemoveFromCart OnUpdateQuantity/ OffUpdateQuantity

ShoppingCart Raised upon a call to the UpdateQuantity method.

Microsoft.Dynamics.Retail.SharePoint.Web.UI.ViewModel.MiniShoppingCartViewModel On/off Method Name Data Obj Description OnBeforeRender/ ShoppingCart Raised upon a call to the Render method of the miniOffBeforeRender shopping cart view. OnAfterRender/ ShoppingCart Raised after executing the Render method of the miniOffAfterRender shopping cart view. OnShow/ N/A Raised upon a call to show the mini-shopping cart.
OffShow OnHide/ OffHide

N/A

Raised upon a call to hide the mini-shopping cart.

The following events are exposed at the service level and can be subscribed to before the request is made. Each of the following methods have a corresponding on/off success and failure events as well. For example, OnGetShoppingCart has OnGetShoppingCartSuccess/OnGetShoppingCartFailure as well as OffGetShoppingCartSuccess/OffGetShoppingCartFailure method for attaching and removing event handlers. Microsoft.Dynamics.Retail.SharePoint.Web.UI.RemoteServices On/off Method Name Data Obj Description OnGetShoppingCart/ N/A Raised before submitting the Ajax OffGetShoppingCart request to obtain shopping cart information. OnUpdateQuantity/ Items Raised before submitting the Ajax OffUpdateQuantity request to update the shopping cart item quantity. OnGetNearbyStoresWithAvailability/ Latitude, Raised before submitting the Ajax OffGetNearbyStoresWithAvailability longitude, request to get all the stores within the distance, specified radius (distance) at the latitude Items and longitude point. OnUpdateAddresses/ Addresses Raised before submitting the Ajax OffUpdateAddresses request to update signed in customers

On/off Method Name

Data Obj

Description addresses. Raised before submitting the Ajax request to retrieve signed in customers addresses. Raised before submitting the Ajax request to update customer information. Raised before submitting the Ajax request to obtain customer information Raised before submitting the Ajax request to add an item to cart.

OnGetAddresses/ OffGetAddresses OnUpdateCustomer/ OffUpdateCustomer OnGetCustomer/ OffGetCustomer OnAddToCart/ OffAddToCart OnRemoveFromCart/ OffRemoveFromCart OnGetShippingOptions/ OffGetShippingOptions OnGetShippingOptionsPerItem/ OffGetShippingOptionsPerItem OnSubmitShippingOptions/ OffSubmitShippingOptions OnGetDeliveryMethods/ OffGetDeliveryMethods OnGetDeliveryMethodsPerItem/ OffGetDeliveryMethodsPerItem OnGetPaymentCardTypes/ OffGetPaymentCardTypes OnGetPaymentCard/ OffGetPaymentCard OnApplyPromotion/ OffApplyPromotion OnUpdateLoyaltyCardId/ OffUpdateLoyaltyCardId OnSubmitOrder/ OffSubmitOrder OnGetOrders/ OffGetOrders

N/A

Customer N/A ListingId, quantity, productDetails LineId

Raised before submitting the Ajax request to remove an item from cart N/A Raised before submitting the Ajax request to get shipping options for the entire order. N/A Raised before submitting the Ajax request to get shipping options for the individual items. ShippingOptions Raised before submitting the Ajax request to submit shipping options for the entire order ShippingOptions Raised before submitting the Ajax request to obtain the available delivery methods for the entire order. ShippingOptions Raised before submitting the Ajax request to obtain the available delivery methods for each of the items. N/A Raised before submitting the Ajax request to obtain the available payment card types for the order. N/A Raised before submitting the Ajax request to obtain the payment card data structure. Promocode Raised before submitting the Ajax request to apply a promotion/discount code to the order. LoyaltyCardId Raised before submitting the Ajax request to apply a loyalty card id of the customer to the other. PaymentCards, Raised before submitting the Ajax Email request to submit the order. N/A Raised before submitting the Ajax request to obtain a list of orders made by a particular customer.

On/off Method Name

OnGetCommittedOrder/ OffGetCommittedOrder OnGetPendingOrder/ OffGetPendingOrder

Data Obj
Sales ID

transactionId

Description Raised before submitting the Ajax request to obtain a list of committed orders made by a particular customer Raised before submitting the Ajax request to obtain a list of pending orders made by a particular customer.