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