Frequently Asked Question:

I) what is the per-requirement knowledge for this plugin:

you have to know very basic of wordpress such as

i) post type/ custom post type

ii) taxonomy/ custom taxonomy

iii) meta/ custom meta field

iv) term meta/ attributes

v) Geobox

also, you have plan the whole thing like how to create your post type why you should create it and also you have to create relevant data such as taxonomy and meta field. you can use our free plugin to create custom post type, taxonomy, meta, term meta etc. Reuse Builder

after you have all this data ready in your wordpress you can start from our below video tutorial to learn how to start with the reactive pro.

http://reactive.redq.io/video-guide/

Now at this point it's ok to guess that you have a basic wordpress knowledge and you also have covered our pre-requirements, properly read our documentation, watched our video tutorials. But Still you are having trouble Understanding How to work with the plugin and Have your Required search functionality. Don't worry To help you We have our Dedicated Technical Support team who will help you to achieve your goal. But to make it quicker we need to work closely so that you can complete the project before the deadline. By close i mean you need to provide proper information so that our technical team can quickly understand your issues and help you to fix it as soon as possible. I am adding common issues and some tips on how you should ask for help in the support forum based on our experiences till now. Though common issues have been discussed thought this FAQ section you can have a look at this section in the below FAQ to know about it more.

Common Issues:

a) The most common issues we heard in the support forum is that nothing is working after installing the plugin. well it can happen if you didn't setup the free helper add-ons redq-reuse-form or it can also happen because of a third party plugin conflict. we have created a faq for that which you can find below faq vi) I have setup the plugin but nothing is working? if it still doesn't fix your issue you need to ask in the support site specifying that you have followed our faq that i've mention above and followed the steps thats been described but in some steps you are having trouble or you have issues with a third party plugin by specifying the plugin name.

b) Another issues we heard is how to use the plugin to achieve your goal? Well if you have the pre-requirement and followed the above steps properly you should have a basic idea about the plugin, but if you still have trouble you need to ask in the support forum by specifying what's your goal or what kind of search page and functionality you need with proper details so that the support forum can send you the steps quickly and you can follow them to do that.

c) What kind of information or data is needed to be in your site to search them? Again This steps is very important to create your search page, The below data or information is needed for search page in your site:

• You need to know which post type you want to search and also you need to have this post type with posts be ready in your site before your proceed with our plugin though you can work simultaneously with our plugin and your post type with some test posts (by post_type i mean post, product, portfolio, car etc) but the recommended way to do that is to have all your posts ready so that you can tests them with our plugin.
• To search your posts you need to have your taxonomy and meta related with that post type ready so that you can use the taxonomy or meta to search your posts via checkbox, dropdown, range etc.

d) What kind of information i need to provide in the support forum to solve my issues? _Well this is another tricky part you need to inform them about your requirement in proper details such as what is Reactive Builder? what post type i should select in Reactive Builder? How to Search parent child category etc? with your issues details it helps the support team to understand better your issue if you provide them some screenshot and also inform them which post type you want to search and what is the related information such as taxonomy and meta you have(important). _To make it even better you can provide the below information,

• Plugin version you are using
• helper addons version you are using
• which step you have already followed
• at what situation you are having the issues
• since when you are having the issues
• at which update you are having the issue

e) The documentation is too difficult to understand? You gotta understand that Having a search functionality with your requirement is no simple work. Its a months of work to create a search functionality. But our plugin is here not only to save your efforts but also it give you lots of settings and functionality to make your search page customization easy. There are lots of Searching plugin in the market with easy settings but none of them will provide you so much functionality, customization like ours. Plus we are give you a Frontend page builder system to create your search page which is supper flexible. It takes people days to learn the basic steps of a new page builder (if you don't know how this page builder works). But I hope our plugin doesn't take it that long and once you master of it you can create search pages for your of clients (Having a search functionality is one of the work thats have a huge demand in both on and off freelance market) easily. About the difficult part if you follow our direction and contact with the support forum they will make it easier for you to understand also we are continuously working on a more easier User friendly UI and documentation. But keep in mind that A complex work with a Flexible and customization feature based plugin will take some time from you. At least it's worth the time to give it a proper try. And you are not alone a dedicated support team is waiting there for you to help.

ii) Does this plugin support advance custom meta filed such as checkbox, selectbox, radiobox, datepicker, (repetative field) etc in the meta field?

no, this kind of advance meta field does not work with our plugin and also it's not recommended to use advance custom meta field for search related purpose though it easy to manage to create data but it will hugely make the search performance bad. That's why we haven't tried to bring the feature and at that moment it's not possible to provide this feature either.

if you need to use the simple custom meta field we recommend to use our free plugin Reuse Builder instead of other advance custom meta field plugin.

the advance meta field it will only work it a single data for example if you have a meta checkbox field and you select only one value then it may work but in case of multiple select it may not work. that's why we don't recommend.

iii) How to do the map single page redirection from the marker pop up window

you can use the below code to do that

<a href="{{data.post_link}}"><div class="reactiveInfoWindowWrapper">
  <div class="reactiveInfoWindowImage">
    <img src="{{data.thumb_url}}" alt="Image">
  </div>
  <div class="reactiveInfoWindowContents">
    <h4>{{data.post_title}}</h4>
    <p class="reactiveAddressText">{{data.meta.formattedAddress}}</p>
    <p class="">{{data.meta.phone}}</p>
  </div>
</div>
</a>

iv) How to show a taxonomy terms in grid

use the below code to show the taxonomy terms

<# _.each(post.terms.your_taxonomy_name, function(term) { #>
<span class="{{term.slug}}>{{term.name}}</span>
<# }); #>

v) How to show the meta in the grid?

to show meta data in the grid you have to use the below code and make sure you have selected the meta name in the rebuilder shortcode

{{post.meta.your_meta_name}}

in the "your__meta__name" should be your meta key name.

vi) I have setup the plugin but nothing is working?

to fix this issue make sure you have installed the helper plugins that is redq-reuse-form and googlemap plugins.

check the below video tutorial for more details

