Reactive

Contents

1. Plugin showing console errors/not working at a random time?

2. What to do, when suddenly Search page is not working or clicking on the settings panel getting blank page with error?

3. How Autocomplete search work?

4. Add post link in map info window

5. Why my WordPress search page is slow, what are the best practices for a large number of posts for better performance?

6. How To Change Date To German Language or any other Language in the Grid?

7. How to use hook to show WooCommerce price in the grid?

8. How to get quick help from support for Reactive Pro?

9. Can I get a Refund?

10. Why Reactive plugin feels a bit difficult at the beginning?

11. Custom data in the grid template

12. Home page Search/Select search page?

13. How to use Reactive pro hooks?

14. Where can I found the reactive pro tutorial videos?

15. Why & when helper addons are needed?

16. How to get 300x300 image url for the search result grid?

17. Reuse Form not installed/ Installation errors

18. Modify Grid Template in Reactive pro?

19. How to use wordpress default search with Reactivepro?

20. How to Restrict or Exclude Terms / How to Restrict or Exclude Terms and their post?

21. How can i learn grid (search result) template coding?

22. How to show woocommerce variable product Price?

1. Plugin showing console errors/not working at a random time?

Regarding sudden error at random times can happen for several reasons,

  1. Uses of Caching plugin (WP Rocket, WP smush, etc)
  2. Uses of minify plugin
  3. Low budget servers (temp server, free server, low-cost server)
  4. Server issue (server is unable to handle the request on your site at times)
  5. Third-party plugin conflict
  6. Theme conflict
  7. Plugin requirement not fulfilled
  8. you have removed some data from your reactive builder or from your posts for e.g. (you have removed a taxonomy or meta from the post type) or deleted a grid template but those data are selected on your search page. To ensure if this is the issue just create a new shortcode.
  9. You have copied your site DB data from another site or from your local development which might be caused some missing/corrupted data in your DB. As a result reactive pro plugin can cause console errors. In most of the time the plugin responsible for the data should cause issues so you should either double-check them or create those data again if possible.

To find what caused your issue you need to check one by one. for server related issue please contact with your server administrator.

Due to our limited support scope (Item Support Policy) we can't help you to fix this issues.

2. What to do, when suddenly Search page is not working or clicking on the settings panel getting blank page with error?

if you know the below information then you can forward this information to support 

1. since when you are getting that error?

2. what changes you did that lead to that error?

3. did you delete or removed anything from the reactive builder? if yes what it is exactly.

otherwise,  if you don't know the above information then you will have to recreate the shortocde i think as it will be the best solution and less time consuming.

The most common scenario is you have deleted some data from your wordpress admin but you have selected that that data in your reactive search page settings pannel. as a result when you are going to open the settings pannel its causing the error. so your best shot at this moment is to revert the deleted changes or recreate the shortcode and build the search page again. 

NB: Please note that, in most of the cases support won't be able to help you for such errors.


3. How Autocomplete search work?

The autocomplete is built to work within the dropdown. So the fuzzy search of autocomplete only works within the dropdown as expected. you can choose your result from the dropdown as this is the expected behavior but as soon as you press enter it will not show the result as shown in the dropdown. Because the dropdown uses advance search and show result like post, taxonomy, and meta so pressing enter means showing and selecting all of that from the dropdown which is not possible. 

So, at this moment when you press enter it does a very basic text search to check if the string match from the beginning. You can add some description there like asking your user to choose the result from dropdown instead of pressing enter button or use our basic text search instead. The basic text search is not as smooth as autocomplete but it provides the result appropriately. 

4. Add post link in map info window

