I recently enhanced the new Aurora starter store in WebSphere Commerce to show the percent savings the customer gets between the list price and the offer price. The price may be configured to give a discount to the customer directly based on segmentation or contract, or the price may just be different across the entire site. Either way, this modification works in both cases. Today I am going to walk you through how I made those changes and show how easy it is to enhance the store. Here is the original screen shot of a product page in Aurora:

When I change the price display files the new user interface will now show the percent savings. Here is a snapshot of the new product page:

The price is also reflected in other places like the product compare:

Aurora was pretty much rebuilt to be very flexible. The store code is modular and the data, business logic and user interface is separated out into several JSP’s. The price display function is built in this manner. If you are working in the developer version of the store the files should be under a directory similar to the following path:

\Stores\WebContent\Aurora\Widgets\PriceDisplay

The three files in question are:

• PriceDisplay.jsp
• PriceDisplay_Data.jsp
• PriceDisplay_UI.jsp

I actually only had to modify PriceDisplay_UI and PriceDislay_Data to accomplish this enhancement. The first thing I did was work in the Data file and added the following variable:

<c:set var="percentString" value=""/>

Then down below after we calculate the displayPrice and offerPrice I added this block of code to test if the two prices were set, if one of them weren’t set then we should not show a discount:

<c:if test="${!empty offerPrice}">
 <c:if test="${!empty displayPrice}">
   <c:set var="percentString">
      <fmt:formatNumber value="${1-(offerPrice/displayPrice)}" type="percent" maxFractionDigits="0"/>
    </c:set>

   <c:set var="percentString" value="${percentString} Savings!"/>
 </c:if>
</c:if>

Then in PriceDisplay_UI.jsp I add this to the bottom:

<span id="percentPrice_${catalogEntryID}" class="price" itemprop="price">
    <c:out value="${percentString}" escapeXml="false"/>
</span>

You can change the look and feel or even the position of the savings all you want. That would require some CSS changes or the place in the UI file where the price is shown. I used the same “price” class as the offer price for consistency, but I can see for instance the savings being in italics.