Categorieën
Magento

Magento links met “active” class

Standaard geeft Magento de product categorieën weer op de plaats van waar je een menu zou verwachten. Deze functionaliteit moet ik vaak aanpassen bij Magento webwinkels die Pronamic ontwikkeld. Er zijn verschillende manieren om een ander menu toe te voegen. Ik beschrijf in dit bericht een nieuwe benadering.

Allereerst voeg ik via het Magento beheerpaneel een nieuw statisch blok toe. Vervolgens kan in de inhoud van dit statische blok gebruikt worden om het menu op te bouwen. Normaliter is een menu niets meer dan een lijst (<ul>) met linkjes (<a>) als items (<li>).

Vervolgens voeg ik aan het bestand cms.xml de volgende XML regel toe in het <default> element.

app\design\frontend\default\custom-theme\layout\cms.xml

<default>
	<reference name="header">
		<block type="cms/block" name="cms_menu_main" template="page/template/menu.phtml">
			<action method="setBlockId"><block_id>menu_main</block_id></action>
		</block>
	</reference>

	...
</default>

Vervolgens kun je in header.phtml de volgende regel opnemen.

app\design\frontend\default\custom-theme\template\page\html\header.phtml

<nav id="main-nav">
	<?php echo $this->getChildHtml('cms_menu_main') ?>
</nav>

Wat jammer is aan deze opzet is dat de menu links niet automatisch worden voor zien van ‘active’ classes. Vaak wil je zodra een menu item actief is dat deze anders wordt weergegeven. Om dit probleem op te lossen kun je de volgende code opnemen in header.phtml.

<nav id="main-nav">
	<?php 

	$html = $this->getChildHtml('cms_menu_main');

	if(!empty($html)) {
		try { 
			$xml = simplexml_load_string($html);

			$currentUrl = Mage::helper('core/url')->getCurrentUrl();
			$currentHost = parse_url($currentUrl, PHP_URL_HOST);
			$currentPath = parse_url($currentUrl, PHP_URL_PATH);
			$currentPath = rtrim($currentPath, '/');

			foreach($xml->xpath('//a') as $anchor) {
				$url = $anchor['href'];

				$host = parse_url($url, PHP_URL_HOST);
				$path = parse_url($url, PHP_URL_PATH);
				if($path != null) {
					$path = rtrim($path, '/');
				}

				$class = (string) $anchor['class'];
				$classes = empty($class) ? array() : explode(' ', $class);

				if($path !== null && ($host == null || $currentHost == $host)) {
					if(strcmp($path, $currentPath) === 0) {
						$classes[] = 'active';
					} else if($path != '/' && strncmp($path, $currentPath, strlen($path)) === 0) {
						$classes[] = 'active-child';
					}
				}

				if(!empty($classes)) {
					$anchor['class'] = implode(' ', $classes); 
				}
			}

			$html = $xml->asXML();
			$html = str_replace('<?xml version="1.0"?>', '', $html);
		} catch (Exception $e) { 
			// Could not add classes, no big deal
		}

		echo $html;
	} else {
		// Show somehting else?
	}

	?>
</nav>

Bovenstaande code zorgt er voor dat actieve linkjes automatisch de class ‘active’ krijgen. Mocht je vragen of opmerkingen hebben laat dan even een reactie achter.

Informatie

4 reacties op “Magento links met “active” class”

hallo.
Super oplossing.
Werkend gekregen in header, heb alleen de volgende vraag,
Hoe krijg ik het werkend als ik het blok in de left.phtml van magento plaats, waar ook de product catogorien staan.
blok word wel toegevoegd, maar . active wil niet meewerken.
gebruik left navigatie @package RicoNeitzel en magento 1.6 met f002 default theme.
alvast bedankt.

Ik ben niet bekend met de “left navigatie @package RicoNeitzel” dus daar kan ik je helaas niet mee helpen. In principe zou bovenstaande code moeten werken na elke $html = $this->getChildHtml('********'); aanroep. Mocht je er niet uit komen dan is het misschien verstandig om een Magento ontwikkelaar in te huren, succes!

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *