→ Conditional Logic

This add-on lets you toggle facets (and other elements) based on certain conditions.

First, we add a Ruleset. Each Ruleset contains Conditions (IF) and Actions (THEN).

Conditions

Conditions determine what to test for.

Let’s say you want to do something on http://yoursite.com/demo/cars/ if the “Make” facet has audi selected. You’d add the following conditions:

The ON box determines when the ruleset should be evaluated:

  • Loaded – after the refresh process finishes
  • Refresh – before the refresh process starts
  • Refresh & Loaded – both

Actions

Actions determine what to do. Each action has 2 inputs:

  • Toggle – Show or Hide
  • Object – A facet, all facets, the template, or a custom selector

If the ruleset’s conditions pass validation, then the action will be performed. If not, the opposite will be performed.

Custom Selectors

Actions also support custom selectors. In the Object dropdown, select the Custom option. Within the subsequent popup, you can enter jQuery selectors (one per line).

To toggle a facet’s parent container (.widget) you’d use:

$('.facetwp-facet-categories').closest('.widget')

To target an <h3> heading directly before a facet:

$('.facetwp-facet-categories').prev('h3')

Hide Empty Facets

  • Create a new ruleset
  • Leave the Conditions blank (ON: Loaded)
  • New Action: Hide for the first dropdown, Selector for the second
  • Click the “<>” button

In the modal, use the $EMPTY selector to hide the facet itself. If you want to hide the parent container too (e.g. .widget), then you’d use:

$EMPTY.closest('.widget')

Changelog

1.2.2

  • Fixed incorrect “facets in use” detection

1.2

  • Ability to hide empty facets (see docs)

1.1.1

  • Removed github-updater.php (now in core)
  • IMPORTANT: before upgrading, please delete the older version

1.0

  • Initial release

Details

  • Version: 1.2.2
  • Updated: Oct 27, 2016

Get Started

Download now