[SOLVED] How to add customized Breadcrumbs to current TPL and CSS?

generalexperts · March 3, 2014

I am trying to customize my breadcrumbs so users can see them better. I had found a tutorial on how to do this, but not exactly tailored to prestashop. line25.com/tutorials/how-to-create-flat-style-breadcrumb-links-with-css. You can see my attempt below. I had to change it back to normal because it was a mess. When applying this tutorial it was also changing the tabs toward the bottom of my page (shown in the second image). I had taken the css from the tutorial and added to my global.css. Then I took the breadcrumb.tpl and applied to what I thought was going to work. The design was a little jumbled, but most importantly making this without changing other things on my page, ie tabs, etc.. AND, I wasn't able to get the last product (shown in picture #1 to the far right) to have the same blue background. It is not a link, so it has something to do with that... Anyone willing to help me with this? I can't find any other resources on how to get this to work with prestashops TPL file... Thank you!

Edited March 30, 2014 by generalexperts (see edit history)

CartExpert.net · March 4, 2014

Hi.

We can help you only if the CSS changes are applied.

Regards.

Robin.

The CartExpert Team

generalexperts · March 4, 2014

Okay I applied the styles in the global.css. Thanks for your help!

PascalVG · March 5, 2014

Hi generalE,

Don't see the changes, on either the front office, or in the global.css file. Please recheck...

generalexperts · March 5, 2014

The changes wont be shown unless I edit the TPL file. Which i wasn't able to figure out how to do it unless making my page a mess. Here is what my global css looks like. Thanks for your help!

/* ************************************************************************************************
       BREADCRUMB
************************************************************************************************ */
.breadcrumb {
   margin-bottom:10px;
   font-size:12px
}
.breadcrumb .navigation-pipe {margin:0 3px 0 5px}
.breadcrumb img {
   position:relative;
   top:5px
}
#crumbs ul li a {
   display: block;
   float: left;
   height: 20px;
   background: #3498db;
   text-align: center;
   padding: 30px 40px 0 40px;
   position: relative;
   margin: 0 10px 0 0;

   font-size: 20px;
   text-decoration: none;
   color: #fff;
}
#crumbs ul li a:after {
   content: "";
border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #3498db;
   position: absolute; right: -40px; top: 0;
}

#crumbs ul li a:before {
   content: "";
   border-top: 40px solid transparent;
   border-bottom: 40px solid transparent;
   border-left: 40px solid #d4f2ff;
   position: absolute; left: 0; top: 0;
   padding: 30px 40px 0 80px;
}
#crumbs ul li:first-child a {
   border-top-left-radius: 10px; border-bottom-left-radius: 10px;
}
#crumbs ul li:first-child a:before {
   display: none;
}

#crumbs ul li:last-child a {
   padding-right: 80px;
   border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}
#crumbs ul li:last-child a:after {
   display: none;
}
#crumbs ul li a:hover {
   background: #fa5ba5;
}
   #crumbs ul li a:hover:after {
       border-left-color: #fa5ba5;
   }

generalexperts · March 5, 2014

To add to that, this is what the tutorial structure says to do. But #1 can be the 'home', i get that. Then 2-5 should only appear when needed. But with the last current page (non link) included... Opposite to my results I've tried...

<div id="crumbs">	<ul>		<li><a href="#1">One</a></li>		<li><a href="#2">Two</a></li>		<li><a href="#3">Three</a></li>		<li><a href="#4">Four</a></li>		<li><a href="#5">Five</a></li>	</ul></div>

This is my orginal breadcrumb.TPL file:

{if isset($smarty.capture.path)}{assign var='path' value=$smarty.capture.path}{/if}
<div class="breadcrumb">
   <div itemscope itemtype="http://data-vocabulary.org/Breadcrumb"> <a href="{$base_dir}" title="{l s='return to Home'}" itemprop="url"><span itemprop="title">{l s='Home'}</span></a></div>

   {if isset($path) AND $path}
       <span class="navigation-pipe" {if isset($category) && $category->id_category == 1}style="display:none;"{/if}>{$navigationPipe|escape:html:'UTF-8'}</span>
       {if !$path|strpos:'span'}
           <span class="navigation_page">{$path}</span>
       {else}
           {$path}
       {/if}
   {/if}
</div>

Edited March 5, 2014 by generalexperts (see edit history)

generalexperts · March 11, 2014

Still looking for some help on this, if anyone is willing to help, please let me know! Haven't quite figured it out...

PascalVG · March 12, 2014

Hi, GE,

Here we go:

Check if you already have a file /override/classes/Tools.php If so, make backup, just in case.

If not, copy file /classes/Tools.php to /override/classes/Tools.php

Edit file override/classes/Tools.php :

Find the function getPath():

public static function getPath($id_category, $path = '', $link_on_the_item = false, $category_type = 'products', Context $context = null)

find de following code inside this function and change the code as indicated (code from version 1.5.6.2. May vary a little, but should be recognizable) :

				$n = 1;
				$n_categories = count($categories);
				foreach ($categories as $category)
				{
					$full_path .=
					(($n < $n_categories || $link_on_the_item) ? '<a href="'.Tools::safeOutput($context->link->getCategoryLink((int)$category['id_category'], $category['link_rewrite'])).'" title="'.htmlentities($category['name'], ENT_NOQUOTES, 'UTF-8').'">' : '').

                                /* remove/comment out line below */
                                /*        htmlentities($category['name'], ENT_NOQUOTES, 'UTF-8'). */

                                /*  replace with line below */
	        			'<span class="'.(($n == $n_categories) ? ' navigation_word_last' : 'navigation_word').  '">'.htmlentities($category['name'], ENT_NOQUOTES, 'UTF-8').'</span>'.

					(($n < $n_categories || $link_on_the_item) ? '</a>' : '').
					(($n++ != $n_categories || !empty($path)) ? '<span class="navigation-pipe">'.$pipe.'</span>' : '');
				}

And save the file.

What it does:

'<span class="'.(($n == $n_categories) ? ' navigation_word_last' : 'navigation_word'). '">'.

htmlentities($category['name'], ENT_NOQUOTES, 'UTF-8').

'</span>'.

The added red text puts a span around the breadcrumb text of every individual category in the path, so we can manipulate the individual parts in css. The last category gets a special class ..._last, to indicate that it's the end of the path, and we can treat the end block differently than the middle parts of the path. (we want a rounded right-side at the end, instead of a 'Chevron arrow', see image below)

Then:

Edit themes/<yourtheme folder>/css/global.css (make backup, just in case):

Find the header breadcrumb and add/replace this:

/* ************************************************************************************************
		BREADCRUMB
************************************************************************************************ */
.breadcrumb {
	margin-bottom:10px;
	font-size:11px                 //    <---- I made it a little smaller, 12 -> 11px
}
.breadcrumb .navigation-pipe 
{
        margin:0 3px 0 5px; 
        display: none;                 //  <-- the little '>' pipeline symbol is not needed anymore
}
.breadcrumb img {
	position:relative;
	top:-8px                       // <-- I moved the little home-house up a little
}

.breadcrumb a:first-child {
	border-top-left-radius:10px; border-bottom-left-radius: 10px;
	padding: 30px 40px 0 40px;
}

.breadcrumb .navigation_word, .breadcrumb .navigation_word_last, .breadcrumb a:first-child,  .breadcrumb .navigation_page  {
	display: block;
	float: left;
	height: 25px;
	background: #3498db;
	text-align: center;
	padding: 15px 15px 0 35px;
	position: relative;
	margin: 0 4px 0 0;
	text-decoration: none;
	color: #fff;
}

