WP Reside Content Material Filter Out

UPDATE 3.3:

Now it's imaginable to disable the person input into filter, to allow the user to filter out simplest through the use of filter presets. it's something like a “combo” make a choice…

Description

This plugin provide an input field to filter a detailed DOM selector (like `.products li` or `item`) and conceal folks who does not include the inputed text. User get started writing into the enter field and the plugin get started filtering the DOM elements, hiding folks who does not include filter textual content.

Filtering may also be performed with preset phrases buttons which fill routinely the filter with customized words.

as well as the plugin can help you order the filtered part in ascendig or descending order the filtered ensuing parts and change the layout (listing or grid) of the elements.

The plugin paintings with a shortcode which permit the person customize pratically all of the parameters (see `Shortcode use` section to view an entire record).

Customizations of the filter out field look and the animation parameters can also be done from configuration web page.

It is possible to integrate the filter into the Woocommerce product web page: on this case the customization can be made by means of configuration page.

This plugin require Redux Framework plugin to paintings. TGMPA plugin is equipped to put in required plugin on activation.

Feature list

This section describes the features of the plugin.

1. Ease of use by means of shortcode button generator 1. More Than One filters on a page and grouped filtering on the related knowledge 1. Customizable shortcode parameters: * enter field text * filter DOM selector * filter out type * impact DOM selector * custom elegance * display transparent clear out button icon * display sorting effects button icon * show format modification button icon * filter presets * disable user input (consumer can amendment the clear out handiest by means of filter presets) 1. Styling customization by the use of configuration web page: * history color * text colour * borders styling * icon buttons colours * preset labels historical past and text color 1. Filtering animation by means of Mixitup through Kunkalabs * period * impact * easing 1. Automatic Woocommerce product page integration, customizable by means of configuration web page 1. Fully translatable via .PO files. 1. ReduxFramework-made configuration page 1. TGM-Plugin-Activation habit installer 1. Built on Wordpress Plugin Boilerplate via Tom McFarlin.

Deploy

This section describes how to install the plugin and get it running.

1. Upload `wp-live-content material-filter out` folder to the `/wp-content/plugins/` directory 1. Activate the plugin throughout the `Plugins` menu in WordPress 1. If needed install Redux Framework plugin

Shortcode use

This phase describes how you can use the plugin shortcode.

this is the minimum person of the shortcode

`wp-lcf container_selector=”ul.list” filter_selector=”li”Write your customized placeholder here/wp-lcf`

in this approach the plugin show a textual content box which allow the user write a textual content used to filter out the elements special into filter_selector, which has to be indicated as youngsters of container_selector DOM component.

While person start writing the plugin seek into ALL THE CONTENT of the desired DOM elements. While the inputed textual content is found the element remain visible, in a different way the element might be hidden.

this is and instance of complicated use with all parameters:

`wp-lcf container_selector=”.list” filter_selector=”li .title” filter_type=”containText” sort_button=”yes” clear_button=”yes” layout_button=”yes” layout_type=”list” effect_selector=”li” filter_presets=”text1,text2” input_disabled=”yes”Write something here/wp-lcf`

• `container_selector`: specify the basis part for the filtering target parts
• `filter_selector`: specify the element the place the search will likely be performed. have to be targeted as youngsters of `container_selector`. As instance, if `container_selector` is `ul.list`, then `filter_selector` should be something like `li` or `li .title`.
• `filter_type` (non-compulsory): specify the sort of seek carried out to hide or show parts: may also be `startWithText`, `endWithText` or `containText`. Default value: `containText`.
• `clear_button` (not obligatory): can be `sure` or `no` and allow you to come to a decision if you happen to wish to show or no longer the clear filter button icon. Default: `sure`
• `sort_button` (not obligatory): may also be `sure` or `no` and permit you to come to a decision should you want to show or no longer the kind button icon. Default: `no`
• `layout_button` (optional): can be `yes` or `no` and mean you can make a decision should you wish to show or now not the structure modification button icon. Default: `no`
• `layout_type` (optional): if `layout_button` paramenter is about to `no`, you'll specify if the filtering target data are in `desk` structure, if `layout_button` parameter is ready to `sure`, you can specify the beginning structure, opting for betweem `list` or `grid`. Default: `checklist`.
• `effect_selector` (non-compulsory): specify the objective component to be filter out (hidden or proven). As for `filter_selector` this should be exact as children of `container_selector`. If no longer specific `filter_selector` will likely be used.
• `filter_presets` (optional): specify the preset values for the filter (comma separated values). Allow the person to click on the preset and set the configurated value.
• `input_disabled` (optional): specify if the person can write into the clear out box or no longer. Useful in case you want to allow the user to user the filter best by clear out presets. Default: `no`
• `class` (non-compulsory): class applied to filter out enter field, for styling purpuoses.
• `placeholder textual content`: the text displayed as placeholder of the filter enter field

