Een Magento 2 webshop laten bouwen in 2024: de belangrijkste concepten uitgelegd

We behandelen:

• Fundamentele zaken rondom Magento versies en licenties
• Belangrijke inzichten aangaande het scrumproces en het Magento 2 development traject
• Voorbeelden van de Magento 2 backend en het standaard thema
• Uitleg over het verschil tussen een headless frontend en een traditionele frontend

Na het lezen van dit artikel weet je wat je kunt verwachten van het ontwikkeltraject en heb je voldoende kennis om een project succesvol op te starten.

Magento 2 nieuw, Magento 1 is oud

Magento 1 is ontwikkeld in 2008 en werd officieel ondersteund tot en met 2020. Magento 2, beschikbaar vanaf 2015, is de volledig vernieuwde, gemoderniseerde versie van Magento. Magento 2 

Ondanks het feit dat de oude versie van Magento end-of-life is, dat houdt in dat deze geen updates en security patches meer ontvangt, zijn er naar schatting nog 25.000 Magento 1 webshops die nog draaien op Magento 1. Vanwege security redenen, en het feit dat veel verouderde versies van de toen gebruikte technieken en libraries niet langer worden ondersteund, is het geadviseerd om te upgraden naar Magento 2.

Nieuwe webshops worden alleen nog ontwikkeld op Magento 2. Indien wordt gesproken van een Magento webshop, dan mag er in 2024 van uitgaan worden dat Magento 2 wordt bedoelt.

Screenshot van het Magento 1 admin panel, een vertrouwd aanzicht voor iedereen die ooit met Magento 1 heeft gewerkt. Naar schatting draaien er in 2024 nog ±25.000 webshops op Magento 1.

Er zijn twee versies: Magento Open Source en Adobe Commerce

Magento 2 is beschikbaar in twee versies: Magento Open Source en Adobe Commerce. Adobe Commerce is de gelicenseerde versie van Magento 2, met een aantal extra features. Het aanschaffen van een licentie biedt daarnaast toegang tot directe support van Adobe. 

Magento Open Source kan gebruikt worden zonder licentie (ook voor commerciële doeleinden).

Ondanks de tegenstrijdige naamgeving, zijn beide versies open source. Dit betekent dat ontwikkelaars, zoals wij, toegang hebben tot de broncode. Dit helpt in het begrijpen van de software, het ontwikkelen van maatwerk modules en maakt het mogelijk om bugs problemen op te lossen.

De kosten van een Adobe Commerce licentie

Met de vraag ‘wat kost een Magento 2 webshop’ wordt meestal gedoeld op de licentiekosten. De kosten van een Adobe Commerce Licentie zijn op dit moment (2024) niet gestandaardiseerd en onderhandelbaar. Wel zijn ze gedeeltelijk gebaseerd op omzet of, in het geval van een nieuw merk, de verwachtte omzet.

Bij interesse is in een Adobe Commerce licentie, biedt Adobe een meerjarig contract aan met een toenemende korting voor een langere duur. Het is geadviseerd om de onderhandeling te voeren in samenwerking met de magento partner die de webshop zal realiseren. Wij voeren deze onderhandelingen met onze vaste contactpersonen binnen Adobe.

Tip: Laat een Magento 2 webshop bouwen door een gespecialiseerd bureau

Het is geadviseerd om een Magento 2 webshop te laten ontwikkelen door een magento specialist, een bedrijf dat gespecialiseerd is in het ontwikkelen van Magento 2 webshops. Magento is specialistische software en heeft een vrij hoge complexiteit, waardoor de moeilijkheidsgraad van projecten snel wordt onderschat.

Het project neerleggen bij een ervaren bureau, is de kortste route naar een succesvol project.

Interne developers kunnen bijdragen aan het project

Indien er binnen het interne development team ervaring is met de juiste programmeertalen, dan kunnen interne developers bijdragen aan het project. Dit kan het ontwikkelproces versnellen en resulteert in waardevolle kennisoverdracht tussen het externe bureau en interne developers. Noodzakelijk is dat er het externe bureau haar proces hierop heeft ingericht, met onder andere formalisatie van het scrum proces, automatisering van de ontwikkelstraat en afspraken rondom code reviews. Informeer hiernaar bij het aanschrijven van bureau’s in de zoektocht naar een geschikte Magento partner.

De grootte van het projectteam

Voor het laten bouwen van een gemiddeld tot grote (maximale jaaromzet ±250M) nieuwe webshop binnen redelijke termijn (enkele maanden), bestaat een gemiddeld projectteam uit 2 tot 4 programmeurs, 1 a 2 designers en een projectmanager.

Voor de doorontwikkeling het het onderhoud van een webshop van gelijke grootte, kan het team in de regel met de helft worden afgeschaald. Binnen het partnerschap tussen extern bureau en opdrachtgever, is het belangrijk dat de rol van product owner (PO) door de opdrachtgever wordt vervult.

