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
- Using Windows Explorer, navigate to your WCDE_installdir\workspace\Stores\WebContent\WEB-INF\classes\Madisons directory
- Open storetext_en_US.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
- Navigate to WCDE_installdir\workspace\Stores\src\Madisons and open the storetext_en_US.properties file in this directory.
- Paste the same text into the bottom of this file as well.
- Save and close both of the files.