Contents

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

2. Documentation Link?

3. Why my location search is not working properly?

4. Home page Search/Select search page?

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

6. Item Support Policy

7. How to put the shortcode in WooCoomerce login form?

8. window variable error on next.js template

9. Modify Grid Template in Reactive pro?

10. How to setup Picksy template?

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

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

13. Shop running issue for tsconfig

14. How to use wordpress default search with Reactivepro?

15. Can I get a Refund?

16. React Hook Form

17. Send love to our product

18. What is Headless Shopify?

19. How Social Login Work?

20. Get Quick Support

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

22. Missing or insufficient permission?

23. Error! Invalid mobile number

24. How to create demo like apollo hospital demo

25. How to redirect after Login?

26. How to check docs?

27. How to install this theme in Shopify?

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

29. What is Headless Shopify?

30. Add post link in map info window

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

32. How to change button text?

33. Email notification on order creation

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

35. How Autocomplete search work?

36. React Hook Form

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

38. What is Headless Shopify?

39. Can I get a Refund?

40. How to use is as single vendor?

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

42. Database URL?

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

44. How to use Chat with Isomorphic?

45. How to show woocommerce variable product Price?

46. Which project to use from isomorphic?

47. Why map loading time is different from browser to browser?

48. Reuse Form not installed/ Installation errors

49. Item Support Policy

50. Why & when helper addons are needed?

51. Error! Invalid mobile number

52. Having trouble deploying?

53. How Social Login Work?

54. How to use Isomorphic boilerplate single?

55. Laravel JWT

56. Can not read Property Length of undefined?

57. How to change colour theme in Isomorphic?

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

59. AWS s3 configuration

60. How to run Django?

61. Invalid token status in Isomorphic Servers?

62. Custom data in the grid template

63. Email Notification

64. How to install this application?

65. How to use Reactive pro hooks?

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

67. Can I get a Refund?

68. Email notification on order creation

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


2. Documentation Link?

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

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

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

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

6. Item Support Policy

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 

7. How to put the shortcode in WooCoomerce login form?

You need to put the firemobile shortcode in the WooCommerce login form then it will automatically redirect the user to the my account page after login and the continue with phone button will disappear. 

Now to put the firemobile shortcode in the WooCommerce login form follow the below approach, 

You can do it in two way,

I)  apply the below code in your theme functions.php file 

function action_woocommerce_login_form_end()
{    
    // make action magic happen here...    
    do_shortcode('[firebase_otp_login]');
};
// add the action
add_action('woocommerce_login_form_end', 'action_woocommerce_login_form_end', 10, 0);

II) you should override the WooCommerce template

You can override pretty much every WooCommerce template by copying them into a folder named "WooCommerce" in your theme.

This is documented at Template structure & Overriding templates via a theme.

The login and register forms non-logged in users see when they click "my account" are genetared by the template file /myaccount/form-login.php

So what you need to do is copy this file from the directory to your theme's directory (so it is /yourtheme/woocommerce/myaccount/form-login.php) and from there edit it as desired.

In this case, you will want to put the shortcode after the Login button.

Note: If you are using any Custom theme and the above solution not working for you then you need to contact the theme developer.

8. window variable error on next.js template

So far we have found that process.browser is probably causing this as next.js made it depreciable and throws an error. we need to replace it with  

typeof window === "undefined"

so if you can replace process.browser with the above code it should fix the issue. We will run some further testing and if everything is fine we will push an update soon.

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



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


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.



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

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

13. Shop running issue for tsconfig

First of all, you have run the below two commands in the root directory.

yarn clean
yarn

At first open pickbazar -> shop

Now follow the below procedure

Then open pickbazar -> shop -> .env and change FRAMEWORK_PROVIDER to rest for REST installation or graphql for Graphql Installation.

Now run the below commands from the root pickbazar directory

# for dev mode run below command
# GraphQL
yarn dev:shop-gql
# REST
yarn dev:shop-rest

