We strictly follow Envato item support policy https://themeforest.net/page/item_support_policy
you can find what's not included in the support there
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.
// 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}}}I will suggest you start with our video tutorials from this article
Where can I found the reactive pro tutorial videos?
The videos are a bit old but you will understand how our plugin works,
Then please start with our quick start guide from here
https://redq.gitbooks.io/reactive-pro-advance-searching-filtering/content/getting-start.html
after that please check this FAQ's
https://redq.gitbooks.io/reactive-pro-advance-searching-filtering/content/faq.html
and docs from here
https://redq.gitbooks.io/reactive-pro-advance-searching-filtering/content/system-status.html
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"/>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>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
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) Depending how many posts you have there is a possibility that won't affect the initial page load if you don't have a large number of terms ( > 300 ) or large post contents. you can turn off post contents from the builder shortcode. But this is still experimental so it might still be slow for you.
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.
We strictly follow Envato item support policy https://themeforest.net/page/item_support_policy
you can find what's not included in the support there
Regarding sudden error at random times can happen for several reasons,
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.
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
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>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
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.Enable the settings from your admin
Reactive -> settings -> https://share.getcloudapp.com/9ZuxWKWE
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.
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.
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.
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.
Hope you have liked our product. Our engineering & technical support team puts great effort to create the best product in the market with continuous effort to improve it each day for our users. We will really appreciate it if you can show your appreciation for our product by sending us a 5-star rating at Envato. Good feedbacks encourage the whole team to improve the product better. You can send us your feedback from this link https://codecanyon.net/downloads under the Download button here https://monosnap.com/file/IjKAVXsi5Ej9Xrx0zkQt9Cl1cc0R39.
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
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
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
);
Please follow below installation procedure.
Hello,
The issue has already fixed by one of our customer. You can follow below instruction. I am providing his exact replies.
I only force reactive to use a normal marker instead. By changing the property name that is used on conditional logic to something else ( so that it is intentionally treated as false ). I re-named the window.RichMarker to the window.RichMarkerNotFound on :
/reactivepro/assets/dist/js/re_preview_d033df.js?ver=5.7.3
If you check the above file, there would be the string 'RichMarkerNotFound'. it's originally named just RichMarker.
We have 2 helper addons for you,
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.