If you buy the FluxStore Pro app or FluxStore WooCommerce app, please follow the steps below to build with the demo WooCommerce website and your own website (single vendor). 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 WooCommerce, Wordpress, PHP 7.x
Documents WooCommerce API, Medium Blog, Youtube
Pre-config Website https://github.com/inspireui/mstore
Required Plugins MStore API
Regenerate Thumbnails
Demo or more info Fluxstore Woocommerce

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 Pro app or Fluxstore Woocommerce app with the demo WooCommerce website.

Video guide: 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 issues on this section, please see the Common Question guideline before posting to Support Ticket

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

3. Integrate with your own website

Quick Setup: installing Wordpress on your localhost

Download the Pre-config website and setup your own local development without setting up the Wordpress website.

Open the fluxstore product, copy and rename the lib/example/woocommerce/config_localhost.dart and lib/example/woocommerce/config_localhost.json to lib/common/config.dart lib/config/config_en.json

Note: If you already have a Woocommerce website, and do not like to install on localhost, you can skip this step and go ahead to Step 1: Setup Rest API

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

Or setup from Digital Ocean:

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 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 for in the dropdown.
  3. Select a level of access for this API key — Read access, Write access or Read/Write access.
  4. Select Generate API Key, and WooCommerce creates API keys for that user.

Now that keys have been generated, you should see Consumer Key and Consumer Secretkeys, 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 to /wp-json/wc/v3, if you can see list of JSON return that is correctly config, example: http://demo.mstore.io/wp-json/wc/v3

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

Step 2: Install the required plugins

Some related plugins that require to work with Fluxstore app:

0 purchasecode

  • Regenerate Thumbnails: allows you to regenerate all thumbnails after changing the thumbnail sizes, this plugin is used for customize the app performance when load the product images.

These plugins are available from the download package at resource folder

After installed, make sure they are all active.

Also, enable the option Anyone can register to the website:

beonew 22

Setup the Regenerate Image plugin

First, go to Setting/ Media Settings, and setup the image dimention size for the Product Image, this is our recommence setting - https://tppr.me/IbRvL

Go to Tools/Regenerate Thumbnails and click the blue button Regenerate Thumbnails For All xx Attachements and wait for the process completed

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 list or new images is generated with format xxx-smal or xxx-medium or xxx-large files

fluxstore-2

Step 3: Setup FluxStore

After config your website with above plugins then it's time to connect it with 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_xx.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 return categories object from return 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: