This section is only used for FluxStore Multi Vendor product and Dokan/WCFM plugins. Please skip it if this is not your app or you are not using the required plugins.

Follow the steps below to set up your app and sync the data with our demo website or your website.

If you prefer tutorial videos, please subscribe to our InspireUI Channel, press the notification icon to get notified when we release a new video and don't forget to give us a like if you find it useful.

• Make sure you have finished the Getting Started guide before going to next section.

• For Dokan users

  • Copy the content of lib/example/dokan/config.dart.txt file to lib/common/config.dart
  • Copy the content of lib/example/dokan/config_en.json file to lib/config/config_en.json
  • In the lib/example/dokan folder, InspireUI has provided plenty of themes for users to try. Simply copy the content of them and replace it in config_en.json

• For WCFM users

  • Copy the content of lib/example/WCFM/config.dart.txt file to lib/common/config.dart
  • Copy the content of lib/example/WCFM/config_en.json file to lib/config/config_en.json
• Visit Common Questions or Common Issues to find the solutions for your issues before asking for help.

1. Website Integration

This guide is used for the fresh Wodpress Installing, please follow the blow easy steps and you are good to go (If you are using existing site, please make sure to backup the database before running the import):

1. Download this plugin Options Importer, then upload and active this plugin on your website (you can find it on the Internet but we recommend using the plugin we provided as we have already modified it to suit the requirement of our Apps)
2. Install Mstore API and WooCommerce plugins. Then activate the license of Mstore API using your Item Purchase Code from Envato.

3. Download these 2 files Demo Options and Demo Products (If you wish to use your own products, you can skip the Demo Products file), then go it to Tools -> Import -> Run Importer(Options) and upload the Demo Options file.

   

4. Switch to "Specific Options" and press "Select Defaults" and make sure all of the woocommerce options are selected.

   • If you have already set up the WooCommerce settings and you don't want any new changes to apply to your configuration, please uncheck the option "Override existing options". Otherwise, just leave it like that if your website is newly fresh or you are not sure about your WooCommerce Settings.
   • Import the Demo Products using WooCommerce importer feature. Again, this step is optional.

5. Generate your WooCommerce REST API key and save them to your private file for later usage.

   Checking the Rest API configuration

   • Access your website using the Rest API endpoint (your-domain/wp-json/wc/v3), for example: https://wordpress.inspireui.com/wp-json/wc/v3
   • If there is a list of ordered endpoints, then it works.
   • If not, have a look at this guide: Setting up Rest API.

6. Install required WCFM or Dokan plugins
7. Create a demo store/vendor user.
8. Navigate to Products -> All Products, then bulk edit some of the products and assign them to the demo user

That's all. You can remove the Options Importer plugin and remember to use the Regenerate Thumbnails plugin when you are developing on real products.

2. App Integration

It's time to connect your FluxStore app to your website.

1. Open lib/common/config.dart. Change the url to your website domain(e.g: https://wordpress.inspireui.com). Then replace the consumerKey and consumerSecret you created in the previous section (Website Integration). Remember to change the type also (dokan or wcfm).

const serverConfig = {
  "type": "dokan",
  "url": "https://wordpress.inspireui.com",
  "consumerKey": "ck_b7594bc4391db4b56c635fe6da1072a53xxxxx",
  "consumerSecret": "cs_980b9edb120e15bd2a8b668cacc734f7xxxxx",
  "blog": "https://wordpress.inspireui.com",
  "forgetPassword": "https://wordpress.inspireui.com/wp-login.php?action=lostpassword"
};

2. Open lib/config/config_xx.json, with xx is language, e.g.: if you use English, open configen.json. Under the HorizonLayout is the setting to display the Homepage layout, replace the category with your website's category ID (Click one of your categories on your website and look for tagID in the address bar)

"HorizonLayout": [
    {
      "layout": "bannerImage",
      "isSlider": true,
      "items": [
        {
          "category": 21,
          "image": "https://user-images.githubusercontent.com/1459805/59846818-12672e80-938b-11e9-8184-5f7bfe66f1a2.png",
          "padding": 15.0
        },
        {
          "category": 23,
          "image": "https://user-images.githubusercontent.com/1459805/60091575-1f12ca80-976f-11e9-962c-bdccff60d143.png",
          "padding": 15.0
        },
    ...
] 

• If the product images are unable to display, please have a look at the Section 3: Setup the Regenerate Image plugin or using https instead. And make sure your products/posts have featured image added.
• If you are developing the site on local machine, make sure it is the local IP address or the virtual host, and it can be reached from the simulator.

And that's that. Now you can start to work on customize your app. For more information on customizing your app, have a look at the menu at the end of this guide.

3. Setup the Regenerate Image

At the first time installing Fluxstore app could cause missing Image or Image Loading quite slow issue, we coud fix by installing the Regenerate Image plugin. First, go to Setting -> Media, configure your preferred image sizes. This is our recommended settings - https://tppr.me/IbRvL

Secondly, go to Tools -> Regenerate Thumbnails and select the button Regenerate Thumbnails For All xx Attachements and wait for the process to complete.

Thirdly, to check the images if they correctly generated, go to Media and select any image files, then choose regenerate button. Now you can see if the image created with format xxx-small or xxx-medium or xxx-large files.

4. Next Step

Design:

• Logo, splash screen, color, symbol, font, filter, settings screen...,
• Tabbar, banner slider, simple listview, blog,...

Features:

• Multi payment - native and webview payment;
• Multi language - RTL, add new language, default language;
• Sign In - google, apple, sms, facebook, email;
• Auto fill address from map;
• Setting for Ads - Admob and Facebook Ads;
• Push notifications & chat

Publish to App store or Google play: change app icon, name, bundle ID, delivery.

• Others useful section - Improve performance, Development tips
• Get troubleshooting for the issue - Common Questions, Common Issues
• See more guide, go to the Install Checklist