14. How to use wordpress default search with Reactivepro?

Enable the settings from your admin

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

15. Can I get a Refund?

Unfortunately, we don't provide Refund except if you can have a detailed discussion with the support team and you can prove to them there is a bug that is stopping you from releasing or using our product. In order to consider for refund, the feature needs to be available in our product and there needs to be a genuine bug with valid proof that the bug is available. This is the only case which we may consider for a refund but it's very rare as most of the features you will use is very stable for years now and lots of users are using them on regular basis.  Also, any issue or bug that is only not working for your case but working on our site and other user's sites is not considered for a refund.

16. React Hook Form

As you know already we are using react-hook-form. react-hook-form works a bit differently than other react form libraries. It has its own state management system to make it performant, preventing unnecessary rending and you don't have to manage the state by yourself. You can find more about this from their oficial docs here https://react-hook-form.com/

As they are doing the form fields stage management for you, you don't need to do the onChange here to handle the state or the field data like input field, select field etc. What you will need is access to that data during submission or at any given time. Submission data is already shown in our different forms example which you can check (you can check componets/product directory). Also to be fluent with React hook form you need to understand their docs, APIs from here https://react-hook-form.com/. Lots of examples can be found here https://github.com/react-hook-form/react-hook-form/tree/master/examples . React select example is available here https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5. you can use their watch to access fields data at any given time https://react-hook-form.com/get-started. Hope these resources should be enough for you to understand the react-hook-form uses in our forms. 

17. Send love to our product

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.

18. What is Headless Shopify?

Picksy is a headless commerce application based on Shopify. 

You won't be able to install this theme in Shopify as it will be a separate entity.

To know more about headless commerce please check this article

https://www.shopify.com/enterprise/headless-commerce

https://www.gatsbyjs.com/solutions/shopify/

19. How Social Login Work?

The necessary direction below will help you to integrate custom social providers as well.

How Social Login Works at Chawkbazar Laravel

For Social site authentication, we are using NextAuth https://next-auth.js.org/ for the client site shop (in the nextjs app) and  Laravel Socialite https://laravel.com/docs/8.x/socialite for the API server. 

The Social Login flow here is 

i) NextAuth will get the access token from the provider
ii) we will send a request to the API server with the access token
iii) API server will verify the access token using Laravel Socialite
iv) If verified then the user will be logged in.


So, the question: how can I organize the oAuth for these providers?

=> To organize provider you need to check the documentation of NextAuth from here https://next-auth.js.org/configuration/providers/oauth#built-in-providers and Laravel Socialite https://laravel.com/docs/8.x/socialite


I see i have a built-in Google/Facebook provider, but for Google, the process of creation of the oAuth creds is very complex. Maybe you have some kind of explanation/article/best practices on how to connect different providers? 

=> For starters, you can check our documentation for social login from here https://chawkbazar-laravel-doc.vercel.app/social-login. We have tried to show step by step procedure. If you want more explanation or best practices you can always check the NextAuth and Socialite documentation. For example for Google, NextAuth documentation has all the necessary information for documentation and configuration in here https://next-auth.js.org/providers/google


1) When the oAuth provider redirects the user back to the chawkbazar website, should it first go to the /social-login-token Laravel's serverside method? Or it first goes to some part of the next.js app ...

=> As mentioned in the Social login flow above, yes it will send the access token with /social-login-token request so that Laravel socialite can verify that. Once it's verified it will let the user logged in.

2) Where the accessToken usually stores by design of the Pick Bazar? Serverside/Database/Redis? Or the next js app? 

=> The accessToken is stored on session using NextAuth. You can check it from src/pages/api/auth/[...nextauth].ts file under the callback jwt and session function and to access the data from the session using the below code

import { useSession } from 'next-auth/client';
const [session, loading] = useSession();

3) I implemented the oAuth flow for vk.com provider, and it seems to be partially working....

