This section shows the way to build the FluxStore Multi Vendor app with the demo WooCommerce website with Dokan or WCFM plugin and your own website.

You can subscribe to the Youtube InspireUI Channel for free instructional videos.

REFERENCE LINKS:
Required Website WooCommere, Wordpress, PHP 7.x
Documents WooCommerce, Dokan, WCFM, Medium Blog, Youtube
Required Plugins MStore API
Regenerate Thumbnails
JWT Authentication for WP Rest API
Demo or more info Fluxstore Multi Vendors

1. Getting started

Please make sure you have finished the Getting Started guide before go to next section.

2. Test default demo website

Test The Multi Vendor demo:

  • For Dokan plugins, user the demo file from lib/examples/dokan

  • For WCFM plugin, use the demo file from lib/example/WCFM

3. Integrate with your own website

Step 1: Setup Rest API

The default Woocommerce supports the Rest API, but we need following this step to enable the API. This guide is based on the fresh Wordpress installing from http://demo.mstore.io

Requirements

WordPress permalinks must be enabled at: Settings > Permalinks.

fluxstore-1

Membership registration:

Enable the option Anyone can register.

beonew 22

Enable Post a comment

beonew 21

And from the functions.php file (this could be added as the child function from your template) add following code:

function filter_rest_allow_anonymous_comments() {
    return true;
}
add_filter('rest_allow_anonymous_comments','filter_rest_allow_anonymous_comments');

Enable REST API

fluxstore-3

To enable the REST API within WooCommerce, go to WooCommerce > Settings > Advanced >Legacy API and tick the Enable REST API checkbox.

Generate API keys

The WooCommerce REST API works on a key system to control the access. These keys are linked to WordPress users on your website.

To create or manage keys for a specific WordPress user:

  1. Go to: WooCommerce > Settings > Advanced > REST API.
  2. Select Add Key. You are taken to the Key Details screen.

fluxstore-4

  1. Add a Description.
  2. Select the User you would like to generate a key in the dropdown.
  3. Select an access level for this API key — Read access, Write access, or Read/Write access.
  4. Select Generate API Key, then WooCommerce creates API keys for that user.

Now the keys have been generated, you should see Consumer Key and Consumer Secret, a QRCode, and a Revoke API Key button.

img

The Consumer Key and Consumer Secret may be entered in the application using the WooCommerce API, and the app should also request your URL.

Learn more about REST API at: WooCommerce REST API Client Library.

Test if the API is working

Simply with /wp-json/wc/v3, if you can see the returned JSON list is configured correctly, example: http://demo.mstore.io/wp-json/wc/v3

Or use this detailed guide: step-by-step guide here on how to do that.


Step 2: Install the required plugins

Some related plugins that required to work with Fluxstore app:

  • Mstore API: This plugin is used for support RestAPI to connect to the app, support all Payment Gateway, SMS Login and Facebook Logins.
  • Regenerate Thumbnails: allows you to regenerate all thumbnails after changing the thumbnail sizes. This plugin is used to customize the app performance when loading product images.
  • WCFM Rest API: this plugin is required if you are using the WCFM plugins.
  • JWT Authentication for WP REST API: this plugin is important to suport Create new product features.
  • Dokan API: is come with the Dokan plugins when you purchased these plugins, we recommend use the Pro Dokan version to support get fully Vendor features.th

These plugins are available from the download package at resource folder as well.

After installed, make sure they are all activated.

Setup the Regenerate Image plugin

First, go to Setting/ Media Settings, and set the image sizes for the Product Image, this is our recommended settings - https://tppr.me/IbRvL

Secondly, go to Tools/Regenerate Thumbnails and click the blue button Regenerate Thumbnails For All xx Attachements, then wait for the process to complete.

fluxstore-12

To check if the image is generated correctly, go to Media and click to view any image file, select Regenerate and you can check the list or new images generated with xxx-smal or xxx-medium or xxx-large format.

fluxstore-2


Step 3: Setup FluxStore

After configuring your website with the above plugins, it's time to connect it to the Fluxstore app.

Open lib/common/config.dart and change the url from serverConfig section to your own website which has the API set:

const serverConfig = {
  "type": "woo",
  "url": "http://demo.mstore.io",
  "consumerKey": "ck_b7594bc4391db4b56c635fe6da1072a53xxxxx",
  "consumerSecret": "cs_980b9edb120e15bd2a8b668cacc734f7xxxxx",
  "blog": "http://fluxstore.inspireui.com",
  "forgetPassword": "http://demo.mstore.io/wp-login.php?action=lostpassword"
};

Open lib/config/config_en.json. Under the HorizonLayout is the setting to display the homepage layout, replace the category with your own category ID (this ID can get when editting from the category in admin site):

"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
        },
    ...
]

⚠️ Note:

  • If you can not see the Product Image, please check the Regenerate Image guide above.
  • If you are setting the site as local, make sure it is the local IP address or the virtual host, and it can be reached from the simulator.

💡 Tip: to quickly show the category ID, go to lib/models/category.dart and print the returned categories object from the returned JSON.

debug-category

4. Next step

Go to next Customization to know more about how to customize the design/interface of your app.

Then go to Publish to appstore and google play

When installing, if you get issue, please go to Common Questions to see the list of common issues and solutions to fix it.