Reactive Pro Documentation
WelcomeQuick StartSystem StatusInstallationMenusSearch Builder
Search Builder Backend
Search Builder Frontend
FrontEndSearch BlockCheckBoxRadioBoxSelectComboBoxText SearchRangeboxLocation Search (Map Autocomplete)ResetApply FilterMore FilterImage PickerColor PickerMinMax ButtonGridGlobal SettingsBarMapWidgetPredefined Template
Reactive TemplatesWooCommerce Shop and Category Page SearchDynamic SearchWP Media SearchRnB Plugin Support
Plugin Translation
Search RelationHooksUpgrade GuideTheme SupportFAQChangelog

FrontEnd

Fronted Section is the place where you will arrange your search page. If you don't know how to have a Search page please check our Reactive Builder Section, you will have a Search page like below in the frontend section,

If you have successfully find the above image on your search page then you can follow the below steps otherwise please check the previous section again,

Here, we can see 4 options in the above image, that is,

  • Add Block
  • Global Settings
  • Admin View
  • User View

SearchBlock.png

Add Block:

Add Block is the section from where you can add several options to your page layout, the options that you can add from Add block are

  • Grid
  • Map
  • Search Block
  • Bar
  • Category
  • Widgets

AddBox.png

select, any of them you need and then click the save button. To know what you have to do after adding them on your page check the below sections.

Global Settings:

From Global Settings you can apply Pre filtering, Sorting by Post Title, Date, Meta in Ascending or Descending order. That means your page will be Pre Filtered when the page loads.

Here, you can Enable Adaptive Search or Intelligent Search Also here you can turn on specific Filter button for Mobile or Tab view.

GlobalSettings.png

Admin View:

Admin view lets you edit, drag N drop, resize the layouts.

User View:

User view gives a quick view how your edited layout should look in User mood.

Search Block

Search block Allows you to add Search Section in your layout, you can add multiple search block in a page and organize it as you want. it gives you so much flexibility.

Here, we will check what kind of feature & attributes are available in the Search Block.

First, let me show you how to add a Search Block,

Click on the Add Block -> Choose Search Block -> Click on the Save Button At the Lower Right Corner AddBlock2.png SelectSearch.png

And with that, you'll get all the options to use for the search block.

SearchComponent.png

If you click on the top left corner icon, you will find some option like custom class name, block title, place in other search block(to know more about it check the more filter section) etc.

Theres a Collapsed icon it give you the ability to open and close the search block with its component in it, it is helpfull to drag n drop layout.

The plus icon allows you to add search component in your search block. we have 15 different search component available in our search block. NewSearchBlock.png AddSearchField.png

To know more about each search component and its uses please check the below sections.

CheckBox

When you add Checkbox element to the search block initially you will see that there is Please Add Some Options message. To configure your checkbox click on the settings icon on the left corner.

You will find the checkbox panel will appear in a modal.

First you have to chose between either Metadata or Taxonomy from theData Tabin the CheckBox Panel.

CheckBox.png

The Appearance Tab can be used to change

- title
- subtitle
- Custom Class Name
- Enter type of view
- No. of options in Columns
- Select Steps

After you change necessary configuration then it will look similar to the below Snap,

CheckBox2.png

RadioBox

When you add RadioBox element to the search block initially you will see that there is Please Add Some Options message. To configure your radiobox click on the settings icon on the left corner.

You will find the radiobox panel will appear in a modal.

First you have to chose between either Metadata or Taxonomy from the Data Tab in the RadioBox Panel.

RadioBox.png

The Appearance Tab can be used to change

- title
- subtitle
- Custom Class Name
- Enter type of view
- No. of options in Columns
- Select Steps

After you change necessary configuration then it will look similar to the below Snap,

RadioBox2.png

Select

When you add Select element to the search block initially you will see that there is Please Add Some Options message. To configure your Select click on the settings icon on the left corner.

You will find the Select panel will appear in a modal.

First you have to chose between either Metadata or Taxonomy from the Data Tab in the Select Panel.

SelectBox.png

The Appearance Tabcan be used to change

- title
- subtitle
- Custom Class Name
- Single or Multiple Switch
- Enter type of view
- No. of options in Columns
- Select Steps

After you change necessary configuration then it will look similar to the below Snap,

SelectBox2.png

ComboBox

When you add ComboBox element to the search block initially you will see that there is Please Add Some Options message. To configure your ComboBox click on the settings icon on the left corner.

You will find the ComboBox panel will appear in a modal.

