Please help us to make AbanteCart Ideal Open Source Ecommerce Solution for everyone.

Support AbanteCart eCommerce

Author Topic: How to change color and state of active-page breadcrumb  (Read 140 times)

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 100
  • Karma: +17/-2
    • View Profile
How to change color and state of active-page breadcrumb
« on: September 07, 2017, 02:24:14 PM »
Hi. 

The prevailing opinion on various dev sites is that the breadcrumb for the active page should not be live, and hence not have the same appearance as the preceding breadcrumb links. 

The logic is not challenging.  There is no reason to have a live breadcrumb link to the page you are currently on. 

In AC, the breadcrumb for the active page is hot.

I'm sure this could be a 2 minute fix for the devs here. 

It will take me hours to sort it out if I have to do it on my own. 

I wonder if you guys might post a simple tpl tweak to deactivate the breadcrumb for the active page?

Thanks!

Offline Sam_78

  • Jr. Member
  • **
  • Posts: 66
  • Karma: +8/-1
    • View Profile
Re: How to change color and state of active-page breadcrumb
« Reply #1 on: September 08, 2017, 03:31:19 PM »
try this in your style.css file
.breadcrumb li:last-child{
   color:red;
}
« Last Edit: September 08, 2017, 03:34:28 PM by Sam_78 »

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 100
  • Karma: +17/-2
    • View Profile
Re: How to change color and state of active-page breadcrumb
« Reply #2 on: September 10, 2017, 11:52:20 AM »
Hey, thanks Sam!  I'll give it a shot. 

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 100
  • Karma: +17/-2
    • View Profile
Re: How to change color and state of active-page breadcrumb
« Reply #3 on: September 11, 2017, 05:06:56 PM »
Finally had a chance to look at site again today. 

Sam's recommendation will change the color of the breadcrumb for the current page, but it won't make it "cold".   It's still a hot link. 

It shouldn't be a link at all. 

Any suggestions? 

Offline Sam_78

  • Jr. Member
  • **
  • Posts: 66
  • Karma: +8/-1
    • View Profile
Re: How to change color and state of active-page breadcrumb
« Reply #4 on: September 12, 2017, 04:50:34 PM »
try replacing the file
\storefront\view\default\template\blocks\breadcrumbs.tpl 
Note: do take backup


<?php
if ($breadcrumbs && count($breadcrumbs) > 1) {
$total = count($breadcrumbs);
$count = 1;
?>
<section class="breadcrumbs">
<h4 class="hidden">&nbsp;</h4>
   <ul class="breadcrumb">
       <?php foreach ($breadcrumbs as $breadcrumb) {
         $count = $count + 1;
      ?>
       <li>
      <?php if($count <= $total){ ?>
       <a href="<?php echo $breadcrumb['href']; ?>">
          <?php echo ($breadcrumb['text'] == $text_home ? '<i class="fa fa-home" title="' . $text_home . '"></i> ' : '').$breadcrumb['text']; ?>
       </a>
      <?php } else { ?>
      <?php echo ($breadcrumb['text'] == $text_home ? '<i class="fa fa-home" title="' . $text_home . '"></i> ' : '').$breadcrumb['text']; ?>
      <?php } ?>
       </li>
       <?php } ?>
   </ul>
</section>
<?php } ?>

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 100
  • Karma: +17/-2
    • View Profile
Re: How to change color and state of active-page breadcrumb
« Reply #5 on: September 14, 2017, 12:03:47 AM »
Worked like a charm! 

I can kind of see how it works:  the <a></a> link value is only applied when count meets criteria, else echo breadcrumb text without link. 

Thanks!  This is great! 

I save all these tweaks in a doc, and sometimes I learn enough from them to make similar changes to other files, so thanks for broadening my horizon another step!  :-). 

I had already slightly modified my breadcrumbs.tpl to remove the little house icon from the Home crumb. 

So here is Sam's mod combined with my house-removal mod:

Code: [Select]
<?php 
if ($breadcrumbs && count($breadcrumbs) > 1) {
$total count($breadcrumbs);
$count 1;
?>

<section class="breadcrumbs">
<h4 class="hidden">&nbsp;</h4>
   <ul class="breadcrumb">
       <?php foreach ($breadcrumbs as $breadcrumb) { 
         
$count $count 1;
      
?>

       <li>
      <?php if($count <= $total){ ?>
       <a href="<?php echo $breadcrumb['href']; ?>">
          <?php echo ($breadcrumb['text']); ?>
       </a>
      <?php } else { ?>
      <?php echo ($breadcrumb['text']); ?>
      <?php ?>
       </li>
       <?php ?>
   </ul>
</section>
<?php ?>

Noobs: because the tpl mod above removes the hotlink from the breadcrumb for the active page, the color for the "cold" crumb will no longer be the hot color, so you may not need the css mod originally mentioned above unless you want to specify an entirely different color for the cold crumb. 

So Sam. 
Can you modify the seo-url generation code to include category in the seo product urls?

Example: instead of domain/product-seo-key, the seo url for each product page would be domain/category-seo-key/product-seo-key. 
I have only done a cursory search for the proper file.  I've looked at storefront/model/tool/seo_url.php, but I'm not sure that is the correct file.

I'm aware this will be a core edit.  I currently have 4 core edits on my site, and a detailed list of how to replicate them in the event that they get overwritten by an update.  So I don't mind adding another to the list. 

Many thanks!  This is great!  8)

Offline Sam_78

  • Jr. Member
  • **
  • Posts: 66
  • Karma: +8/-1
    • View Profile
Re: How to change color and state of active-page breadcrumb
« Reply #6 on: September 14, 2017, 04:58:02 PM »
You are welcome!

"Example: instead of domain/product-seo-key, the seo url for each product page would be domain/category-seo-key/product-seo-key. "

As you said this is core edit.
Maybe you can talk to AbanteCart developer and if I get time to play with this then I will post my solution here

Offline Geoffrey

  • Full Member
  • ***
  • Posts: 100
  • Karma: +17/-2
    • View Profile
Re: How to change color and state of active-page breadcrumb
« Reply #7 on: September 14, 2017, 05:59:06 PM »
Thanks!

I don't think it is a significant change. 

I just don't know which file to mod, and I don't really speak php. 

I already asked elsewhere...


 

application and website monitoring