Adding the Pinterest “Pin it” button to WebSphere Commerce

pinit-aurora1With social media becoming more and more popular many sites offer a “Pin it” button for their products to be posted on Pinterest. If you are working in WebSphere Commerce and modifying the Aurora storefront, here is a quick snippet of code you can put into the ProductDisplay.jsp to enable this functionality.

First thing to do is define the variables that will hold the image URL. I actually stole this code from the product display widget and modified it a little to construct a full URL. You may have to modify this code to actually work in your production environment further.

I modified the ProductDisplay.jsp in the following directory, the change should work in Feature Pack 5 and 6:

C:WebSphereWCToolkitworkspaceStoresWebContentAuroraStorefrontAssetStoreLayouts

Just before the tag in the file, after the other variable declarations put the next code snippet. The modification I made was the request.scheme and the request.serverName. I also changed the object I pulled the metaData variable from for this page. Since WebSphere Commerce can now store multiple images (angle, thumbnail, videos, etc) the loop just looks for the FullImagePath and uses that value. Like I said, you may actually want to pin another image so you can change this code to do that.

<c:forEach var="metadata" items="${catalogNavigationView.catalogEntryView[0].metaData}" varStatus="status2">
 <c:if test="${metadata.key == 'ThumbnailPath'}">
 <c:set var="thumbNail" value="${request.scheme}://${request.serverName}${env_imageContextPath}/${metadata.value}" />
 </c:if> 
 <c:if test="${metadata.key == 'FullImagePath'}">
 <c:set var="fullImage" value="${request.scheme}://${request.serverName}${env_imageContextPath}/${metadata.value}" />
 </c:if>
</c:forEach>

Then, down further in the code where the Facebook integration is you can insert the code from the Pinterest template inside of the . You can see I fill in the url, media, and description tags in the URL.

<a href="//pinterest.com/pin/create/button/?url=${ProductDisplayURL}&media=${fullImage}&description=${metaDescription}" 
 data-pin-do="buttonPin" data-pin-config="beside">
 <img src="//assets.pinterest.com/images/pidgets/pin_it_button.png" />

The result is the Pin it icon will show just below the Facebook like:

pinterest-aurora2

2 thoughts on “Adding the Pinterest “Pin it” button to WebSphere Commerce

  1. Hi Bob, Thanks for it. We are trying to implement this feature and will revertto you in case any issues.

    BTW, we also need to implement ’email’ share option for the Product, using Aurora. DO you you whether Pinterest and Email sharing features are ‘native’ to Aurora starter store?
    How to implemen ’email sharing ‘ in Product detail pages?

    Thanks in advance.

    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