https://youtu.be/llabWVjyP8Q?list=PLUT1MYLrVpA9znKC6yCdFGg0hatr2E0qC

If you still have issues after following this tutorial then follow the below points,

1. It can be a third party plugin conflict issue you can check it by deactivating other plugins one by one. if it's a plugin issue you can send us the plugin name in our support forum, we will check it for you and let you know in details about the issue so that you can inform the plugin author.

2. it can be due to javascript error as our plugin is based on advance javascript, if you have any js error coming from either your theme or any third party plugin this might not work. in this case if you know which theme or plugin causing the js error you can contact with them or you can contact with our support team about the js error our team will check it for you.

3. Caching issue if your server or any third party plugin or theme is doing caching on your site the plugin can not work properly as due to caching site store the previous js and css files in this case our plugin files may not load properly which you have to find by yourself if it's a caching issue, you can contact with your server administrator , theme or third party plugin author to know if they are doing any caching and how can you turn it off.

4. if you still don't know about the issue you can always contact with our support team.

vii) how to reduce the post content word in the grid?

you can use the below code to reduce the post content

{{post.post_content.substr(0, 20)}}

viii) How to setup home page search?

1. To do the home page search just create a rebuilder shortcode and select the redirect page where you want to readirect when submit the search.

   

2. 1. after creating the shortcode as usual paste the shortocde in the homepage and in the frontend create your search bar using drag and resize as you want.

   2. then the important part is take a apply filter button in your search block then from the settings panel of apply filter select your search page and redirect option. that's it.

   3. Also you have to make sure you have already setup the the search page where you are redirecting your visitor (the search page you have selected in the apply filter button you have to setup another reactive builder shortcode in that page with same post type and taxonomies so that it can find the result properly. Make sure you don't use same shortcode for your home page and Redirected page.

ix) where can i find the tutorial video?

http://reactive.redq.io/video-guide/

x) Which component is best to search for parent child taxonomy?

The combobox search component is to search your parent child search component.

xi) How to show post in post date /post name/meta value (for example: price[only number format supported]with customization it's possible to order alphabetically) order.

To do this you have to go to the global settings option at the top right side,

than chose your order from the dropdown

xii) How to show result grid only for specific terms?

To do this you have to go to the global settings option at the top right side,

than chose your terms from the dropdown

Xiii) how to provide the sort option for the visitor to sort the result?

• To provide the sort option you have to take a bar component
• from the bar setting panel (click one the + sign at the right side) take a sorting attributes

by default it will only show the default option but you can add options like post date, post name, any kind of meta(only number format to do that click on the settings panel->go to the sorting tab.

then you have to choose the option from the dropdown bundle it has two filed one is your meta key that you will choose another one is the text you want to show to the visitor,

like below

xiv) How can i use optimal custom size thumb image in the grid?

To do that First go to the below file,

i) reactivepro->app->graph.php

ii) at line number 742 add the below code,

$singlePost['150_thumb'] = wp_get_attachment_thumb_url( $singlePost['thumbnailUrl'] );

​it will look like the below image just change to 150_thumb,

iii) then just add the below code in the grid instead of {{post.thumb_url}}

{{post.150_thumb}}

if you need other sized you can use the below function instead of

wp_get_attachment_thumb_url

https://developer.wordpress.org/reference/functions/wp_get_attachment_image_src/

$singlePost['custom_thumbUrl'] = wp_get_attachment_image_src( $singlePost['thumbnailUrl'], array(250, 250));

and use it in the grid template like below

{{post.custom_thumbUrl}}

That's it.

xv) Does your Filtering system work with any kind of system or Post Type for example: Car, Real Estate, Jobs, Company, Restaurant etc?

Yes our plugin works with any kind of system or post type, with our plugin if you have fulfill the above requirement you can easily Filter your site Cars, Real estate, Jobs, company, Restaurant etc with category taxonomy or any custom taxonomy you want. it also support simple linear meta field to search or filter.

xvi) How to set up the image picker or How to use it?

First of all, you need to know exactly why we have built the image picker and why you should use it,

We have built the image picker to make a meaning full search component in your site unlike checkbox, radobox it will show images of your taxonomy term meta . For example if you have property on your site and you want to show images of your property type you can use our image picker in this case. it will look like the below image,

it will behave exactly like any checkbox or radiobox component. so, now lets see what we have exactly done to create this component. as i've already inform you we have use here the term meta. if you don't know what is term meta please search it on google as in our pre requirement we assume that you have a good idea about post type, taxonomy , meta and term meta. if you don't know about it you have to learn about this and you can use our below plugin to create them,

Reuse Builder

so, here's what we've done,

i) Fist we have created a custom post type called Property

ii) than we have created a custom taxonomy called Property type

iii) than we have created a image type term meta for Property Type

if you have successfully created the above steps and created your terms, here's what it looks like in my site,

Image: Property Type Taxonomy page

Image: Property Type Term page

so, if you have everything done successfully if you have something similar to above steps.

now, take a image picker in your search page

now from the settings panel of image picker choose the term meta and your term meta name,

you can see in the above image that we have choose the Term meta and our term meta name here is image for property type.

it will look like the first image if everything is done properly

XVII) Is there any way to solve Yoast SEO plugin conflict?

Actually this is not our plugin issue, in the latest version of Yoast SEO plugin there are some javascript error in the console coming from the Yoast SEO plugin once they solve this error the conflict will be automatically solved. One of our user have informed us that he solve this issue by turning off yoast seo plugin on the reactive admin pages. we will update this section if we find anything more on this.

Update: we have found a simple solution all you need to do is to turn of the yoast seo option on the reactive builder pages. you can turn it of using the screen options.

from that Screen option list turn off anything related to yoast seo.

or temporary deactivate the yoast seo plugin and after creating your builder shortcode you can activate it again.

xviii) How to show limited post content or excerpt on the grid without cutting words?

Follow the below code to do this,

{{post.post_content.split(" ").splice(0,20).join(" ")}}

the number 20 here is the number of words you want to show in the grid.

