Page 1 of 1
Add breadcrumbs trail to webpage layout
Posted: Thu Apr 06, 2017 5:52 am
by ChipWV
I'm working on moving our blog over to use the AC blog setup. While not the best, it will accomplish my goals and use a familiar interface. I'm using the most current version of Gold. The current webpage structure does not show breadcrumbs, and navigation is not the best to start with, so I feel adding breadcrumbs will be the quickest way to improve it.
I've searched and cannot find any help on implementation on recent versions. I did a quick attempt, but do not get any results.
Thanks in advance for any help,
Chip
Re: Add breadcrumbs trail to webpage layout
Posted: Fri Apr 07, 2017 3:41 am
by nadeem
Hi Chip,
Please create a copy of the ConLib/CategoryBreadCrumbs.ascx control, rename it to something like BlogBreadCrumbs.ascx. Now change the code in .cs file a bit and add use the BlogBreadCrumbs control to the new layout you have created for blog.
In BlogBreadCrumbs.ascx.cs file you have to make following changes:
1. locate
and replace with
Code: Select all
int _CategoryId = 0;
int _WebPageId = 0;
2. locate
Code: Select all
public int CategoryId
{
get { return _CategoryId; }
set { _CategoryId = value; }
}
and replace with
Code: Select all
public int CategoryId
{
get { return _CategoryId; }
set { _CategoryId = value; }
}
public int WebPageId
{
get { return _WebPageId; }
set { _WebPageId = value; }
}
3. Locate
Code: Select all
this.CategoryId = AbleCommerce.Code.PageHelper.GetCategoryId();
and replace with
Code: Select all
this.CategoryId = AbleCommerce.Code.PageHelper.GetCategoryId();
this.WebPageId = AbleCommerce.Code.PageHelper.GetWebpageId();
4. If your web pages aren't in a category, you have to comment out the code category check inside Page_PreRender
It becomes something like this
Code: Select all
protected void Page_PreRender(object sender, System.EventArgs e)
{
HomeLink.NavigateUrl = AbleCommerce.Code.NavigationHelper.GetHomeUrl();
//if (this.CategoryId != 0)
//{
IList<CatalogPathNode> path = CatalogDataSource.GetPath(CategoryId, WebPageId, CatalogNodeType.Webpage, false);
BreadCrumbsRepeater.DataSource = path;
BreadCrumbsRepeater.DataBind();
if ((HideLastNode) && (BreadCrumbsRepeater.Controls.Count > 0))
{
BreadCrumbsRepeater.Controls[(BreadCrumbsRepeater.Controls.Count - 1)].Visible = false;
}
//}
//else BreadCrumbsRepeater.Visible = false;
}
In the new blog layout under Website/Layouts, locate
Code: Select all
<%@ Master Language="C#" AutoEventWireup="true" MasterPageFile="~/Layouts/Base.Master" Inherits="AbleCommerce.Layouts.Base" %>
and replace with
Code: Select all
<%@ Master Language="C#" AutoEventWireup="true" MasterPageFile="~/Layouts/Base.Master" Inherits="AbleCommerce.Layouts.Base" %>
<%@ Register src="~/ConLib/BlogBreadCrumbs.ascx" tagname="BlogBreadCrumbs" tagprefix="uc1" %>
Similarly, locate
Code: Select all
<asp:ContentPlaceHolder ID="PageContent" runat="server">
[page body]
</asp:ContentPlaceHolder>
and replace with
Code: Select all
<asp:ContentPlaceHolder ID="Breadcrumbs" runat="server">
<uc1:BlogBreadCrumbs ID="BlogBreadCrumbs1" runat="server" />
</asp:ContentPlaceHolder>
<asp:ContentPlaceHolder ID="PageContent" runat="server">
[page body]
</asp:ContentPlaceHolder>
Hope this will help. Let me know if you have any issue making it work.
Thanks!
Nadeem
Re: Add breadcrumbs trail to webpage layout
Posted: Fri Apr 07, 2017 9:00 am
by ChipWV
Hi Nadeem,
Thanks for your help! I followed your instructions and had a mixed result. I did get the bread crumbs on the webpage, but I ended up getting them on the Blog category page too. I also lost other controls I had on the page, like new products on the right column, and simple category control on the right.
I'm assuming I'd need to hard conde those controls as well, and never use the web management interface again.
Thanks,
Chip
Re: Add breadcrumbs trail to webpage layout
Posted: Sun Apr 09, 2017 11:03 pm
by nadeem
I did get the bread crumbs on the webpage, but I ended up getting them on the Blog category page too.
If you don't want to show bread crumbs on your blog category page, you have to make the following updates:
Open BlogBreadCrumbs.ascx, locate the most top div
Code: Select all
<div class="breadCrumbs blogBreadCrumbs"> // Note that I have changed the second class name to 'blogBreadCrumbs'. It will be 'categoryBreadCrumbs' in your case if you haven't renamed.
and replace with
Code: Select all
<div id="BlogBreadCrumbsPanel" class="breadCrumbs blogBreadCrumbs" runat="server">
Now open BlogBreadCrumbs.ascx.cs, locate
and replace with
Similarly, locate
Code: Select all
//}
//else BreadCrumbsRepeater.Visible = false;
and replace with
Code: Select all
}
else BlogBreadCrumbsPanel.Visible = false;
I also lost other controls I had on the page, like new products on the right column, and simple category control on the right.
First add and save the required controls like new products etc. to the layout from layout manager in admin. Then manually add the blog control to your layout from file manager (inside /Layouts directory).
NOTE: Don't save your layout from admin after adding BlogBreadCrumbs control manually as it will revert your change.