Scribd
Upload
166 views

Opencart - InspireUI Support

This document provides instructions for installing and integrating the FluxStore Pro app with an Opencart website. It outlines 4 steps: 1) Testing the default demo website, 2) Integrating with your Opencart website by setting up the Opencart API and configuring FluxStore, 3) Configuring product options, and 4) Next steps to customize the UI layout and find troubleshooting tips. System requirements and compatible versions are also listed.

Uploaded by

Abdul Hai
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
166 views

Opencart - InspireUI Support

This document provides instructions for installing and integrating the FluxStore Pro app with an Opencart website. It outlines 4 steps: 1) Testing the default demo website, 2) Integrating with your Opencart website by setting up the Opencart API and configuring FluxStore, 3) Configuring product options, and 4) Next steps to customize the UI layout and find troubleshooting tips. System requirements and compatible versions are also listed.

Uploaded by

Abdul Hai
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

support.inspireui.

com

Opencart - InspireUI Support


4-5 minutes

This guide shows the way to install FluxStore Pro app and
integrate with the demo Opencart website and your own Opencart
website (single vendor).

SYSTEM
REQUIREMENTS:

Operating system macOS (64-bit); Windows 10 (64-bit),


x86-64 based

Disk space 2.8 GB (does not include disk space


for IDE/tools)

Plugins Required and supported plugins

Youtube channel https://www.youtube.com/inspireui

Compatible Versions:

FluxStore Pro Flutter Mstore API FluxBuilder

2.2.x, 2.3.x Channel stable 2.2.x 3.3.8-3.4.0 latest version

2.0.x, 2.1.x Channel stable 2.0.x 3.3.8 1.2.2

Make sure you have finished the Getting Started on the left
menu. The result of "flutter doctor" must be like this:
macOS:

Windows:

1. Test default demo website

Test the Opencart demo: the demo is integrated with


https://opencart-demo.mstore.io

Open the source code folder of FluxStore Pro:


Override the content of lib/frameworks/opencart
/config_example/config_en.json into lib/config
/config_en.json

Override the content of serverConfig in lib/frameworks


/opencart/config_example/config.dart into
lib/env.dart (For version 1.9.x and earlier, refer to lib/common
/config.dart)

For version 1.9.0 and earlier:


Override the content of lib/example/opencart
/config.json into lib/config/config_en.json

Override the content of lib/example/opencart


/config.dart into lib/common/config.dart

2. Integrate with your Opencart website

Step 1: Setup Opencart API

Install Mstore Api extension included in the source code


package (as picture below). Open admin panel, then click
Extensions->Installer and upload mstore.ocmod.zip

Video guide: you can subscribe to the Youtube InspireUI Channel,


like, and press the bell icon to get notifications for free instructional
videos.

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

Step 2: Setup Fluxstore

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

Open lib/env.dart and change the url from serverConfig


section to your own website which has the API set: (For version
1.9.x and earlier, refer to lib/common/config.dart)

"serverConfig": {
'type': 'opencart',
'url': 'https://opencart-demo.mstore.io',
},

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 be
got when being edited from the category in the 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
},
...
]
Video guide to set up the Payment:

3. Config product options

The app will work like magic to support the Product Options from
Opencart. The following types are supported at the current
release.

Allowed Types support from Opencart:

Opencart Admin Setting for Product Options:


4. Next step

After integrating with your website successfully, go to the


CUSTOMIZATION on the left menu of this guide to customize UI
Layout.

You also can search a keyword to find the document quickly, e.g.
search "currency":

If you have any problems with Installation, check out the left menu
of this guide > the TROUBLESHOOTING to find some tips and
solutions to fix issues.

Was this article helpful?

You might also like