=> To Implement vk.com, you need to check the vk.com docs for nextauth from here https://next-auth.js.org/providers/vk along with laravel socialite documentation for vk. Make sure to add necessary config similar to the one mentioned in our docs here https://chawkbazar-laravel-doc.vercel.app/social-login

In the API related part you do need to make some changes in the src/Http/Controllers/UserController.php file validateProvider function you need to add the provider name 

you need to check here if you are getting the accessToken in the social login function of UserController.php file and if it returns the user. If not then you need to go to the src/pages/api/auth/[...nextauth].ts file and check if you are getting the accessToken there.


Hope this information will help you to work with our social login feature

Thanks

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

NB: Please share a screenshot or video of your issue so that we can reproduce the issue on our end.

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

22. Missing or insufficient permission?

Looks like a permission issue.

please go to Firestore -> rules then add the below snippets

service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write;
    }
  }
}

Note: This completely turns off security for the database!

But don't worry we are doing requests from Backend where we are authorizing the requests first before making any requests to firebase.

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

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

25. How to redirect after Login?

This question has two answers based on if you are using WooCommerce or not

1. If you are using WooCommerce:

You need to put the firemobile shortcode in the WooCommerce login form then it will automatically redirect the user to the my account page after login and the continue with phone button will disappear. 

Now to put the firemobile shortcode in the WooCommerce login form follow the below approach, 

You can do it in two way,

I)  apply the below code in your theme functions.php file 

function action_woocommerce_login_form_end()
{
    // make action magic happen here...
    do_shortcode('[firebase_otp_login]');
};
// add the action
add_action('woocommerce_login_form_end', 'action_woocommerce_login_form_end', 10, 0);

II) you should override the WooCommerce template

You can override pretty much every WooCommerce template by copying them into a folder named "WooCommerce" in your theme.

This is documented at Template structure & Overriding templates via a theme.

The login and register forms non-logged in users see when they click "my account" are genetared by the template file /myaccount/form-login.php

So what you need to do is copy this file from the directory to your theme's directory (so it is /yourtheme/woocommerce/myaccount/form-login.php) and from there edit it as desired.

In this case, you will want to put the shortcode after the Login button.



2. If you are not using WooCommerce:

In this case, you need to put the [firebase_otp_login] shortcode in your desired place just make sure the shortcode shows up when user is not logged in using the below code 

if ( !is_user_logged_in() ) {
    do_shortcode('[firebase_otp_login]');
}

Now once the user verifies the OTP it will reload the current page and log in to the user. But if you want to redirect to a particular page you should make changes in the below js file

/wp-content/plugins/FireMobile/assets/js/wfotp-core.js in 321 line


26. How to check docs?

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


27. How to install this theme in Shopify?

Picksy is a headless commerce application based on Shopify. 

You won't be able to install this theme in Shopify as it will be a separate entity.

To know more about headless commerce please check this article

https://www.shopify.com/enterprise/headless-commerce

https://www.gatsbyjs.com/solutions/shopify/

TLDR; it's not possible.

28. 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 the shared directory to the root of your next js app. It's better if copy the content of the container, redux and other directories that are already available on your next.js app so that you don't replace them.  put the contents [except package.json] from shared/redux and shared/containers to the containers and redux directory of your app.

3. and add the below aliasing to your next.config.js file. 

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;
    },
};

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

29. What is Headless Shopify?

Picksy is a headless commerce application based on Shopify. 

To know more about headless shopify please check this article

https://www.gatsbyjs.com/solutions/shopify

https://www.shopify.com/enterprise/headless-commerce


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

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


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

33. Email notification on order creation

For sending emails we have provided two events. Those events are commented right now. What you have to do is uncomment that code resides in OrderRepository.php file. 

uncomment below two lines

// event(new OrderCreated($order));
// event(new OrderReceived($order));

Now what you need to do is run the queue. As this event will run in the queue you have to make sure your queue is running. 

