Sitefinity Ecommerce - Adding related products

Sitefinity Ecommerce - Adding related products

June 28, 2012 0 Comments

The content you're reading is getting on in years
This post is on the older side and its content may be out of date.
Be sure to visit our blogs homepage for our latest news, updates and information.

Out of the box, Sitefinity Ecommerce V5 does not have an interface for relating products to each other.  This feature is currently in design, but until it is released, I would like to show you how you can create related products using the API and creating a custom view based on products tags.  

How it works

In Sitefinity Ecommerce, you have the ability to add tags (taxonomies) to products (EX: software, on sale or women's clothing).    Sitefinity supports simple tags, categories, facet, and network taxonomies. These advanced taxonomies allow powerful relationships to be represented in Sitefinity.   By creating a custom view (using the default view as a template),  you can select products which have a the same tag of the main product and show related products under the main product details.  Below is the code for the ProductDetailViewCustom.ascx.cs.   This should help to give you a better understanding of how to select products based on a tag.

Getting Started

To begin, add 3 separate products into the Sitefinity backend and add the tag “example” to all 3 products.  Edit the page which has the product list control on it and click on the edit properties of the product list control.  Next, click on the “Advanced” button at the bottom of the control property window, then click on the button “ControlDefinition”.   In the ControlDefinition, scroll down to the bottom and click on “Views”.   In the views window, you will see 4 different views, select the ProductFrontendDetails which will bring you to the properties for the front end (public facing) views.

aa2012-06-27_1703

In the view window, scroll down to the bottom until you find TemplatePath, this is where you want to add the location of your view/template.  In my example, I am using “~/Widgets/Views/RelatedProductsRadRotator/ProductDetailViewCustom.ascx” as my path.   Click on the “Save” button at the bottom then publish the page and your are done.

In my example below, I am using the RadRotator for listing my Related Products, however I am also including another example of using the RadListControl.  Both views can be used but not at the same time.  Only 1 view can be included in the project as both examples have the same class name.

cc2012-06-27_1708

 

Download Examples

Go to https://gist.github.com/3007808 to download this example using the RadRotator showing related products. 

Go to https://gist.github.com/3007820 to download this example using the RadList control showing related products.

NOTE:  This template can be outdated. Please use the latest product details template included in Sitefinity version that you use and just add the RelatedProducts section to it.

Video of Example

 

Credit goes to Boyan Barnev for writing this code.  (Thank you B!)

progress-logo

The Progress Team

View all posts from The Progress Team on the Progress blog. Connect with us about all things application development and deployment, data integration and digital business.

Comments
Comments are disabled in preview mode.
Topics
 
 
Latest Stories in
Your Inbox
Subscribe
More From Progress
New_Mobile_Dev_Ebook_Progress_Website_Thumbail
The New Mobile Development Landscape
Download Whitepaper
 
IDC Spotlight Sitefinity Thumbnail
Choosing the Right Digital Experience Platform to Improve Business Outcomes
Download Whitepaper
 
TheFastestWayToBuildMobileAppsArtboard-2
The Fastest Way to Build Mobile Apps With Cloud Data
Watch Webinar