xix) How to use Color Name to Filter Posts? Is there any way we can use Color Picker to filter Posts? How can we use it?

1. Yes you can use Color Name to filter Posts, there are two ways you can do that, i) create a taxonomy called Posts Color or any name you prefer ii) than add your color names as term, iii) choose a color term for your each posts. that's it now take a Checkbox, Radiobox, Selectbox or Simplepicker whichever you want and then from the settings panel choose the data options. you will have the Color Names available for Search and Filter. it will look like the below image.
2. The Color Picker only works with Taxonomy Term Meta. if you don't know what is Term meta please check our FAQ number (i), So, as it only works with your Term meta, you have to create a taxonomy like in the above point Posts Color where you have all the color names and for each term using the term meta you can set a color. to use color picker in your term meta we suggest to use our own plugin, here is the link https://wordpress.org/plugins/reuse-builder/. so if you have created the the color term meta and have your color names selected in your each posts you can use the color picker search component in the reactive page, where you just have to select the term meta and term meta name in the color picker settings name.

NB: Please note that you must have to select the related post type, taxonomy, term meta name in the rebuilder shortcode.

here is how we have used it in our test site just to show you how to create use a color picker term meta,

i) Image: Color Term Meta being used here with Property Type Taxonomy

ii) Image: A color has been chosen here for property type taxonomy

so, you have selected the term meta color for your taxonomy term and in the Reactive Search page here's how we will use it,

iii) choose the post type, taxonomy, term meta in your Rebuilder Shortcode.

iv) Take the color picker in your search page,

v) choose the data from the color picker settings panel color_property is the term meta name,

vi) that's it, the final look will be like below

xx) Why this plugin Doesn't support Internet Explorer Browsers or old safari browsers?

First of all i like to clear few things here,

I) this plugin support the latest version of Internet Explorer which is known as Edge and also the latest version of safari browsers.

II) The plugin is built on top of advance javascript to provide features like drag, drop resize, fast search etc.

as it's an advance javascript it has latest browser technology enabled which is not available in the old browsers such as Internet Explorer or Old Safari browsers(safari version above 10 is supported by our plugin).

iii) you can know about your browser compatibility from the below url https://kangax.github.io/compat-table/es6/ (react, redux, es6 javascript is the feature that you should be looking for your browser)

iv) If you are desperate to find a solution for your internet explorer or your old safari browser user you can follow one of our user who have implemented code that check the old browsers on the reactive page and asked the customer to update to a new browser or change the browser to firefox or chrome by showing a notice. unfortunately we don't know what the user have done in the code section so you may have to do this part by your own or by hiring a developer you can achieve this too.

xxi) How can I override WordPress default search to reactive search?

In the admin menu first go to Reative->Settings .

then you will get a settings form with a switch button to enable default search override. Just enable it and you and select the reactive page where you want to redirect after someone search on a default WordPress searchbox.

22) How to set up WPML with reactive pro?

we already have a dedicated documentation for WPML setup with reactive pro. if you are using wpml you must have to follow this setup if you want to work with both wpml and reactivepro,

https://redq.gitbooks.io/reactive-pro-advance-searching-filtering/content/wpml-configuration.html

23) How to change the grid infinity loader color?

user the below css code to change the color,

.css-15op5xs {

    background-color: #477169;​

}​​
​
​.css-8i2cfi {

    background-color: #477169;​

}​​
​
​.css-a2ok2p {

    background-color: #477169;​

}​​

change the background color according to your needs

24) How can I filter location using Google Map?

To Filter using Google Map you have use the plugins Geo box feature otherwise it won't work if you have some setup with other plugins or theme it's recommended to use the plugins Geo box feature.

To know how to setup the Geo Box Follow the below section and video tutorial,

1. Video Tutorial
2. Google Map Plugin Setup
3. Geobox Configuration

Basically what you have to do is to

i) install our google map plugin

ii) Enable Geobox in the post type you want to filter.

iii) Fill up Geo or location information for each post or the post you want to search using location.

iv) from the frontend take a map block.

v) for searching and filtering you can use the map autocomplete for location suggestion as well as checkbox, radiobox, selectbox etc for city, country, state, zip code searching.

25) In this demo http://reactive.redq.io/property-search-demo/

iI see that with mobile right bar sidebar disappear and it appear a button to click to open search.. How do the same on my website?

To do this you have to enable the bellow settings,

From the frontend of the search page go to the global settings the choose the Render Map/SearchBlock as Filter Button in Tab/Mobile View

that's it, it will render your search block in the sidebar.

for more information you can check the below section,

Global Settings

26) How to order Search elements in mobile/tab sidebar search?

For the order of search element in mobile issue the order is like the following.

1. In the admin view Please turn the listing page to mobile device. and sort the search element by dragging and dropping.

as you can see we have two search block here on the mobile device where in the first search block we have a text search and in the 2nd search block we have a map autocomplete and a reset button so my order should be in the mobile drawer as follows,

i) text search

ii) map autocomplete

iii) reset button

1. Check it on the user view. In the search filter panel the ordering of search element will be same as the mobile device.

as you can see exactly we have it as have described.

27) How post sorted priority works?

The post sorted result follow the below priority,

1. If you have some sort enabled such as post title or price.

2. Enable Nearest Sorted data

3. Last search is map autocomplete

4. preload

5. latest post

28) How to populate price field with value in the grid?

i) you need to have a meta field in your product or post (The post type you have selected in Reactive Builder Shortcode)

ii) select the meta field key in the reactive builder shortcode in the meta selectbox.

iii) now go to the grid template that you are using reactive templates -> your grid template

iv) change the price meta key with your meta key in the grid template.

that's it

29) How to Sort Result at Page Reload or difference between PreQuery - Taxonomy & PreQuery - SortBy Meta or Post Key?

In the Global Settings there are two options,

i) PreQuery - Taxonomy

ii) PreQuery - SortBy Meta or Post Key

In the Reactive Builder shortcode you have to select the Sorting attribute in order to have the sorting option available in your global settings,

​ PreQuery - Taxonomy: How it work?

