Integrating Multiple Add-Ons to ASPDotNetStorefront

Est. Reading Time: 3 minutes

In a recent project, I combined a couple different Add-ons for ASPDotNetStorefront provided by VibeCommerce. These included the Product Compare Add-on with the Attributes Add-on. Together, these create an aesthetically appealing product listing page.

In short, the Product Compare add-on allows you to select products off the listing page and generate a page built for comparing product information.  The Attributes add-on allows products to be filtered, sorted, searched, and provides a clean interface to browse the products.  Although these instructions are aligned to version 8, it is just as possible to accomplish with version 9, given you’ve got the right products versions from Vibe.  The end result, after styling looks something like this:

In order to integrate the two, we have to tear apart the XML Packages provided for each add-on.  Once downloaded and installed according to the documentation, its first required that you set your product categories (in Admin) to use the correct ‘Display Format XmlPackage’ which is : ‘entity.vibe.trib.xml.config’.  Once this is completed navigate and open:

/site_root/XML Packages/entity.vibe.trib.xml.config



*If using XML Package within skin subdirectories, be sure to have a copy of the default/stock XML Package in the root XML Package directory.

Rather than having you switch between the Product Compare Package and the Attributes Package, the code to add into the Attributes package will be provided.  Within the ‘entity.vibe.xml.config’ file, you need to find the following lines of code (~196)  in red and add the code in green:

<script src=”jscripts/vibe/jquery.history.js” type=”text/javascript”>var a=1;</script> <script src=”jscripts/vibe/vibe.trib.core.js” type=”text/javascript”>var a=1;</script> <script src=”jscripts/vibe/vibe.pc.js” type=”text/javascript”></script>

You can find the code in green within the ‘vibe.productcompare.xml.config’ file or copy it here directly

Once you have the JavaScript referenced, we need to add the Product Compare Checkboxes in the listing page using the following:

<p> Add to Compare: <input value=”{ProductID}” id=”chkProduct_{ProductID}” name=”chkProduct” type=”checkbox” /> </p>

The placement of this code ought to be relative to the products in your XML Package.  In the above example, it follows the price and description.  Find the line (~619) with:

<a class=”productResultImgLink” href=”{aspdnsf:ProductandEntityLink(ProductID, SEName, $EntityID, $EntityName, 0)}”> <xsl:value-of select=”aspdnsf:LookupProductImage(ProductID, ImageFileNameOverride, SKU, ‘icon’, 0, $AltText)” disable-output-escaping=”yes” /> </a>


</div> </xsl:template>

Lastly, we need to throw the Compare button somewhere on the page to generate the product compare page.  Location isn’t a very strict requirement when adding it to the page, however some places are more effective and appealing than others.  I found that putting the button on the top and bottom paging menus looked suitable.  The code for the button, regardless of where you put it is:

<div align=’right’ class=’addToCompare’> <input type=’button’ onclick=’onPCSubmit()’ value=’Compare’ /> </div>

Now both add-ons are integrated into the Attribute Add-on.  Happy styling!