Documentatie · Integratiehandleiding

Page Builder-integratie

Dit document legt uit hoe u de ADP Car Market Hub-plugin gebruikt binnen page builder-werkstromen, hoe u shortcodes plaatst op pagina's die met een willekeurige pagina-editor zijn gebouwd, en wat u na plaatsing aan de frontend moet controleren.

Wanneer u dit document moet gebruiken

Gebruik dit document als u:

Voertuigoverzichten, zoekfilters of de vergelijkingstool insluit op pagina's die zijn gebouwd met een page builder zoals Elementor, WPBakery, Divi, Beaver Builder of de WordPress blokeditor (Gutenberg).
Een aangepaste homepage of landingspagina maakt die een gefilterde subset van de voertuigvoorraad moet tonen.
Een losstaand zoekfilter op een pagina plaatst, zodat bezoekers kunnen beginnen met filteren voordat ze naar de resultatenpagina navigeren.
Problemen diagnosticeert waarbij plugin-assets niet correct worden geladen op een page builder-pagina.

De doelgroep is een WordPress-beheerder of sitebouwer. Er is geen PHP- of CSS-kennis vereist voor basisplaatsing van shortcodes.

Overzicht

De plugin biedt drie frontend-shortcodes die u op elke WordPress-pagina kunt plaatsen, inclusief pagina's die zijn gebouwd met page builders van derden:

Shortcode	Wat het rendert
`[as24ci_archive]`	Volledig voertuigoverzicht met zoekfilters, sorteeropties, statustabbladen en paginering. Gelijk aan de voertuigarchiefpagina.
`[as24ci_search_filter]`	Losstaand zoekfilterformulier zonder resultaten. Stuurt door naar het voertuigarchief of naar een specifieke resultatenpagina die u opgeeft.
`[as24ci_compare]`	Voertuigvergelijkingstabel. Afhankelijk van voertuigen die door de bezoeker aan de vergelijkingslijst zijn toegevoegd.

Aanvullende shortcodes zijn beschikbaar voor secundaire functies:

Shortcode	Wat het rendert
`[as24ci_favorites]`	Lijst met voertuigen die de bezoeker als favoriet heeft gemarkeerd.
`[as24ci_location_box post_id=""]`	Kaart met dealerlocatie voor het opgegeven Locatie-bericht.
`[as24ci_hours_box post_id=""]`	Kaart met openingstijden voor het opgegeven Locatie-bericht.

Deze shortcodes werken in elke page builder die standaard WordPress-shortcodes ondersteunt. De uitvoer is hetzelfde als de bijbehorende door de plugin beheerde pagina's.

Systeemvereisten

Voordat u shortcodes plaatst:

De plugin is geïnstalleerd en geactiveerd.
Er is ten minste één voertuig geïmporteerd (voor [as24ci_archive] en [as24ci_search_filter]).
Pretty permalinks zijn ingeschakeld (Instellingen → Permalinks). Zonder mooie permalinks kan de URL van het voertuigarchief mogelijk niet correct worden opgelost wanneer [as24ci_search_filter] een bezoeker doorverwijst naar de resultatenpagina.
Als u de Blokeditor (Gutenberg) gebruikt, is er geen extra configuratie nodig. Als u een page builder van derden gebruikt, controleer dan of deze WordPress-shortcodes behoudt zonder de vierkante haken te coderen of te escapen.

Stapsgewijze instructies

Het voertuigarchief insluiten op een pagina

Maak een nieuwe pagina aan of open een bestaande pagina in uw page builder.
Voeg een shortcode-blok toe (of het equivalent daarvan in uw page builder — Elementor heeft een Shortcode-widget, WPBakery heeft een Single Image → Shortcode-element, Divi heeft een Code-module, enzovoort).
Plak de shortcode:

   [as24ci_archive]

Om het overzicht vooraf te filteren — bijvoorbeeld om alleen elektrische voertuigen te tonen — gebruikt u de optionele shortcode-attributen:

   [as24ci_archive fuel="electric" per_page="24"]

