Customize the functionality of an online store [AX 2012]

Updated: April 30, 2014

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.

    NoteNote

    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.

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');
});

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.

Method Name

Data Object Available

Description

OnAddToCart, OffAddToCart

None

Raised on a call to AddToCart.

OnAddToCartSuccess, OffAddToCartSuccess

ShoppingCart

Raised after a successful return from AddToCart.

OnAddToCartFailure, OffAddToCartFailure

None

Raised if no response is returned from a call to AddToCart.

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.

Method Name

Data Object Available

Description

OnCheckout, OffCheckout

None

Raised on a call to the Checkout method.

OnNoItemCheckout, OffNoItemCheckout

None

Raised on a successful response to the AddToCart method.

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.

Method Name

Data Objects Available

Description

OnBeforeRender, OffBeforeRender

ShoppingCart

Raised on a call to the Render method of the shopping cart view.

OnAfterRender, OffAfterRender

ShoppingCart

Raised after execution of the Render method of the shopping cart view.

OnRemoveFromCart, OffRemoveFromCart

ShoppingCart

Raised on a call to the RemoveFromTCart method.

OnUpdateQuantity, OffUpdateQuantity

ShoppingCart

Raised on a call to the UpdateQuantitymethod.

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.

Method Names

Data Objects Available

Description

OnBeforeRender, OffBeforeRender

ShoppingCart

Raised on a call to the Render method of the MiniShoppingCartViewModel.

OnAfterRender, OffAfterRender

ShoppingCart

Raised after execution of the Render method of the MiniShoppingCartViewModel.

OnShow, OffShow

None

Raised on a call to the Show method of the MiniShoppingCartViewModel.

OnHide, OffHide

None

Raised on a call to the Hide method of the MiniShoppingCartViewModel.


Announcements: To see known issues and recent fixes, use Issue search in Microsoft Dynamics Lifecycle Services (LCS).

Community Additions

ADD
Show: