
Pers
Hoe bouw je een toekomstbestendig e-commerceplatform voor B2B en B2C?
Klant
Orakel
Uitdaging
Gebruikerservaring van websitebezoekers verbeteren, beheer van het platform optimaliseren
Oplossing
Integratie webshop en website, PIM-systeem, SSR en productconfigurator
De webshop en (content)website van Orakel waren opgezet als twee aparte websites. Dit kwam de ervaring van gebruikers niet ten goede en maakte ook het beheer van beide websites moeilijk. Daarnaast was de webshop van Orakel ook op functioneel vlak dringend aan vernieuwing toe.
Daarom besloot Orakel met iO de handen in elkaar te slaan om zijn digitale roer helemaal om te gooien. De nieuwe koers? Richting een geïntegreerde webshop en website en een geoptimaliseerde online gebruikerservaring. Het schip? Gebouwd met open-source software.
Om de Orakel-webshop en -website te herwerken, kozen we respectievelijk voor Drupal en Symfony, twee open-source software-oplossingen. Om de webshop en de website te integreren, kozen we voor een headless CMS. Deze liet ons toe om het inhoudsbeheer van de webshop en website te centraliseren en de performantie van het Orakel-platform te verbeteren.
Om kwalitatief en gecentraliseerd productbeheer mogelijk te maken in de webshop, bouwden we een custom PIM-systeem (Product Information Management) in Symfony. Dit PIM-systeem bevat alle productdata en is gekoppeld aan het SAP-systeem van Orakel.
De koppeling tussen het PIM- en SAP-systeem verloopt via een queue. In deze queue zet het PIM-systeem de nodige zaken klaar voor de SAP-partner van Orakel om op te pikken. Omgekeerd kan de SAP-partner van Orakel enkele endpoints in PIM-systeem gebruiken om zelf productdata aan te passen en aan te maken.
Om het (headless) CMS helemaal te kneden naar de noden van Orakel, gebruikten we een JSON API met een custom module. Daarnaast koppelden we het CMS ook aan het PIM-systeem, zodat de webmaster van Orakel makkelijk productoverzichtpagina’s kan bouwen op basis van de juiste productdata.
Aangezien we voor een headless CMS kozen, moesten we de front-end voor het Orakel-platform nog apart ontwikkelen. Om dit te doen, gebruikten we Nuxt.js, een framework gebaseerd op Javascript.
Eén van de voornaamste redenen waarom we voor Nuxt.js kozen, was de meerwaarde van SSR (server-side rendering). Dit zorgt dat de pagina’s van de Orakel-webshop en -website op de server worden gerenderd en kant-en-klaar worden aangeboden aan bezoekers en zoekmachines. Verder verhoogt SSR ook de kans op een optimale indexatie van pagina’s in zoekmachines.
Tot slot bouwden we voor de Orakel-webshop een aparte productconfigurator in Vue.js. Met de productconfigurator kunnen klanten de bedrukking op hun gekozen producten personaliseren. Die configurator zit netjes geïntegreerd in zowel de front-end als de beheermodule van de PIM.
Het nieuwe platform van Orakel is op alle vlakken een schot in de roos.
Het verouderde, gescheiden systeem maakte plaats voor een mooi geïntegreerd geheel, dat zowel voor bezoekers als beheerder een optimale gebruikservaring biedt. Dankzij het headless CMS zal Orakel in de toekomst makkelijker zijn content op andere platformen kunnen weergeven en tegemoetkomen aan de veranderende verwachtingen van (potentiële) klanten.
Pers
Pers
Blog
Case
Case
Pers
Case
Pers
Pers
Blog
Blog
Blog
Blog
Blog
Blog
Blog
White paper
White paper
Case
Case
Case
Blog
Blog
Wat we doen
Blog
Case
Case
Case
Blog
Case
Case
Case
Blog
Blog
Blog
Case
Case
Blog
Blog
Blog
Blog
White paper
White paper
Case
Stack
Case
Stack
White paper
Blog
Case
Case
Case
Case
Case
Case
Case
Case
Case
Case
Blog
Case
Case
Case
Case
Case
Case
Case
Case
Blog
Case
Case
Video
Blog
Case
Case
Case
Case
Case
Case
White paper
Case
Case
Case
Dossier
Case
Case
Case
Case
Stack
Blog
Case
Case
Case
Webinar
Webinar
Case
Webinar
Blog
White paper
Blog
Blog
White paper
Case
Blog
Stack
Stack
Stack
Case
Case
Webinar
Blog
Case
Case
Case
Case
Case
Case
Case
Wat we doen
Dossier
Wat we doen
Wat we doen
Wat we doen
Wat we doen
Wat we doen
Case
Case
Case
Blog
Case
Case
Case
Page
Page
Page
White paper
Case
Wat we doen
Case
Case
White paper
Pers
Pers
Pers
White paper
Video
Video
Video
Pers
Blog
Blog
Blog
Case
Blog
Blog
Blog
Case
Pers
Case
Case
White paper
Blog
Blog
Dossier
Blog
Pers
Blog
Pers
Stack
Stack
Stack
Blog
Blog
Pers
Pers
Pers
Blog
Case
Webinar
Pers
Sector
Webinar
Dossier
Dossier
White paper
Blog
White paper
White paper
Webinar
Blog
Blog
Pers
Pers
White paper
White paper
Blog
Blog
Pers
Dossier
Blog
Blog
Stack
Webinar
Blog
Blog
Webinar
Case
Blog
Webinar
White paper
Webinar
Dossier
Dossier
Blog
Webinar
Case
Webinar
Blog
Event