Coding Commerce: Extending the Price display widget for consumable products

Commerce systems are getting more and more advanced and specifically in the B2B space you are seeing more and more information about products on the product page or even in product listings. We see things like color swatches, likes, ratings, reviews, etc in the B2C world but in the B2B world its all about value. This little change to WebSphere Commerce (and I mean little, a few lines of JSP code) should spice up your site to show the value of your consumable products. Here is a picture of a somewhat normal looking product display search result. We will be enhancing this with the price per page based on the contract price of the customer:

Screen Shot 2014-12-11 at 5.12.26 PM

 

I present to you a pattern. A pattern you can use across all consumable products in your catalog. The pattern is generic and can be applied to any product simply by assigning an attribute. Let’s start with an example, a printer cartridge. Most printer cartridges, especially high-end business printers, come with a max number of page the cartridge should be good for, like 500, 1000, 10,000, or 20,000 pages. From a business perspective it would be good to know how much you are paying per page so a product listing like this might just do the trick:

Screen Shot 2014-12-11 at 2.18.15 PM

The first thing we need to understand is how the widget framework is set up so we can find the code we need to change. To get a consistent look and feel, the Aurora storefront uses shared code throughout the store for the price display. The above picture is from the search or category results page while the photo below is from the product page – both places use the same underlying JSP code.

The product page may look like this ( I have outlined the NamePartNumberAndPrice widget in red).

Screen Shot 2014-12-11 at 3.07.07 PM

In Commerce Composer, this widget is assigned to a slot on the product page. In this case, the widget is assigned to Slot 5 as highlighted below:

Screen Shot 2014-12-11 at 3.16.44 PM

Next, we define an attribute in the attribute dictionary. The key is to create a new attribute with assigned values, this allows the marketing team to supply the value when the product is created:

AssignedValuesYou then assign the attribute and its value to the product in the Descriptive Attributes tab:

ConsumableAttribute

Feel free to add this to many products. You might want to also make the attribute facetable so it shows up as a filter for categories and search results.

Now for some coding!

Now that we have some products set up let’s dive into the code.  I will assume you are using Eclipse or Rational Application Developer(RAD) for this, however, you could also use Notepad or any other editor. Using RAD or Eclipse will modify the parent JSP files for you automatically when the .jspf file is modified so they will all be compiled on the next browser refresh – this makes testing out the code very easy.

As I stated earlier, the widget uses re-usable code. Each widget has a primary JSP, a Data JSP fragment, and a User Interface JSP fragment. You can find the widgets in your WebContent directory, most likely under a widgets subdirectory. On my machine the subdirectory is Widgets_701:

widget-structure

The JSP’s and fragments then call out to the common code layer which should be located in the same widgets directory under common. The directory we are looking for is PriceDisplay, which should look very familiar to the base widget directory structure:

price-display-path

We will first edit the PriceDisplay_Data.jspf. We need to insert these lines pretty much anywhere in the file. I inserted them around line 70:

[codesyntax lang=”xml”]

<c:set var="consumableProductValue" value="0"/>
 
<c:forEach var="attr" items="${catalogEntryDetails.attributes}" varStatus="innerStatus">
 <c:out value='${attr.value}'/>
 <c:if test="${attr.identifier == ‘ConsumableProduct'}">
 <c:set var="totalPages" value="${attr.values[0].value}"/>
 </c:if>
</c:forEach>

[/codesyntax]

Let’s step through this code. The first line creates a new variable where we will store the value of the attribute and assign its initial value to zero. We then loop through all the attributes on this product and look for our ConsumableProduct attribute. If we find it, we assign our variable (consumableProductValue) to the value in the attribute.

Next, we will edit the PriceDisplay_UI.jspf and print out our string. Insert the code before into the end of the when test statement around line 37. Here we check to see if consumableProductValue does not equal zero and if so print out the cost per <whatever>.

[codesyntax lang=”xml”]

<%-- If the price string has been set, then we simply print it out. --%>
<c:when test="${!empty priceString}">
 
 ...
 
 
<c:if test="${consumableProductValue ne '0'}">
 <c:set var="pricePerPage">
 <fmt:formatNumber value="${ offerPrice / consumableProductValue}" type="currency" currencySymbol="${env_CurrencySymbolToFormat}" maxFractionDigits="4"/>
 </c:set>
 <br><span class=“ConsumableCost”><c:out value='${ pricePerPage }'/> per page</span>
 </c:if>
</c:when>
	

[/codesyntax]

One enhancement to this would be to put the string “per page” into one of the extension fields of the attribute and print that out. This way this one attribute could be used for all kinds of consumable products. The other method is to have different attributes for different consumable types – your choice.

So in closing, this is a very easy extension to the Price Display. Some products that might use this kind of feature:

  • Toner cartridges
  • Packages of paper
  • Light bulbs
  • Laundry Detergent
  • etc

Please feel free to post any comments if and you think this blog post was helpful!

2 thoughts on “Coding Commerce: Extending the Price display widget for consumable products

  1. Pingback: Coding Commerce: Showing the shopper which items they already purchased | Bob's Blog

  2. We were unable to use the PriceDisplay_UI.jspf/PriceDisplay_Data.jspf under Ext folder. When we analyzed the custom_view/custom_data parameter needs to be passed in the parent JSP (in our case CatalogEntryList.jsp) which includes both PriceDisplay.jspf CatalogEntryList_grid_UI.jspf controlled by the custom_view/custom_data parameter. For instance, when we passed custom_view parameter as true, the CatalogEntryList_grid_UI.jspf was not getting called while extending price display functionality.

    Is there any other way to use the Extension point for the price display widget

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s