To create clear out input packing containers that can clear out the same knowledge (one thing like “identify” and “surname” filter out) you'll use the `filter_group` parameters.

this is a whole instance of a desk with a “name” and “surname” filters. The filters are into the talbe head and its enable adventure the sorting button:

` <thead> Name Surname wp-lcf container_selector=”.table1” filter_selector=”tbody tr td:first-child” effect_selector=”tbody tr” filter_type=”startWithText” filter_group=”group1” layout_type=”table” sort_button=”yes”Name clear out/wp-lcf wp-lcf container_selector=”.table1” filter_selector=”tbody tr td:nth-child(2)” effect_selector=”tbody tr” filter_type=”startWithText” filter_group=”group1” layout_type=”table” sort_button=”yes”Surname filter/wp-lcf </thead> <tbody> Robert Black Emily Inexperienced Edward Brown Mary White </tbody> `

The animation parameters can also be customized from the configuration page. The plugin provide a shortcode generator button into TinyMCE content material editor.

Woocommerce integration

To allow the clear out input field into Woocommerce product web page you've gotten to go to the Wordpress WP Live Contet Filter Out configuration web page and set to yes the `Enable integration` flag.

this may permit the customization option into the configurationa page too.

In Woocommerce It Is Going To now not be imaginable to show the sort button due to the presence of the local sorting options: it'll a reproduction!

Changelog

3.3 – 01/12/2015

• Introduced capability to disable person clear out enter (consumer can use handiest filter out presets)

3.2 – 12/06/2015

• Mounted bug with more than one filters sorting

3.1 – 29/04/2015

• Delivered configuration page preset labels colour options (text colors and history)
• Delivered desk layout (to use the clear out into table-based totally knowledge)
• Added grouping capacity to do multiple filtering at the same knowledge

3.0.1 – SIXTEEN/04/2015

• Changed configuration page for Redux Config 3.5 replace

3.0 – 20/03/2015

• Filtering animation rewritten to make use of Mixitup by Kunkalabs <https://mixitup.kunkalabs.com/>
• Brought change structure possibility
• Fastened Chrome and Opera compatibility
• Configuration web page restyling
• Documentation update

2.0.1 – 06/03/2015

• Minor trojan horse solving for javascripts and css

2.0 – 27/02/2015

• Added sorting choices (person can order the filtered results)
• Added clear out preset phrases (person can filter out with buttons insteas of writing)
• Minor computer virus restoration
• Documentation replace

1.3 – 21/02/2015

• Added styling choices from configuration web page
• Documentation replace

1.2.1 – 18/02/2015

• Minor trojan horse fix

1.2 – 16/02/2015

• Introduced search sort parameter
• Introduced separate search goal and impact goal parameters
• Javascript optimization
• Documentation replace

1.1 – 10/02/2015

• Brought separate conceal and display effects parameters
• Added Animate.css animation effects
• Minor mispelling corretions
• Documentation rewrite.

1.0 – 25/01/2015

• First release.

Licenses

http://codecanyon.net/licenses/faq http://codecanyon.net/licenses/regular http://codecanyon.net/licenses/extended http://codecanyon.net/criminal/

the author of this plugin holds a commercial license allowing commercial use of the MixItUp filter out and kind instrument. if you need to edit the functionality of this MixItUp integration for use to your personal industrial undertaking, you need to purchase a license from https://mixitup.kunkalabs.com/licenses/

FULL DOWNLOAD