First of all copy 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}/${data.post_name}`;
   else //if default lang
     postLink = data.post_link;
#>
<div class="reactiveInfoWindowWrapper 3">
  <div class="reactiveInfoWindowImage">
     <a href="{{data.post_link}}">
        <img src="{{data.thumb_url}}" alt="Image">
      </a>
  </div>
  <div class="reactiveInfoWindowContents">
    <h4><a href="{{postLink}}">{{data.post_title}}</a></h4>
    <p class="reactiveAddressText">{{data.meta.formattedAddress}}</p>
    <p class="">{{data.meta.phone}}</p>
  </div>
</div>

Now go to Admin menu Reactive Templates->All map info window templates. Now create a new info window and paste the above code you just copied. Now save the template and goto your search page and select the newly created info window template. 

https://share.getcloudapp.com/WnuBye99

5. Why my WordPress search page is slow, what are the best practices for a large number of posts for better performance?

First of all, Reactive pro is an instant search plugin. That means this plugin tries to fetch all your data (posts, terms, meta, term meta) in the initial load and generate the graph data for you so that when you do any search it becomes super fast.

This solution should work fine for a site that has (<10k) posts. We have tested up to 30k without any major performance drawback.

In case of the huge amount of posts ( > 5k ) you need to consider few things at first,

i) post ids

ii) number of terms

iii) metadata

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

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

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

iii) It fetch metadata from the meta key you have selected in the builder.

so, you can see with a huge number of post ids ( > 30k ), terms ( > 100 ) and metadata 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 affect the initial page load if you don't have a large number of terms ( > 300 ) or large posts contents. you can turn off post contents from the builder shortcode.

iii) if you have a small number of terms ( < 100 ) but the contents of your post are large for each post, you can turn off the post content 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. large post contents happen when you use the page builder to create your post contents.

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

v) you should have a very good server, By good server we mean more thann our recommended system status and the server should be able to process all of your posts data at a time otherwise you will get 500 error because your server has failed to process the request to provide all of your post data.

Basically, we want you to be conscious about your data on the search page because and the amount of data you are sending on the search page. the more data you will send the page will have to load the more size in your page for your data & post contents is one of the things you should be careful so that it won't load unnecessary data in your page.

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

6. 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 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

7. How to use hook to show WooCommerce price in the grid?

// The filter callback function.
function example_callback($data)
{
    foreach ($data['allPosts'] as $key => $value) {
        $product = wc_get_product($value['ID']);
        $data['allPosts'][$key]['product_price_html'] = $product->get_price_html();
    }
    return $data;
}
add_filter('reactivepro_get_grid_all_data', 'example_callback', 10);

Now in the grid template code just use

{{{post.product_price_html}}}

8. How to get quick help from support for Reactive Pro?

NB: Before Submitting ticket make sure you have installed redq-reuse-form helper plugin installed

So, if you want us to help you out as soon as possible, please send us the below information

  1. your search page url
  2. admin credentials
  3. reacttive shortcode builder url
  4. related post type, taxonomy, meta you are using to set up your search page.
  5. what is exactly you are trying to achieve and where you are stuck right now.
  6. what is your issue or trouble, where you need help. please be specific as much as possible.
  7. send us screenshot of your issues so that we can understand it better. (Screenshot is required for your first support ticket unless your support ticket may get delayed response or can be ignored sometimes)


9. Can I get a Refund?

Sorry to see that you don't want to use our Product. Before you decide to completely leave our product please open ticket stating why exactly you don't want to use it anymore. We hope our support team can help you to solve your issue.

Unfortunately we don't provide Refund except if you can have a detail discussion with the support team and you can prove them there is a bug which is stoping your from releasing or using our product. This is the only case which we may consider for refund but it's very rare as most of the feature you will use is very stable for years now and lots of user is using them on regular basis.

If you still disagree and think you should get a refund you can check Envato refund section from here, 

https://help.market.envato.com/hc/en-us/articles/202821460-Can-I-Get-A-Refund-

make sure you provide enough details in your refund request so that our refund team can recreate or check the issue.


10. Why Reactive plugin feels a bit difficult at the beginning?

Reactive Pro is a large plugin not in terms of its size but in terms of the feature and customizability it offers. It is the only advanced search plugin that has a dedicated frontend search page builder. 

Not understanding how things work or how to get this done happens with every page builder or large plugin. You have to understand that Having a search functionality with your requirement is no simple work. It's months of work to create a search functionality. But our plugin is here not only to save your efforts but also it gives you lots of settings and functionality to make your search page customization easy. Having lots of customization feature is great because you can cover almost any feature requirement with them. Sometimes it happens that your client asks for some custom search feature for e.g. keeping an extra search component in the modal. With the search plugin available in the market you have to do customization by your own to create this feature or sometime its not even possible. But with our Search plugin, we will not disappoint you. So The amount of feature we have provided for your customization will not only help you with your client's feature request but also will help you in the long term.

There are lots of Searching plugins in the market with easy settings but none of them will provide you so much functionality, customization as ours. Plus we give you a Frontend page builder system to create your search page which is super 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 it you can create search pages for your clients (Having a search functionality is one of the works that has a huge demand in both on and off freelance market) easily. 

About the difficult part if you follow our direction and contact the support forum they will make it easier for you to understand also we are continuously working on an 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 for 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.

Finally, Why should you choose Reactive pro over other searching plugins in the market? 
while working on a project we might think we want to complete the project as soon as possible why should we learn Reactive search page builder. You should choose and learn Reactive pro because

  1. It's an advanced search page builder plugin with a very modern approach
  2. You learn it once and can apply it with any WordPress search-related work (you do have to purchase a separate license for each project)
  3. Almost any feature can be done with Reactive pro
  4. If you want to build your search page and think about it in the long term
  5. Search page builder
  6. Customization
  7. It becomes very easy and quick once you learn it.

11. Custom data in the grid template

we suggest modifying the grid data based on the below faq

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

49) How to show shortcode in grid template?

instead of shortcode, you can return any data and that can be your product range price, after that just use that price on your shop page.

NB: with Reactivepro version 4.0.9 you can use apply filter hooks to modify data. To know about hooks check the hooks.md file inside the plugin or contact with the support team.


12. Home page Search/Select search page?

  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.


    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.

13. How to use Reactive pro hooks?

NB: Check the hooks.md file inside the plugin files to know about hooks and where they are available.

For example if you want to modify the image size, you can try it like below

function reactiveProCustomGridData ($data){
    
 $data['300image'] = get_your_modify_image_data_here();
return $data;    
}
    
add_filter(
    'reactivepro_get_grid_all_data', // hook class 
    'reactiveProCustomGridData', // wordpress function  
    10,
    2
);

Now in the grid template code you can use it like below inside the post loop

{{post.300image}}


I want to use a hook for changing the order of categories in my search block.
do not want to order by name, but custom array order that I specify in a hook.
which hook should I use?

=> ok I solved it, partially. If I order by slug, then I can rename the slugs with "01-*****", 02-*****" and it won't affect the name of the filters on the frontend, but it will change the order.

function reactivecatorder ($data){
    
 $data = wp_list_sort($data, "slug");
return $data;    
}
    
add_filter(
    'reactivepro_get_all_terms', // hook class 
    'reactivecatorder', // wordpress function  
    10,
    2
);

and another method, by custom order

function reactivecatorder  ($data){
    
// put custom order of term ids below
$order = array(37, 38, 39, 40, 47, 90, 71, 72, 73, 74, 75, 76, 77, 78, 87, 88, 89);
$array = $data;
usort($array, function ($a, $b) use ($order) {
    $pos_a = array_search($a['term_id'], $order);
    $pos_b = array_search($b['term_id'], $order);
    return $pos_a - $pos_b;
});
$data = $array;
return $data;    
}
    
add_filter(
    'reactivepro_get_all_terms', // hook class 
    'reactivecatorder', // wordpress function  
    10,
    2
);

14. Where can I found the reactive pro tutorial videos?

You can find the Tutorial videos from this playlist, 

These videos are from version 3.0 but most of the concept, building search pages, filtering is still same. Some of the option name might change in such case please feel free to ask the support team if you don't understand some option or settings

15. Why & when helper addons are needed?

We have 2 helper addons for you,

  1. Reuse Form: This is a core add-on, it's required with our plugin. It's a separate plugin because if you use our other plugin such as Reuse Builder it will not load two times.
  2. Google Map: Google map add-on is required only if you want to use our map search feature. otherwise, you can choose not to install this add-on.

These addons are very lightweight and will only load the necessary js, CSS required for your search page and in the reactive admin settings.

If you see any performance issue that is not related to this article https://redqsupport.ticksy.com/article/16713/ then there is a very good chance that your site has lots of other plugins that are causing an issue or it can be a plugin/theme conflict.

16. How to get 300x300 image url for the search result grid?

you can use the below hooks code

// The filter callback function.
function example_callback($data)
{
    foreach ($data['allPosts'] as $key => $value) {
        $thumbnail_url = wp_get_attachment_image_src(get_post_thumbnail_id($value['ID']), array('300', '300'), true);
        $data['allPosts'][$key]['medium_thumb'] = $thumbnail_url[0];
    }
    return $data;
}
add_filter('reactivepro_get_grid_all_data', 'example_callback', 10);

Then in your grid template code replace the img src with below code

<img src={{post.medium_thumb}} alt="medium thumb image"/>

17. Reuse Form not installed/ Installation errors

Please follow below installation procedure. 

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

18. Modify Grid Template in Reactive pro?

Here are some of the useful FAQ to help you to modify Reactive Grid template or search result or grid layout

First go to the below URL

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

Then look for the below FAQ's

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

v) How to show the meta in the grid?

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

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

42) Thousand Separator For Price?

49) How to show shortcode in grid template?

NB: with Reactivepro version 4.0.9 you can use apply filter hooks to modify data. To know about hooks check the hooks.md file inside the plugin or contact with the support team.



19. How to use wordpress default search with Reactivepro?

Enable the settings from your admin

Reactive -> settings -> https://share.getcloudapp.com/9ZuxWKWE

20. 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, Pagination 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, As for pagination just use 'Load More' instead.

<# 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>

21. How can i learn grid (search result) template coding?

We are using Wordpress underscore templating system for our search result / grid template 

You can check Wordpress official docs for their templating from here 

https://codex.wordpress.org/Javascript_Reference/wp.template

and here is a great tutorial to learn the templating system

https://lkwdwrd.com/wp-template-js-templates-wp


22. How to show woocommerce variable product Price?

you can just use the price_html for the variable price

  https://share.getcloudapp.com/v1ub2Lok

So in your grid template code where you are showing price you need to use the below code

<span class="reactiveProductPrice">
  <# if(post.price_html) { #>
     {{{post.price_html}}}
  <# } else {#>
     {{post.meta._price}}
  <# } #>
</span>