Customizing the store

This section explains how to customize the store by adding engraving fields into your order item JSP file.

Procedure

In the Enterprise Explorer view navigate to Stores > WebContent > Deprecated featureMadisons > Snippets > Order > Cart

Note: If the Deprecated featureMadisons folder does not appear, right-click WebContent and refresh the folder.

Open the OrderItemDetail.jsp file. Click the source code, click the Source tab and find these two lines of code:

<c:forEach var="discounts" items="${orderItem.orderItemAmount.adjustment}">
   <c:if test="${discount.displayLevel == 'OrderItem'}">

Input the below code, directly above the two lines of code:

<c:choose>
  <c:when test="${!empty orderItem.engravingText}">
<%-- This is an engravable item --%>
<c:forEach var="i" begin="0" end="${fn:length(orderItem.engravingText)-1}">
  <tr>
    <td width="25%">
  <b><fmt:message key="ENGRAVING_TITLE" bundle="${storeText}"/></b>
    </td>
    <td width="20%">
  <input type="text" name="engravingTextField" id="engravingTextField<c:out value="${status.count}"/>" size="25" class="input" value="<c:out value="${orderItem.engravingText[i].value}"/>">
   </td>
   <td width="20%">
   <select name="engravingSizeBox" id="engravingSizeBox<c:out value="${status.count}"/>" class="drop_down_country">
     <c:choose>
       <c:when test="${empty orderItem.engravingText[i].size}">
         <option selected value=''><fmt:message key="SIZE_PROMPT" bundle="${storeText}"/></option>
       </c:when>
       <c:otherwise>	                    
         <option selected value="${orderItem.engravingText[i].size}">${orderItem.engravingText[i].size}</option>
       </c:otherwise>
     </c:choose>
     <option value='<fmt:message key="SIZE_OPTION1" bundle="${storeText}"/>'><fmt:message key="SIZE_OPTION1" bundle="${storeText}"/></option>
     <option value='<fmt:message key="SIZE_OPTION2" bundle="${storeText}"/>'><fmt:message key="SIZE_OPTION2" bundle="${storeText}"/></option>
     <option value='<fmt:message key="SIZE_OPTION3" bundle="${storeText}"/>'><fmt:message key="SIZE_OPTION3" bundle="${storeText}"/></option>
     <option value=''></option>
	  </select>
     </td>
     <td width="20%">
   <select name="engravingFontBox" id="engravingFontBox<c:out value="${status.count}"/>" class="drop_down_country">
     <c:choose>
     <c:when test="${empty orderItem.engravingText[i].font}">
       <option selected value=''><fmt:message key="FONT_PROMPT" bundle="${storeText}"/></option>
     </c:when>
     <c:otherwise>
       <option selected value="${orderItem.engravingText[i].font}">${orderItem.engravingText[i].font}</option>
     </c:otherwise>
     </c:choose>
     <option value='<fmt:message key="FONT_OPTION1" bundle="${storeText}"/>'><fmt:message key="FONT_OPTION1" bundle="${storeText}"/></option>
     <option value='<fmt:message key="FONT_OPTION2" bundle="${storeText}"/>'><fmt:message key="FONT_OPTION2" bundle="${storeText}"/></option>
	    <option value='<fmt:message key="FONT_OPTION3" bundle="${storeText}"/>'><fmt:message key="FONT_OPTION3" bundle="${storeText}"/></option>
     <option value=''></option>
   </select>
     </td>
     <td width="15%">
	      <span class="secondary_button button_fit" id="WC_SaveButton_div_1">
     <span class="button_container">
       <span class="button_bg">
         <span class="button_top">
           <span class="button_bottom">   
              <a href="#" onclick="CheckoutHelperJS.updateCartEngraving(document.getElementById('engravingTextField<c:out value="${status.count}"/>').value, document.getElementById('engravingSizeBox<c:out value="${status.count}"/>').value, document.getElementById('engravingFontBox<c:out value="${status.count}"/>').value, '<c:out value='${orderItem.orderItemIdentifier.uniqueID}'/>');" class="button_text" id="WC_Save_links_1">
                Save
                <span class="spanacce">Save</span>
              </a>
            </span>
          </span>
        </span>       
      </span>
    </span>       
      </td>
 		</tr>
</c:forEach>
		</c:when>
</c:choose>
}

Customizing the java script logic to send engraving parameters to Client API

In the Enterprise Explorer view navigate to Stores > WebContent > Madisons > javascript > CheckoutArea
Open the CheckoutHelper.js file. At the bottom of the file find the second last bracket, this bracket represents the end of the block for the last function. Add a comma after this bracket, like this },

Copy the new function below into the file after your comma but before the last bracket. The last bracket represents the end of the CheckoutHelper.js block and your new function must exist inside. Save and close CheckoutHelper.js

updateCartEngraving:function(engravingTextBox,engravingSizeBox,engravingFontBox, orderItemId){
			// summary : This function updates the Order to include engraving information
			// description : This function updates the Order with new engraving specified by user for
			// particular order item. Text, font and size are sent to the Client API
			// engravingTextBox: DOM Node
			// DOM node representing the engravingText textbox.
			// engravingSizeBox: DOM Node
			// DOM node representing the engravingSize textbox.
			// engravingFontBox: DOM Node
			// DOM node representing the engravingFont textbox.
			// orderItemId : Number
			// OrderItemId for the Item being updated.
			// assumptions : None.
			// dojo API : None.

			var engravingText = engravingTextBox;
			var engravingSize = engravingSizeBox;
			var engravingFont = engravingFontBox;

			var params = [];
			params.orderId = ".";
			params["storeId"] = this.storeId;
			params["catalogId"] = this.catalogId;
			params["langId"] = this.langId;
			this.updateParamObject(params,"orderItemId",orderItemId,false,-1);
			this.updateParamObject(params,"engravingText",engravingText,false,-1);
			this.updateParamObject(params,"engravingSize",engravingSize,false,-1);
			this.updateParamObject(params,"engravingFont",engravingFont,false,-1);
			wc.service.invoke("AjaxUpdateOrderItem",params);
			cursor_wait();

Add your text to the properties file
1. Using Windows Explorer, navigate to your WCDE_installdir\workspace\Stores\WebContent\WEB-INF\classes\Madisons directory
2. Open storetext_en_US.properties file with a text editor
3. Paste the below text into the bottom of the file
```
#Engravings for Checkout Page
ENGRAVING_TITLE=Engraving Text:
SIZE_PROMPT=Select Size
FONT_PROMPT=Select Font
SIZE_OPTION1=Small
SIZE_OPTION2=Medium
SIZE_OPTION3=Large
FONT_OPTION1=Arial
FONT_OPTION2=Tunga
FONT_OPTION3=Courier
```
4. Navigate to WCDE_installdir\workspace\Stores\src\Madisons and open the storetext_en_US.properties file in this directory.
5. Paste the same text into the bottom of this file as well.
6. Save and close both of the files.