Reset knop FacetWP Search box

Standaard hebben zoekfacetten van FacetWP geen “Reset” knop of icoon. Met de onderstaande code voeg je een ‘x’ wis-knop/icoon toe aan het invoerveld van een zoek facet.

Het zal automatisch de (andere) facetten herladen bij het wissen van het zoekveld, maar alleen indien nodig.

Autorefresh FacetWP

Deze code houdt rekening met de “Auto Refresh” instelling van de zoek facet, voor het automatisch verversen van het resultaat tijdens het typen (na een korte vertraging). Als deze instelling ingeschakeld is, zal het wis-icoon alleen verschijnen na de vernieuwing, om te voorkomen dat gebruikers een lopende automatische vernieuwing wissen.

Voeg de volgende code toe aan de functions.php van je (child)thema. Zorg ervoor dat je my_search_facet vervangt met de naam van je zoek facet:

PHP Code voor in functions.php

add_action( 'wp_footer', function() {
  ?>
    <script>
      (function($) {
        $(document).on('facetwp-loaded', function() {
 
          var searchfacet = 'my_search_facet'; // Replace 'my_search_facet' with the name of your Search facet
          var searchbox = $('[data-name="' + searchfacet + '"] .facetwp-search');
 
          if(! searchbox.next('i').length) {
            searchbox.after('<i class="clear" title="Clear Search"></i>');
          }
 
          if (searchbox.val() === '') {
            searchbox.next().hide();
          }
 
          searchbox.on('keyup', function() {
            if('yes' === FWP.settings[searchfacet]['auto_refresh']) {
              $(this).addClass('loading');
            }
            if ($(this).val() !== '') {
              $(this).next().show();
            }
          });
          
          searchbox.removeClass('loading');
 
          searchbox.next().click(function() {
            // ignore while Search facet is loading
            if (!searchbox.prev().hasClass('f-loading')) {
              $(this).hide();
              searchbox.val('');
              if (FWP.facets[searchfacet].length) {
                FWP.autoload();
              }
            }
          });
        });
 
      })(jQuery);
    </script>
  <?php
}, 100 );

CSS voor een standaard x

Als je deze code toevoegt aan je stylesheet kun je het icoon stylen. Let op dat je het pas naar het icoon aanpast naar het pad waar jouw eigen x icoon op de hosting server aanwezig is.

.facetwp-type-search i.clear {
  position: absolute;
  right: 30px;
  height: 100%;
  line-height: 1;
  cursor: pointer;
  display: inline-block;
  opacity: 0.3;
  width: 24px;
  height: 100%;
  background: transparent url('/wp-content/plugins/facetwp/assets/images/icon-close.png') 6px 50% no-repeat;
  background-size: 14px 14px;
}

.facetwp-type-search i.clear:hover {
  opacity: 0.8;
}

/* no clear icon  while the Search facet is loading */
/* and when an auto-refresh is running */
.facetwp-type-search .f-loading + input + i.clear,
.facetwp-type-search .loading + i.clear {
  display: none !important;
}

.facetwp-facet input.facetwp-search {
  padding-right: 54px;
}

De volledige originele Engelstalige content van FacetWP vind je hier.