php artisan queue:work

The above command can be run to listen to the events. For details on this issue please check the below documentation from laravel. 

https://laravel.com/docs/8.x/queues

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

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

36. React Hook Form

As you know already we are using react-hook-form. react-hook-form works a bit differently than other react form libraries. It has its own state management system to make it performant, preventing unnecessary rending and you don't have to manage the state by yourself. You can find more about this from their oficial docs here https://react-hook-form.com/

As they are doing the form fields stage management for you, you don't need to do the onChange here to handle the state or the field data like input field, select field etc. What you will need is access to that data during submission or at any given time. Submission data is already shown in our different forms example which you can check (you can check componets/product directory). Also to be fluent with React hook form you need to understand their docs, APIs from here https://react-hook-form.com/. Lots of examples can be found here https://github.com/react-hook-form/react-hook-form/tree/master/examples . React select example is available here https://codesandbox.io/s/react-hook-form-v7-controller-5h1q5. you can use their watch to access fields data at any given time https://react-hook-form.com/get-started. Hope these resources should be enough for you to understand the react-hook-form uses in our forms. 

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

38. What is Headless Shopify?

Picksy is a headless commerce application based on Shopify. 

You won't be able to install this theme in Shopify as it will be a separate entity.

To know more about headless commerce please check this article

https://www.shopify.com/enterprise/headless-commerce

https://www.gatsbyjs.com/solutions/shopify/

TLDR; it's not possible.

39. Can I get a Refund?

Unfortunately, we don't provide Refund except if you can have a detailed discussion with the support team and you can prove to them there is a bug that is stopping you from releasing or using our product. In order to consider for refund, the feature needs to be available in our product and there needs to be a genuine bug with valid proof that the bug is available. This is the only case which we may consider for a refund but it's very rare as most of the features you will use is very stable for years now and lots of users are using them on regular basis.  Also, any issue or bug that is only not working for your case but working on our site and other user's sites is not considered for a refund. A third-party plugin or theme conflict is also not considered for a refund. 


40. How to use is as single vendor?

Hello,

If you want to use this multi-vendor marketplace as a single vendor shop you have to keep in mind that you are only doing it so your user can't understand if it is a multivendor or not. sO the changes you have to do are in your shop code.

Admin changes:

1. First of all create a single shop from the admin dashboard as admin.

2. Remove the Register as store owner section from admin login. Remove the below section of code from "rest/src/components/auth/login-form.tsx" file

<div className="text-sm sm:text-base text-body text-center">     {t("form:text-no-account")}{" "}     <Link href="/register" className="ms-1 underline text-accent font-semibold transition-colors duration-200 focus:outline-none hover:text-accent-hover focus:text-accent-700 hover:no-underline focus:no-underline" >         {t("form:link-register-shop-owner")}     </Link> </div>


Shop changes: 

1. Remove the 'Become a seller" button and "shops" menu from the shop menu. Remove below code from "src/components/layouts/header-minimal.tsx" file

<Link href={`${process.env.NEXT_PUBLIC_ADMIN_URL}/register`} variant="button" target="_blank" > 
    {t('text-become-seller')} 
</Link>

and below code from "src/components/layouts/header.tsx"

<a href={`${process.env.NEXT_PUBLIC_ADMIN_URL}/register`} target="_blank" rel="noreferrer" className="inline-flex items-center justify-center flex-shrink-0 px-3 py-0 text-sm font-semibold leading-none transition duration-300 ease-in-out border border-transparent rounded outline-none h-9 bg-accent text-light hover:bg-accent-hover focus:outline-none focus:shadow focus:ring-1 focus:ring-accent-700" > {t('text-become-seller')} </a>


2. Then remove the seller section from the shop details section. Remove the below code from the "src/components/products/details/details.tsx" path

