Contents

1. Having trouble deploying?

2. Home page Search/Select search page?

3. Add post link in map info window

4. Custom data in the grid template

5. How to show woocommerce variable product Price?

6. How to add new social account Like "Instagram" in Social Links section?

7. Can I get a Refund?

8. Can not read Property Length of undefined?

9. Invalid token status in Isomorphic Servers?

10. How to setup non monorepo for Isomorphic Next.js version?

11. Why my location search is not working properly?

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

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

14. Get Quick Support

15. Reuse Form not installed/ Installation errors

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

17. How to use Isomorphic boilerplate single?

18. How to run Django?

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

20. How to use Reactive pro hooks?

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

22. Error! Invalid mobile number

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

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

25. How to change colour theme in Isomorphic?

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

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

28. How to setup Picksy template?

29. Modify Grid Template in Reactive pro?

30. How to change button text?

31. How to create demo like apollo hospital demo

32. How to use Chat with Isomorphic?

33. How to use wordpress default search with Reactivepro?

34. Error! Invalid mobile number

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

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

37. Which project to use from isomorphic?

38. How Autocomplete search work?

39. Why & when helper addons are needed?

1. Having trouble deploying?

Some of our user recently shared their experience how they have overcome the deploying issue with Headless template. Here we are sharing the exact exact steps needed to fix this issue,

Update your node js to 8.1,

after changing the version make sure clean up the packages using below command by running below command

yarn clean
yarn clean:build

also, make sure you followed the point 3 from below,

1 -  Node 8.1.0, Firebase tools 6.4.0

2 - Update the server/package.json to 

"engines": {    "node": "8.1"  }

If in headless-graphql/package.json cp packages/server/{package.json,.env} does not work and needs changing to cp packages/server/package.json packages/cloud/ & cp packages/server/.env packages/cloud/

3 - copy the yarn.lock file into the cloud deployment folder

If in your case 8.1 doesn't work try with version 8.0. it should fix it.

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

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

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


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

6. How to add new social account Like "Instagram" in Social Links section?

Activate child theme first. then add the below code in your child theme function.php file

add_filter('social_links_array', 'func_social_links_array');
function func_social_links_array($social_array){
    $social_array[] = 'instagram';
    return $social_array;
}

Instead of instagram you can use any other social account. 

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


8. Can not read Property Length of undefined?

Make sure your shopify prismic category have a parent category.

Also make sure your parent category have at lease one category that is selected your parent category otherwise you will get this error.

9. Invalid token status in Isomorphic Servers?

In order to get the valid token you will have to do some code here.

you will have to make call to the /api/login endpoint from the signin page with user: demo@gmail.com password: demodemo. this will give you the login token which needed to be stored in the localstorage in same key (id_token)  which will use to validate our token in the /api/test or /api/secret endpoint calling when you will click that Check auth status button.

10. How to setup non monorepo for Isomorphic Next.js version?

if you want to run the non monorepo version of isomorphic-next you need to do the following,

1. copy isomorphic-next content to your next.js app

2. copy each folder from inside shared directory to the root of your next js app and add the below aliasing to your next.config.js file (put the contents [except package.json] from  shared/redux and shared/containers to the containers and redux directory of your app)

const path = require("path");
module.exports = {
    webpack(config, options) {
        config.resolve.alias = {
            ...config.resolve.alias,
            "@iso/assets": path.join(__dirname, "assets"),
            "@iso/components": path.join(__dirname, "components"),
            "@iso/config": path.join(__dirname, "config"),
            "@iso/containers": path.join(__dirname, "containers"),
            "@iso/redux": path.join(__dirname, "redux"),
            "@iso/lib": path.join(__dirname, "library"),
            "@iso/ui": path.join(__dirname, "UI"),
        };
        return config;
    },
};

3. some of the package might be missing in the package.json file since we are using monorepo so you might need to install them based on the module not found error.

11. Why my location search is not working properly?

There are 3 very common reason why location search might not work properly. So make sure you have checked these below three reason if its one of your reason. 

1. Not configuring the googlemap plugin properly. You might forgot to put the map api key in the google map settings. Sometimes people set the google map api key but the don't enable all the services. Make sure you have enabled all the features.

2. Enabling billing for google. If in your google account billing is not enabled then google places api will not work. 

3. During map api creation make sure you have enabled, places api geocoding api and map api. 

12. 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)


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


14. Get Quick Support

In order to get quick support please submit your support ticket with the issue details and below information.

  1.  which package you are using?
  2.  Are you using monorpeo or non monorepo?
  3. Have you made any changes in the code?
  4. have you updated any libraries?
  5. Which command you have run and how you have run can you send us a video?
  6. What is your node js version?
  7. Which Operating system you are using and What version?

15. Reuse Form not installed/ Installation errors

Please follow below installation procedure. 

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

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

17. How to use Isomorphic boilerplate single?

You should use Isomorphic boilerplate single if you want to use non monorepo boilerplate. More on this here https://redqsupport.ticksy.com/article/16233/.

To use Isomorphic boilerplate single just copy all it's content to a separate project and run this command.

1. In project root (isomorphic-boilerplate-single) run [yarn]

2. yarn start 


Now if you get error like below 

I get the following error: 

./src/containers/Sidebar/options.js Module not found: Can't resolve '@iso/config/icon.config' in '/Users/nehbatwara/Desktop/Isomorphic - React Redux Admin Dashboard/isomorphic/packages/isomorphic-boilerplate-single/src/containers/Sidebar'

