Actieve categorie opengeklapt FacetWP

Activeren van open categorieën in FacetWP

FacetWP is een krachtige plugin voor WordPress die geavanceerde filters en zoekfunctionaliteit aan WordPress websites toevoegt. In dit artikel bespreken we hoe je de actieve categorie automatisch kunt openen met behulp van een stukje JavaScript code. Als je op een categoriepagina in je webshop komt en deze productcategorie heeft subcategorieën dan worden deze automatisch getoond, onafhankelijk van de instellingen in de FacetWP plugin.

Hoe de code werkt

De code voegt een JavaScript toe aan de voettekst van de WordPress website via een add_action hook die gehecht is aan de wp_footer. Wanneer de FacetWP plugin geladen is, wordt er een eventlistener toegevoegd die een klik event triggert op elke actieve (aangevinkte) checkbox facet, waardoor deze wordt geopend en de bijbehorende subcategorieën of opties worden getoond.

Code voor FacetWP

De onderstaande code kan worden toegevoegd aan de custom hooks plugin van FacetWP of bijvoorbeeld in de functions van je child thema.

add_action( 'wp_footer', function() {
?>
<script>
document.addEventListener('facetwp-loaded', function() {
    fUtil('.facetwp-checkbox.checked > .facetwp-expand').trigger('click');
});
</script>
<?php
}, 1000 );

Uitvoering

1. Navigeer naar de custom hooks plugin van FacetWP.
2. Open de plugin editor en voeg de bovenstaande code toe.
3. Sla de wijzigingen op en bekijk je website om te zien of de actieve categorie automatisch opent.

Extra uitleg

• add_action( ‘wp_footer’, function() {…}, 1000 );: Hiermee wordt de JavaScript-code toegevoegd aan de voettekst van je website. De 1000 geeft de prioriteit van de actie aan. Een hoger getal betekent een lagere prioriteit, dus de code wordt later uitgevoerd.
• document.addEventListener(‘facetwp-loaded’, function() {…});: Deze regel voegt een event listener toe die wacht tot FacetWP volledig is geladen voordat de binnenste functie wordt uitgevoerd.
• fUtil(‘.facetwp-checkbox.checked > .facetwp-expand’).trigger(‘click’);: Hier wordt de klik event getriggerd op de .facetwp-expand elementen die zich binnen de gecontroleerde .facetwp-checkbox elementen bevinden.

Door bovenstaande stappen te volgen, kun je gemakkelijk de actieve categorieën in FacetWP automatisch openen, waardoor gebruikers sneller en efficiënter kunnen navigeren en de benodigde informatie kunnen vinden. Het is een handige manier om de gebruikerservaring op websites die gebruik maken van de FacetWP plugin te verbeteren.