First you have to chose between either Metadata or Taxonomy from the Data Tab in the ComboBox Panel.

ComboBox.png

The Appearance Tabcan be used to change

- title
- subtitle
- Custom Class Name
- Enter type of view
- Select Steps

After you change necessary configuration then it will look similar to the below Snap,

ComBo2.png

Text Search

When you add Text Search element to the search block initially you will see that there is an input

You will find the Text Search panel will appear in a modal.

TextBox.png

This can be used to change

- title
- Subtitle
- Custom Class Name
- placeholder

After you change necessary configuration then it will look similar to the below Snap,

SearchBox2.png

Rangebox

When you add Rangebox element to the search block initially you will see that there is Please Add Some Options message. To configure your Rangebox click on the settings icon on the left corner.

You will find the Rangebox panel will appear in a modal.

First you have to chose Metadata from the Data Tab in the Rangebox Panel.

RangeBox.png

The Appearance Tabcan be used to change

- title
- subtitle
- Custom Class Name
- Enter type of view
- Select Steps

After you change necessary configuration then it will look similar to the below Snap,

RangeBox2.png

Location Search (Map Autocomplete)

When you add Map Autocomplete Search element to the search block initially you will see that there is an input

To surf the options you need to click the edit button.

And then You will find the Text Search panel will appear in a modal.

This can be used to change

- title
- Subtitle
- Custom Class Name
- placeholder
- Search Range Radius(In KM)
- Disable Dropdown Toggle(Applicable if the Search block is in Dropdown Mood)

MapBox.png

NB. You need to Provide the Google Map API key

Reset

When you add Reset element to the search block initially you will see that there is a button

You will find the Reset panel will appear in a modal.

This can be used to change

title
Custom Class Name

ResetBox.png

Apply Filter

When you Try to search all on a button Click You should use Apply Filter Search Element.

When you Apply Filter element to the search block initially you will see a black button.

You will find the Apply panel will appear in a modal.

The Appearance Tab can be used to change

- title
- subtitle
- Custom Class Name
- Enter type of view
- Select Steps

After you change necessary configuration then it will look similar to the below Snap,

ApplyFilter.png

More Filter

Sometimes you want to make a Search Block visible on a modal and control that modal based on a button just like the following gif.

more-filter.gif

Then you should use More Filter Search Element.

Add A Search Block first (which you want to show on the modal) from the Add Block Part. On Each Search Block edit option you will find a Toggle Button named Place In Other Search Block

This will Make the Search Block Hide on the corresponding position in the User view.

Now take A More Filter Search Element. On the Edit Panel The list of Search Block that is configured as Place In Other Search Block will appear and You have to select which search Block You want to show on the modal.

Everything Remains same to build the Search Block from the Admin panel. After building that On the User view Clicking on the More Filter button, the configured Search Block will open.

First you have to chose between either Metadata or Taxonomy from the Data Tab in the Filter Panel.

The Appearance Tabcan be used to change

- title
- subtitle
- Custom Class Name

After you change necessary configuration then it will look similar to the below Snap,

NB. Please Try to place the Target Search Block At the End of the Page.

Image Picker

When you add Simple Picker element to the search block initially you will see that there is Please Add Some Options message. To configure your Simple Picker click on the settings icon on the left corner.

First you have to chose between either Metadata from the Data Tab in the ComboBox Panel.

ImagePicker1.png

The Appearance Tabcan be used to change

- title
- subtitle
- Custom Class Name
- Enter type of view
- Select Steps

After you change necessary configuration then it will look similar to the below Snap,

ImagePicker.png

Color Picker

When you add Color Picker element to the search block initially you will see that there is Please Add Some Options message. To configure your Simple Picker click on the settings icon on the left corner.

You will find the Color Picker panel will appear in a modal. First you have to chose between either Metadata from the Data Tab in the Color Picker Panel.

ColorBox.png

The Appearance Tabcan be used to change

- title
- subtitle
- Custom Class Name
- Enter type of view
- Select Steps

After you change necessary configuration then it will look similar to the below Snap,

ColorBox2.png

MinMax Button

When you add MinMax Button element to the search block initially you will see that there is Please Add Some Options message. To configure your MinMax Button click on the settings icon on the left corner.

You will find the MinMax Button panel will appear in a modal.

First you have to chose between either Metadata from the Data Tab in the MinMax Button Panel.

MinMax.png

The Appearance Tabcan be used to change

- title
- subtitle
- Custom Class Name
- Enter type of view
- Select Steps

After you change necessary configuration then it will look similar to the below Snap,

MinMax.png