Ondersteunde attributen:

Attribuut	Waarden	Beschrijving
`make`	Elke merk-slug (bijv. `bmw`)	Selecteert vooraf een merk.
`model`	Elke model-slug (bijv. `3-series`)	Selecteert vooraf een model (gebruik samen met `make`).
`price_min`	Geheel getal	Minimumprijsfilter.
`price_max`	Geheel getal	Maximumprijsfilter.
`fuel`	Elke brandstoftype-slug	Selecteert vooraf een brandstoftype.
`body`	Elke carrosserievorm-slug	Selecteert vooraf een carrosserievorm.
`order_by`	`price`, `mileage`, `date`	Standaard sorteerveld.
`order`	`asc`, `desc`	Sorteerrichting. Standaard `asc`.
`per_page`	`12`, `24`, `48`, `72`, `all`	Resultaten per pagina. Standaard `24`.

Shortcode-attributen stellen de standaardwaarden in. Bezoekers kunnen deze nog steeds overschrijven door interactie met de filters op de pagina. URL-queryparameters hebben altijd voorrang op shortcode-attributen.

Publiceer de pagina of bekijk een voorbeeld en controleer of het voertuigoverzicht verschijnt.

Een losstaand zoekfilter insluiten

Plaats [as24ci_search_filter] ergens op een pagina — bijvoorbeeld op de homepage — zodat bezoekers hun criteria kunnen instellen voordat ze naar de resultatenpagina worden geleid.

[as24ci_search_filter results_url="/cars/"]

Het attribuut results_url specificeert waar het formulier naartoe wordt verzonden. Dit verwijst standaard naar de URL van het voertuigarchief. Stel dit in op de URL van een pagina die [as24ci_archive] bevat.
Als de plugin de archief-URL niet automatisch kan bepalen en results_url niet is ingesteld, valt het formulier terug op /cars/.

De vergelijkingspagina als sjabloon gebruiken

De vergelijkingspagina is een speciaal WordPress-paginasjabloon (page-as24ci_compare.php). De plugin kan tijdens de installatie automatisch een Vergelijken-pagina aanmaken. U kunt ook [as24ci_compare] in een shortcode-blok op een gewone pagina plaatsen om de vergelijkingstabel inline in te sluiten.

Configuratiereferentie

Alle shortcodes maken gebruik van instellingen die al zijn gedefinieerd in het beheer van de plugin. Er zijn geen afzonderlijke configuratievelden voor de page builder-modus.

Shortcode-attribuut	Waar de onderliggende opties vandaan komen
Welke filters verschijnen in `[as24ci_archive]` en `[as24ci_search_filter]`	De actieve filterlay-out geconfigureerd in het tabblad Filters van het plugin-beheer.
Visueel ontwerp van alle shortcodes	Car Market Hub → Design — kleuren, typografie, randradius, enz.
Feature flags (favorieten, vergelijken, zoekagent)	Car Market Hub → Instellingen (en de Setup Wizard). Als een functie is uitgeschakeld, rendert de bijbehorende shortcode niets of toont deze een melding.

Laden van assets

De plugin detecteert of er een shortcode aanwezig is op de huidige pagina met behulp van de has_shortcode()-functie van WordPress, en laadt automatisch de juiste CSS- en JavaScript-bestanden. U hoeft het laden van assets niet handmatig te configureren.

Op pagina's die [as24ci_archive] of [as24ci_compare] gebruiken, worden de volgende stylesheets geladen:

as24ci-archive.css — voor [as24ci_archive]
as24ci-compare.css — voor [as24ci_compare] en voor de vergelijkingsknop op archief- en detailpagina's
as24ci-search-agent.css — wanneer de Zoekagent-functie is ingeschakeld

Het dynamische design-CSS-blok (<style id="as24ci-dynamic-styles">) wordt in <head> op elke frontend-pagina weergegeven, niet alleen op plugin-specifieke pagina's.

