InstantFilter vs WP Grid Builder

WP Grid Builder wint bij Bricks-bouwers omdat het één pakket is voor het raster én de facetten. Die facetten zijn Ajax: de indextabel versnelt het opzoeken, en een custom Ajax-endpoint stuurt daarna nieuwe kaarten terug. InstantFilter bouwt dat raster niet. Het filtert het WooCommerce-archief dat de server al heeft gerenderd. Na hydratatie kost een klik 1,5ms tot 5ms en 0 SQL. Een Ajax-round-trip zit in de band van 800ms tot 2.500ms. Dat is de klasse van het probleem, geen meting van één WP Grid Builder-shop.

Wat is WP Grid Builder naast een WooCommerce-filter?

WP Grid Builder query’t post types, taxonomie-termen en users, en toont die in een eigen grid met eigen kaarten. WooCommerce en Easy Digital Downloads zijn daar een bron tussen, niet de enige. Een facet kan filteren, sorteren, bijladen, resetten of pas toepassen na een knop. Eén facet filtert één grid of één query tegelijk.

Dat bereik is de reden dat bureaus het pakket pakken als de site méér is dan een shop: een portfolio, een nieuwsoverzicht, een ledenlijst, en daarnaast de producten. InstantFilter doet dat tweede deel niet. Het is een archieffilter voor categorieën, taxonomieën en merkpagina’s. Geen header-zoekbalk, geen grid voor berichten of users. Wie alleen producten in een categorie sneller wil laten filteren, vergelijkt twee architecturen. Wie ook posts moet filteren, vergelijkt twee producten met een andere taak.

In die shop-taak staat WP Grid Builder naast FacetWP en JetSmartFilters: een index om de query lichter te maken, en alsnog een serververzoek per klik. Het verschil met InstantFilter staat in de gids AJAX versus frontend-first filtering. De index is niet het onderscheid. De plek waar de klik landt, is het onderscheid.

Waarom blijft een gridfacet een Ajax-klik?

Filterfacetten van WP Grid Builder, behalve zoeken en user-selectie, worden geïndexeerd in een eigen tabel. Die tabel vervangt een zware meta_query over wp_postmeta niet door een browser. Hij maakt het opzoeken op de server sneller. De klik zelf gaat naar een custom Ajax-endpoint. PHP zoekt de set, rendert de kaarten die in het grid horen, en stuurt die HTML terug. De pagina herlaadt niet. De worker is wel bezet.

Elke extra keuze — maat, kleur, prijs, voorraad — is een nieuw verzoek. De indextabel houdt dat verzoek korter dan een kale WooCommerce-query. Hij haalt de netwerk- en PHP-tijd er niet uit. Op een stille catalogus voelt dat als een korte spinner. Op een categorie met veel gelijktijdige bezoekers stapelen die verzoeken. InstantFilter bezet tijdens die klik 0 PHP-workers: de set staat na de eerste render in de browser.

De eerste HTML van InstantFilter is het archief, server-side, zodat een crawler de producten ziet zonder het facet te gebruiken. WP Grid Builder levert het grid ook server-side bij de eerste load. Het verschil begint bij de tweede actie. Daar rendert hun endpoint alleen de elementen die gefilterd worden, niet de hele pagina. Dat is zuiniger dan een volledige reload, en het blijft een render op de server. InstantFilter rendert die kaarten niet opnieuw. Het toont de subset die al in het codebook zit.

Een page-cache kan de kale archief-URL van InstantFilter serveren, omdat de klik admin-ajax.php niet raakt. Een Ajax-facet maakt van elke combinatie een eigen antwoord. Die antwoorden warm je niet op met één gecachte categoriepagina. De Bricks-add-on van WP Grid Builder zegt hetzelfde van de andere kant: de optie “Cache query loop” in Bricks moet uit blijven, anders loopt de query die het facet wil sturen spaak.