if you select a term or multiple term​ based on this selection it will only show result at page reload, but when the page reload complete and you select a term from your search block or your search page, the selected term in prequery - taxonomy won't work. so, this feature is there to let you show specific filtering at page reload.

PreQuery - SortBy Meta or Post Key​?

​As the name stands this field is there for sorting your result, the way you want to show the result to the site visitor. For sorting you can only use Meta or post key. taxonomy term won't work for sorting. you can also show result ascending or descending order.

30) What is the Best practices for Large amount of posts for Better performance.

In case of huge amount of posts ( > 300,000 ) you need to consider few things at first,

i) post ids

ii) number of terms

iii) meta data

if you have a lots of terms ( > 2500 ) it can effect the initial load time of the search page, as we are using graph searching algorithm. This algorithm uses 3 things two build the graph.

i) post ids of the post type that you have selected in the builder.

ii) number of terms from the taxonomy that you have selected in the builder.

iii) meta data from the meta key you have selected in the builder.

so, you can see with huge number of post ids ( > 300,000 ), terms ( > 2500 ) and meta data the page load time can take longer to create the graph for searching in your search page.

but it won't affect the searching system as once the graph has been build up for the page it will be faster without any doubt.

to fix the performance of the initial page load you can try the below tips,

i) once your search page is created properly and ready for use you can check any caching plugin if it can improve the

page loading time although we don't have any recommended one let us know if any caching plugin can do it better.

ii) No, matter how many posts you have it won't effect the initial page load if you don't have a large amount of terms ( > 2500 ) or large posts contents.

iii) if you have a small amount of terms ( < 500 ) but your posts contents are large for each posts, it can be fixable by our support team but it that case you can't use the post contents in your grid it will be better for large post content you use the post excerpt or some custom meta field data to show them in the search result grid.

iv) check if you have any console errors with our plugin and deactivating 3rd party plugin can solve this error otherwise contact with the support team.

v) you may wonder why we are asking for a better handling of post contents because in the builder you will select the taxonomies and meta keys that you only need for searching or showing them in the grid but currently there is no option if you want us to send the post contents or not. we will add this option soon if you want to send post contents or not in your search page. Basically we want you to be conscious about your data in the search page because and the amount of data you are sending in the search page. the more data you will send the page will have to load the more MB in your page for your data & post contents is the one of the thing you should be careful so that it won't load unnecessary MB in your page.

So, you can see that this plugin can work great with a large amount of posts if you can follow the above tips. This faq is mainly created to let you know that we are using Graph Searching system here and Only Performance concern is your initial page load which can take for the Graph building but it can be avoided with the above procedure.

31) How to create a Top bar like our demo site http://reactive.redq.io/top-bar-dropdown-search/ ?

Category is Woocommerce products default taxonomy so it seems like everyone can add it easily.

By Size is a Product size attribute which you can easily add using Woocommerce product attribute feature same as color, but if you want to use the color like ours "Choose By Color" you need to add a term meta color. you can doo that using our plugin https://wordpress.org/plugins/reuse-builder/

​Price range you can add it using the Rangebox, check the documentation for Rangebox configuration

https://redq.gitbooks.io/reactive-pro-advance-searching-filtering/content/rangebox.html​

Here we have added a Bar component same as ​Grid or Search block, but from Bar section you can show extra component such as Number of result, pagination, Sorting,

in the above image we have added Number of result and Sorting, for sorting you need to select which sorting attribute you want to show from sorting settings panel.

32) Is It possible to call a popup dynamically from url parameter with Javascript/jQuery?

Yes it's possible,

using below code on document.ready,

var popup_id = getUrlParameter('card') ;

if (popup_id) {
var popup_dummy = document.createElement('div');
popup_dummy.id = 'popup_dummy';
popup_dummy.style.display = 'none';

popup_dummy.setAttribute("class", 'reativeinfoWindowPopUp');
popup_dummy.setAttribute("data-uid", popup_id);
popup_dummy.setAttribute("key", 'src=' + popup_id);

var popup_dummy_c = document.getElementsByClassName('react-grid-layout')[0];
popup_dummy_c.insertBefore(popup_dummy, popup_dummy_c.firstChild);

document.getElementById('popup_dummy').click();
}

33) How to change the map marker color?

you can change the map marker color using the below css,

.marker-icon .marker-icon-wrapper {    background-color: #0099CC !important;​ }

34) Placeholder not working?

it seems like in your theme the placeholder text is white or similar color as you background that's why it's not working.

you can try the below css,

.reuseSingleElement___ input[type="text"].reuseInputField___::placeholder {
    color: #888 !important;
    opacity: 1;
}
.reuseSingleElement___ input[type="text"].reuseInputField___:-ms-input-placeholder {
    color: #888 !important;
}
.reuseSingleElement___ input[type="text"].reuseInputField___::-ms-input-placeholder { 
    color: #888 !important;
}

35) How to Restrict or Exclude Terms / How to Restrict or Exclude Terms and their post?

I am adding an example to help you understand how term restriction works,

For the example: i have three product category terms,

i) Clothing

ii) Music

iii) Poster

and 6 products where,

product #1, has Clothing and Poster

product #2, has Music

product #3, has Poster

product #4, has Clothing

product #5, has Music & Poster

product #6, has Clothing & Music

Step 1, Now in the builder, if you restrict the term Music, (***IMPORTANT)

In your search page you will get the below two option for searching,

i) Clothing

ii) Poster

Step 2, Now you have to choose the pre query taxonomy in the Global Settings, in the pre query taxonomy you have to select the other two terms that is in my example Clothing and Poster. (***IMPORTANT)

so you will get the result like below,

product #1, ​product #3,​ product #4,​ product #5,​ product #6,​

now you may have a questions why you will get the result

product #5, has Music & Poster

product #6, has Clothing & Music

as i have restricted the terms Music, this is because though you have restricted the term Music but if you look closely the product #5 & #6 have other two terms Poster and Clothing, that's why they may show in you search result, but product #2 will never appear in the frontend.

