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 yoursite.com/demo/cars/
if the “Make” facet has bmw
selected. You’d add the following conditions:
If a ruleset has no conditions, then its actions will always be applied.
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
- Else – What to do when the rulseset doesn’t match (Do the opposite, or Do nothing)
Using custom selectors
- Click the “Add action” button
- In the second dropdown, choose the
Selector
option - A new input box will appear, in which 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')
Targeting empty facets
In the “Custom selector” box (see above), enter $EMPTY
.
If you need to target the facet’s parent element instead, you’d use:
$EMPTY.closest('.widget')
Targeting active (in-use) facets
In the “Custom selector” box (see above), enter $ACTIVE
.
Changelog
1.3.0
- New added
facetwp/ruleset/apply
JS hook to support custom actions - New added
$ACTIVE
selector (similar to$EMPTY
, but targets in-use facets) - New added i18n support (props G3ronim0)
- Improved removed the modal
- Improved removed the unnecessary "ON" condition (now uses
facetwp-loaded
) - Improved styling tweaks