breadcrumb – devfrontend.info

Source : Magento Code Snippet – Do not Show Homepage in Breadcrumbs.

Pour supprimer l’affichage du lien Homepage dans le fil d’Ariane d’un site Magento, il faut ajouter une condition if dans app/design/frontend/[yourtheme]/[yourtemplate]/template/page/html/breadcrumbs.phtml (ligne 06 dans le bout de code ci-dessous).

<?php if($crumbs && is_array($crumbs)): ?>
<div>
 <ul>
 <?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?>
 <?php // do not show homepage in breadcrumbs ?>
 <?php if($this->getUrl('') != $_crumbInfo['link']): ?>
 <li>
 <?php if($_crumbInfo['link']): ?>
 <a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this->htmlEscape($_crumbInfo['title']) ?>"><?php echo $this->htmlEscape($_crumbInfo['label']) ?></a>
 <?php elseif($_crumbInfo['last']): ?>
 <strong><?php echo $this->htmlEscape($_crumbInfo['label']) ?></strong>
 <?php else: ?>
 <?php echo $this->htmlEscape($_crumbInfo['label']) ?>
 <?php endif; ?>
 <?php if(!$_crumbInfo['last']): ?>
 <span>/ </span>
 <?php endif; ?>
 </li>
 <?php endif; ?>
 <?php endforeach; ?>
 </ul>
</div>
<?php endif; ?>

<?php if($crumbs && is_array($crumbs)): ?>

<div>

<ul>

<?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?>

<?php // do not show homepage in breadcrumbs ?>

<?php if($this->getUrl('') != $_crumbInfo['link']): ?>

<li>

<?php if($_crumbInfo['link']): ?>

<a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $this->htmlEscape($_crumbInfo['title']) ?>"><?php echo $this->htmlEscape($_crumbInfo['label']) ?></a>

<?php elseif($_crumbInfo['last']): ?>

<?php echo $this->htmlEscape($_crumbInfo['label']) ?>

<?php else: ?>

<?php echo $this->htmlEscape($_crumbInfo['label']) ?>

<?php endif; ?>

<?php if(!$_crumbInfo['last']): ?>

/

<?php endif; ?>

</li>

<?php endif; ?>

<?php endforeach; ?>

</ul>

</div>

<?php endif; ?>

Quelques exemples glanés sur le net : CSS3 breadcrumbs, 6 graceful css breadcrumb Navigation designs.

Version 1 (avec une bordure)

Simulation : http://jsfiddle.net/frontenddeveloper/vx3nm1mL/.

Source HTML pour le fil d’Ariane :

<ul class="breadcrumbs"><li class="is-done"><!-- .is-done pour chaque étape validée -->
  <a href="#" class="link"><i class="fa fa-map-marker is-visible"></i> Mon garage <i class="fa fa-check"></i></a></li><li class="is-done">
  <a href="#" class="link"><i class="fa fa-tachometer is-visible"></i> Mon véhicule <i class="fa fa-check"></i></a></li><li class="current"><!-- .current pour l'étape en cours -->
  <a href="#" class="link"><i class="fa fa-wrench is-visible"></i> Mes prestations <i class="fa fa-check"></i></a></li><li>
  <a href="#" class="link"><i class="fa fa-info is-visible"></i> Mes informations <i class="fa fa-check"></i></a></li>
</ul>

<a href="#" class="link"> Mon garage </a></li><li class="is-done">

<a href="#" class="link"> Mon véhicule </a></li><li class="current">

<a href="#" class="link"> Mes prestations </a></li><li>

<a href="#" class="link"> Mes informations </a></li>

</ul>

Source CSS pour le fil d’Ariane :

.breadcrumbs {
  font-size: 1.333em; /* 16px */
  font-weight: bold;
  margin-bottom: 1.667em;
}

.breadcrumbs li {
  display: inline-block;
  padding-left: 33px;
  border: 1px solid #42474d;
}

.breadcrumbs li:first-child {
  padding-left: 0;
}

.breadcrumbs a.link {
  text-decoration: none;
  display: block;
  line-height: 64px;
  padding: 0 0 0 10px;

  position: relative;
  color: #42474d;
}

.breadcrumbs li,
.breadcrumbs a.link {
  background-color: #f4f4f4;
}

.breadcrumbs a.link:after,
.breadcrumbs a.link:before {
  left: 100%;
  top: 50%;
  border: solid transparent;
  content: " ";
  height: 0;
  width: 0;
  position: absolute;
  pointer-events: none;
}

.breadcrumbs a.link:after {
  border-color: rgba(136, 183, 213, 0);
  border-left-color: #f4f4f4;
  border-width: 32px;
  margin-top: -32px;
}

.breadcrumbs a.link:before {
  border-color: rgba(194, 225, 245, 0);
  border-left-color: #42474d;
  border-width: 33px;
  margin-top: -33px;
}

/* is-done */
.breadcrumbs .is-done {
  background-color: #9fd18a;

}

.breadcrumbs .is-done a.link {
  color: #fff;
  background-color: #9fd18a;
  color: #177537;
}

.breadcrumbs .is-done a.link:after {
  border-left-color: #9fd18a;
}

/* current */
.breadcrumbs .current {
  background-color: #42474d;
}