NB: this feature is currently on experimental phase and needs more testing and research, as today may 24, 2018 one of our user inform us that, the restricted post may still appear based on your other filtering criteria for example meta data.

If you want to restrict specific post id then you can do it using our grid template easily, just check the post id that you don't want to show in the grid template like below simple grid template,

<div class="reactive-container-fluid">
  <# if(data.view == 'list') { #>
  <div class="reactive-row reactiveGridBlock {{ data.listClass }}">
    <# } else { #>
    <div class="reactive-row reactiveGridBlock">
      <# } #>
      <# _.each(data.posts, function( post ) { #>
      <# if(["12", "15", "16", "65"].indexOf(post.ID) == -1) { #>
        <!-- Grid -->
        <# if(data.view == 'list') { #>
          <div key=src={{ post.ID }} data-uid={{ post.ID }} class="{{data.listColumnClass}} reativeinfoWindowPopUp reactiveGridType-Simple fadeIn" data-wow-duration=".5s" data-wow-delay={{ post.delay}} >
        <# } else { #>
          <div key=src={{ post.ID }} data-uid={{ post.ID }} class="{{data.columnClass}} reativeinfoWindowPopUp reactiveGridType-Simple fadeIn" data-wow-duration=".5s" data-wow-delay={{ post.delay}} >
        <# } #>
          <div class="reactiveGridImage">
            <a href="{{ post.post_link }}" class="overlay"></a>
                    <# if(post.thumb_url) { #>
                      <img src={{ post.thumb_url }} alt="Image">
                    <# } else {#>
                      <img src={{ data.gridPlaceHolder }} alt="Image">
                    <# } #>
              <h3 class="reactiveTitle">{{ post.post_title }}</h3>
            <span class="reactiveDate">{{post.post_formated_date}}</span>
         </div>
        </div>
        <!-- Grid End -->
     <# } #>
    <# }) #>
   </div>
</div>

after the post loop you can see that we have added the below line

<# if(["12", "15", "16", "65"].indexOf(post.ID) == -1) { #>

here in the array we have kept some post id ["12", "15", "16", "65"] which we don't want to show in the grid.

same goes for if you want to restrict some post based on some terms and here's the code,

<div class="reactive-container-fluid">
  <# if(data.view == 'list') { #>
  <div class="reactive-row reactiveGridBlock {{ data.listClass }}">
    <# } else { #>
    <div class="reactive-row reactiveGridBlock">
      <# } #>
      <# _.each(data.posts, function( post ) { #>

      <# var restrict_post = false;
          _.each(post.terms.product_cat, function(term) {
          if(["clothing", "brand", "hoodie", "t-shirt"].indexOf(term.slug) != -1) {
              restrict_post = true;
          }
        })
        if(!restrict_post) {   
      #>
        <!-- Grid -->
        <# if(data.view == 'list') { #>
          <div key=src={{ post.ID }} data-uid={{ post.ID }} class="{{data.listColumnClass}} reativeinfoWindowPopUp reactiveGridType-Simple fadeIn" data-wow-duration=".5s" data-wow-delay={{ post.delay}} >
        <# } else { #>
          <div key=src={{ post.ID }} data-uid={{ post.ID }} class="{{data.columnClass}} reativeinfoWindowPopUp reactiveGridType-Simple fadeIn" data-wow-duration=".5s" data-wow-delay={{ post.delay}} >
        <# } #>
          <div class="reactiveGridImage">
            <a href="{{ post.post_link }}" class="overlay"></a>
                    <# if(post.thumb_url) { #>
                      <img src={{ post.thumb_url }} alt="Image">
                    <# } else {#>
                      <img src={{ data.gridPlaceHolder }} alt="Image">
                    <# } #>
              <h3 class="reactiveTitle">{{ post.post_title }}</h3>
            <span class="reactiveDate">{{post.post_formated_date}}</span>
         </div>
        </div>
        <!-- Grid End -->
     <# } #>
    <# }) #>
   </div>
</div>

here ["clothing", "brand", "hoodie", "t-shirt"] are the terms that you want to restrict the post if the post have any of this terms

if(["clothing", "brand", "hoodie", "t-shirt"].indexOf(term.slug) != -1) {

In the above example we have only show this example with productcat which is a woocommerce category taxonomy but you can use any custom taxonomy if you want, all you have to do is to change your taxonomy name, instead of product_cat

<# var restrict_post = false;
_.each(post.terms.your_taxonomy_name, function(term) {
if(["clothing", "brand", "hoodie", "t-shirt"].indexOf(term.slug) != -1) {
restrict_post = true;
}
})
if(!restrict_post) {
#>

make sure you close the if bracket before the for loop as we have done after the <!-- Grid End --> comment

<!-- Grid End -->
<# } #>

I hope this explanation will help you how term restriction or term excluding works with their post.

NB: if you use exclude posts, the number of posts in the bar block will not work as the number of posts will always show the actual number of posts so if you want you can calculate the number of posts in the grid template and show it above the grid using the below code paste it before your grid template begins,

<# var post_count = 0;
_.each(data.posts, function( post ) {
var restrict_post = false;
_.each(post.terms.your_taxonomy_name, function(term) {
if(["clothing", "brand", "hoodie", "t-shirt"].indexOf(term.slug) != -1) {
  restrict_post = true;
 }
})
if(!restrict_post) {   
   post_count = post_count + 1;       
}
})
#>
<div>{{post_count}}</div>

36) How to add decimal places after the price in the grid section?

in case for your regular price meta you can show it like below,

<span class="reactiveProductPrice">${{parseFloat(post.meta._regular_price).toFixed(2)}}</span>

the output will be something like $45.55 or $180.00 etc

37) Code to show Star Rating on grid result on the grid?

You can show star rating in your grid result using the below code,

<div class="reactiveRatingPro">
<# _.each([1,2,3,4,5], function( num ) { #>
    <# if(num <= parseFloat(post.meta._wc_average_rating, 10)) { #>
        <span class="star ratingOne"></span>
    <# } else if((num > parseFloat(post.meta._wc_average_rating, 10)) && ((num-1 < parseFloat(post.meta._wc_average_rating, 10)))) { #>
        <span class="star ratingHalf"></span>
    <# } else { #>
        <span class="star ratingNone"></span>
    <# } #>
<# }) #>
</div>

you have to consider here your meta key,

In the above example we have used the woocommerce product and the meta that is storing the rating value is _wc_average_rating, if you want to show it from any other meta key you need to use your meta key.

38) How to do my own grid design or how to copy the grid design from my theme?

