Customize the functionality of an online store

Applies To: Microsoft Dynamics AX 2012 R3, Microsoft Dynamics AX 2012 R2

The Microsoft Dynamics AX 2012 R2 Retail starter store is a site built by using the commerce runtime (CRT) and the new site authoring and publishing model in Microsoft SharePoint Server 2013. You can use the Retail starter store as a basis for developing your own online store by calling JavaScript methods for supported events. The starter store includes events that correspond to certain shopping activities such as add item to shopping cart and remove item from shopping cart. You can use these events to add functionality of your own, in a way that resembles using the jQuery eventing model. You turn your custom functionality on and off by using methods such as OnAddToCart and OffAddToCart. For example, you can change the message that is displayed when an item is added to the shopping cart.

This topic shows you how to change the message that is displayed when an item is added to the shopping cart. It also lists the methods for the types of events that are available to modify the behavior of the starter store.

To change the message displayed when an item is added to the shopping cart

1. Open a web browser and move to the Welcome page for the starter store. Typically, the URL for the Welcome page resembles the following:

   http://<your-server-name>:40002/sites/RetailPublishingPortal

   Add some items to the shopping cart.

   Note

   Observe the behavior of the page. When you click Add to cart under one of the items, a popup is displayed with the message Updating shopping cart….

2. Navigate to the folders on the computer where the online starter store is deployed. Typically, files that contain JavaScript for the starter store pages are found in a path that resembles the following:

   …\Program Files\Common Files\Microsoft Shared\Web Server Extensions\15\TEMPLATE\LAYOUTS\Storefront\js

3. Open the file Storefront.js. You can use Visual Studio or any editor that you prefer.

4. Find the line that contains msaxServices.OnAddToCart. The following example shows how to modify the code after line 170.

   msaxServices.OnAddToCart(function () {
           // msaxPopupOverlay.show('Updating shopping cart...');
           alert('Adding to cart...');
       });
   

5. Refresh the store pages and add an item to the cart. You see the message Adding to cart… in the message window. Click Ok to continue.

Extending the Functionality of the Online Store

The starter store is designed to be extensible at many points in the shopping experience. For example, you can add the following JavaScript code in any JavaScript file for a page that includes the shopping cart objects. The following example causes a message to display before an item is added to the shopping cart.

var addToCartVM = new Microsoft.Dynamics.Retail.SharePoint.Web.UI.ViewModel.AddToCartViewModel(services, $view);

// Performed before AddToCart
addToCartVM.OnAddToCart(function (event) {
alert('Adding item to cart');
});

Method Names for Supported Events and Objects

The following tables list the method names and objects available for turning on and off functionality for supported events in the view models for the starter store. Typically, the JavaScript code for the view models can be found in a path that resembles the following, after you map a drive to the SharePoint Server 2013 files:

Z:\Scripts\ViewModel

The following table lists methods for Microsoft.Dynamics.Retail.SharePoint.Web.UI.ViewModel.AddToCartViewModel. The code for this view model is found in the file AddToCart.js.

The following table lists methods for the Microsoft.Dynamics.Retail.SharePoint.Web.UI.ViewModel.CheckoutViewModel. The code for this view model is found in the file Checkout.js.

The following table lists methods for the Microsoft.Dynamics.Retail.SharePoint.Web.UI.ViewModel.ShoppingCartViewModel. The code for this view model is found in the file ShoppingCart.js.

The following table lists methods for the Microsoft.Dynamics.Retail.SharePoint.Web.UI.ViewModel.MiniShoppingCartViewModel. The code for this view model is found in the file MiniShoppingCart.js.

See also

How to use F12 Developer Tools to Debug your Webpages