.breadcrumb .navigation_word:after, .breadcrumb a:first-child:after {
	content: "";
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #3498db;
	position: absolute; right: -20px; top: 0;
	z-index: 2;
}

.breadcrumb .navigation_word:before, .breadcrumb .navigation_word_last:before , .breadcrumb .navigation_page:before {
	content: "";
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #FFF;
	position: absolute; left: 0; top: 0;
}

.breadcrumb .navigation_word_last,  .breadcrumb .navigation_page {
	border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}

N.B. delete the file /cache/class_index.php , otherwise the override of Tools.php will not work!

When correctly done, this should give the folowing result:

Hope this helps!

pascal

Edited March 12, 2014 by PascalVG
Added comment for display: none for navigation-pipe and changed to /override/classes/Tools.php (see edit history)

generalexperts · March 12, 2014

Pascal,

I tried this and when I load the tools.php my site goes blank. When reloading the original it goes back to normal. I tried two separate times to make sure there wasn't an error on my part. I am using Prestashop 1.5.4.1. Do you know what else I can do? I really like the screenshot you made!! And I appreciate your help!

PascalVG · March 12, 2014

Hi GE,

(Edit: In the original post #8 I changed the file to edit from

/classes/Tools.php

to

/override/classes/Tools.php

So that we will not touch the original PrestaShop file. which is better when we want to upgrade in the future. (Otherwise the file will be overwritten during the upgrade, loosing the changes)

N.B. Make sure you delete the file cache/class_index.php , otherwise the override will not take effect!! )

)

That said,

Here the whole GetPath function. (PrestaShop vsn 1541). Maybe copy the whole function and replace your old one in the /override/classes/Tools.php file with this one:

	/**
	* Get the user's journey
	*
	* @param integer $id_category Category ID
	* @param string $path Path end
	* @param boolean $linkOntheLastItem Put or not a link on the current category
	* @param string [optionnal] $categoryType defined what type of categories is used (products or cms)
	*/
	public static function getPath($id_category, $path = '', $link_on_the_item = false, $category_type = 'products', Context $context = null)
	{
		if (!$context)
			$context = Context::getContext();

		$id_category = (int)$id_category;
		if ($id_category == 1)
			return '<span class="navigation_end">'.$path.'</span>';

		$pipe = Configuration::get('PS_NAVIGATION_PIPE');
		if (empty($pipe))
			$pipe = '>';

		$full_path = '';
		if ($category_type === 'products')
		{
			$interval = Category::getInterval($id_category);
			$id_root_category = $context->shop->getCategory();
			$interval_root = Category::getInterval($id_root_category);
			if ($interval)
			{
				$sql = 'SELECT c.id_category, cl.name, cl.link_rewrite
						FROM '._DB_PREFIX_.'category c
						LEFT JOIN '._DB_PREFIX_.'category_lang cl ON (cl.id_category = c.id_category'.Shop::addSqlRestrictionOnLang('cl').')
						WHERE c.nleft <= '.$interval['nleft'].'
							AND c.nright >= '.$interval['nright'].'
							AND c.nleft >= '.$interval_root['nleft'].'
							AND c.nright <= '.$interval_root['nright'].'
							AND cl.id_lang = '.(int)$context->language->id.'
							AND c.active = 1
							AND c.level_depth > '.(int)$interval_root['level_depth'].'
						ORDER BY c.level_depth ASC';
				$categories = Db::getInstance()->executeS($sql);

				$n = 1;
				$n_categories = count($categories);
				foreach ($categories as $category)
				{
					$full_path .=
					(($n < $n_categories || $link_on_the_item) ? '<a href="'.Tools::safeOutput($context->link->getCategoryLink((int)$category['id_category'], $category['link_rewrite'])).'" title="'.htmlentities($category['name'], ENT_NOQUOTES, 'UTF-8').'">' : '').
					'<span class="'.(($n == $n_categories) ? ' navigation_word_last' : 'navigation_word').  '">'.htmlentities($category['name'], ENT_NOQUOTES, 'UTF-8').'</span>'.
					(($n < $n_categories || $link_on_the_item) ? '</a>' : '').
					(($n++ != $n_categories || !empty($path)) ? '<span class="navigation-pipe">'.$pipe.'</span>' : '');
				}

				return $full_path.$path;
			}
		}
		else if ($category_type === 'CMS')
		{
			$category = new CMSCategory($id_category, $context->language->id);
			if (!Validate::isLoadedObject($category))
				die(Tools::displayError());
			$category_link = $context->link->getCMSCategoryLink($category);

			if ($path != $category->name)
				$full_path .= '<a href="'.Tools::safeOutput($category_link).'">'.htmlentities($category->name, ENT_NOQUOTES, 'UTF-8').'</a><span class="navigation-pipe">'.$pipe.'</span>'.$path;
			else
				$full_path = ($link_on_the_item ? '<a href="'.Tools::safeOutput($category_link).'">' : '').htmlentities($path, ENT_NOQUOTES, 'UTF-8').($link_on_the_item ? '</a>' : '');

			return Tools::getPath($category->id_parent, $full_path, $link_on_the_item, $category_type);
		}
	}

