Magento ontwikkelaars tutorial les 3 / 14

Hallo! Welkom bij deel 3 van de Magento ontwikkelaars tutorial. Dit onderdeel van de tutorial legt uit hoe je een eigen blok aanmaakt in Magento. Het is aangeraden om de voorafgaande lessen door te nemen. Klik hier om de vorige les te bekijken, het aanmaken van je eigen controller in Magento.

Aanmaken van een blok

Op dit moment is je plugin nogal simpel, je hebt een controller en daar kun je wat code mee uitvoeren. Je kunt er in principe nog niet veel mee doen. Dit gaan we veranderen door content te laten tonen middels een template. Deze template zal bestaan uit verschillende blokken.

Hoe werkt het?

Een controller spreekt je layout aan om te weten wat er getoond moet worden aan de bezoeker van je webshop. Je layout is opgezet aan de hand van een blokken structuur. Elk blok heeft een eigen mini “controller”, aan de hand van de configuratie van blokken in een template kan er bepaald worden wat voor informatie er getoond moet worden. Bekijk onderstaande afbeelding om te begrijpen hoe een template wordt opgebouwd in Magento:

From controller to template

From controller to template

Deze afbeelding visualiseert hoe de flow van een Magento controller naar een template loopt. Op naar de volgende stap!

Roep de layout aan via de controller.

Onthoudt goed dat je plugin zich bevind in de de map: /app/code/local/Marcobax/All. De naam van de plugin is All en bevind zich in de namespace Marcobax. Vervang deze waardes zodat deze overeenkomen met je eigen module/code. Open je controller: /app/code/local/Marcobax/All/controllers/IndexController.php en pas deze aan zodat deze gelijk is aan onderstaande code:

Zoals je kunt zien heb ik een actie index toegevoegd, zit zijn maar een aantal regels code. Deze regels defineren wat er getoond moet gaan worden wanneer je naar deze actie navigeert. Navigeer naar deze actie door te gaan naar: http://mijnwebshop.nl/marcobax/index/index Maar wat gebeurt er nu precies? Wanneer je kijkt naar de volgende code:

Dan zie je dat er eerst een beroep wordt gedaan om de layout in te laden met behulp van de methode loadLayout();. Vervolgens zal de layout weergegeven worden middels de renderLayout(); methode. Je kunt deze code ook op 1 regel kwijt, dan zal de code er als volgt uit zien:

Een stukje minder leesbaar, maar het zorgt er wel voor dat je controller code kleiner is. Dit is geen verplichte stap! Op dit moment hoeven wij niets meer te doen met de indexController. De controller zorgt ervoor dat de actie index wordt aangeroepen en de layout wordt ingeladen en gepresenteerd. Dit is een controller action in de meest basale vorm. De oplettende lezer valt op dat er een tweede actie in het leven is geroepen, namelijk de halloAction(). Wanneer je navigeert naar http://mijnwebshop.nl/marcobax/index/hallo dan zul je zien dat er geen layout ingeladen wordt. Enkel de tekst “Hallo, hoe gaat het?” zal worden getoond. Het is dus mogelijk om enkel tekst te laten zien, of een JSON code (erg handig voor AJAX requests) of elk ander gewenst formaat.

Defineer de items die getoond moeten worden in de layout.

Voordat je de layout kunt gaan gebruiken is het belangrijk dat je eerst defineert waar de blokken te vinden zijn. Om dit te realiseren open je het bestand config.xml in de map /app/code/local/Marcobax/All/etc van je module en bewerk deze. Heb je deze map en / of dit bestand niet? Maak deze dan eerst even aan. Volg hiervoor de vorige stap in deze tutorial, het aanmaken van een controller. Open het bestand en voeg de volgende regels toe tussen de tags <frontend> en na <routers>:

Dit stuk XML code zorgt ervoor dat je alle layout updates kunt defineren in het bestand marcobax_all.xml. Dit bestand zul je moeten aanmaken in de map: /app/design/frontend/base/default/layout/. Mochten de layout updates thema specifiek zijn dan raadt in aan om deze in de map van je theme aan te maken. Vervang hiervoor base/default door je eigen structuur. Om een blok te defineren open je wederom het bestand config.xml in je module en voeg in de tag <config> en binnen na de tag <modules> het volgende toe:

Hiermee defineer je onder andere de classname van je blok(ken) en tevens de mappenstructuur. Iets wat veelvuldig terug komt in Magento. Aan de hand van deze configuratie zul je op een later tijdstip je models en helpers gaan defineren. Hierop komen we later terug.

Belangrijk punt om op te letten.

Wanneer je in Magento je classname defineert zul je zien dat de naam van je class ook het pad is naar dit bestand. Onze controller Marcobax_All_IndexController bevind zich dus in de volgende map: /app/code/local/Marcobax/All/controllers/IndexController.php Let hierbij op hoofdletters en juist gebruik van camelcases. Aan de hand van deze structuur zullen de blokken die je gaat aanmaken van het type: Marcobax_All_IndexController_MijnBlok zijn. Nu dat het bestand config.xml aangepast is kan Magento het pad en classes vinden naar je layout updates en blokken. Laten we zien wat er gebeurt aan de layout kant!

