If you buy the FluxStore Pro app, please follow the steps below to build with the demo Magento website and your own Magento 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.

This setup is required you to setup the Magento and enable the API Setting. For more information about the Magento, please visit this sites: https://magento.com

REFERENCE LINKS:
Magento Open source 2.x https://magento.com/tech-resources/download
Installing Extension Guide https://shrtm.nu/wsiW
Demo website http://magento-demo.mstore.io
Medium Blog https://medium.com/@inspireui
Youtube Channel https://youtube.com/inspireui
Demo or more info Fluxstore Pro

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

The main config files for the app are lib/config/config_xx.json and lib/common/config.dart . To use other demo website data or config your own website, just simple change the URL and related config from these files.

Test the Magento demo: the demo is integrated with http://magento-demo.mstore.io

  • Override the content of lib/example/magento/config.json into lib/config/config_en.json
  • Override the content of lib/example/magento/config.dart into lib/common/config.dart

Video guides you to build Fluxstore app with the demo Magento website:

3. Integrate with your Magento site

Step 1: Enable Magento API

To get the Integration tokens, please follow this guide - https://devdocs.magento.com/guides/v2.3/get-started/authentication/gs-authentication-token.html

⚠️ Note: 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.

Install Mstore plugin:

  • Copy Mstore plugin folder included in the source code package to app/code folder.

  • Run this command in website directory:

    php bin/magento setup:upgrade
  • Clear the cache on Magento after upgrade:

    php bin/magento cache:flush

Step 2: Setup Fluxstore

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

For quickly config the Magento demo website, override the content of lib/example/magento/config.json file into lib/config/config_xx.json . Then copy the lib/example/magento/config.dart file to lib/common folder.

For change to your own Magento site, open lib/common/config.dart and change the url from serverConfig section to your own website which already setting up the API:

const serverConfig = {
        "type": "magento",
        "url": "http://your-magento-site",
        "accessToken": "your-access-token-from-admin-site"
    };

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

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 or Common Issues to find the solutions.