Een webshop waar je via de verhalen bij de producten komt

Doel

Veel content, en een winkel die gewoon werkt

Het contentteam wilde zelf pagina's en verhalen maken, zonder developer. Tegelijk moesten prijzen, voorraad en productinformatie uit Shopify komen en altijd kloppen. De site moest allebei kunnen.

Aanpak

Shopify voor de winkel, DatoCMS voor de verhalen

Ik heb de site zo opgezet dat elk systeem één taak heeft. Shopify regelt alles rond kopen, DatoCMS de content, en Next.js zet die twee samen op één pagina.

Publiceren

Pagina's bouwen met vaste blokken

In DatoCMS maakt het team pagina's van blokken die ik vooraf heb ontworpen en gebouwd. Een concept bekijken ze in een preview die eruitziet als de echte site. Bij publiceren worden alleen de gewijzigde pagina's opnieuw gegenereerd, dus een nieuw artikel staat vrijwel meteen online.

Productpagina's

Shopify eerst, het verhaal erbij als dat er is

Een product- of collectiepagina begint altijd bij Shopify. Heeft de redactie in DatoCMS extra content voor dat product gemaakt, dan komt die erbij. Zo niet, dan staat er gewoon een complete productpagina met de gegevens uit Shopify. Een nieuw product is dus meteen te koop, ook als het verhaal nog niet af is.

DatoCMS-plugin

Producten aanklikken in plaats van ID's plakken

Zonder hulpmiddel koppel je een Shopify-product aan content door een ID te kopiëren en in het CMS te plakken. Eén verkeerd teken en er staat een ander product op de pagina. Daarom bouwde ik een DatoCMS-plugin waarmee redacteuren producten, varianten en collecties uit Shopify opzoeken en aanklikken, met foto en prijs erbij.

Onderhoud

Fouten zien voordat ze live staan

De site haalt data uit twee API's. Uit de GraphQL-schema's van DatoCMS en Shopify genereer ik automatisch TypeScript-types (GraphQL code generation, met graphql-request in Next.js). Past een wijziging in het contentmodel niet meer bij de code, dan zie ik dat tijdens het bouwen en niet pas als een bezoeker op een kapotte pagina belandt.

Snelheid

Vooraf gebouwd, ververst bij publiceren

De site draait op Vercel met SSG en ISR. Pagina's staan klaar voordat iemand ze opvraagt. Een webhook vanuit DatoCMS ververst alleen de pagina's die veranderd zijn. Afbeeldingen worden automatisch geschaald en code wordt per pagina ingeladen, zodat ook de zware contentpagina's snel blijven.

Resultaat

Live in mei 2024, na drie maanden

De nieuwe webshop ging in mei 2024 live. Shopify doet waar het goed in is: producten, voorraad en de checkout. In DatoCMS schrijft het team zelf verhalen en koppelt daar producten aan, zonder mij erbij te halen.