Voor jouw e-commerce ambities
Contact opnemen
Stuur een bericht Direct bellen Stuur een e-mail

Contact

Inventus » Blog » Het ontwikkelen van een headless CMS met Woocommerce

Het ontwikkelen van een headless CMS met Woocommerce

4 min
30 september 2020
Thomas in het Veld | 1 artikelen

Wat is een headless CMS?

In een headless CMS is de beheeromgeving (het CMS) losgekoppeld van de voorkant, oftewel het visuele gedeelte van een webshop. Op deze manier gebruik je de voordelen van WooCommerce, zoals de gebruiksvriendelijkheid. en haal je de nadelen weg, denk aan overbodige code en bijkomende plugins.  Door een zogenoemde “tussenlaag” tussen de voorkant (front-end) en achterkant (back-end) te ontwikkelen, zal de tussenlaag alleen nodige en bruikbare data opmerken en dit vervolgens converteren naar de voorkant. Op deze manier zal een webshop bezoeker profiteren van een razendsnelle gebruikerservaring, en heeft een webshop eigenaar de mogelijkheid om out-of-the-box te denken in de vorm van het toevoegen van functionaliteiten die normaliter in WooCommerce onmogelijk zijn.

Wat zijn de voordelen van een headless CMS?

Tijdens het installeren van een WooCommerce omgeving zul je merken dat er een heleboel folders met bestanden op de server worden aangemaakt, en natuurlijk niet geheel onlogisch. WooCommerce komt initieel namelijk met een vrijwel totaal pakket voor het bouwen van een webshop, echter zullen hier natuurlijk veel functionaliteiten inzitten waar nooit gebruik van wordt gemaakt. Denk aan complete vertaalbestanden in elk mogelijke taal, of een bewerkingsprogramma voor al je afbeeldingen.

Deze functionaliteiten kunnen natuurlijk van pas komen, maar worden in praktijk niet of nauwelijks gebruikt. Dit zorgt voor onnodige ruimte, trage page loads en bijkomende security vulnerabilities. In een headless CMS laat je bovenstaande programmatuur buiten beeld, en gebruiken we alleen het hoognodige. Data!

Modulair bouwen

Bij Inventus bouwen wij een headless CMS modulair op, dit houdt in dat we terugkomende en losstaande elementen apart moduleren aan de tussenlaag. In WooCommerce worden zulke functionaliteiten ook wel plugins genoemd. De praktijk leert dat het installeren van plugins onderling voor problemen (kunnen) zorgen, omdat ontwikkelaars geen rekening houden met plugins van derden.

In WooCommerce vragen plugins namelijk continu om aandacht. Denk aan het updaten (en – op voorhand – niet weten welke codewijzigingen plaatsvinden), welke coderegels wordt geïnstalleerd bij het toevoegen van een nieuwe plugin, en het in conflict staan met andere gebruikte plugins.
Iedere plugin komt met een stuk code, die een ontwikkelaar ergens ter wereld heeft ontworpen, en waarbij ze alleen maar denken hoe ze hún eigen plugins zo goed en uitgebreid mogelijk kunnen maken. In een headless CMS bouw je dergelijke “plugins” zelf. Zo houd je de code consistent, worden updates gecontroleerd uitgevoerd en zorg je voor een optimale veiligheid.

Bij het uitbreiden van een webshop naar meerdere domeinen, kunnen deze modules gecontroleerd worden overgenomen en zullen ze decentraal van elkaar in werking staan. Updates tussen webshops zullen zo minder foutgevoelig zijn en gebruikers ondervinden dezelfde performance en gebruiksgemak tussen verschillende webshops.

Externe koppelingen

Het koppelen van externe softwaremodules is geen probleem voor een Headless CMS. Door een dataconnectie te leggen met de tussenlaag, zal elk mogelijke databron kunnen communiceren met het Headless CMS. Op deze manier is het mogelijk om software als Exact Online, PayPal of Google API’s makkelijk te koppelen. Als webshop eigenaar wil je niet gelimiteerd zijn in het aantal mogelijkheden, en wil je op kop lopen als het gaat om een goed functionerende webshop.

De techniek achter een headless CMS

Het aanleggen van een tussenlaag tussen de front / back -end zal los opereren van de WooCommerce installatie, de code taal in een headless CMS hangt af van de voorkeur van de programmeur.  Aangezien in dit headless CMS WooCommerce als voorbeeld wordt gebruikt is het aan te raden om een soortgelijke database structuur als WooCommerce te gebruiken. Vaak kun je een goede inschatting maken als je de benodigde API documentatie van in dit geval WooCommerce inkijkt. De data in de API is namelijk de data die wij nodig hebben, en welke beschikbaar is. We plaatsen zoveel mogelijk data in de tussenlaag, en communiceren dit vervolgens met de front-end, wat immers op dezelfde applicatielaag als de tussenlaag opereert. Middels het gebruik van Webhooks kunnen er wijzigingen vanuit WooCommerce worden opgemerkt. Zodoende zijn er niet constante GET requests nodig, d.m.v. cronjobs.

Op deze manier zal de tussenlaag altijd up-to-date blijven met de CMS omgeving (WooCommerce). En kan de front-end deze data converteren in visuele elementen en gebruik maken van realtime wijzigingen (handig bij bijvoorbeeld voorraad wijzigingen) bij het gebruik van Websockets i.c.m. Webhooks, waarin WooCommerce hier ver in achterloopt

Wij werken voor

We zijn trots op onze opdrachtgevers en de ambities die we samen hebben gerealiseerd!

Zoals gewoonlijk weer perfect. Hier kan ik wel wat mee!

Lars Keupink Eigenaar - Trampolines.nl
  • Krijg persoonlijke hulp van onze professionals

    Ons team specialisten staat voor jou klaar. Samen realiseren we jouw e-commerce ambities.

  • Verbeter het online rendement

    Online rendement is waar het om draait bij Inventus. Geen excuses, maar resultaten.

  • Realiseer ambities

    Bij Inventus houden we van uitdagingen. Daag ons uit en behaal de ambities waar je van droomt.

Afspraak maken

Accreditaties