This setup is required your setup the Wordpress website with WooCommerce plugin, for more information about the Wordpress or WooCommerce please visit this sites:

• WooCommerce (free): http://woocommerce.com
• Wordpress (free): https://wordpress.org
• Preminum templates: https://themeforest.net
• Rest API documents: http://woocommerce.github.io/woocommerce-rest-api-docs

Step 1: Setup Rest API

Default Woocommerce is support the Rest API, but we need follow this step to enable the API, this guide is base on the fresh Wordpress install from http://FluxNews.mstore.io

Requirements

WordPress permalinks must be enabled at: Settings > Permalinks.

Enable REST API

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.

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.

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 to /wp-json/wc/v3, if you can see list of JSON return that is correctly config, example: http://FluxNews.inspireui.com/wp-json/wc/v3

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

Step 2: install requires plugins

Some related plugins that require to work with FluxNews app:

• Mstore API plugin: Extends the JSON API User for RESTful user registration, authentication, support all Payment Gateway, SMS Login and Facebook Logins.
• JSON API: allows to active the api config for MStoreUser to support registration features.
• 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.

After installed, make sure they are active:

Setup MStore API plugin

Then go to Settings/Json API and enable the MStoreUser to active the API

• You can check this config correctly via the link/api/get_nonce/?controller=mstore_user&method=register example: http://FluxNews.inspireui.com/api/get_nonce/?controller=mstore_user&method=register
• This is important setting to support for the Multi Payment gateway

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

Setup the Renerate Image plugin

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

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

Step 3: Setup FluxNews

After config your website with above plugins then it's time to connect it with the FluxNews app.

Open common/config.json and change the info from server section:

  "server": {
    "type": "woo",
    "url": "https://mstore.io",
    "consumerKey": "ck_b7594bc4391db4b56c635fe6da1072a53xxxxx",
    "consumerSecret": "cs_980b9edb120e15bd2a8b668cacc734f7xxxxx"
  },

Under the HorizontalLayout is the setting to display the homepage layout, replace the category by your own category ID (this ID can get when edit from the category from 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

Go to next Customization Guide to know more about how to customize the app branding, color theme and advance configs.