Hoe plaats je InstantFilter in Bricks zonder een query-loop?

De Bricks-add-on van WP Grid Builder voegt twee elementen toe: een grid en een facet. Het facet wijst naar één grid of één Bricks-element op dezelfde pagina. Het filtert geen query loop die in een Component zit, omdat die loop zijn eigen query-context heeft. Het hoort niet naast de eigen filter van Bricks te staan. Paginatie komt uit een facet, niet uit de paginatie van Bricks.

InstantFilter zet het archief niet in die loop. In Bricks zijn er vier native elementen: sidebar plus grid, grid, filterzijbalk, en één los filter. De kaart, de breekpunten en de drawer staan in de Layout Builder, niet in de styling van een Bricks Query Loop. De “Structure only”-modus laat Automatic.css de look doen en houdt de functionele grid-CSS. Het element is de shell. De listing is de data.

In Elementor is het pad een shortcode in de Theme Builder, geen loop-grid die je per widget aan een provider koppelt. WP Grid Builder kan daar ook een grid neerzetten. Het blijft hun grid, met hun Ajax-endpoint. InstantFilter onderschept het archief. Het vervangt de Elementor-loop niet door een tweede query-bouwer.

De laatste rij is de band van Ajax tegenover de band van InstantFilter. Het is geen stopwatch op een WP Grid Builder-installatie. Een shop met een klein grid en een warme index zit aan de onderkant van die Ajax-band. Een shop die per klik kaarten rendert en tellers uitrekent, zit erin zodra het netwerk en PHP meedoen.

Hoe verschillen de kaart en de facet-telling?

In WP Grid Builder ontwerp je de kaart in hun editor: prijs, voorraad, sale-badge en een add-to-cart-knop komen uit WooCommerce, in een kaart die bij het grid hoort. Elke Ajax-klik stuurt die kaarten opnieuw. De facetopties komen uit de indextabel, zodat de lijst met maten en merken niet bij elke request uit losse postmeta wordt geoogst. De telling die de bezoeker ziet, reist mee met dat antwoord.

InstantFilter telt na hydratatie in de set die de browser al heeft. Een optie op 0 verdwijnt. De gekozen optie blijft staan. De telling van een facet negeert de eigen keuze van dat facet, zodat je ziet wat een tweede kleur nog toevoegt. Hoe dat precies werkt, staat in de gids over dynamische facet-tellingen. Er gaat geen COUNT mee in een Ajax-body.

Variaties lopen daar doorheen. Een kleurfilter in een klassiek grid toont het hoofdproduct dat die variatie ergens heeft. Variation Explode zet de variatie zelf als kaart in het archief, met eigen beeld en prijs. Dat is een listing-instelling, geen extra grid-plugin. WP Grid Builder kan een productkaart rijk maken. Het vouwt de variatiematrix niet standaard uit tot losse kaarten in het WooCommerce-archief.

Wanneer blijf je bij WP Grid Builder?

Test het naast elkaar op staging. Zet WP Grid Builder niet meteen uit. Open een categorie, het netwerktabblad, en klik een maat. Bij WP Grid Builder verschijnt een verzoek naar het Ajax-endpoint en nieuwe kaart-HTML. Bij InstantFilter blijft dat tabblad stil na de eerste document-request, en het grid verandert wel. Blijft de catalogus ook berichten en users filteren, dan lost InstantFilter die pagina niet op. Dan houd je WP Grid Builder voor dat grid, en het archief voor de shop.

Veelgestelde vragen over WP Grid Builder

Verdiep je verder

Een grid en een archieffilter lossen een andere klik op. Deze pagina’s gaan door op die architectuur:

• WooCommerce-filter voor Bricks Builder
• WooCommerce-filter voor Elementor
• AJAX vs frontend-first filtering
• InstantFilter vs FacetWP
• InstantFilter vs JetSmartFilters
• Bekijk InstantFilter licenties en prijzen