Updating a store to include dependent JavaScript and CSS from the Aurora starter store

After you update the JSP files for your store catalog pages, update your store directory structure to include any dependent JavaScript, CSS, and images. By default, Commerce Composer widgets are depended on the assets that are included within the Aurora starter store archive. To ensure that your store pages can display and use Commerce Composer widgets, you must copy the dependent assets into you store directory structure.

The Commerce Composer widgets depend on the following types of assets that are included with the Aurora starter store archive:

JavaScript files, which provide some general functions for store pages, such as showing error messages, adding items to the shopping cart, indicating the progress of store functions, and more.
CSS files, which define the default styling for Commerce Composer widgets.
Images, which your store pages can display to shoppers in widgets.

By adding these files, the Commerce Composer widgets can function and display content correctly in the layout for your updated store pages. After you verify that your store pages display and function correctly, you can update the CSS and other files to match the styling and branding that your store requires.

Note: The following steps add files common for a catalog entry Product Details page as an example, however your store catalog page might require you to add different JavaScript and CSS files.

Procedure

Update the JavaScript files for your starter store pages

Update the CommonControllerDeclaration.js JavaScript file for your store.
1. In a file manager, go to the tempAuroraDir\StoreAssetsDir\javascript directory, where tempAuroraDir is the temporary directory where you extracted the Aurora.sar archive.
2. Copy the CommonControllerDeclaration.js file.
3. In the Enterprise Explorer view, go to the Stores\WebContent\store\javascript directory, where store is the name of your store directory, for instance AuroraESite.
4. Back up the CommonControllerDeclaration.js file.
5. Add the copied file into the javascript directory for your store to overwrite the original file for your store.
6. Open the backup version of your CommonControllerDeclaration.js file for editing.
7. Copy the code that defines the MiniShoppingCartController.
8. Open the CommonControllerDeclaration.js file that you copied from the StoreAssetsDir\javascript directory for editing.
9. Add the copied MiniShoppingCartController code into your new CommonControllerDeclaration.js file.
10. Save and close the file.
Note: When you are updating other store pages, view the page in a web browser that includes a debugging tool to identify any missing JavaScript functions. Compare your backed up CommonControllerDeclaration.js file with the version of the file you copied from the Aurora store archive to locate the code that you must add to the copied file.
Add the JavaScript files that the Commerce Composer widgets require into your starter store directory structure.
1. In a file manager, go to the tempAuroraDir\StoreAssetsDir\javascript\Widgets directory.
2. Copy the following files:
  - ProductTab\ProductTab.js
  - ShoppingList\ShoppingList.js
  - ShoppingList\ShoppingListController.js
  - ShoppingList\ShoppingListServicesDeclaration.js
  - collapsible.js
3. In the Enterprise Explorer view, go to the Stores\WebContent\store\javascript directory.
4. Create the Widgets folder within the javascript folder.
5. Add the copied files into the new Widgets directory.
6. In a file manager, go to the tempAuroraDir\StoreAssetsDir\javascript directory.
7. Copy the Common directory and files.
8. In the Enterprise Explorer view, add the copied directory into the Stores\WebContent\store\javascript directory.
Update your store page to use the common JavaScript files that you moved into your starter store directory structure.
For example, to update the Product Details page, update the main JSP for the page to use the shopping action JavaScript files.
1. Go to the Stores\WebContent\store\Common directory.
2. Create the CommonJSToInclude.jspf file.
3. In the file, add the following code:
```
<script type="text/javascript" src="${jsAssetsDir}javascript/Common/ShoppingActions.js"></script>
<script type="text/javascript" src="${jsAssetsDir}javascript/Common/ShoppingActionsServicesDeclaration.js"></script>
```
4. Go to the Stores\WebContent\store\ShoppingArea\CatalogSection\CatalogEntrySubsection directory.
5. Open the Updated JSP file for your catalog store page for editing.
  For example, ProductDisplay.jsp
6. Add the following code to call the new CommonJSToInclude.jspf file and use the JavaScript files included in the JSP fragment:
```
<%@ include file="../../Common/CommonJSToInclude.jspf" %>
```
7. Save and close the file.
Update the StoreCommonUtilities.js JavaScript file for your store.
1. Go to the Stores\WebContent\store\include directory.
2. Open the CommonJSToInclude.jspf file for editing.
3. Add the following code into the beginning of the file:
```
<script type="text/javascript" src="${jsAssetsDir}javascript/StoreCommonUtilities.js"></script>
```
4. In a file manager, go to the tempAuroraDir\StoreAssetsDir\javascript directory.
5. Open the StoreCommonUtilities.js file for editing.
6. Copy the following methods within the file:
  - outlineSpots()
  - hideESpotInfoPopup()
  - showESpotInfoPopup()
7. In the Enterprise Explorer view, go to the Stores\WebContent\store\javascript directory.
8. Open the StoreCommonUtilities.js file for editing.
9. Add the copied methods into the file.
10. Add the following code into the file to load the dojo.topic module to enable your store pages to publish and subscribe to Dojo events:
```
dojo.require("dojo.topic");
```
11. Comment out the code in parseWidget(id), but do not comment out the function declaration.
12. Save and close all files.

Update the CSS for your store page to use CSS for Commerce Composer assets.

Add the CSS files from Aurora starter store directory structure into your starter store directory structure.
1. In a file manager, go to the tempAuroraDir\StoreAssetsDir\css directory.
2. Copy the following files:
  - base.css
  - styles.css
  - CMC.css
3. In the Enterprise Explorer view, go to the Stores\WebContent\store\css directory.
4. Add the copied files into this directory. Rename the copied base.css file to be gridsystem.css.
Update the common1_1.css file for your store to use the CSS files you added.
1. Go to the Stores\WebContent\store\css directory.
2. Open the common1_1.css file for editing.
3. Add the following code to import the new CSS files for your store:
```
@import url("gridsystem.css");
@import url("styles.css");
@import url("CMC.css");
```
4. Save and close the file.
Verify that your updated catalog store page displays correctly in your store and is not missing any dependent assets from the Aurora starter store archive.
1. In a web browser that is configured with a debugging tool for viewing the source code for a page, Open the Commerce Composer tool..
2. Select your store from the Store list.
3. Expand the Catalog Pages for store directory in the Explorer view. Browse to the catalog page that you updated and assigned a layout to when you completed the Updating a catalog store page to use the Commerce Composer framework task.
4. Right-click the page. Click Open.
5. Click Save and Preview to preview your updated catalog page, for instance, the Product Details page, again.
  Ensure that the page now displays the assigned Commerce Composer layout without any errors or missing dependent files. If your file is not missing any files or content, your catalog page and store is successfully updated to use Commerce Composer.
  If your page is missing depended files or content, view the source code that displays in your browser to determine the missing files. Add the missing files into your store directory and then preview your page again. Use the previous steps as a guide for adding the files into your store.