Time To Learn
Vandaag wil ik graag een blog met jullie delen over een van de resultaten van ons T.T.L. programma. Samen met andere collega’s zijn we in de T.T.L. gave dingen aan het doen. Zoals in de introductieblog over de T.T.L. al uitgelegd kunnen we als team tijdens de werkweek bezig zijn met het ontdekken van nieuwe mogelijkheden en het vergroten van onze kennis. Omdat kennis opdoen in de praktijk het beste werkt door te doen, resulteert het leren regelmatig in gave nieuwe modules die ingezet kunnen worden voor onze klanten.
Een voorbeeld van een nieuwe module die is gemaakt door aan de slag te gaan met de mogelijkheden van Magento 2 is het Guapa Menu:
Ontstaan Menu module
Magento wordt standaard geleverd met een menu dat is gebaseerd op de categorieboom. Per categorie kun je aangeven of deze wel/niet getoond moet worden. Omdat de eindgebruiker van een webshop over het algemeen ook andere informatie zoals CMS- of landingspagina’s snel wil kunnen benaderen is er voor veel klanten de wens om het menu zelf te kunnen customizen.
Magento 2 is inmiddels alweer bijna anderhalf jaar uit, maar de mogelijkheid voor merchants om het menu out-of-the-box te customizen is nog niet beschikbaar. Ook de modules die op dit moment gereleased zijn door de diverse extensie bouwers zijn kwalitatief slecht. Voor ons reden genoeg om ons vast te bijten in het maken van een plug-and-play module voor het customizen van het menu, de Guapa_Menu module.
Met deze extensie, die volledig gebouwd op basis van de Magento 2 native logica, is het mogelijk om een custom menu d.m.v. drag en drop functionaliteiten in elkaar te zetten.
Er kan voor elke store(view) een eigen menu aangemaakt worden. De backend is opgebouwd met de nieuwe UiComponent dynamicRows structuur van Magento 2. Om de backend volledig functioneel te krijgen hebben we een structuur verzonnen en gebouwd die nog niet ergens anders voorkomt in de backend van core Magento 2. Hieronder een klein stukje code van het formulier waarmee het menu gewijzigd kan worden:
<?xml version=""1.0"" encoding=""UTF-8""?>
* @package Guapa_Menu
* @author Guapa Development <info@guapa.nl>
* @copyright 2010-2017 Guapa
<form xmlns_xsi=""http://www.w3.org/2001/XMLSchema-instance""
xsi_noNamespaceSchemaLocation=""urn:magento:module:Magento_Ui:etc/ui_configuration.xsd"">
<fieldset name=""menu_data"">
<dynamicRows name=""menu_options"">
<container name=""record"">
<fieldset name=""menu_option_container"">
<fieldset name=""column_data"">
<dynamicRows name=""column_options"">
<container name=""record"">
<fieldset name=""column_option_container"">
<fieldset name=""menu_item"">
<dynamicRows name=""menu_item_options"">
<container name=""record"">
<fieldset name=""item_option_container"">
<container name=""item_option_info"">
<field name=""item_data"">
<argument name=""data"" xsi_type=""array"">
<item name=""config"" xsi_type=""array"">
</item>
</argument>
</field>
</fieldset>
</container>
</dynamicRows>
</fieldset>
</fieldset>
</container>
</dynamicRows>
</fieldset>
</fieldset>
</container>
</dynamicRows>
</fieldset>
</form>
Mogelijkheden
Deze indeling zorgt uiteindelijk voor de volgende mogelijkheden in de backend.
- Het aanmaken van diverse menu’s voor de verschillende shops.
- Het aanmaken van hoofditems die in de menubar komen
- Het toevoegen van kolommen onder deze hoofditems
- Het toevoegen van items aan deze kolommen.
Alle onderdelen zijn drag-and-drop van positie te verslepen
Hoofdmenu
Voor versie 1.0 van het menu zijn er per onderdeel verschillende inhoud opties aangemaakt. Voor het hoofdmenu zijn er 3 types mogelijk:
- Category: het kiezen van een categorie om te tonen en naar te linken
- CMS Page: Het kiezen van een pagina om te tonen en naar te linken
- Custom URL: Het kiezen van een URL om te tonen en naar te linken
De linktekst die word getoond in het menu wordt bepaald door de gekozen titel van het item. Ook is het mogelijk om een icon aan dit item toe te voegen voor extra duidelijkheid naar de klanten.
Kolommen
De kolommen bepalen de indeling onderliggend aan een hoofditem en kunnen gevuld worden met een titel. Daarnaast is het mogelijk om de breedte van de kolommen automatisch te laten bereken op basis van het aantal items, of deze zelf in te stellen.
Items:
De items zijn de belangrijkste onderdelen van het menu. Hier is het mogelijk om de meeste informatie toe te voegen. De verschillende types content zijn op dit moment:
- Category: het kiezen van een categorie om te tonen en naar te linken
- CMS Page: het kiezen van een categorie om te tonen en naar te linken
- Text: Het toevoegen van een blok HTML
- Custom URL: Het toevoegen van een custom URL
- Image: Het toevoegen van een afbeelding (zie afbeelding)
Een demo voorbeeld van een menu met alle items zou er dus zo uit kunnen zien:
Het is met al deze opties nu mogelijk om een e-commerce waardig menu te maken binnen het Magento 2 platform. Doordat het geheel geschreven is als module kunnen we al onze Magento 2 klanten nu blij maken met dit stuk maatwerk. Hierdoor ontstaat er een win-win situatie. Ik heb namelijk ontzettend veel bijgeleerd door de mogelijkheid om deze module samen met collega’s te kunnen maken en onze klanten kunnen een stuk maatwerk gemakkelijk laten inzetten voor hun e-commerce platform.
Tijdens het maken van deze blog zijn ook andere collega’s druk bezig met het maken van ontzettend gave uitbreidingen op het Magento 2 platform. Dit zal dan ook zeker niet de laatste blog zijn over een gave nieuwe mogelijkheid die is gecreëerd in de T.T.L.
Zie jij kansen?
Wil jij ook gebruik maken van de software en kennis die wij ontwikkelen binnen onze Time To Learn? Neem dan contact met ons op. Zie je kansen voor een mogelijke carriere bij Guapa, bekijk dan onze vacatures.