All of the JavaScript used by ATG Store is stored in external .js files that are loaded by the /includes/script.jsp file, which is included in every page on the site. Using these .js files avoids having JavaScript behavior or logic hardcoded into the JSPs.
For a given page, only the JavaScript functions that are required are run. The JavaScript files contain logic that checks the rendered HTML for specific IDs and runs only the functions for which the associated ID is found. This makes the UI code modular and easily transportable between pages.
The included JavaScript files are:
Core Dojo libraries
Rich shopping cart widget
Other ATG Store JavaScript
Core Dojo Libraries
ATG Store uses the Dojo 1.1.1 JavaScript library, which is distributed with the ATG platform in the WebUI module. This library consists of three JavaScript namespaces:
Dojo -- core Dojo functionality
Dijit -- reusable Dojo widgets
DojoX -- experimental functionality
For information about Dojo, go to:
http://www.dojotoolkit.org
Rich Shopping Cart Widget
In addition to the widgets that are included in the Dojo libraries, ATG Store has a rich shopping cart user interface that is implemented as a custom Dojo widget. This widget displays the products in the shopping cart in a dropdown that is available on most pages. For example:
This widget makes it possible for customers to view the items in their cart without leaving the current page. It is implemented through three .js files that extend the standard Dojo widget classes:
/javascript/widget/RichCartSummary.js-- This is main file for the widget. It is responsible for “hijacking” the Add to Cart button, sending Ajax requests and handling responses, and displaying the cart contents./javascript/widget/RichCartTrigger.js-- This file implements the show/hide behavior of the rich cart./javascript/widget/RichCartSummaryItem.js-- This file renders the response when an item is successfully added to the cart.
Each of these files has a corresponding template file in the /javascript/widget/template/ directory.
Other ATG Store JavaScript
ATG Store also includes a number of JavaScript functions that are not implemented as Dojo widgets (although some of them do call Dojo widgets). These functions are stored in the JavaScript files in the /javascript/ directory. These files include implementations of features such as the color/size picker and checkout navigation, as well as code for submitting faceted search requests via Ajax.
Limitations
If JavaScript is disabled in the customer’s browser, most of the store’s JavaScript-based functionality is replaced by equivalent functionality that does not require JavaScript. The main exception is the color/size picker; if JavaScript is disabled, there is no way to select SKUs for a product that uses the picker.