​if you have your own design or theme, then here's the recommended procedure,

i) at first you need to complete the necessary html and css code for your grid design, in case for your themes grid you have to take your themes grid html and css code and have to follow below steps.

ii) copy your css code in custom css section or into any css file that will be loaded into the frontend in case for the theme you don't have to follow this steps as themes css should be available already.

iii) then you can start the coding into the grid template builder, make sure you create another grid template post (it's not recommended to edit the existing grid template code) from where you have to start it from the scratch.

let's check how we have created our Avada Woocommerce grid, you can find this code in your Admin->Reactive template->All Grid Template section,

i've divided the code in total 9 part but before discussing about the code let's have a look at their design first,

Grid View:

List View:

From the above design we can see that it has i) a thumb image, ii) a title, iii) price iv) rating v) add to cart vi) details or single page url.

In the above code the first 1, 2 , 3 steps are very important and almost in every code you can use them, let me explain about them a bit,

i) in this section we can see the container class and the row class with an extra class for the list view.

<# if(data.view == 'list') { #>
<div class="reactive-row {{ data.listClass }}">

ii) this is a post loop, it means it will loop for each item in the post array for more information check our Grid Template section

<# _.each(data.posts, function( post ) { #>

iii) in this section we have added the column class that you have selected for grid or list in the grid settings, it has also some important class such as animation calss for wow and map info window class for the hover effect on the grid to highlight the marker,

<# if(data.view == 'list') { #>
    <div key=src={{ post.ID }} data-uid={{ post.ID }} class="{{data.listColumnClass}} reativeinfoWindowPopUp reactiveGridType-basic fadeIn" data-wow-duration=".5s" data-wow-delay={{ post.delay}} >
<# } else { #>
    <div key=src={{ post.ID }} data-uid={{ post.ID }} class="{{data.columnClass}} reativeinfoWindowPopUp reactiveGridType-basic fadeIn" data-wow-duration=".5s" data-wow-delay={{ post.delay}} >
<# } #>

and the rest of the steps are,

iv) Total Grid part

v) Thumb image part

vi) post title part

vii) price part

viii) rating part

ix) add to cart and details part

if you follow the above procedure it will be helpful for you.

NB: if you want our developer to do that for you, our hourly rate is(USD)​$100/hour and a grid code may take 2 - 3 days based on the amount of work. we work 10 hour/day.

39) Why the Taxonomies Are not working with WPML?

NB: We have update the plugin and fixed this issue in v4.0.6 or v4.0.6.1. if you are using version 4.0.5 you can follow the below query.

We have found the issue and have already fixed it in our plugin but due to some testing issues couldn't update it. i do have the code

and here is the code that can solve for you,

you need to replace two function with the below code in the reactivepro/app/Graph.php file directory,

