Breadcrumbs aanpassen op de CMS pagina’s in uw Magento webwinkel

Stel u heeft een CMS pagina aangemaakt met bijvoorbeeld als URL identifier ‘klantenservice’ (www.uwmagentowebwinkel.nl/klantenservice/). Dan wilt u uiteraard daaronder een subpagina kunnen aanmaken met bijvoorbeeld de identifier ‘klantenservice/voorwaarden’. De standaard CMS-functie van Magento webwinkel software biedt u helaas niet de mogelijkheid om een hiërarchie aan te brengen, maar u kunt tijdens het aanmaken van de pagina daarentegen wel slashes invoeren in het veld ‘URL key’ zodat de URL in ieder geval klopt.

Dat is in ieder geval een goed begin. Helaas worden de breadcrumbs nu nog niet goed weergegeven, oorzaak hiervan is de ‘platte’ structuur van uw Magento webwinkel. De breadcrumb zal er in dit geval uit zien als ‘Home / Voorwaarden’. De meest optimale manier om dit aan te passen is om in de code van de betreffende Magento webwinkel te duiken en de wijze waarop breadcrumbs worden samengesteld te wijzigen. Gelukkig kan dit ook op een veel gemakkelijkere manier, zonder hiervoor de code aan te hoeven passen.

Magento’s CMS heeft een functie waarmee de XML layout kan worden overschreven. In het admin dashboard van uw Magento webwinkel navigeert u naar CMS -> Pages, klik hier de aan te passen pagina aan of maak een nieuwe CMS pagina en selecteer hier de tab ‘Custom Design’. Op deze pagina ziet u het veld ‘Layout Update XML’. Hier kunt u XML code toevoegen waarmee u de Magento webwinkel eerst de standaard breadcrumb laat verwijderen en daarna weer laat toevoegen, maar dan met uw eigen breadcrumb. Hieronder vindt u de benodigde code:

<reference name="root">
	<action method="unsetChild"><alias>breadcrumbs</alias></action>
	<block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs">
		<action method="addCrumb">
			<crumbName>home</crumbName>
			<crumbInfo><label>home</label><title>Home</title><link>/</link></crumbInfo>
		</action>
		<action method="addCrumb">
			<crumbName>klantenservice</crumbName>
			<crumbInfo><label>klantenservice</label><title>Klantenservice </title><link>/klantenservice/</link></crumbInfo>
		</action>
		<action method="addCrumb">
			<crumbName>voorwaarden</crumbName>
			<crumbInfo><label>voorwaarden</label><title>Voorwaarden</title></crumbInfo>
		</action>
	</block>
</reference>

De eerste ‘unsetChild’-action geeft aan dat Magento de originele breadcrumb moet verwijderen. Vervolgens geeft u aan de Magento webwinkel de opdracht om een nieuw blok voor de breadcrumbs op de plaats van de oude aan te maken. Hierna laat u Magento drie nieuwe breadcrumbs aanmaken, een voor ‘home’, een voor ‘klantenservice’ en de laatste voor de pagina ‘voorwaarden’. Onder ‘crumbInfo’ kunt u een label (linktekst), title (mouse-overtekst) en link (URL) aangeven.
LET OP: u dient altijd de root slash toe te voegen aan de link.

Wanneer u een Magento webwinkel heeft met veel CMS (sub)pagina’s of met een brede hiërarchie dan is deze methode erg tijdrovend en omslachtig. In dat geval kunt u beter de code aanpassen of kijken naar een extensie die dit voor u doet. Als u echter maar een paar CMS pagina’s heeft (zoals de meeste Magento webwinkels) dan is dit een snelle en doeltreffende oplossing.