Customizing the Web 2.0 store to show engraving attributes

This section explains how to customize the Web 2.0 store to show engraving attributes.

Procedure

To add engraving fields into your order item jsp, In the Enterprise Explorer view navigate to Stores > WebContent > Madisons > Snippets > Order > Cart

Open OrderItemDetail.jsp and find the following code:


<%-- row to display product level discount --%>
		<c:if test="${!empty orderItem.orderItemAmount.adjustment}">

Input the following code, directly above the lines:


<c:choose>
	<c:when test="${empty orderItem.userData}">
   <%-- This is not an engravable item --%>
   </c:when>
	<c:otherwise>
		<tr>
			<td width="25%" class="right"><b><fmt:message
				key="ENGRAVING_TITLE" bundle="${storeText}" /></b></td>
			<td width="20%" class="left"><c:forEach var="userDataField"
				items="${orderItem.userData.userDataField}">
				<c:if test="${userDataField.typedKey eq
'engravingText'}">
					<input type="text" name="engravingTextField" id="engravingTextField<c:out value="${status.count}" />" size="25" class="input"
value="<c:out value="${userDataField.typedValue}" />">
                        </c:if>
			</c:forEach></td>
			<td width="20%"><select size="1" name="engravingSizeBox"
				id="engravingSizeBox<c:out value="${status.count}" />" class="drop_down_country">				
      <c:forEach var="userDataField"
					items="${orderItem.userData.userDataField}">

					<c:if test="${userDataField.typedKey
eq 'engravingSize'}">
						<c:choose>
							<c:when test="${empty
userDataField.typedValue}">
								<option selected value=''><fmt:message
									key="SIZE_PROMPT" bundle="${storeText}" /></option>
							</c:when>
							<c:otherwise>
								<option selected value="${userDataField.typedValue}">${userDataField.typedValue}</option>
							</c:otherwise>
						</c:choose>
					</c:if>
				</c:forEach>


				<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></td>
			<td width="20%"><select size="1" name="engravingFontBox"
				id="engravingFontBox<c:out value="${status.count}" />" class="drop_down_country">
				<c:forEach var="userDataField"
					items="${orderItem.userData.userDataField}">

					<c:if test="${userDataField.typedKey eq 'engravingFont'}">
						<c:choose>
							<c:when test="${empty userDataField.typedValue}">
								<option selected value=''><fmt:message
									key="FONT_PROMPT" bundle="${storeText}" /></option>
							</c:when>
							<c:otherwise>
								<option selected value="${userDataField.typedValue}">${userDataField.typedValue}</option>

							</c:otherwise>
						</c:choose>
					</c:if>
				</c:forEach>

				<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></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>      
		</tr>
	</c:otherwise>
</c:choose>

Customizing the JavaScript logic to send engraving parameters to Client API

In WebSphere Commerce Developer, open the Enterprise Explorer view and navigate to Stores > WebContent > Madisons > javascript > CheckoutArea.
Open CheckoutHelper.js and add a comma to the end of the last function in the file after the bracket, like this },

Add the new function below to the end of the file


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 testbox.
                // engravingSizeBox: DOM Node
                // DOM node representing the engravingSize testbox.
                // engravingFontBox: DOM Node
                // DOM node representing the engravingFont testbox.
                // 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

Using Windows Explorer, navigate to your WCDE_installdir directory, then workspace/Stores/WebContent/WEB-INF/classes/Madison
Open the storetext.properties file with a text editor

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

Save and close the file