Operationele opmerkingen

Paginering op shortcode-pagina's. De shortcode [as24ci_archive] leest de queryparameters ?paged= and ?page= voor paginering. Wanneer een page builder of thema die parameters voor eigen doeleinden gebruikt, kan er een conflict ontstaan. Test de paginering op de pagina in de uiteindelijke context.
Eenvoudige permalinks. Als eenvoudige (query-string) permalinks zijn ingeschakeld, retourneert is_post_type_archive() false voor het archief van de plugin. De plugin valt terug op has_shortcode()-detectie, zodat CSS en JavaScript nog steeds worden geladen. De results_url voor [as24ci_search_filter] lost echter mogelijk niet correct op — geef in productie de voorkeur aan mooie permalinks.
Content-rendering door page builders. Sommige page builders renderen shortcodes op de server (standaard do_shortcode) en sommige renderen ze via Ajax of aan de clientzijde. De shortcodes van de plugin vertrouwen op standaard server-side rendering. Als een page builder de rendering uitstelt naar de clientzijde, kan de uitvoer er leeg uitzien in de preview van de builder, maar moet deze correct worden weergegeven op de gepubliceerde frontend.
Geneste shortcodes. Nest plugin-shortcodes niet in elkaar. Elke shortcode beheert zijn eigen WP_Query en globale status.
Volledige breedte lay-out. Net als de eigen archief- en detailsjablonen van de plugin, omsluit de shortcode-uitvoer alles binnen .as24ci-page.alignfull. Bij blokthema's zorgt dit ervoor dat het overzicht de volledige breedte beslaat. Als de page builder de pagina beperkt tot een smallere container, wordt de shortcode-inhoud door die container beperkt. Zie Theme-integratie voor details.
Positie van zoekfilter. De shortcode [as24ci_search_filter] rendert het filterformulier, maar geen resultatenlijst. Wanneer deze op de homepage wordt geplaatst, moet de formulieractie verwijzen naar een afzonderlijke pagina die [as24ci_archive] bevat.

Problemen oplossen

Symptoom	Waarschijnlijke oorzaak	Wat te controleren
Shortcode wordt weergegeven als letterlijke tekst (`[as24ci_archive]`).	De page builder escapet of codeert de shortcode in plaats van deze uit te voeren.	Gebruik de speciale Shortcode-widget of het Code-blok van de page builder in plaats van een platte-tekstblok.
Archief-shortcode toont geen voertuigen.	Er zijn nog geen voertuigen geïmporteerd, of de pre-filterattributen in de shortcode komen met geen enkel voertuig overeen.	Importeer eerst voertuigen. Controleer de attribuutwaarden met de werkelijke gegevens in Car Market Hub → Cars.
CSS wordt niet toegepast op de shortcode-pagina.	De page builder verwijdert of vertraagt de stylesheets van de plugin.	Controleer de ontwikkelaarstools van de browser → tabblad Netwerk op de stylesheet `as24ci-archive` of `as24ci-single`. Als deze ontbreekt, controleer dan of de page builder een optie heeft om assets van derden te behouden.
Dynamische CSS (`as24ci-dynamic-styles`) ontbreekt.	Een caching- of optimalisatie-plugin verwijdert inline `<style>`-blokken uit `<head>`.	Sluit `as24ci-dynamic-styles` uit van de optimalisatieregel, of zet de `as24ci-*`-handles op de whitelist.
Paginering werkt niet op de archief-shortcode-pagina.	De parameter `?paged=` wordt gebruikt of herschreven door het thema of de page builder.	Test met eenvoudige URL-navigatie. Controleer of het thema of de page builder queryparameters onderschept.
`[as24ci_search_filter]` verzendt naar de verkeerde URL.	Het attribuut `results_url` ontbreekt of verwijst naar een pagina zonder `[as24ci_archive]`.	Voeg `results_url="/cars/"` (of het juiste pad) toe aan de shortcode.