If that doesn't work, try to copy the attached Tools.php file over your own at /override/classes/Tools.php (Back up the old one, just in case).

N.B. This option will only work, if you didn't make any other changes to the Tools.php file...

(Again, remember to delete file cache/class_index.php, otherwise the override will not take effect)

Tools.php

Hope this helps,

pascal

Edited March 12, 2014 by PascalVG
Changed to /override/classes/Tools.php (see edit history)

generalexperts · March 13, 2014

It worked!! Thanks for your help! Where would I go to get rid of the non-link item on the breadcrumb path? In the screen shot you posted in post #8 you wrote "This is normal header, decide self if needed." In some cases it doesn't need to be there. But when viewing a product it does. For example, if im viewing a category, it just repeats the same words. When viewing a product it would like nice if it were part of that breadcrumb path design.

Thanks!!

PascalVG · March 14, 2014

Hi GE, glad it worked. Hope you got a chance to look at the way I implemented it and see where you got astray.

The header used to be on the page already, only because of the breadcrumb takes more space (higher), it now instead of below the breadcrumb, it sometimes shows next to it, which is silly when opening the category page, as indeed it just repeats the category name. For CMS pages it's really different, so I assume you'd want them here. On Product pages I believe as well.

You could take it out in the category page:

Edit file: themes/<your theme folder>/category.tpl (Backup first, just in case)

At the beginning of the file, you see some code like this:

{include file="$tpl_dir./breadcrumb.tpl"}
{include file="$tpl_dir./errors.tpl"}

{if isset($category)}
   {if $category->id AND $category->active}
       <h1>
           {strip}
               {$category->name|escape:'htmlall':'UTF-8'}
               {if isset($categoryNameComplement)}
                   {$categoryNameComplement|escape:'htmlall':'UTF-8'}
               {/if}
           {/strip}
       </h1>

Change to:

{include file="$tpl_dir./breadcrumb.tpl"}
{include file="$tpl_dir./errors.tpl"}

{if isset($category)}
   {if $category->id AND $category->active}
{*      <h1>
           {strip}
               {$category->name|escape:'htmlall':'UTF-8'}
               {if isset($categoryNameComplement)}
                   {$categoryNameComplement|escape:'htmlall':'UTF-8'}
               {/if}
           {/strip}
       </h1>
*}

i.e. add {* ... *} To comment out the red code

(N.B. {* and *} are used in .tpl smarty files to comment out a block. In Php they use /* ... */ )

save the file and reload (Ctrl-F5) the pge to see if it has the desired effect.

Hope this helps,

pascal.

N.B. On Line 582 in the global.css file, remove my comment,

