If you buy the FluxStore Multi Vendor app, please follow the steps below to build with the demo WooCommerce website with Dokan or WCFM plugin and your own website. If not buy it, please skip.

You can subscribe to the Youtube InspireUI Channel, like, and press the bell icon to get notifications 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.

When installing, if you get issue, please go to Common Questions or Common Issues to find the solutions.

2. Test default demo website

This section shows you the way to build Fluxstore Multi Vendor app with the demo WooCommerce website Dokan, Wcfm

You can refer to Video guide or Manual guide below.

After download and unzip the source code package, you works with the project source folder. This default source code is for Dokan plugin, with the demo WooCommerce website Dokan (the demo files in lib/examples/dokan)

For WCFM plugin, use the demo files from lib/example/WCFM.

  • Copy and replace the content of lib/example/WCFM/config.dart.txt file to lib/common/config.dart
  • Copy and replace the content of lib/example/WCFM/config.json file to lib/config/config_en.json

Reference Videos: You can subscribe to the Youtube InspireUI Channel, like, and press the bell icon to get notifications for free instructional videos.

Manual Document:

After download and unzip the source code package, use Android Studio to open the project source folder.

  1. Click the Get dependencies or Packages get to install the libraries from pubspec.yaml file. Packages_get
  1. Open the simulator to run iOS or Android.

  2. Then press the run button to start project (you can still open multi simulator at the same time).

fluxstore-1

⚠️ If you have any question or issues on this section, please see the Common Question or Common Issues to find the solutions.

If you have problem with basic Flutter try to view these videos:

3. Integrate with your own website

You can refer to these video guide setup. Be sure you will finish to install all the required plugins describing the parts below, especially multi vendor plugins as WCFM Rest API or Dokan API.

Or setup from Digital Ocean:

Subscribe to the Youtube InspireUI Channel, like, and press the bell icon to get notifications for getting more detail video guide

Be sure you will finish to install all the required plugins below:

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

Check the functions.php file which from the Wordpress theme folder of your backend side. Add the code below to the functions.php file (this could be added as the child function from your template):

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:

0 purchasecode

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

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": "dokan",
  "url": "http://dokan.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 the app does not show products, please try this solution: the server url needed to use https instead of http, And the post must have a featured image otherwise it will give the error.
  • 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/category.dart and print the returned categories object from the returned JSON.

debug-category

4. Next step

After integrating with your website successfully, you can customize your app as below. If no need, just skip them and go to publish.

Design:

Features:

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

Note: