Updating your store to include dependent JavaScript and CSS

In this lesson, you update your catalog page to include any dependent JavaScript or CSS to resolve errors. By adding these files and changes, you ensure that the style and all of the functionality of your store pages work correctly with a Commerce Composer page layout. To identify the JavaScript files that are causing errors with your store page, view your page in a web browser that includes a debugging tool. With the debugging tool, you can identify the JavaScript files that are causing problems or are missing from your store directory.

Procedure

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\Madisons\javascript directory.
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 following code that defines the MiniShoppingCartController.
```
/** 
* Declares a new refresh controller for the Mini Shopping Cart.
*/
wc.render.declareRefreshController({
id: "MiniShoppingCartController",
renderContext: wc.render.getContextById("MiniShoppingCartContext"),
url: "",
formId: ""

/** 
* Refreshs the mini shopping cart.
* If a new order item is added via an Ajax service call, set the mini shopping cart to display the new order item in the dropdown.
* Otherwise, only refresh the contents of mini shopping cart to the updated order information.
* This function is called when a modelChanged event is detected. 
* 
* @param {string} message The model changed event message
* @param {object} widget The registered refresh area
*/
,modelChangedHandler: function(message, widget) {
var controller = this;
var renderContext = this.renderContext;
if(message.actionId in order_updated || message.actionId == 'AjaxDeleteOrderItemForShippingBillingPage'){
var param = [];
if(message.actionId == 'AjaxAddOrderItem'){
param.addedOrderItemId = message.orderItemId + "";
showDropdown = true;
}
widget.refresh(param);
}
}
```
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, use your web browser 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
  - MiniShopCartDisplay/MiniShopCartDisplay.js
  - collapsible.js
3. In the Enterprise Explorer view, go to the Stores\WebContent\Madisons\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\Madisons\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\Madisons\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>
<script type="text/javascript">
  var storeUserType = "${userType}";
</script>
```
4. Go to the Stores\WebContent\Madisons\ShoppingArea\CatalogSection\CatalogEntrySubsection directory.
5. Open the ProductDisplay.jsp file for editing.
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\Madisons\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\Madisons\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");
dojo.require("dojo.dnd.Source");
```
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 Madisons 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\Madisons\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.