Automatische verbergen van de FacetWP Flyout na selectie

FacetWP is een geavanceerde filtering-plugin voor WordPress, die gebruikers in staat stelt om zoekopdrachten en filteropties eenvoudig te beheren. Het implementeren van een methode om de FacetWP flyout automatisch te verbergen na een selectie kan de gebruikerservaring verbeteren door overtollige klikken te verminderen. Dit artikel legt uit hoe je dit kunt bereiken door aangepaste JavaScript-code toe te voegen aan het functions.php bestand van je WordPress-thema.

Stap voor stap instructie

  1. Open het functions.php bestand: log in op je WordPress dashboard en navigeer naar ‘Weergave’ > ‘Thema-editor’. Zoek en open vervolgens het functions.php bestand van je actieve WordPress thema. Alternatief is om via Filezilla de thema opties te bewerken.
  2. Voeg de aangepaste code toe: plaats de onderstaande code in je functions.php bestand. Deze code voegt een JavaScript snippet toe aan de kop van je website, die luistert naar de ‘facetwp-loaded’ gebeurtenis en de flyout sluit als deze actief is na een facet refresh.
  3. /** close flyout on facetwp-loaded so that the user doesn't need to close after facet refreshes **/
    add_action( 'wp_head', function() { ?>
        <script>
            (function($) {
                $(document).on('facetwp-loaded', function() {
                  if (FWP.loaded && $('.facetwp-flyout').hasClass('active') ) {
                      FWP.flyout.close();
                  }
              });
            })(jQuery);
        </script>
    <?php } );
  4. Opslaan en testen: Nadat je de code hebt toegevoegd, sla je de wijzigingen op aan het functions.php bestand en test je de functionaliteit op je website om te zorgen dat de flyout automatisch verbergt na een selectie.

Wat doet de code?

  • add_action( ‘wp_head’, function() {}): deze PHP-functie voegt de JavaScript-code toe aan de head-sectie van je WordPress-site.
  • (function($) {}) (jQuery): dit zorgt ervoor dat de $ alias werkt voor jQuery binnen de functie.
  • $(document).on(‘facetwp-loaded’, function() {}): deze jQuery-functie luistert naar de ‘facetwp-loaded’ event.
  • if (FWP.loaded && $(‘.facetwp-flyout’).hasClass(‘active’) ): deze if-statement controleert of FacetWP is geladen en of de flyout actief is.
  • FWP.flyout.close();: deze functie sluit de actieve flyout als aan de voorwaarden is voldaan.

Het toevoegen van deze aangepaste code aan je functions.php bestand helpt bij het automatisch verbergen van de FacetWP mobile flyout na selectie.

Feedback

Heb je na het lezen van dit artikel nog vragen of zijn er onduidelijkheden? Werkt de code niet op jouw website? Laat het ons weten, dan kunnen wij je misschien verder helpen.

Feedback kennisbankartikel

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Mis geen WordPress tips meer.

Al 500+ webdesigners en marketeers ontvangen deze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.

Mis nooit meer website tips.

Al 500+ webdesigners en marketeers ontvangen onze nieuwsbrief.

Naam
Dit veld is bedoeld voor validatiedoeleinden en moet niet worden gewijzigd.