.breadcrumbs .current a.link {
  background-color: #42474d;
  color: #fff;
}

.breadcrumbs .current a.link:after {
  border-left-color: #42474d;
}

/* check */
.breadcrumbs a.link .fa {
  display: none;
}

.breadcrumbs a.link .fa.is-visible,
.breadcrumbs .is-done a.link .fa {
  display: inline-block;
}

.breadcrumbs {

font-size: 1.333em; /* 16px */

font-weight: bold;

margin-bottom: 1.667em;

}

.breadcrumbs li {

display: inline-block;

padding-left: 33px;

border: 1px solid #42474d;

}

.breadcrumbs li:first-child {

padding-left: 0;

}

.breadcrumbs a.link {

text-decoration: none;

display: block;

line-height: 64px;

padding: 0 0 0 10px;

position: relative;

color: #42474d;

}

.breadcrumbs li,

.breadcrumbs a.link {

background-color: #f4f4f4;

}

.breadcrumbs a.link:after,

.breadcrumbs a.link:before {

left: 100%;

top: 50%;

border: solid transparent;

content: " ";

height: 0;

width: 0;

position: absolute;

pointer-events: none;

}

.breadcrumbs a.link:after {

border-color: rgba(136, 183, 213, 0);

border-left-color: #f4f4f4;

border-width: 32px;

margin-top: -32px;

}

.breadcrumbs a.link:before {

border-color: rgba(194, 225, 245, 0);

border-left-color: #42474d;

border-width: 33px;

margin-top: -33px;

}

/* is-done */

.breadcrumbs .is-done {

background-color: #9fd18a;

}

.breadcrumbs .is-done a.link {

color: #fff;

background-color: #9fd18a;

color: #177537;

}

.breadcrumbs .is-done a.link:after {

border-left-color: #9fd18a;

}

/* current */

.breadcrumbs .current {

background-color: #42474d;

}

.breadcrumbs .current a.link {

background-color: #42474d;

color: #fff;

}

.breadcrumbs .current a.link:after {

border-left-color: #42474d;

}

/* check */

.breadcrumbs a.link .fa {

display: none;

}

.breadcrumbs a.link .fa.is-visible,

.breadcrumbs .is-done a.link .fa {

display: inline-block;

}

Version 2

Simulation : http://jsfiddle.net/frontenddeveloper/x1daubg9/.

/* Source : http://red-team-design.com/css3-breadcrumbs/ */

ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs{
  overflow: hidden;
  width: 100%;
}

.breadcrumbs li{
  float: left;
  margin: 0 .75em 0 1em;
}

.breadcrumbs a{
  background: #ddd;
  padding: .7em 1em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.5); 
  position: relative;
}

.breadcrumbs a:hover,
.breadcrumbs .current{
  background: #99db76;
}

.breadcrumbs a::before{
  content: "";
  position: absolute;
  top: 50%; 
  margin-top: -1.5em;   
  border-width: 1.5em 0 1.5em 1em;
  border-style: solid;
  border-color: #ddd #ddd #ddd transparent;
  left: -1em;
}

.breadcrumbs a:hover::before,
.breadcrumbs .current::before{
  border-color: #99db76 #99db76 #99db76 transparent;
}

.breadcrumbs a::after{
  content: "";
  position: absolute;
  top: 50%; 
  margin-top: -1.5em;   
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid #ddd;
  right: -1em;
}

.breadcrumbs a:hover::after,
.breadcrumbs .current::after{
  border-left-color: #99db76;
}

/* Source : http://red-team-design.com/css3-breadcrumbs/ */

ul{

margin: 0;

padding: 0;

list-style: none;

}

.breadcrumbs{

overflow: hidden;

width: 100%;

}

.breadcrumbs li{

float: left;

margin: 0 .75em 0 1em;

}

.breadcrumbs a{

background: #ddd;

padding: .7em 1em;

float: left;

text-decoration: none;

color: #444;

text-shadow: 0 1px 0 rgba(255,255,255,.5);

position: relative;

}

.breadcrumbs a:hover,

.breadcrumbs .current{

background: #99db76;

}

.breadcrumbs a::before{

content: "";

position: absolute;

top: 50%;

margin-top: -1.5em;

border-width: 1.5em 0 1.5em 1em;

border-style: solid;

border-color: #ddd #ddd #ddd transparent;

left: -1em;

}

.breadcrumbs a:hover::before,

.breadcrumbs .current::before{

border-color: #99db76 #99db76 #99db76 transparent;

}

.breadcrumbs a::after{

content: "";

position: absolute;

top: 50%;

margin-top: -1.5em;

border-top: 1.5em solid transparent;

border-bottom: 1.5em solid transparent;

border-left: 1em solid #ddd;

right: -1em;

}

.breadcrumbs a:hover::after,

.breadcrumbs .current::after{

border-left-color: #99db76;

}

<ul class="breadcrumbs">
    <li><a href="">1. Adresse</a></li>
    <li><a href="" class="current">2. Livraison</a></li>
    <li><a href="">3. Paiement</a></li>
    <li><a href="">4. Confirmation</a></li>
</ul>

<li><a href="">1. Adresse</a></li>

<li><a href="" class="current">2. Livraison</a></li>

<li><a href="">3. Paiement</a></li>

<li><a href="">4. Confirmation</a></li>

</ul>