{shop?.name && ( <div className="flex items-center mt-2"> <span className="text-sm font-semibold text-heading capitalize me-6 py-1"> {t('common:text-sellers')} </span> <button onClick={() => navigate(`${ROUTES.SHOPS}/${encodeURIComponent(shop?.slug)}`) } className="text-sm text-accent tracking-wider transition underline hover:text-accent-hover hover:no-underline" > {shop?.name} </button> </div> )}


3. Now on the order details page remove the suborders section. Remove below code from "src/components/orders/order-view.tsx" path.

{order?.children?.length > 1 ? (          <div>            <h2 classname="text-xl font-bold text-heading mt-12 mb-6">              {t('text-sub-orders')}            </h2>            <div>              <div classname="flex items-start border border-gray-700 rounded p-4 mb-12">                <span classname="w-4 h-4 px-2 rounded-sm bg-dark flex items-center justify-center me-3 mt-0.5">                  <checkmark classname="w-2 h-2 text-light flex-shrink-0"></checkmark>                </span>                <p classname="text-heading text-sm">                  <span classname="font-bold">{t('text-note')}:</span>{' '}                  {t('message-sub-order')}                </p>              </div>              {Array.isArray(order?.children) && order?.children.length && (                <div classname="">                  <suborderitems items="{order?.children}"></suborderitems>                </div>              )}            </div>          </div>        ) : null}

4. Now remove the view suborders button from the my-orders page.  Now replace the below code from "src/components/orders/order-details.tsx"

<Link href="{`${ROUTES.ORDERS}/${tracking_number}`}" classname="font-semibold text-sm text-accent flex items-center transition duration-200 no-underline hover:text-accent-hover focus:text-accent-hover">                <eye width="{20}" classname="me-2"></eye>                {t('text-sub-orders')}              </Link>


use this code to replace above code

<Link href="{`${ROUTES.ORDERS}/${tracking_number}`}" classname="font-semibold text-sm text-accent flex items-center transition duration-200 no-underline hover:text-accent-hover focus:text-accent-hover">      <eye width="{20}" classname="me-2"></eye>      Details
</Link>

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

42. Database URL?

To generate a database URL you need to go to the Firestore DB and click on the Getting started button. Once it's done you can check your config and find the database URL there.

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

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

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

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

47. Why map loading time is different from browser to browser?

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.


48. Reuse Form not installed/ Installation errors

Please follow below installation procedure. 

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

49. Item Support Policy

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 

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

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

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

53. How Social Login Work?

The necessary direction below will help you to integrate custom social providers as well.

How Social Login Works at Pickbazar Laravel

For Social site authentication, we are using NextAuth https://next-auth.js.org/ for the client site shop (in the nextjs app) and  Laravel Socialite https://laravel.com/docs/8.x/socialite for the API server. 

The Social Login flow here is 

i) NextAuth will get the access token from the provider
ii) we will send a request to the API server with the access token
iii) API server will verify the access token using Laravel Socialite
iv) If verified then the user will be logged in.


So, the question: how can I organize the oAuth for these providers?

=> To organize provider you need to check the documentation of NextAuth from here https://next-auth.js.org/configuration/providers/oauth#built-in-providers and Laravel Socialite https://laravel.com/docs/8.x/socialite


I see i have a built-in Google/Facebook provider, but for Google, the process of creation of the oAuth creds is very complex. Maybe you have some kind of explanation/article/best practices on how to connect different providers? 

=> For starters, you can check our documentation for social login from here https://pickbazar-doc.vercel.app/social-login. We have tried to show step by step procedure. If you want more explanation or best practices you can always check the NextAuth and Socialite documentation. For example for Google, NextAuth documentation has all the necessary information for documentation and configuration in here https://next-auth.js.org/providers/google


1) When the oAuth provider redirects the user back to the pick Bazar website, should it first go to the /social-login-token Laravel's serverside method? Or it first goes to some part of the next.js app ...

