Een zoekmodal bouwen voor WordPress-sites met gated content

De meeste WordPress-zoektutorials stoppen zodra je een widget aan een header hebt toegevoegd.

Dit werkt niet wanneer je gated content hebt, zoals betaalde cursussen of privévideo's. Een standaard zoekfunctie lekt de titels van je privé-materiaal naar niet-ingelogde bezoekers.

Ik heb een live zoekmodal gebouwd voor een fitness-lidmaatschapswebsite. De site maakt gebruik van WordPress, WooCommerce, Divi, LearnDash en WishList Member.

Hier lees je hoe je een zoekfunctie bouwt die rekening houdt met je paywall.

The Architecture

Ik heb een uniforme index gebruikt met toegangsgevoelige filtering. Ik heb hiervoor gekozen om ervoor te zorgen dat een niet-ingelogde gebruiker nooit een titel of fragment van een bericht dat alleen voor leden is, te zien krijgt.

De UI gebruikt een icoon dat een overlay over het hele scherm opent. Dit bespaart ruimte op mobiel en ziet er strakker uit dan een krap invoerveld.

The Backend

Alles draait via één enkele aangepaste REST-route in een child theme.

Belangrijke technische regels:

  • Afhankelijkheden beschermen: Gebruik een functiecontrole voor zoekplugins zoals Relevanssi. Als de plugin ontbreekt, moet de zoekfunctie terugvallen op de WordPress-kern in plaats van de site te laten crashen.
  • Server-side filtering: Filter resultaten nooit met JavaScript. Als je een resultaat in de browser verbergt, staat de data al in de netwerkrespons. Iedereen met DevTools kan het zien. Filter de data voordat de server de respons verstuurt.
  • Cache-uitsluiting: Je moet je zoek-REST-route uitsluiten van page caching. Als je de resultaten cachet, kan de zoekopdracht van een lid aan een gast worden getoond, waardoor privé-content lekt.

The Frontend

De client-zijde gebruikt vanilla JavaScript.

Drie dingen die de UX laten werken:

  • Debounce: Wacht 250ms na een toetsaanslag voordat je een verzoek verstuurt. Dit voorkomt onnodige serverbelasting.
  • AbortController: Annuleer eerdere verzoeken wanneer een gebruiker blijft typen. Dit voorkomt dat oude resultaten de nieuwe overschrijven.
  • Error states: Toon een duidelijke melding als een fetch mislukt. Een draaiende loader die nooit stopt, is slechte UX.

The Mobile Lesson

Ik probeerde de zoekknop in het Divi-mobiele menu te injecteren. Het thema onderschepte de klikken, waardoor de knop niet klikbaar was.

De oplossing was simpel: Stop met het bevechten van het thema.

In plaats van de knop in het menu te plaatsen, heb ik deze als een op zichzelf staand element in de header geïnjecteerd. Hierdoor bleef deze buiten de controle van het thema en was hij gemakkelijk aan te tikken.

Summary

  • Toegangscontrole moet op de server plaatsvinden.
  • Sluit zoek-endpoints uit van je cache.
  • Gebruik debounce en AbortController om verzoeken af te handelen.
  • Escape alle API-data voordat je deze in de DOM injecteert om XSS te voorkomen.
  • Als een page builder je code tegenwerkt, plaats je element dan ernaast in plaats van erin.

Source: https://dev.to/highcenburg/building-a-search-modal-for-a-membership-gated-wordpress-site-b92