Dynamic block holepunching

Tools

Als je een willekeurige pagina van een webshop neemt, dan zal een heel groot deel van die pagina voor elke bezoeker exact hetzelfde zijn. Mocht dat bij jouw shop niet het geval zijn, dan is MageBoost mogelijk niet geschikt. Dat is echter een uitzondering. Vrijwel altijd zal slechts een klein deel van een pagina gepersonaliseerd worden voor de bezoeker.

Voor die personalisatie kun je denken aan het bekende blokje waarin staat “U heeft X producten in uw winkelmandje” of een “Laatst bekeken producten”. Ook feeds van social media vallen hier onder. Wat we ook soms zien zijn meldingen als “Bestel binnen X tijd en uw order wordt vandaag nog verzonden”.

screenshot van code editor met holepunching XML

screenshot van code editor met holepunching XML

Voor al dit soort gepersonaliseerde (dynamische) content maken we zogenaamde hole punches. Dit zijn “gaten” in de statische content. Door die gaten “kijk” je direct naar Magento. Onze implementatie voert voor elke pagina een AJAX call uit die de dynamische blokken van een pagina ophaalt. Het resultaat van de AJAX call wordt geïntegreerd met de uit de FPC geladen pagina. Dit zul je ook zien als een verandering van de pagina, snel nadat hij getoond wordt in de browser. Het resultaat van de AJAX call wordt in de browser local storage (of sessie storage) opgeslagen zodat het direct beschikbaar is bij volgende pageloads door de bezoeker. Hierdoor krijg je als bezoeker een naadloze pagina-laad ervaring, zonder dat de site constant verspringt.

Dit mechanisme kan alleen goed werken als de templates netjes opgebouwd zijn en de blokken netjes volgens de Magento methodieken zijn opgebouwd.

Veelgemaakte fouten zijn:

  • Code in de view die eigenlijk in de controller had moeten zitten. Denk aan extra filtering van lijsten direct in een HTML template.
  • Controllers die niet goed werken in AJAX context.
  • Slechte scheiding van blokken in je layout.xml bestanden. We zien heel vaak dat een winkelmandje onderdeel is van de (statische) header. Dit moet netjes gescheiden zijn.

layout.xml

Bij het maken van hole punches worden dynamische blokken in de layout.xml bestanden vervangen door zogenaamde placeholders. Dat is ook waarom het zo belangrijk dat blokken in de layout.xml bestanden ook écht statisch of écht dynamisch zijn.
De placeholders worden door de AJAX call vervangen door bezoeker-specifieke content. Deze content kan afhangen van de sessie of van de sessie én product/categorie. Dat laatste komt niet zo vaak voor. Dit zijn blokken die niet alleen per bezoeker, maar ook per bekeken product of categorie variëren.