// <-- I moved the little home-house up a little

as it makes the 'top:-8px;' not work correctly, so that the home image (the little house) is shown too low. (Was meant to be only temporary comment...).

If you have other comment of me in the code, please remove as well :-)

( I saw it on line 577 as well: // <---- I made it a little smaller, 22 -> 11px

Remove here too)

PascalVG · March 14, 2014

GE,

I noticed a small layout error on the product page after we changed the breadcrumb.

Please change the file: http://www.savvymarina.com/themes/shop/css/product.css (line 5):

#primary_block {

margin-top: 15px;

}

to

#primary_block {

margin-top: 45px;

}

pascal

generalexperts · March 14, 2014

Thanks again for all your help! Everything worked. I decided after making those changes it looks funny to have the same product name listed after the breadcrumb and then right below it. In that case, how would I remove the product name after the breadcrumb? I looked in the product.tpl and found {include file="$tpl_dir./breadcrumb.tpl"}. But that just simply removes the breadcrumb all together, not the product name. Would you be able to help me one last time?? Thanks!

PascalVG · March 14, 2014

... When viewing a product it would like nice if it were part of that breadcrumb path design.

Thanks!!

Haha, I just now see the reply you made here. I played with the product part to make it part of the breadcrumb and maybe you like it, so I'll let you see it how to do it. If you don't like it, we can always remove it if needed.

So here we go:

Edit file override/classes/Tools.php : (make a backup, for if you don't like the additional change)

Find again the function getPath():

and just below the first change we made, you will find this pece of code:

				$n = 1;
				$n_categories = count($categories);
				foreach ($categories as $category)
				{
					$full_path .=
					(($n < $n_categories || $link_on_the_item) ? '<a href="'.Tools::safeOutput($context->link->getCategoryLink((int)$category['id_category'], $category['link_rewrite'])).'" title="'.htmlentities($category['name'], ENT_NOQUOTES, 'UTF-8').'">' : '').
					'<span class="'.(($n == $n_categories) ? ' navigation_word_last' : 'navigation_word').  '">'.htmlentities($category['name'], ENT_NOQUOTES, 'UTF-8').'</span>'.
					(($n < $n_categories || $link_on_the_item) ? '</a>' : '').
					(($n++ != $n_categories || !empty($path)) ? '<span class="navigation-pipe">'.$pipe.'</span>' : '');
				}

				return $full_path.$path;
			}
		}
		else if ($category_type === 'CMS')

We will change this line:

return $full_path.$path;

almost at the end.

change it into:

return (($path=='') ? $full_path : $full_path.'<span class="navigation_product_name"><span class= "navigation_background_bite"></span>'.$path.'</span>');

Resulting in:

				$n = 1;
				$n_categories = count($categories);
				foreach ($categories as $category)
				{
					$full_path .=
					(($n < $n_categories || $link_on_the_item) ? '<a href="'.Tools::safeOutput($context->link->getCategoryLink((int)$category['id_category'], $category['link_rewrite'])).'" title="'.htmlentities($category['name'], ENT_NOQUOTES, 'UTF-8').'">' : '').
					'<span class="'.(($n == $n_categories) ? ' navigation_word_last' : 'navigation_word').  '">'.htmlentities($category['name'], ENT_NOQUOTES, 'UTF-8').'</span>'.
					(($n < $n_categories || $link_on_the_item) ? '</a>' : '').
					(($n++ != $n_categories || !empty($path)) ? '<span class="navigation-pipe">'.$pipe.'</span>' : '');
				}

                                return (($path=='') ? $full_path : $full_path.'<span class="navigation_product_name"><span class= "navigation_background_bite"></span>'.$path.'</span>');
			}
		}
		else if ($category_type === 'CMS')

And save the file.

What it does: If there's a product name, It adds a <span> around the product name (this is the red part of : $full_path.$path ), so we can add some decoration to the name, and an additional <span> for a tiny nicety, to make the left side of the product name block 'inversely curved' so that it fits nicely after the last category.

