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 );