Image attached as well. If I can get the resolution for this quick that would be helpful! 

2786555722.png


Just follow this steps to solve the above error

it looks like the icon.config.js file is missing in the 

isomorphic-boilerplate-single/src/config directory

you can get this file from shared/config/icon.config.js and move it to the isomorphic-boilerplate-single/src/config directory.



18. How to run Django?

Currently we are working on the documentation we will try to update the documentation soon. In the meantime please follow this guide

To run it you need to first run 

yarn 

command at the root directory where you have packages, shared directory. and then run 

yarn start:iso-servers 

from the root directory. after that you client should run on localhost:3000.

Now that your client is running start the Django server from 

packages/isomorphic-servers/servers/django directory.  

basically you just need to run this command from this directory

python manage.py runserver 9000

after running your django server it should be running on localhost:9000 port 

and then go to the client app localhost:3000 and your server api for this secret/test route. 

we have integrated sercet/test api route in the Check Auth Status button. so when you click that button it should give you the auth status.

if it's still not working please send us a video how you are running the app, show us your server running port and client running port and api test from the client app and from the dev console.

19. 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"/>

20. 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
);

21. 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}}}

22. Error! Invalid mobile number

in your firebase custom domain section make sure you have added your host domain + www.yourdomain.com.

here www before the domain is very important. if you have www in your domain your need to add it in the custom domain.

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


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

25. How to change colour theme in Isomorphic?

please go to shared/config/theme folder and change your required color within color plate in default.js file

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

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

28. How to setup Picksy template?

Here is our installation guide in sequential order

  1. https://picksy-documentation.now.sh/installation
  2. https://picksy-documentation.now.sh/installation/1.%20setup-shopify
  3. https://picksy-documentation.now.sh/installation/2.%20setup-prismic
  4. https://picksy-documentation.now.sh/installation/3.%20setup-picksy-gatsby

Make sure you setup your shopiy store and prismic repo and fill them out with data

https://picksy-documentation.now.sh/home-page/4.%20banner-section

You need to setup the prismic using our content.json files.

NB: Setup all the prismic json files in the video we have shown just 3 but in updated version there is new home layout that is modern and minimal. make sure you upload those json files and provide initial data in each of those fields. otherwise you will get error while running the template.

your custom type should be same type as shown in the video. please note that the custom type name is case sensitive so you can't just use lower case or plural name in custom type. it should be like this https://share.getcloudapp.com/6quPNp9m

also you need to remove default collection from shopify store e.g. home and create some product and collection.

the collection will appear in the menu once you follow this guide 

https://picksy-documentation.now.sh/home-page/3.%20menu-section

Please Note that without complete setup you will get error when you run the template in development or in production.

Submit a ticket with details specifying  in which above step you got stuck or have any doubt and whats your issues. 

Support Ticket Note:

If you still getting the error

you probably didn't imported all the json files or didn't created prismic content data of your created fields.

if you believe you have done above check your shopify product and collection and make sure you have created the shopify collection in prismic as suggested.

if you did all the above and it's still not working for you please send us your shopify and prismic access along with your .end.development file information we will check it for you.



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



30. How to change button text?

To change 'continue with phone' text just use the shortcode and change your text like below

[firebase_otp_login phone_toggle_button_text="your text here"]

To change other text please check our docs shortcode parameters section,

  1.  'phone_button_text' => default value 'Send Code' 
  2.  'code_button_text' => default value 'Verify & Login', 
  3.  'phone_toggle_button_text' => default value 'Continue with Phone', 
  4.  'recaptcha' => default value 'invisible', // invisible or normal 

31. How to create demo like apollo hospital demo

Hi

First you need to set the inventory with quantity one and pricing as per your needs. Then you will need to attach the inventory to the product. 

3369979693.png

Then from the back end of the woocommerce settings >rnb settings> display,

 you will need to display only pick up date and pick up time and keep drop off date and time disabled.

Finally on the allowed time you need to set the appointment times like 18:00, 18:30 and so on for the 24 hour format.

 Hope this helps you out. If you still face issue please let us know.

32. How to use Chat with Isomorphic?

How to use Chat app:

 To work with chat module you need to setup firebase and put message, channel contents in your db according to this docs https://redq.gitbooks.io/isomorphic/content/components/chat-firebase.html

just follow the firebase parts from this docs because the reference to the isormorphic are old and outdated

33. How to use wordpress default search with Reactivepro?

Enable the settings from your admin

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

34. Error! Invalid mobile number

in your firebase custom domain section make sure you have added your host domain + www.yourdomain.com.

here www before the domain is very important. if you have www in your domain your need to add it in the custom domain.

35. 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, yoast 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.

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

37. Which project to use from isomorphic?

Which Isomorphic project to use:

we do have several implementation and deciding which one to use can be tricky.

i) the root isomorphic directory is a separate application which is a non monorepo version. you can use it directly in any project or start playing with it.

ii) the packages directory is a mono repo implementation containing separate version of isomorphic. it has  react and next js implementation as well as quick starter boilerplates for different uses.

iii) if you are comfortable with mono repo i will suggest you to use the isomorphic-boilerplate package. but if you rather not want to use mono repo than just copy out the isomorphic-boilerplate-single and start working with it.

iv) why boilerplate? because it's a minimal blank version of the whole application with the layouts. you can just use it as a regular react application. and bring the component or views that you need from the app. As boilerplate is lightweight it will be fast and will run the application in no time.

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

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