Voor de ontwikkeling van een gemiddeld tot grote webshop volstaat een gemiddeld projectteam uit 2 tot 4 programmeurs, 1 a 2 designers en een projectmanager.

Binnen het proces is het belangrijk om op de juiste momenten, de juiste specialisten aan te haken. Binnen een gemiddeld project zijn dit personen binnen marketing, SEO (search engine optimization), logistiek en klantenservice. Deze verantwoordelijkheid ligt bij de project manager.

Voorbeeld van het Magento admin paneel voor beheerders

Door de veelzijdigheid van Magento en de verschillende invalshoeken waar vanuit je het systeem kunt beschrijven, is het te krijgen bij hoe Magento 2 er uiteindelijk uitziet voor beheerders. Magento uiteindelijk ook simpelweg een content management systeem (voor e-commerce) dat beschikt over een administratiepaneel. Dit ‘adminpanel’ is te benaderen via een geheime url op de domeinnaam van de webshop, bijvoorbeeld /administratie en ziet er als volgt uit:

Inloggen op het Magento 2 adminpanel

Screenshot van het dashboard, zichtbaar wanneer je ingelogd bent op het Magento 2 admin panel

Zo ziet een standaard Magento 2 ‘front-end’ er uit

Wanneer je een Magento 2 webshop laat bouwen en installeren op een server, of bij de oplevering van een Adobe Commerce Cloud omgeving, beschikt de webshop over een standaard front-end: de voorkant van de webshop waarmee eindgebruikers interacteren. Deze standaard front-end is erg basic, maar demonstreert wel alle functionaliteiten die het systeem te bieden heeft. Het design van de standaard front-end bestaat uit het Luma thema en ziet er als volgt uit:

Een homepagina screenshot van een Magento 2 webshop met standaard Luma thema. Luma is het startpunt voor veel Magento projecten wanneer niét voor een headless benadering wort gekozen.

De categoriepagina van Magento 2, standaard opgemaakt met het Luma thema

Magento functionaliteit kan worden uitgebreid met modules of extenties

Magento heeft standaard veel functionaliteit. Bijvoorbeeld een zoekfunctie, categoriepagina’s, de winkelwagen en de ‘checkout’ (het afrekenproces). Om extra functionaliteit toe te voegen, of bestaande functionaliteit ingrijpend te veranderen, kunnen Magento modules of extensies worden geïnstalleerd.

Deze modules worden ontwikkeld door externe bedrijven of individuen en zijn te koop of gratis te downloaden. De beste modules voor Magento 2 hebben we eerder op een rijtje gezet, inclusief voorbeelden van hoe we ze in de praktijk toepassen bij projecten.

Het is gebruikelijk dat betaalde Magento modules worden aangeboden met een licentie voor één jaar updates en ondersteuning. De functionaliteit blijft na het verstrijken van dit jaar werken, maar komt niet meer in aanmerking voor updates (en bugfixes) totdat de licentie wordt verlengd.

Er kunnen meerdere webshops draaien op één Magento 2 installatie

Magento 2 biedt de mogelijkheid voor een multi-store setup, een configuratie waardoor er meerdere webshops met eigen domeinnaam en look & feel op hetzelfde systeem kunnen draaien. Via het admin panel kan het productassortiment voor elke webshop apart worden ingesteld, met bijvoorbeeld eigen productbeschrijvingen, categorisering en prijzen. De bestellingen en klanten worden gescheiden opgeslagen en ook admin-accounts zijn alleen toegang te verlenen tot een specifieke webshop.

De wijze waarop bezoekers van taal (store) wisselen op de headless webshop van onze klant Vaessen Creative

A single instance of the Adobe Commerce software enables you to start multiple websites or store views that use different attributes and content, such as: Default languages, Domain names, Categories, Products, Currencies. ⁠ ⁠This flexible solution enables one Magento codebase and Admin to administer and display different stores. You configure the websites, stores, and store views in the Admin. Use certain variables in virtual hosts to start the Magento application using these websites or store views. ⁠ ⁠Bron: Adobe

Magento 2 webshops worden gekoppeld aan andere systemen

De meeste organisaties hebben al verschillende softwarepakketten en systemen in gebruik waarin informatie ligt opgeslagen die relevant is voor de webshop. Bijvoorbeeld informatie over het productassortiment, de prijzen van producten of voorraad informatie. Om deze informatie in de webshop te tonen, worden externe systemen met de webshop gekoppeld.

Het koppelen van bijvoorbeeld boekhoudsoftware of een voorraadsysteem met Magento, betekent dat data wordt uitgelezen en wordt opgeslagen in de database van Magento. Bij een dergelijke koppeling verloopt de datacommunicatie idealiter via API’s, maar het is niet ongewoon dat er gebruik wordt gemaakt van CSV-bestanden voor gegevensoverdracht. Een geautomatiseerde koppeling voorkomt handmatig werk, is efficiënt en voorkomt menselijke fouten. Het nadeel van een traditionele koppeling zoals hierboven beschreven is dat het kostbaar is en technisch foutgevoelig.

