Feature Pack 5 or later

Creating a JavaScript file for adding selected products into shopping cart

Feature Pack 5 or laterIn this lesson, you implement the function to add a product into a shopping cart for a recipe.

About this task

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

Procedure

  1. Create RecipeDisplay.js.
    1. In the Enterprise Explorer view, expand Stores > WebContent > Aurora > 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\Aurora\javascript\Recipe, where TutorialSource is the location where you extracted the Tutorial sample source code. Select the RecipeDisplay.js file.
  2. Modify RecipeDisplay.jsp to use RecipeDisplay.js
    1. In the Enterprise Explorer view, expand Stores > WebContent > Aurora > Layouts.
    2. Open the RecipeDisplay.jsp file.
    3. Include RecipeDisplay.js.
      In the RecipeDisplay.jsp file, add the following code into the head section.
      <script type="text/javascript" 
      	src="${jsAssetsDir}javascript/Recipe/RecipeDisplay.js"></script>
      
    4. Include ServicesDeclaration.js. This file declares the AjaxAddOrderItem service.
      Add the following code into the head section
      <script type="text/javascript" src="${jsAssetsDir}javascript/ServicesDeclaration.js"></script>
    5. Add the initialization code.
      In the RecipeDisplay.jsp file, find the following code:
      <script type="text/javascript">
      	dojo.addOnLoad(function() { 
      		shoppingActionsJS.setCommonParameters	('${langId}','${storeId}','${catalogId}','${userType}',
      			'${env_CurrencySymbolToFormat}');
      		shoppingActionsServicesDeclarationJS.setCommonParameters('${langId}','${storeId}','${catalogId}');
          	});    
      </script>
      Replace the code that you found with the following code:
      <script type="text/javascript">
      	dojo.addOnLoad(function() { 
      	shoppingActionsJS.setCommonParameters('${langId}','${storeId}','${catalogId}','${userType}','${env_CurrencySymbolToFormat}');
      	shoppingActionsServicesDeclarationJS.setCommonParameters('${langId}','${storeId}','${catalogId}');
      	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('${langId}','${storeId}','${catalogId}');
      	});
      </script>

      The preceding code initializes MessageHelper and the JavaScript function uses the messages by MessageHelper; recipeDisplayJS.setCommonParameters() sets the initialization of RecipeDisplay.js.

    6. In the Enterprise Explorer view, expand Stores > WebContent > Aurora > Widgets > RecipeDetail.
    7. Open the RecipeDetail_UI.jsp file.
    8. Set href value to point to the JavaScript function.
      In the RecipeDetail_UI.jsp file, search for id="WC_recipe_addtocart_1" and set the href attribute to resemble the following code:
      href='javascript: recipeDisplayJS.AddRecipeIngredients2ShopCartAjax("materialForm")'
      
      Note: This href attribute value invokes the AddRecipeIngredients2ShopCartAjax function when you click Add the selected products to Cart.