This section shows the way to build the FluxStore Pro app or FluxStore WooCommerce app with the demo WooCommerce website and your own website (single vendor).

You can subscribe to the Youtube InspireUI Channel 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.

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:

Manual Document:

After download and unzip the 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 on Window with basic Flutter try to view this video: https://www.youtube.com/watch?v=y55AqAEEp8M&t=580s

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

Video guide setup on localhost:

Or setup from Digital Ocean:

Subscribe our Youtube channel for getting more detail video guide https://youtube.com/inspireui

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 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:

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

img

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

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.