Headless maakt koppelen eenvoudiger

Bij het bouwen van een Magento 2 webshop met headless frontend (volgens een headless strategie), wordt de front-end als losstaande applicatie gerealiseerd. Naast dat een headless front-end naast andere voordelen vooral sneller is, biedt een headless strategie ook een betere manier van koppelen: De front-end applicatie kan live data uit externe systemen uitlezen. Deze data hoeft niet eerst met een import-proces in Magento te worden opgeslagen.

Het koppelen van een headless frontend met externe systemen is efficiënter en voorkomt uitdagingen rondom duplicate data (namelijk: het continue updaten en gelijk trekken van data). Headless maakt het mogelijk om sneller nieuwe software uit te zoeken, zoals een betere search of nieuw klant-retentie systeem, en alleen de noodzakelijke data in de webshop te tonen.

De headless front-end van Verdouw, is direct gekoppeld met het ERP systeem om prijzen van producten volgens prijsafspraak (een uniek kortingspercentage per klant) te tonen. De data wordt niet eerst in Magento opgeslagen.

Data van de oude webshop kan worden overgezet naar Magento 2

Wanneer Magento 2 een bestaande webshop zal vervangen, kan relevante data worden overgezet. Een dergelijk migratieproces voorkomt dat data, indien alleen aanwezig in de database van de huidige webshop, (klantgegevens, bestellingen) verloren gaat. Een datamigratie is maatwerk, maar er zijn verschillende data migration tools voor Magento 2 beschikbaar.

Magento 2 Frontend strategie: thema of headless

De meeste organisaties hebben hun eigen wensen en ideeën voor het design en de functionaliteit van hun webshop. Om deze doelstellingen te realiseren, is er bij de start van het project een belangrijke keuze te maken: wordt de frontend gebouwd in Magento, of als headless applicatie. Beide benaderingen hebben voor- en nadelen:

Optie 1: Standaard Magento frontend, op basis van een thema

De klassieke methode voor het bouwen van de Magento 2 webshop frontend, is door de standaard front-end (het Luma thema) te modificeren of door een aangeschaft thema (zoals Porto of Hyva) als startpunt te nemen:

Voordelen:

• Thema’s zijn goedkoper bij initiële ontwikkeling, mits er weinig aanpassing wordt gedaan.
• Veel Magento modules zijn compatibel met verschillende thema’s, waardoor frontend functionaliteit er goed uit ziet na installatie.

Nadelen:

• Magento 2’s technologie (PHP) is minder geschikt voor het ontwikkelen van een snelle, high-end gebruikerservaring.
• Één grote, gecombineerde codebase (front- en backend) verhoogt risico’s bij updates.
• Er is beperkte designvrijheid; de monolitische codebase dicteert look & feel.
• Veel templates zijn ondermaats van kwaliteit.
• Onderhoud en doorontwikkeling van webshops gebaseerd op een thema zijn op termijn kostbaarder.
• Koppelen met externe systemen kan alleen op traditionele manier; data wordt gedupliceerd naar de Magento 2 database.

Optie 2: Headless frontend

De nieuwe methode voor het bouwen van Magento 2 webshops is met een headless front-end. De front-end wordt als losse applicatie gebouwd met moderne technieken (React) en gekoppeld aan Magento door middel van de nieuwe GraphQL API:

Voordelen

• De gebruikte technologie (React, Next.js) is moderne technologie specifiek ontwikkeld voor front-ends.
• Door systemen te splitsen, zijn updates kleiner en minder ingrijpend.
• Doordat de front-end los staat van de backend, is er volledige vrijheid in design.
• De grote innovatie op front-end gebied draait om deze technologie.
• Met een headless strategie is het koppelen met andere systemen naast Magento eenvoudiger.
• Met deze technologie kan de headless frontend als PWA worden gebouwd, wat de snelle gebruikerservaring biedt van een app.
• Toekomstbestendig: ongeacht de richting van Adobe (Commerce) - mogelijk in de toekomst cloud-only - kan de headless frontend operationeel blijven.

Nadelen

• Een headless strategie is relatief gezien kostbaarder dan Magento + thema
• Sommige Magento modules bieden (nog) geen GraphQL functionaliteit, dus zijn niet te integreren in een headless frontend

Video van de navigatie van onze headless Magento 2 demo. Headless biedt volledige vrijheid op het gebied van design en user experience.

Aan de slag

Nu je bekend bent met de kernconcepten van Magento 2 en Adobe Commerce, beschik je over de nodige kennis om een project succesvol op te starten. Hoewel een Magento 2 webshop ontwikkeltraject technisch van aard is, hoeft je technische kennis als product owner in de praktijk meestal niet verder te rijken dan het niveau waarop we de onderwerpen behandeld hebben in dit artikel.

Veel succes, en mocht je nog vragen hebben dan kun je altijd contact met mij opnemen.