Customize the Web 2.0 store to show engraving attributes

Tutorials > Program model > Web services > Customize Web 2.0 and Web services to support customization of the OrderItem noun using the UserData field

< Previous | Next >

Customize 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 the 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}" />
                " >
                <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}" />
                " >
                <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%"><input type="button" class="button" value="Save"
                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}' /></td>
        </tr>
    </c:otherwise>
</c:choose>

Customize 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 the text to the properties file

Use Windows Explorer, navigate to the WCDE_INSTALL directory, then workspace/Stores/WebContent/WEB-INF/classes/Madison2
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

< Previous | Next >