Heute möchte ich Euch zeigen, wie man die Breadcrumb-Navigation animiert um bei langen Navigationspfaden Platz einzusparen. Für den einen mag es eine Spielerei sein, für den anderen eine Sinnvolle Erweiterung.
Demo: shop.mxperts.de

Beim Durchsehen der Most Popular jQuery Plugin bin ich zufällig auf das Plugins jBreadCrumb gestoßen. Zuerst dachte ich mir – eine nette Spielerei. Hat man nun sehr verschachtelte Artikelgruppen mit langen Bezeichnungen, ist dieses Plugin die richtige Lösung.

Die Integration beschränkt sich auf das Anpassen des Templates breadcrumbs.phtml und das Kopieren sowie Einbinden von CSS und Javascript des Plugins. Am Ende des Tutorials befinden sich alle Dateien als Download.

Umsetzung:

1. Ich habe das Template app/design/frontend/default/[Ihr Theme]/template/page/html/breadcrumbs.phtml wie folgt angepasst.

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

        <script type="text/javascript">
            jQuery(document).ready(function()
            {
                jQuery("#breadCrumb0").jBreadCrumb({
                  maxFinalElementLength: 400,
                  minFinalElementLength: 200,
                  minimumCompressionElements: 4,
                  endElementsToLeaveOpen: 1,
                  beginingElementsToLeaveOpen: 1,
                  minElementsToCollapse: 4,
                  timeExpansionAnimation: 800,
                  timeCompressionAnimation: 500,
                  timeInitialCollapse: 600,
                  easing: 'easeOutQuad',
                  overlayClass: '.chevronOverlay',
                  previewWidth: 8
                });
                jQuery("#breadCrumb0 ul").css('visibility','visible');
            })
        </script>

<h4 class="no-display"><?php echo $this->__("You're currently on:") ?></h4>

<div class="breadCrumbHolder module">
  <div id="breadCrumb0" class="breadCrumb module">
    <ul>
    <?php foreach($crumbs as $_crumbName=>$_crumbInfo): ?>
      <li>
      <?php if($_crumbInfo['link']): ?>
        <a href="<?php echo $_crumbInfo['link'] ?>" title="<?php echo $_crumbInfo['title'] ?>"><?php echo $_crumbInfo['label'] ?></a>
      <?php else: ?>
        <?php echo $_crumbInfo['label'] ?>
      <?php endif; ?>
      </li>
    <?php endforeach; ?>
    </ul>
  </div>
</div>

<div class="chevronOverlay main">
</div>

<?php endif; ?>

Beim Aufruf von jBreadCrumb habe ich alle Parameter eingefügt. So können Sie die einzelnen Werte verändern und experimentieren.

Da ich nicht gerne direkt in das Skin (boxes.css) eingreife, gibt es eine eigene CSS-Datei (jquery.jBreadCrumb.css).

/* Breadcrumb Styles
 ---------------------------------------------------------------------*/

.breadCrumb
{
	margin: 0 0 20px 0;
	padding: 0;
	float: left;
	display: block;
	height: 21px;
	overflow: hidden;
	width: 890px;
	padding:5px;
	border:solid 1px #dedede;
	background:#fff;
}
.breadCrumb ul
{
	margin: 0;
	padding: 0;
	height: 21px;
	display: block;
	visibility: hidden;
}
.breadCrumb ul li
{
	display: block;
	float: left;
	position: relative;
	height: 21px;
	overflow: hidden;
	line-height: 21px;
	margin: 0px 6px 0px 0;
	padding: 0px 10px 0px 0;
	font-size: .9167em;
	background: url(../images/breadcrumb/Chevron.gif) no-repeat 100% 0;
}
.breadCrumb ul li div.chevronOverlay
{
	position: absolute;
	right: 0;
	top: 0;
	z-index: 2;
}
.breadCrumb ul li span
{
	display: block;
	overflow: hidden;
}
.breadCrumb ul li a
{
	display: block;
	position: relative;
	height: 21px;
	line-height: 21px;
	overflow: hidden;
	float: left;
	text-decoration: none;
}
.breadCrumb ul li.first a
{
	height: 16px !important;
	text-indent:-1000em;
	width:16px;
	padding: 0;
	margin-top: 2px;
	overflow: hidden;
	background:url(../images/breadcrumb/IconHome.gif) no-repeat 0 0;
}
.breadCrumb ul li.first a:hover
{
	background-position: 0 -16px;
}
.breadCrumb ul li.last
{
	background: none;
	margin-right: 0;
	padding-right: 0;
}
.chevronOverlay
{
	display: none;
	background: url(../images/breadcrumb/ChevronOverlay.png) no-repeat 100% 0;
	width: 13px;
	height: 20px;
}

Für unsere neue Breadcrumb-Navigation benötigen wir noch drei Bilder.
  

Kopieren Sie nun alle Javascript-Datein in skin/frontend/default/[Ihre Theme]/js.
Die sind die Dateien:
- jquery.jBreadCrumb.js
falls noch nicht vorhanden auch:
- jquery.easing.1.3.js
- jquery.easing.compatibility.js

Um das Tutorial abzuschließen müssen die Javascript- und CSS-Dateien noch eingebunden werden. Öffnen Sie dazu die Datei app/design/frontend/default/default/layout/page.xml.

Innerhalb des head Blocks (nach ) sollten sich folgende Zeilen befinden:

<action method="addItem"><type>skin_js</type><name>js/jquery.easing.1.3.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/jquery.easing.compatibility.js</name></action>
<action method="addItem"><type>skin_js</type><name>js/jquery.jBreadCrumb.js</name></action>
<action method="addItem"><type>skin_css</type><name>css/jquery.jBreadCrumb.css</name></action>

Info: Die zwei Zeilen für Easing natürlich nur, falls Sie diese noch nicht integriert wurden.

Nachdem Sie alle Files auf Ihren Webserver kopiert und den Cache im Backend von Magento aktualisiert haben, sollte die Ausgabe wie in unserem Beispielshop sein.
http://shop.mxperts.de/test/test-2-0/test-3-0/test-4-0/stempel2.html