Creating JavaScript file for adding selected products into shopping cart

In this step of the tutorial, you implement the function to add a product into a shopping cart for a recipe.

About this task

You will create a JavaScript function to call the AjaxAddOrderItem service. This function will parse the product ID from the recipe display page, and then pass the product ID to the service. This is very similar to "add to shopping cart" for bundles. You can read the AddBundle2ShopCartAjax function in the CategoryDisplay.js file as reference.

Procedure

Create RecipeDisplay.js.
1. In the Project Explorer view, expand Stores > WebContent > Deprecated featureMadisons > javascript
2. Right-click the javascript folder and select New > Folder
3. In the Folder name field, enter Recipe
4. Right-click the Recipe folder and select Import. Expand > General > File System.
5. Click Next , then click Browse and navigate to TutorialSource\RecipeTool\Stores\WebContent\Madisons\ShoppingArea\javascript\Recipe directory, where TutorialSource is the location where you unzipped the Tutorial sample source code. Select the RecipeDisplay.js file.
Modify RecipeDisplay.jsp to use RecipeDisplay.js
1. Include RecipeDisplay.js.
  In the RecipeDisplay.jsp file, add the following code into the head section.
```
<script type="text/javascript"
   src="<c:out value="${jspStoreImgDir}javascript/Recipe/RecipeDisplay.js"/>"></script>
```
2. Add the initialization code.
  In the RecipeDisplay.jsp file, add the following code into the head section.
```
<script type="text/javascript">
    dojo.addOnLoad(function() { 
        MessageHelper.setMessage("NO_SELECTED_PRODUCTS", "<fmt:message key="NO_SELECTED_PRODUCTS" bundle="${storeText}"/>");
        MessageHelper.setMessage("SHOPCART_ADDED", "<fmt:message key="ProjectAddtoCartSucessInfo" bundle="${storeText}"/>");
        recipeDisplayJS.setCommonParameters('${WCParam.langId}','${WCParam.storeId}','${WCParam.catalogId}');
    });    
</script>
```
  The above code will initialize MessageHelper and the JavaScript function will use the messages by MessageHelper; recipeDisplayJS.setCommonParameters() sets the initialization of RecipeDisplay.js file.
3. Set href value to point to the JavaScript function.
  In the RecipeDisplay.jsp file, search for id="WC_recipe_addtocart_1" and set the href attribute.
```
href='javascript: recipeDisplayJS.AddRecipeIngredients2ShopCartAjax("materialForm")'
```
  Note: Setting the href attribute to the above value will invoke the AddRecipeIngredients2ShopCartAjax function when you click Add the selected products to Cart.
4. Search for <div id="body588">. Add <%@ include file="../../include/MessageDisplay.jspf"%> underneath.
Verify this task.
1. Browse a recipe
2. Click Add the selected products to Cart. Confirm the product is added to the shopping cart.
3. Do not select any checkbox and click Add the selected products to Cart again. Confirm the alert message displays.