Gists

2 years ago
<?php
/** 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 } );
3 months ago
<?php

// Hierarchical Checkboxes Facet Accordion with 'opened' class for facet-expand icons for custom CSS styling of opened and closed parents
// Add to your (child)( theme's functions.php

// Adds an 'opened' class to facet-expand of an opened parent.
// Closes other parents on click of a parent
// Also works when the initial page load is with a child selected, causing the parent to be 'opened'.
// The style part is just for demonstration. Use the selectors to style the facetwp-expand icons.

add_action( 'wp_head', function() { ?>

    <style>
        .facetwp-type-checkboxes .facetwp-expand {
            color: green;
        }
        .facetwp-type-checkboxes .facetwp-expand.opened {
            color: red;
        }
    </style>

    <script>
      (function($) {

        // Accordion part 1: toggle 'opened' class on click of icons and close other parents
        $(document).on('click', '.facetwp-type-checkboxes .facetwp-expand', function(e) {
          $(this).toggleClass('opened');
          $(this).closest('.facetwp-checkbox').siblings('.facetwp-checkbox').each(function() {
            $(this).next('.facetwp-depth').removeClass('visible');
            $(this).children('.facetwp-expand').removeClass('opened');
          });
          e.stopPropagation();
        });

        // Accordion part 2: if on first pageload a child is already selected, parent needs a 'opened' class
        $(document).on('facetwp-loaded', function() {
          FWP.hooks.addAction('facetwp/loaded', function() {
            $('.facetwp-type-checkboxes .facetwp-depth').each(function() {
              if ($(this).hasClass('visible')) {
                $(this).prev('.facetwp-checkbox').children('.facetwp-expand').addClass('opened');
              }
            });
          });
        });
      })(jQuery);

    </script>
<?php } );
3 months ago
<?php

// Add to your (child) theme's functions.php
// Disables parent options that have children, in a hierarchical Dropdown facet
// Change 'yourdropdownfacetname' to the name of your dropdown facet
// The code selects parent options with children, which are options that do *not* start with spaces (all children do start with spaces), and adds a 'disabled' attribute to them
// This works only for hierarchies that are one level deep: only top level parents will be disabled.
// It also excludes the 'Any' option

add_action( 'wp_head', function() { ?>

	<script>
        (function($) {
            $(document).on('facetwp-loaded', function() {
                $('.facetwp-facet-yourdropdownfacetname option').filter(function(){

                    var option = $(this).text();
                    var next_option = $(this).next("option").text();
                    if (option.trim() == option && option !== 'Any') { // select parents (do not contain spaces) but not the 'Any' option
                        if (next_option.trim() != next_option) { // if next option is a child (contains spaces)
                            return option;
                        }
                    }

                }).prop("disabled", true);
            });
        })(jQuery);
	</script>
<?php
} );
4 months ago
<?php

// Add to your (child) theme's functions.php
// Applies a class to results based on the facet choice
// Replace 'my_facet_name' with your facet's name (2x)
// Check the class that select each listing result. This depends on your loop setup. In this example it is .fwpl-item
// Change tje desired structure of the class to be applied. In this example it starts with myfacetclass-


add_action( 'wp_head', function () { 

?>
<script>
    document.addEventListener('facetwp-loaded', function() {
    if ('undefined' !== typeof FWP.facets['my_facet_name']) {
        let selected = FWP.facets['my_facet_name'];
        if (selected.length) {
            fUtil('.facetwp-template .fwpl-item').addClass('myfacetclass-' + selected[0]);
        }
    }
 });
    
</script>

<?php 
} );
3 months ago
<?php

// Add this to your (child) theme's functions.php or use the Custom Hooks add-on

// Download: https://github.com/harvesthq/chosen
// All options: https://harvesthq.github.io/chosen/options.html

// Download and include the chosen.js library, make sure these files are enqueued:
// chosen.jquery.min.js
// chosen.min.css

// Chosen.js expects these in the same directory as the library files
// chosen-sprite.png
// chosen-sprite@2x.png

add_action( 'wp_head', function() { ?>

    <script type="text/javascript" src="/path-to/chosen.jquery.min.js"></script>
    <link rel="stylesheet" href="/path-to/chosen.min.css" type="text/css" media="all"/>
    <script>
      (function($) {
        $(document).on('facetwp-loaded', function() {

          // FacetWP dropdowns -> Chosen.js dropdowns
          $('.facetwp-dropdown option:first-child').text('');
          $('.facetwp-dropdown').attr('data-placeholder', 'All');
          //$('.facetwp-dropdown').attr('multiple', ''); // This makes chosen.js render a multiple select instead of a single select. However this currently does NOT work with FacetWP.
          $('.facetwp-dropdown').chosen({
            disable_search_threshold: 5, // Hide the search input on single selects if there are n or fewer options.
            allow_single_deselect: true  // When set to true on a single select, Chosen adds a UI element which selects the first element (if it is blank).
          }); // For more options see: https://harvesthq.github.io/chosen/options.html

          // FacetWP Pager -> Per page facet dropdown -> Chosen.js dropdowns
          $('.facetwp-per-page-select option:first-child').text('');
          $('.facetwp-per-page-select').attr('data-placeholder', 'Per page');
          $('.facetwp-per-page-select').chosen({
            disable_search_threshold: 5,
            allow_single_deselect: true
          });

          // FacetWP Sort facet dropdown -> Chosen.js dropdowns
          $('.facetwp-type-sort option:first-child').text('');
          $('.facetwp-type-sort select').attr('data-placeholder', 'Sort by');
          $('.facetwp-type-sort select').chosen({
            disable_search_threshold: 5,
            allow_single_deselect: true
          });

          // FacetWP OLD Sort (with: [facetwp sort="true"]) -> Chosen.js dropdowns
          $('.facetwp-sort-select option:first-child').text('');
          $('.facetwp-sort-select').attr('data-placeholder', 'Sort by');
          $('.facetwp-sort-select').chosen({
            disable_search_threshold: 5,
            allow_single_deselect: true
          });
            
          // Optional: hide the dropdowns if only one option is left by interacting with facets,
          // because the above replaces the 'any/all' option for a placeholder text.
          $('.facetwp-type-dropdown select').each(function () {
            if ($(this).children('option').length == 1) {
              $(this).closest('.facetwp-type-dropdown').hide();
            } else {
              $(this).closest('.facetwp-type-dropdown').show();
            }
          });

        })
      })(jQuery);
    </script>
<?php } );
6 months ago
<?php
/** re-triggers masonry from generate press pro plugin after facet loads **/
add_action( 'wp_head', function() { ?>
<script>
document.addEventListener('facetwp-loaded', function() {
	var msnry = new Masonry( ".facetwp-template", generateBlog.masonryInit );	
	msnry.layout();
});
</script>
<?php }, 100 );
4 months ago
add_action( 'wp_footer', function() {
  ?>

    <script type="text/javascript">

      (function($) {
        document.addEventListener( "facetwp-loaded", function() {
          $( ".facetwp-checkbox.checked .facetwp-expand" ).trigger( "click" );
        });
      })(jQuery)
    
    </script>

  <?php
}, 100);
6 months ago
<?php
 /** trigger the responsive lightbox plugin to reinit on facet update
 ** https://wordpress.org/plugins/responsive-lightbox/
 **/

