Magento – pionowe menu oparte na kategoriach produktów.

Dodane przez | 17 maja 2011 o godzinie 22:20 | Brak komentarzy | Magento, Tutoriale | Tagi: , , , ,

W sklepach, które posiadają dużą ilość różnorodnych produktów w wielu kategoriach, przedstawienie w prosty sposób nawigacji jest niezwykle ważnym elementem. O wiele łatwiej będzie klientowi odszukać interesujący go towar, jeśli tylko udostępnimy mu przejrzysty mechanizm poruszania się po kategoriach produktów, które oferuje sklep.

Pierwszym krokiem do zbudowania takiego menu, jest stworzenie pliku vert_nav.phtml i umieszczenie w nim poniższego kodu:

[cc lang=”php”]
< ?php echo $this->__(‚Categories’) ?>

< ?php echo $this->__(‚Category Navigation:’) ?>

    < ?php foreach ($this->getStoreCategories() as $_category): ?>
    < ?php echo $this->drawItem($_category) ?>

< ?php echo $this->getChildHtml(‚topLeftLinks’) ?>
[/cc]

Stworzony plik kopiujemy do:
./app/design/frontend/default/{twoj_szablon}/template/catalog/navigation/

Kolejnym krokiem jest dodanie poniższego kodu do pliku:

./skin/frontend/default/{twoj_szablon}/css/widgets.css

w celu nadania menu odpowiedniego stylu.

[cc lang=”css”] /************ Vertical Navigation ************/

#nav_vert {
padding:0 8px;
font-size:1em;
z-index:999;
width:180px;
background-color: #F6F6F6;
}

/************** ALL LEVELS *************/

#nav_vert li {
width:178px;
list-style:none;
position:relative;
text-align:left;
background-color: #F6F6F6;
border-bottom-width: thin;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
margin-bottom: 5px;
}

#nav_vert li.over { z-index:999; }

#nav_vert li.active { z-index:999; }

#nav_vert a { line-height:1.3em; }

#nav_vert a, #nav_vert a:hover { display:block; text-decoration:none; }

#nav_vert span { display:block; cursor:pointer; color: #000; }

/************ 1ST LEVEL ***************/

#nav_vert li { float:left; background:url(../images/nav_bg.gif) repeat-x 50%;
height:30px; margin-right:1px;
}

#nav_vert li.active a { color:#4c6a16; }

#nav_vert a {
float:left;
padding:8px 12px 6px 8px;
color:#4c6a16;
font-weight:bold;
font-family:Trebuchet MS;
font-size:13px;}

#nav_vert li.over a, #nav_vert a:hover { color:#CCCCCC; }

/************ 1ST LEVEL RESET ************/

#nav_vert ul li, #nav_vert ul li.active {
float:none;
height:auto;
background:none;
margin:0;
}

#nav_vert ul a, #nav_vert ul a:hover {
float:none;
padding:0;
background:none;
}

#nav_vert ul li a { font-weight:normal !important; }

/************ 2ND LEVEL RESET ************/

#nav_vert ul {
position: absolute;
width:178px;
margin-left:178px;
top:0px;
left:-10000px;
border:1px solid #666666;
}

/* Show menu */

#nav_vert li.over ul { left:0; }

#nav_vert li.over ul ul { left:-10000px; }

#nav_vert li.over ul li.over ul { left:0px; }

#nav_vert ul li a { background:#FFFFFF; }

#nav_vert ul li a:hover { background: #F2F1D2; }

#nav_vert ul li a span { background:url(../images/nav_divider.gif) repeat-x 0 100%; }

#nav_vert ul li a, #nav_vert ul li a:hover { color:#2f2f2f !important; }

#nav_vert ul span, #nav_vert ul li.last li span { padding:6px 15px 6px 15px; }

#nav_vert ul li.last span { background:none; }

/************ 3RD+ LEVEL RESET ************/

#nav_vert ul ul { top:5px;}

#nav_vert ul ul ul { left:-10000px;}

#nav_vert li.over ul li.over ul ul { left:-10000px;}

#nav_vert li.over ul li.over ul li.over ul { left:100px; }

/* Fix for the IE bug */

#nav_vert iframe {
position: absolute;
left: -1px;
top: 0;
z-index: -1;
filter: progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=0);
}
[/cc]

Aby menu miało szansę pojawić się na stronie musimy w pliku:

./app /design/frontend/default/{twoj_szablon}/layout/catalog.xml

w odpowiednim miejscu zmienić fragment kodu.

[cc lang=”xml”]

[/cc]

Pozostały nam jeszcze dwie rzeczy. Pierwsza z nich to wyświetlenie bloku z naszym menu na stronie głównej poprzez dodanie kodu w panelu administracyjnym do:

CMS >> Page >> Home Page >> Design

[cc lang=”xml”] [/cc]

Druga to usunięcie bądź zakomentowanie wszystkich aktywnych linii kodu z pliku:

./app/design/frontend/default/{twoj_szablon}/template/catolog/navigation/top.phtml

Jeśli otrzymujemy błędy, menu się nie pojawia lub pojawia się, ale wysuwające się podkategorie nie działa to najprawdopodobniej jest to wynik porzucenia przez magento wsparcia dla toggleMenu.

Prostym sposobem naprawienia tego problemu jest dodanie kawałka kodu:

[cc lang=”javascript”] function toggleMenu(el, over)
{
if (over) {
Element.addClassName(el, ‚over’);
}
else {
Element.removeClassName(el, ‚over’);
}
}
[/cc] na początku pliku:

./js/varien/menu.js

O autorze:

Piotr

Facet, który z zawodu jest prezesem. Większość czasu spędza na poskramianiu platformy magento i przygotowywaniu materiałów do druku. Najchętniej pracuje ułożony w pozycji horyzontalnej na kanapie. Perfekcjonista w każdym calu.

Komentarze

© 2011 Web Designer Magazine. All rights reserved.