De layout.

Mocht je het je nog herinneren van de eerste les over Magento plugin structuur, dan weet je dat de naam van je class ook vertaalt wordt naar een mappen structuur. Een plugin bevat code templates en deze bestanden bevinden zich in 2 locaties binnen de Magento mappen structuur. De layout is onderdeel van je template, deze is geconfigureerd in onze bestanden: config.xml en marcobax_all.xml.

Navigeer nu naar de mappen structuur van je Magento thema. In dit voorbeeld is dit de volgende map: /app/design/frontend/base/default. We zullen hier een layout bestand marcobax_all.xml in de map /app/design/frontend/base/default/layout/ aanmaken. Open dit bestand en kopieer onderstaande code naar dit bestand:

Lees het even rustig door, dan begin je te begrijpen hoe dit werkt. Mocht je graag willen weten hoe de layout configuratie bestanden worden opgebouwd, lees dan de Designer’s Guide to Magento door. Hieronder volgt een beknopte uitleg van de werking:

Dit stuk code indiceert welke blokken Magento aan welke pagina zal relateren. Hiermee definieer je dus de layout! Een layout defineert de pagina’s, en binnen de pagina’s degineren we blokken. Een pagina (page) is opgebouwd als volgt: routernaam_controllernaam_actienaam. De tag in het XML bestand zal dus worden: marcobax_index_index. In de voorafgaande stap hebben we de router namen gedefineert. Binnen deze XML (en referentie content) voegen we de volgende configuratie toe:

Dit betekent dat Magento een blok toevoegd aan de layout die we in de all module hebben aangemaakt. Dit blok heet mijnblok en gebruikt de template mijnblok.phtml binnen de map all in binnen de template map van je thema.

Aanmaken van een blok.

Nu we een blok (type) hebben gedefinieerd kunnen we de code die benodigd is om een blok aan te maken toevoegen aan onze local codebase. Maak het bestand Mijnblok.php aan in de map: /app/code/local/Marcobax/all/Block . Bestaat deze map nog niet, dan zul je eerst de map Block aan moeten maken. Voeg in dit bestand onderstaande code toe:

Dit is een simpele class met daarin 1 methode, deze methode is niet verplicht. Je kunt zoveel mogelijk methodes aanmaken als dat je nodig hebt. Hoe je deze methode(s) aanroept via de template is te zien in het volgende onderdeel.

Aanmaken van de template.

Ga naar de map: /app/design/frontend/base/default/template/ en maak de mappen marcobax/All aan met het daarin het bestand mijnblok.phtml . Om de eerder aangemaakte methode te testen kun je onderstaande code toevoegen aan dit bestand:

Er zal nu de tekst “Waarde vanuit de eigen methode!” getoond worden. Nu snap je hoe je methodes aanmaakt binnen een block class en de output van deze methodes weer kan geven binnen je template.

Test het uit!

Om met eigen ogen te zien dat de code werkt navigeer je naar: http://mijnwebshop.nl/marcobax en je zult zien dat de tekst wordt weergegeven.

Einde van deze les.

Je hebt nu voldoende kennis om zelf een block samen te stellen en de daarbij behorende bestanden aan te maken op de juiste plekken binnen je Magento installatie. Het voorbeeld in deze les is zo simpel mogelijk gehouden om duidelijk te blijven, de getoonde voorbeelden zijn niet geschikt om 1:1 over te nemen in je (custom) webwinkel gebaseerd op Magento.

Een blok wordt meestal gebruikt om bijvoorbeeld de laatste 5 producten te tonen die je hebt toegevoegd in je webshop, of een contactformulier te tonen, een speciale actie enzovoorts. Met behulp van blokken kun je alle gewenste uitzonderingen of maatwerk realiseren. Het gebruiken van blokken binnen je eigen module zorgt er ook voor dat je de Magento installatie kunt blijven updaten zonder problemen. Onthoudt; pas nooit code aan in de core van Magento. Al je wijzigingen zullen verdwijnen wanneer je een update installeert.

Dit is het einde van deze les en ik hoop dat het duidelijk is geworden hoe je een blok aanmaakt binnen je Magento module / plugin. Mocht je nog vragen hebben dan kun je deze plaatsen met behulp van het reageer formulier op deze pagina.

Download de bronbestanden van deze les.

Zoals het ook mogelijk was in de vorige les is het ook mogelijk om de bronbestanden van deze les te downloaden. Dit kun je doen door gebruik te maken van onderstaande download link:

[wpdm_file id=2]

 

Ga terug naar het overzicht –of– ga naar les 4; magento modellen en database.

2 antwoorden

  1. Peter 19 april 2014 / 8:04 pm

    Marco, ik krijg iedere keer een 404-melding. Heb je ms je source in zip-formaat zodat ik kan nagaan dat dit werkt en ook zien wat ik fout doe?

Geef een reactie

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