Then edit themes/<yourtheme folder>/css/global.css (make backup, just in case you don't like the changes):

Find the header breadcrumb and replace the previous breadcrumb part with this part:

/* ************************************************************************************************
		BREADCRUMB
************************************************************************************************ */
.breadcrumb {
	margin-bottom:10px;
	font-size:11px
}
.breadcrumb .navigation-pipe {margin:0 3px 0 5px; display: none;}
.breadcrumb img {
	position:relative;
	top:-8px
}

.breadcrumb a:first-child {
	border-top-left-radius:10px; border-bottom-left-radius: 10px;
	padding: 30px 40px 0 40px;
}

.breadcrumb .navigation_word, .breadcrumb .navigation_word_last, .breadcrumb a:first-child,  .breadcrumb .navigation_page, .breadcrumb .navigation_product_name, .breadcrumb .navigation_background_bite  {
	display: block;
	float: left;
	height: 25px;
	background: #3498db;
	text-align: center;
	padding: 15px 15px 0 35px;
	position: relative;
	margin: 0 4px 0 0;
	text-decoration: none;
	color: #fff;
}


.breadcrumb .navigation_product_name {
	background: #C77AC7;

/* NOT SURE WHY, BUT EDITOR DOESN'T ALLOW A CORRECT LEFT-MARGIN LINE HERE. SEE BELOW */
        margin - left: -8px;
	padding-left: 21px;
	z-index: -1;
}

.breadcrumb .navigation_background_bite {
	border-radius: 0px 9px 9px 0px;
	-moz-border-radius: 0px 9px 9px 0px;
	-webkit-border-radius: 0px 9px 9px 0px;
	background: rgb(255, 255, 255);
	position: absolute;
	width: 9px;
	padding-left: 0px;
	padding-right: 0px;
	top: 0px;
	left: -3px;
}

.breadcrumb .navigation_word:after, .breadcrumb a:first-child:after {
	content: "";
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #3498db;
	position: absolute; right: -20px; top: 0;
	z-index: 2;
}

.breadcrumb .navigation_word:before, .breadcrumb .navigation_word_last:before , .breadcrumb .navigation_page:before {
	content: "";
	border-top: 20px solid transparent;
	border-bottom: 20px solid transparent;
	border-left: 20px solid #FFF;
	position: absolute; left: 0; top: 0;
}

.breadcrumb .navigation_word_last,  .breadcrumb .navigation_page, .breadcrumb, .navigation_product_name {
	border-top-right-radius: 10px; border-bottom-right-radius: 10px;
}


/* ************************************************************************************************
		FOOTER
************************************************************************************************ */

-------------------------

EDIT: For some reason the editor doesn't allow me to put a special line in the code block, so to fix this:

Please find this part in the code above:

.breadcrumb .navigation_product_name {

background: #C77AC7;

margin - left: -8px;

padding-left: 21px;

z-index: -1;

}

And remove the spaces between margin - left:

(Getting crazy here.... Stupic editor???)

----------------------------------

And save the file.

The result is something like this:

Maybe you like it.

If you want to take away the product name just above the product description,

you can do this:

In themes/<your theme folder>/product.tpl, around line 232 (version 1.5.6.2), (you find this piece of code (you can find it easily by searching (Ctrl-F) for <h1> ) : (Make backup, just in case)

<h1>{$product->name|escape:'htmlall':'UTF-8'}</h1>

{if $product->description_short OR $packItems|@count > 0}

And change it into this:

{* <h1>{$product->name|escape:'htmlall':'UTF-8'}</h1> *}

{if $product->description_short OR $packItems|@count > 0}

Resulting in:

IF you didn't like my new purple product name as part of the breadcrumb, return to the begin state (restore the Tools.php and global.css as before making these changes given in this post)

and open override/classes/Tools.php

go to the same part we changed above, but instaed change the line:

return $full_path.$path;

into:

return $full_path;

This should take out the product name from the breadcrumb.

Hope you like my addition. Let me know :-)

pascal

Edited March 14, 2014 by PascalVG
EDITED CODE A LITTLE (see edit history)

PascalVG · March 14, 2014

Hi GE,

For completeness sake, I found in checkout some place that weren't 'covered' in the current changes, so here 2 more changes:

In override/classes/Tools.php, replace the function getPath() with this code: (as always, make backup, just in case...)

	/**
	* Get the user's journey
	*
	* @param integer $id_category Category ID
	* @param string $path Path end
	* @param boolean $linkOntheLastItem Put or not a link on the current category
	* @param string [optionnal] $categoryType defined what type of categories is used (products or cms)
	*/
	public static function getPath($id_category, $path = '', $link_on_the_item = false, $category_type = 'products', Context $context = null)
	{
		if (!$context)
			$context = Context::getContext();

		$id_category = (int)$id_category;
		if ($id_category == 1)
			return '<span class="navigation_end">'.

			'<span class="navigation_product_name"><span class= "navigation_background_bite"></span>'.

			$path.

			'</span>'.

			'</span>';

		$pipe = Configuration::get('PS_NAVIGATION_PIPE');
		if (empty($pipe))
			$pipe = '>';

		$full_path = '';
		if ($category_type === 'products')
		{
			$interval = Category::getInterval($id_category);
			$id_root_category = $context->shop->getCategory();
			$interval_root = Category::getInterval($id_root_category);
			if ($interval)
			{
				$sql = 'SELECT c.id_category, cl.name, cl.link_rewrite
						FROM '._DB_PREFIX_.'category c
						LEFT JOIN '._DB_PREFIX_.'category_lang cl ON (cl.id_category = c.id_category'.Shop::addSqlRestrictionOnLang('cl').')
						WHERE c.nleft <= '.$interval['nleft'].'
							AND c.nright >= '.$interval['nright'].'
							AND c.nleft >= '.$interval_root['nleft'].'
							AND c.nright <= '.$interval_root['nright'].'
							AND cl.id_lang = '.(int)$context->language->id.'
							AND c.active = 1
							AND c.level_depth > '.(int)$interval_root['level_depth'].'
						ORDER BY c.level_depth ASC';
				$categories = Db::getInstance()->executeS($sql);

				$n = 1;
				$n_categories = count($categories);
				foreach ($categories as $category)
				{
					$full_path .=
					(($n < $n_categories || $link_on_the_item) ? '<a href="'.Tools::safeOutput($context->link->getCategoryLink((int)$category['id_category'], $category['link_rewrite'])).'" title="'.htmlentities($category['name'], ENT_NOQUOTES, 'UTF-8').'">' : '').
					'<span class="'.(($n == $n_categories) ? ' navigation_word_last' : 'navigation_word').  '">'.htmlentities($category['name'], ENT_NOQUOTES, 'UTF-8').'</span>'.
					(($n < $n_categories || $link_on_the_item) ? '</a>' : '').
					(($n++ != $n_categories || !empty($path)) ? '<span class="navigation-pipe">'.$pipe.'</span>' : '');
				}

				return (($path=='') ? $full_path : $full_path.'<span class="navigation_product_name"><span class= "navigation_background_bite"></span>'.$path.'</span>');
			}
		}
		else if ($category_type === 'CMS')
		{
			$category = new CMSCategory($id_category, $context->language->id);
			if (!Validate::isLoadedObject($category))
				die(Tools::displayError());
			$category_link = $context->link->getCMSCategoryLink($category);

			if ($path != $category->name)
				$full_path .= '<a href="'.Tools::safeOutput($category_link).'">'.

				'<span class="navigation_word_last">'.

				htmlentities($category->name, ENT_NOQUOTES, 'UTF-8').

				'</span>'.

				'</a><span class="navigation-pipe">'.$pipe.'</span>'.

				(($path=='') ? $full_path : $full_path.
				'<span class="navigation_product_name"><span class= "navigation_background_bite"></span>'.
				$path.'</span>');

			else
				$full_path = ($link_on_the_item ? '<a href="'.Tools::safeOutput($category_link).'">' : '').

				'<span class="navigation_word_last">'.

				htmlentities($path, ENT_NOQUOTES, 'UTF-8').

				'</span>'.

				($link_on_the_item ? '</a>' : '');

			return Tools::getPath($category->id_parent, $full_path, $link_on_the_item, $category_type);
		}
	}

And for one page in the checkout steps: (on create new account page something still went wrong):

At the top of te file: themes/<your theme folder>/authentication.tpl (make backup!!!):

You see a block:

{capture ...}

...

{/capture}

Replace with:

{capture name=path}
	{if !isset($email_create)}{l s='Authentication'}{else}
		<a href="{$link->getPageLink('authentication', true)|escape:'html'}" rel="nofollow" title="{l s='Authentication'}"><span class="navigation_word">
{l s='Authentication'}</span></a>
		<span class="navigation-pipe">{$navigationPipe}</span><span class="navigation_word_last">{l s='Create your account'}</span>
	{/if}
{/capture}

Think that's really it.

In the end more work than planned :-)

