Une navigation dynamique qui intègre des offres de produits, du contenu ou des offres spéciales peut améliorer considérablement l’expérience de l’utilisateur final. Cet article de blog explique une technique qui vous permet d’étendre la navigation pour inclure tout type de contenu.
Actuellement, Sitefinity ne peut afficher que des éléments de type PageNode (c’est-à-dire Pages) dans les contrôles de navigation prêts à l’emploi.
Pour afficher du contenu dynamique, vous avez besoin d’un contrôle de navigation personnalisé, qui sera lié à SitefinitySiteMapDataSource - notre contrôle qui fournit une source de données mise en cache du sitemap des pages. Vous pouvez vous abonner à l’événement ItemDataBound du contrôle de navigation et insérer de nouveaux éléments sous la page souhaitée à l’aide de l’API Sitefinity pour récupérer une collection des éléments de contenu du type souhaité.
Par exemple :
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MixedNavigation.ascx.cs" Inherits="SitefinityWebApp.SupportSamples.MixedNavigation" %>
<%@ Register TagPrefix="sfNav" Namespace="Telerik.Sitefinity.Web.UI.NavigationControls" Assembly="Telerik.Sitefinity" %>
<
sfNav:SitefinitySiteMapDataSource
id
=
"navDataSource"
runat
=
"server"
ShowStartingNode
=
"false"
/>
<
telerik:RadMenu
id
=
"rmNavigation"
runat
=
"server"
DataSourceID
=
"navDataSource"
></
telerik:RadMenu
>
et sa logique code-behind :
using
System;
using
System.Globalization;
using
System.Linq;
using
Telerik.Sitefinity.Modules.Ecommerce.Catalog;
using
Telerik.Sitefinity.Services;
using
Telerik.Sitefinity.Web;
namespace
SitefinityWebApp.SupportSamples
{
public
partial
class
MixedNavigation : System.Web.UI.UserControl
{
protected
void
Page_Load(
object
sender, EventArgs e)
{
//Subscribe to ItemDataBound so you can insert new items under desired node on data binding
rmNavigation.ItemDataBound += rmNavigation_ItemDataBound;
}
void
rmNavigation_ItemDataBound(
object
sender, Telerik.Web.UI.RadMenuEventArgs e)
{
if
(e.Item.DataItem
is
PageSiteNode)
{
var page = e.Item.DataItem
as
PageSiteNode;
//Check if the current item is the desired PageNode
if
(page.Title == ParentPageToPlaceUnder)
{
//Get the collection of items
var manager = CatalogManager.GetManager();
var products = manager.GetProducts()
.Where(p => p.Status == Telerik.Sitefinity.GenericContent.Model.ContentLifecycleStatus.Live && p.visible == true)
.ToList();
//Get the ContentLocationService - it stores the URL statistics for all Sitefinity data items
var contLocationService = SystemManager.GetContentLocationService();
//Get the current culture, to ensure you're resolving the correct URL
var culture = CultureInfo.CurrentUICulture;
//iterate through the collection and add a new item in the navigation with the item's Title and resolved URL
foreach
(var product
in
products)
{
var itemAbsoluteUrl =
""
;
//Please ensure your items are displayed at least on one page in the site, otherwise GetItemDefaultLocation() will be null
//You can get a list of the generated item locations by going to:
//Sitefinity backend -> Content -> Your desired content type -> Pages where items of your content type are published
if
(contLocationService.GetItemDefaultLocation(product, culture) !=
null
)
itemAbsoluteUrl = contLocationService.GetItemDefaultLocation(product).ItemAbsoluteUrl;
e.Item.Items.Add(
new
Telerik.Web.UI.RadMenuItem(product.Title, itemAbsoluteUrl));
}
}
}
}
//You can configure the desired page to insert the new items under - it will be displayed as a public property int he widget property editor as well
public
string
ParentPageToPlaceUnder
{
get
{
return
parentPageToPlaceUnder;
}
set
{
this
.parentPageToPlaceUnder = value;
}
}
//you can configure a default page to insert the new items under
private
string
parentPageToPlaceUnder =
"MyTargetPage"
;
}
}
Pour votre commodité, j’ai joint l’exemple complet à cet article de blog ici, n’hésitez pas à le modifier selon vos besoins spécifiques. Vous pouvez également trouver ici une courte vidéo démonstrative de l’échantillon utilisé sur une page Sitefinity.
Vous pouvez également envisager d’affecter des produits associés ou d’autres données directement aux pages via des champs personnalisés pour les pages, ce qui permettra à vos utilisateurs professionnels de définir exactement quel contenu dynamique personnalisé apparaîtra dans le méga menu. Vous pouvez consulter la documentation d’interrogation des champs personnalisés pour les pages afin de connaître les méthodes d’API à utiliser.