public function get_all_terms($taxonomies, $post_types, $wpml_lang, $restricted_terms) {
    global $wpdb;
    $wpdb->get_results("SET SESSION group_concat_max_len = 999999999999999", 'ARRAY_A');
    if (empty($taxonomies)) $taxonomies = array('category');
    $taxonomy_placeholder = implode(', ', array_fill(0, count($taxonomies), '%s'));
    if (empty($post_types)) $post_types = array('post');
    $post_type_placeholder = implode(', ', array_fill(0, count($post_types), '%s'));
    if (empty($restricted_terms)) $restricted_terms = array('dksjdksdh');
    $terms_placeholder = implode(', ', array_fill(0, count($restricted_terms), '%s'));
    $taxonomies = array_merge($taxonomies, $post_types, $restricted_terms);
    $taxonomies[] = 'publish';
    $taxonomies[] = 'inherit';
    if($wpml_lang === '') {
      $query = $wpdb->prepare("SELECT CASE WHEN {$wpdb->posts}.post_parent <> 0 THEN GROUP_CONCAT(DISTINCT post_parent) ELSE GROUP_CONCAT(DISTINCT object_id) END as allPosts, {$wpdb->terms}.term_id, slug, taxonomy
        FROM {$wpdb->term_relationships}
        LEFT JOIN {$wpdb->term_taxonomy}
        ON {$wpdb->term_relationships}.term_taxonomy_id = {$wpdb->term_taxonomy}.term_taxonomy_id
        LEFT JOIN {$wpdb->posts}
        ON {$wpdb->term_relationships}.object_id = {$wpdb->posts}.ID
        LEFT JOIN {$wpdb->terms}
        ON {$wpdb->terms}.term_id = {$wpdb->term_taxonomy}.term_id
        WHERE  {$wpdb->term_taxonomy}.taxonomy IN ($taxonomy_placeholder)
        AND {$wpdb->posts}.post_type IN ($post_type_placeholder)
        AND {$wpdb->terms}.slug NOT IN ($terms_placeholder)
        AND ({$wpdb->posts}.post_status = %s OR {$wpdb->posts}.post_status = %s)
        GROUP BY {$wpdb->term_taxonomy}.term_id", $taxonomies);
    } else {
    $taxonomies[] = '%tax_%';
    $taxonomies[] = $wpml_lang;
    $translations_table_name = $wpdb->prefix . 'icl_translations';
      $query = $wpdb->prepare("SELECT CASE WHEN {$wpdb->posts}.post_parent <> 0 THEN GROUP_CONCAT(DISTINCT post_parent) ELSE GROUP_CONCAT(DISTINCT object_id) END as allPosts, {$wpdb->terms}.term_id, slug, taxonomy
      FROM {$wpdb->term_relationships}
      LEFT JOIN {$wpdb->term_taxonomy}
      ON {$wpdb->term_relationships}.term_taxonomy_id = {$wpdb->term_taxonomy}.term_taxonomy_id
      LEFT JOIN {$wpdb->posts}
      ON {$wpdb->term_relationships}.object_id = {$wpdb->posts}.ID
      LEFT JOIN {$wpdb->terms}
      ON {$wpdb->terms}.term_id = {$wpdb->term_taxonomy}.term_id
      LEFT JOIN {$translations_table_name}
      ON {$translations_table_name}.element_id = {$wpdb->terms}.term_id
      WHERE {$wpdb->term_taxonomy}.taxonomy IN ($taxonomy_placeholder)
      AND {$wpdb->posts}.post_type IN ($post_type_placeholder)
      AND {$wpdb->terms}.slug NOT IN ($terms_placeholder)
      AND ({$wpdb->posts}.post_status = %s OR {$wpdb->posts}.post_status = %s)
      AND element_type LIKE %s
      AND language_code = %s
      GROUP BY {$wpdb->term_taxonomy}.term_id", $taxonomies);
    }
    $results = $wpdb->get_results($query, 'ARRAY_A');
    return $results;
  }

public function get_term_names($wpml_lang, $restricted_terms) {
    global $wpdb;
    $wpdb->get_results("SET SESSION group_concat_max_len = 999999999999999", 'ARRAY_A');
    if (empty($restricted_terms)) $restricted_terms = array('category');
    $terms_placeholder = implode(', ', array_fill(0, count($restricted_terms), '%s'));
    // if (empty($post_types)) $post_types = array('post');
    // $post_type_placeholder = implode(', ', array_fill(0, count($post_types), '%s'));
    if($wpml_lang === '') {
      $query = $wpdb->prepare("SELECT * FROM {$wpdb->terms} WHERE slug NOT IN ($terms_placeholder)", $restricted_terms);
    } else {
      $restricted_terms[] = '%tax_%';
      $restricted_terms[] = $wpml_lang;
      $translations_table_name = $wpdb->prefix . 'icl_translations';
      $query = $wpdb->prepare("SELECT * FROM {$wpdb->terms}
      LEFT JOIN {$translations_table_name}
      ON {$translations_table_name}.element_id = {$wpdb->terms}.term_id
      WHERE slug NOT IN ($terms_placeholder)
      AND element_type LIKE %s
      AND language_code = %s", $restricted_terms);
    }
    $results = $wpdb->get_results($query , 'ARRAY_A');
    foreach ($results as $key => $result) {
      if(isset($result['name'])){
        $results[$key]['name'] = html_entity_decode($result['name'], ENT_COMPAT, 'UTF-8');
      }
    }
    return $results;
  }

40) How to change the Map Marker background Image?

You can change the map marker background image from the below directory of your ftp or local,

wp-content/plugins/reactivepro/assets/dist/img/cluster-m.png

just change the the cluster-m.png with your image keeping the same name of the new image cluster-m.png

41) Google Map not working, Google map marker not working / Multiple Google Map API key?

The one and only reason for this issue is Google Map Api Key,

i) you didn't put the google map api key or a valid ke in the google map menu.

ii) For the map issue you have included google map multiple times which is causing this issue.

check your browser console it will inform you like the below image that you have included google map api multiple times that means you have to disable your theme google map api or if it's coming from any other plugin you will have to turn off the api.

basically what it means is both your theme or 3rd party plugin and our plugin is including a google map api key. so as you are using our map feature and it is recommended to use the map api key in our google map menu and turn off the other api key off from your theme or 3rd party plugin.

42) Thousand Separator For Price?

in your grid template use the following code,

<# 
  var price = post.meta._price;
  price = parseFloat(price,10);
  price = price.toLocaleString();  
#>

if you want to change any other meta to thousand separator just change the meta key in the above code _meta to your meta key.

and then use price like below

{{price}}

43) Map Searching is not working / Map Not working / Map Searching was working before but not working now?

If you haven’t already heard, Google Maps have made some big changes

to the way they allow the use of their Google Maps API, which our Map Related functionality depends on.

In short, the following is important to note:

1. All accounts now require a linked credit card in the Google API Console

2. All users will get up to 28 000 map requests per month
   and 40 000 direction calls per month, free of charge (other rates and limits found here: https://cloud.google.com/maps-platform/pricing/sheet/).

3. Should it be needed, NPOs can apply for discounts or grants
   here.

4. Nothing is required from our users except for the fact that they will need to add a credit card to their Google Console account if they haven’t done so already

These changes will come into effect on the 11th of June 2018. Please note that the changes mentioned above have been implemented by Google and are outside of our control.

44) How to Receive Automatic Updates?

you can receive automatic updates using the below Envato plugin

https://envato.com/market-plugin/

45) How To Change Date To German Language or any other Language in the Grid?

Add the below code at the top of your grid,

<#
var event = new Date(post.post_date);
var options = { year: 'numeric', month: 'numeric', day: 'numeric' };
var postDate = event.toLocaleDateString('de-DE', options);

#> 

<span class="reactiveDate">{{postDate}}</span>

now , let see what is happening in the above code the first line,

var event = new Date(post.post_date);

in the above code we have taken the our post created date into our event variable using the Date function.

2nd line,

var options = { year: 'numeric', month: 'numeric', day: 'numeric' };

in this line you will decide which options you want to show like year, month ,day , week etc

3rd line,

var postDate = event.toLocaleDateString('de-DE', options);

'de-DE' is the option for german localization,

and the final line to show the date in the grid,

<span class="reactiveDate">{{postDate}}</span>

if you want to show the text value of month or week name or want to localize it into other language please follow the below linke

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString

46) WPML post link issue in the grid?

As for the post link in the wpml you have to create the post link in the using the below code,

first lets discuss on which site this solution will work,

this is a search page from one of our user using wpml ,

https://www.flip-guide.com/ko/search-bars/

and one of the post link using wpml is,

https://www.flip-guide.com/ko/bars/coyote-ugly/

here the site url is: https://www.flip-guide.com/

