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

• Editing Magento’s Top Links (The Better Way)
• The Better Way to Modify Magento Layouts
• Add a CSS class to Magento menu links