Add breadcrumbs trail to webpage layout

For general questions and discussions specific to the AbleCommerce GOLD ASP.Net shopping cart software.
Post Reply
ChipWV
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 87
Joined: Tue Feb 03, 2009 12:51 pm

Add breadcrumbs trail to webpage layout

Post by ChipWV » Thu Apr 06, 2017 5:52 am

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

nadeem
Captain (CAPT)
Captain (CAPT)
Posts: 250
Joined: Tue Jul 31, 2012 7:23 pm

Re: Add breadcrumbs trail to webpage layout

Post by nadeem » Fri Apr 07, 2017 3:41 am

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

Code: Select all

int _CategoryId = 0;
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

ChipWV
Lieutenant Commander (LCDR)
Lieutenant Commander (LCDR)
Posts: 87
Joined: Tue Feb 03, 2009 12:51 pm

Re: Add breadcrumbs trail to webpage layout

Post by ChipWV » Fri Apr 07, 2017 9:00 am

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

nadeem
Captain (CAPT)
Captain (CAPT)
Posts: 250
Joined: Tue Jul 31, 2012 7:23 pm

Re: Add breadcrumbs trail to webpage layout

Post by nadeem » Sun Apr 09, 2017 11:03 pm

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

Code: Select all

//if (this.CategoryId != 0)
            //{
and replace with

Code: Select all

if (this.CategoryId == 0)
            {
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.

Post Reply