pascal.

generalexperts · March 16, 2014

I made the changes! Thanks for your help, Adding the breadcrumb for the product title and categories looks good!

I left the product title with h1 tags in as I think that will effect my SEO. Would you be able to provide details for adding the h1 tag to the last part of the breadcrumb that way I can remove the h1 product title? Then I can follow your directions for removing the product title...

Or, Maybe I can put that title somewhere else on the product page so the viewer doesn't see it as duplicate info. (ie down in the specs tab, if that doesn't effect SEO).

As far as design, what do you think about adding some code so it looks the same for the authentication page and Manufacturing block (I renamed it Brands on my site).

Authentication has the breadcrumb and then it says "Log in" that I would like to be apart of the breadcrumb

Likewise,

Manufacturers has the breadcrumb of the brand name then it says "List of products by brand ..."

Shopping Cart has the breadcrumb of "Your shopping Cart" and then it repeats and says "Your Shopping Cart" or if there is a product in the shopping cart it says "Shopping-cart Summary"

Or maybe it would look better if I have the title; ie Shopping-cart Summary, etc shown below the breadcrumb for those pages rather than added to the breadcrumbs.

Thanks again!

Edited March 16, 2014 by generalexperts (see edit history)

generalexperts · March 16, 2014

I added rich snippets to the tools.php without changing what you helped me with... http://nemops.com/prestashop-rich-snippets-breadcrumbs/#.UyW6cIU7aCV

It messed up the look of my breadcrumbs. Could you help me put these back? I'm also looking for the breadcrumb to be half the height as it is now... Thanks!

PascalVG · March 17, 2014

Hmmm, maybe just undo the rich snippets,as it messes up the structure on which the breadcrumb was built, like adding an arrow, rounding the borders or not etc. because there's a new <span> level added, which makes the <a> tags all being :first_child (Well, hard to explain, but it messed up the dependencies)

What do you want to do with those rich snippets? Were they "nice to have's" or really needed?

Changing the height isn't difficult, but I best to show you on a fixed site again.

pascal

generalexperts · March 17, 2014

They would be good to keep as they would be implemented in the google search to have the breadcrumbs shown to people searching, so i'd like to be able to keep them if we can do a work around and reposition the crumbs...

I've done a few changes in the global.css to get them close to how it was (with rich snippets applied). But, slightly off still...

Edited March 17, 2014 by generalexperts (see edit history)

[SOLVED] How to add customized Breadcrumbs to current TPL and CSS?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in