=> As mentioned in the Social login flow above, yes it will send the access token with /social-login-token request so that Laravel socialite can verify that. Once it's verified it will let the user logged in.

2) Where the accessToken usually stores by design of the Pick Bazar? Serverside/Database/Redis? Or the next js app? 

=> The accessToken is stored on session using NextAuth. You can check it from src/pages/api/auth/[...nextauth].ts file under the callback jwt and session function and to access the data from the session using the below code

import { useSession } from 'next-auth/client';
const [session, loading] = useSession();

3) I implemented the oAuth flow for vk.com provider, and it seems to be partially working....

=> To Implement vk.com, you need to check the vk.com docs for nextauth from here https://next-auth.js.org/providers/vk along with laravel socialite documentation for vk. Make sure to add necessary config similar to the one mentioned in our docs here https://pickbazar-doc.vercel.app/social-login

In the API related part you do need to make some changes in the src/Http/Controllers/UserController.php file validateProvider function you need to add the provider name 

you need to check here if you are getting the accessToken in the social login function of UserController.php file and if it returns the user. If not then you need to go to the src/pages/api/auth/[...nextauth].ts file and check if you are getting the accessToken there.


Hope this information will help you to work with our social login feature

Thanks

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



55. Laravel JWT

First Check the Laravel instruction below

## Getting Started

The procedure to getting started with an isomorphic laravel starter kit. We have used Laravel default `Auth` with `auth-jwt`.

- `composer update`
- `Rename your .env.example to .env`
- `Fill your .env files database credentials [DB_DATABASE, DB_USERNAME, DB_PASSWORD]`
- `php artisan migrate`
- `sudo php artisan serve --port=9000`
Now you are good to go

If you want to create your own secret then run the below command
- `php artisan jwt:secret`

## Routes

- `Route::post('register', '[email protected]');`  //generate token
- `Route::post('login', '[email protected]');`  //generate token
- `Route::post('logout', '[email protected]');` // logout will make the token to blacklisted you have to create - token again from login route
- `Route::post('refresh', '[email protected]');` //can refresh token with existing token
- `Route::post('secret/test', '[email protected]');`


In the React code do the below change

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

you will have to make call to the /login endpoint from the signin page with user: [email protected] 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 /secret/test  endpoint calling when you will click that Check auth status button.

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

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

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

59. AWS s3 configuration

Hello,

Please follow the below two articles to get started with AWS s3.

https://objectivefs.com/howto/how-to-get-amazon-s3-keys

https://docs.aws.amazon.com/quickstarts/latest/s3backup/step-1-create-bucket.html

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

61. 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: [email protected] 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.

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


63. Email Notification

Hello,

Our plugin doesn't have a default email notification system but we have provided a hook that can be used to fire email on receiving a private message. 

add_action("yobro_after_store_message", function($message){
// code to send email
})

64. How to install this application?

Please follow our installation documentation with a video and step by step guide here 

https://headless-doc.vercel.app/installation

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

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


67. Can I get a Refund?

Unfortunately, we don't provide Refund except if you can have a detailed discussion with the support team and you can prove to them there is a bug that is stopping you from releasing or using our product. In order to consider for refund, the feature needs to be available in our product and there needs to be a genuine bug with valid proof that the bug is available. This is the only case which we may consider for a refund but it's very rare as most of the features you will use is very stable for years now and lots of users are using them on regular basis.  Also, any issue or bug that is only not working for your case but working on our site and other user's sites is not considered for a refund.

68. Email notification on order creation

For sending emails we have provided two events. Those events are commented right now. What you have to do is uncomment that code resides in OrderRepository.php file. 

uncomment below two lines

// event(new OrderCreated($order));
// event(new OrderReceived($order));

Now what you need to do is run the queue. As this event will run in the queue you have to make sure your queue is running. 

php artisan queue:work

The above command can be run to listen to the events. For details on this issue please check the below documentation from laravel. 

https://laravel.com/docs/8.x/queues