wpml lang: ko

post type: bars

post name: coyote-ugly

using the above information now we will create the dynamic post link into the grid,

inside the post loop first we have to collect this information using below code,

<# 
   var siteUrl = REACTIVE.site_url; //this is your site url
   var multiLang = REACTIVE.multi_lang; //this is the current wpml lang
   var postLink = '';
   if(multiLang)  //if wpml lang
     postLink = `${siteUrl}/${multiLang}/${post.post_type}/${post.post_name}`;
   else //if default lang
     postLink = post.post_link;
#> 

ok we have the wpml postLink available now from the above code, now just use this post link instead of

{{post.post_link}}

just use

{{postLink}}

47) How to add reactive pro in a woocommerce shop page and category page?

so basically, its very simple to add shortcode in your shop page follow the below steps,

Shop Page:

   step 1: Go to Reactive Builder

   step 2: Add a new builder 

   step 3: choose your post type, taxonomy and meta that related with search and the result.

   step 4: publish it and then copy the shortcode.

   step 5: paste the shortcode in your shop page.

   step 6: go to your shop page and you can see that our search page builder available in your shop page.

   step 7: take a grid and search block, you can resize it , drag and drop to adjust your grid 
           and search block size and position easily, check our video tutorial to know about it more;

   step 8: add a check box from the search block + icon

   step 9: go to the checkbox settings panel choose a taxonomy for the checkbox

   step 10: now if you select the a checkbox item you can see that your grid items are 
            filtering according to your filter item;

Category Page:

you can use the same shortcode that you have created for your shop page or you can create another shortcode for your category page.

same shortcode means the outlook of search, grid in shop page and category page will be same with different shortcode you can create different layout for your search page.

Category page filter is an important feature for our plugin it will automatically filter the category result based on the category url, lets have a look at the example how it work,

it will work with any kind of taxonomy but For example we are using product category here,

so in your category templatetaxonomy-product_cat.phpif you put the reactive shortcode<?php echo do_shortcode('[reactive key="34"]'); ?>

it will load the search page in any of your category page, if you visit your category page you will find the reactive block there. and also if you visit the below url

http://your__site__url/product-category/clothing/

it will only show that result that have clothing category.

NB: in your category page you can not filter category, that means if you have 3 category, men, women, clothing and you are on a women page, you can not use any checkbox, selectbox or any search component to select men or clothing here it will not work.

48) Search page blank or large post content issue?

​ok if you want to do it you have to do it very carefully or you can ask the support team to do it for you,

(NB: we are not providing it with a update because lots of customer have small post content and want to show them in the grid in their site)

go to reactivepro->app->graph.php

1. first go to this function

public function get_get_grid_all_data($post_types, $wpml_lang)

​2. look for the below query,

SELECT DISTINCT postTable.*

​3. replace the above query with below query,

SELECT DISTINCT postTable.ID, postTable.post_title, postTable.post_date, postTable.post_excerpt, postTable.post_name, postTable.post_type

​that's it, it should fixed any issue if you have big post content or search page blank issue

49) How to show shortcode in grid template?

if you have a shortcode like a download button or something from a 3rd party plugin and you want to show it to the grid,

you can easily do it by putting your shortcode in your post content (by post content i mean the post you are using for searching and filtering or the grid posts it can be any custom post type as we know).

or if you don't want to put your shortcode in your post content theres another way to do it but for this approach you have to do little bit of coding (remember if you do any custom code it will be lost if you update the plugin so you have to keep track of your custom changes every time you update the plugin),

so, lets get into the coding part, i will tell you exactly steps needed to be done here,

i) open the below file,

reactivepro->app->graph.php file

ii) look for the below line in this file,

$singlePost['post_content'] = do_shortcode( $singlePost['post_content'] );

iii) so you have found the above line now carefully understand the below code, i'm showing here an example for our download button, put the below code after the above line,

$singlePost['download_button'] = do_shortcode('[my_download_shortcode]');

note that you can change the download_button text to anything you like and [my_download_shortcode] it's your shortcode,

iv) finally in your grid template if you put the below code,

{{post.download_button}}

note that download_button is the name that you have created in the php file.

that's it, you should have your shortcode in each of your grid.

50) WPML configuration or WPML post meta issue?

​Actually we don't cover the wpml part as it's not our plugin,

but for our customer we have a dedicated section where we have discussed about wpml configuration which is related with our plugin and recommened here is the link,

https://redq.gitbooks.io/reactive-pro-advance-searching-filtering/content/wpml-configuration.html

but the above faq may not answer all of your question so let me clear something here ​first step to work to confirm if wpml is working is to ensure your post single page in admin section is showing all the related data.

by single post i mean your wpml translated post. so if you have a post with meta and taxonomy you have to check your wpml translated post for example: spanish version of your english post.

if you can see that your spanish post have all your taxonomy and meta in spanish version then it's doing fine.

for taxonomy translation we have already discussed in the wpml configuration faq part.

as for the meta, you have to provide your spanish meta data for your spanish post. Basically when you translated post using wpml what it do is create another copy of this post with the related data for example spanish taxonomy but you have to manually cover the meta part.

if you think you have done everything just send us in our support site your default post and translated post with your related search page and login credentials we will do some check for you.

51) Google map location autocomplete not working?

you need to enable google places library in your api, the address field uses google places library.

https://developers.google.com/places/web-service/get-api-key

52) Reactive Builder Front End Suddenly not showing anything?

there are number of situation your builder shortcode could break. it's best to advice that you keep your backup once you have created your search page.

reason your builder shortcode could breatk

1. you have deleted that shortcode
2. you have deleted the grid template
3. you have deleted the custom fields that is being used in the shortcode
4. you have deleted the taxonomy that is being used in the shortcode
5. you have deleted the post type that is being used in the shortcode
6. third party plugin conflict issue
7. caching on the site
8. low memory on the server
9. automatic update in your wordpress site
10. you deactivated the plugin​

if you have done any of the above and you don't have a backup. then unfortunately you will have to re create the shortcode and ​your serarch page.