add_action( 'wp_head', function() { ?>
<script>
(function($) {
    document.addEventListener('facetwp-loaded', function() {
        $(document).trigger( 'rlArgs.customEvents' );
     });
})(jQuery);
</script>
<?php }, 100 );
7 months ago
/** hide entire section of facets if none have options
 ** facet-wrap is individual facet wrapper element
 ** facetwp-wrapper is wrapper elenement around all facets (grandparent)
 **/
function($) {
    document.addEventListener('facetwp-loaded', function() {
        var $all = 0; // for checking all facets
        $.each(FWP.settings.num_choices, function(key, val) {
        var $facet = $('.facetwp-facet-' + key);
        var $parent = $facet.closest('.facet-wrap');
        var $flyout = $facet.closest('.flyout-row');
        if ($parent.length || $flyout.length) {
            var $which = $parent.length ? $parent : $flyout;
            (0 === val) ? $which.hide() : $which.show();
        }
            $all += val; // add any values from this facet
        });
        (0 === $all) ? $('.facetwp-wrapper').hide() : $('.facetwp-wrapper').show(); // show hide wrapper depending on whether any facets had values
    });
})(jQuery);
8 months ago
<?php
add_action( 'wp_head', function() {
?>

<script>
(function($) {
    document.addEventListener('facetwp-loaded', function() {
        var classList = document.body.className.split(/\s+/);
        for (var i = 0; i < classList.length; i++) {
            if (classList[i].includes("-community")) {
              $('body').removeClass( classList[i] );
            }
        }
        if ( 'undefined' !== typeof FWP.facets['state'] && 1 === FWP.facets['state'].length ) {
          $('body').addClass( FWP.facets['state'][0] + '-community' );
        }
     });
})(jQuery);
</script>

<?php
}, 100 );