Accordion Menu w VirtueMart
Wykonując sklep internetowy klient zażyczył sobie, aby kategorie wyświetlały się w tzn. accordeonie. Przeszukując Joomla extensions znalazłem taki oto accordion napisany za pomocą biblioteki jQuery. Niestety miał jedną wadę… Nie zapamiętywał on wybranego aktywnego item`u. Po prostu zwijał się do góry, co powodowałoby dezorientację klientów. Należało to zmienić…
Najpierw trzeba sprawić by wybrany item posiadał jakąś klasę css po której moglibyśmy określić który jest aktywny. W funkcji function recursiveCat($catID) odpowiedzialnej za wyświetlenie itemów wstawiłem taki oto kod:
$adres=$_SERVER['REQUEST_URI'];
$adres2=strstr($adres, "/");
$link = JRoute::_("index.php?option=com_virtuemart&page=shop.browse&category_id=".$childCatInfo[0]->category_id.'&Itemid=1000');
$link2 = substr($adres,0,strRpos($adres,'/'));
$link2 .= '.html';
if($adres==$link || $link2==$link)
{
echo ">a class=\"active\" href='$link'>";
}
else{
echo ">a href='$link'>";
}
Kod ten powoduje iż jeżeli zmienna $_SERVER['REQUEST_URI'] posiada nazwę kategorii, która ma zostać wstawiona jako link to link ten posiada klasę active. W przeciwnym wypadku nie posiada klasy.
Item menu posiada już klasę actice, jednak ciągle jest niewidoczny, ponieważ jQuery „zwija” całe menu. Pora i na tą zmianę. Dzięki bibliotece jQuery jest to niezwykle proste. Wystarczy taka oto linia kodu:
jQuery('a.active').parents('div.accordionContent').show("fast");
zaraz za jQuery(document).ready(function()
Kod ten powoduje iż rodzic ‘div.accordionContent’ linku a.active zostaje pokazany z prędkością „fast”.
Prawda że proste?