Sitecore : Related Links

In this post, I will make use of Sitecore’s MultilistField data property and bit of code behind how to bind the list of pages to a repeater.

I would assume that you know what is a Sitecore’s MultilistField property and have basic knowledge of Sitecore before you read any further.

Sometimes we have to display related links on the right hand side of the page using Sitecore CMS.

The links are meant to cross-sell or cross-promote other sections of the website.

They cannot be dynamic as they will differ from page to page.

 

Here is the repeater control markup

<asp:PlaceHolder ID="PlaceHolderRelatedLinks" runat="server" >
<div>
<asp:Repeater ID="RepeaterRelatedLinks" runat="server" OnItemDataBound="RepeaterRelatedLinks_ItemDataBound">
<HeaderTemplate><h2>Related links</h2><ul></HeaderTemplate>

<ItemTemplate>
<li>
<asp:HyperLink ID="HyperLinkRelatedLinks" runat="server"></asp:HyperLink>
</li>
</ItemTemplate>

<FooterTemplate></ul></FooterTemplate>
</asp:Repeater>
</div>

</asp:PlaceHolder>

 

Here is the code behind markup

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Sitecore.Data.Items;
using Sitecore.Links;
using Sitecore.Data;

namespace SampleSite.Controls
{
public partial class RelatedLinksControl : System.Web.UI.UserControl
{
protected void Page_Load(object sender, EventArgs e)
{
//get a list of links for the current page "Related Links" property and cast it as MultilistField
Sitecore.Data.Fields.MultilistField relatedLinks = (Sitecore.Data.Fields.MultilistField)Sitecore.Context.Item.Fields["Related Links"];

//Multilist returns list of GUID ids of items, we need to create Sitecore Items before we can
//bind it to the Repeater
List<Item> children = new List<Item>();
//safety first, as foreach loop may break the page if this is null
if (relatedLinks != null)
{
//loop through each ID and create a new Item and add it to list
foreach (string childItem in relatedLinks)
{
children.Add(Sitecore.Context.Database.GetItem(new ID(childItem)));
}

//bind it to the repeater
RepeaterRelatedLinks.DataSource = children;
RepeaterRelatedLinks.DataBind();

}

//your right hand links section will be surrounded with <div> with a coloured background, make sure that
// link only appear if there are some items assigned to the page
if (children.Count > 0)
PlaceHolderRelatedLinks.Visible = true;
else
PlaceHolderRelatedLinks.Visible = false;

}

public void RepeaterRelatedLinks_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
//get the current Item and cast it as Sitecore Item
Item currentItem = (Item)e.Item.DataItem;

//Assign the current item to HyperLink control define on repeater
if (currentItem != null)
{

if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{

HyperLink relatedLink = (HyperLink)e.Item.FindControl("HyperLinkRelatedLinks");
sideNavigation.NavigateUrl = LinkManager.GetItemUrl(currentItem);
sideNavigation.Text = currentItem.Name;

}
}
}
}
}

 

Explanation :

Step 1 : Create a new user control and name it as RelatedLinksControl
Step 2 : Add repeater markup on the code behind (add your custom design)
Step 3 : On Page_Load function, get the list of related links iDs, convert them to Sitecore Items and bind the list to repeater
Step 4 : On RepeaterRelatedLinks_ItemDataBound function, bind the individual items to the link

Assign it to a sub layout or drop it on a layout as you wish

Job done!