Skip to content

Integration Wooflux

Getting Started

  1. Install Flutter
  2. Set up an editor
  3. Test drive

Make sure after executing the above steps, the result of “flutter doctor” must be passed all as below, and flutter is the latest Channel stable:

Install Flutter 

WooFlux app is supported on MacOS and Windows only.

  • On MacOS, you can build apps on both iOS and Android.
  • On Windows, you can build apps on only Android.

Go to this link to download and install Flutter as follows:

1. Select an operating system

2. Follow the guide “Get the Fullter SDK” and “Android Setup” in the link step by step to install Flutter.

Extracting the zip file of source code

After purchasing WooFlux app on Codecanyon.

Please make sure you purchase WooFlux App
Because our app is protected by licenses of Envato. One purchase code is used for one website/domain.

Extracting the zip file of source code, open it with Android Studio.

Authentication Setup

  • Initial Configuration JWT

    Replace WOOCOMM_JWT_USERNAME & WOOCOMM_JWT_USERPASS in consts.dart with your own wordpress username and password

  • Install ->jwt auth plugin https://wordpress.org/plugins/jwt-authentication-for-wp-rest-api/

  • Install ->WooCommerce Multivendor Marketplace – REST API https://wordpress.org/plugins/wcfm-marketplace-rest-api/
  • wp-config.php ->add below line in wp-config.php define(‘JWT_AUTH_SECRET_KEY’, ‘your-top-secret-key’);

Compiler Setup

  • Open project in Android Studio/Xcode
  • Pub get yaml
  • Open WP WooCommerce
  • Do change as in Settings and Advance
  • Copy and integrate it into App Code

Upload Files

  • Access cPanel and navigate to File Manager.
  • Locate your current theme folder within public_html > wp-content > themes.
  • Download the following files: dashboard_api, categoryProducts_api, productSearch_api, and productbyId_api.php. Upload them to your theme folder.
  • In WordPress Admin Panel, go to Pages and create a new page titled Dashboard. Choose the custom template “dashboard” and publish.
  • Repeat the previous step for other PHP files.
  • Configure API URLs by setting slugs in Page Permalink:
    • Dashboard Template: dashboard-api
    • ProductbyId Template: product-by-id
    • ProductSearch Template: product-search-api
    • CategoryProducts Template: category-products-api

Update Package

  • Open the project in Android Studio/Xcode.
  • In Xcode, change the package name easily.
  • For Android, change the ID in the Gradle file, Manifest, MainActivity, and folders.
  • Clean the project.

Extracting the zip file of source code

  1. Head to the file pubspec.yaml  >  select pub get or Packages get (or Get dependencies) to install the required libraries.
  2. Open IOS/Android simulator.
  3. Press the run button (green play icon) to start the project. (you can open multi simulator at the same time)

If you have any problems with Flutter Installation, check guide Common Issues💥 to find solutions to fix issues.

Login Integration

  • Open project in Android Studio/Xcode 
  • Setup new project in Firebase
  • Enter your company unique Id for both Android /IOS 
  • Get Google file and paste it into project
  • For further help, check Google Analytics
  1. Firebase Setup:
    • Register app in Firebase.
    • Add Support email in Firebase Console under Project Settings > General.
  2. Authentication Setup:
    • Enable “Google, Facebook, Apple” login options in Firebase Console under Authentication.
  3. Facebook Setup:
    • Enable Facebook Login in Facebook Developers Console for your app.
    • Fill Basic and Advance settings.
  4. Configuration Updates:
    • Update Facebook IDs in Android’s string.xml file and iOS’s Info.plist key “FacebookAppID”.
For Android:
  • Get google-services.json file from Firebase Console and place it in “/android/app”.
  • Generate keystore and obtain SHA1 from Gradle SigningReport.
  • Paste SHA1 to Firebase “project/setting/general/android app/SHACertificateFingerprint”.
For iOS:
  • Get GoogleService-Info.plist file from Firebase Console and place it in Xcode project “/ios/Runner”.
  • Copy REVERSED_CLIENT_ID from GoogleService-Info.plist and paste it into Info.plist.
  • Update URL types > URL identifier and URL Schemes for both Google and Facebook in Info.plist.

Change Project Name & Icon

For Android:

  • Go to Android drawable folder and replace icons
  • Open Android project and go to manifest and change appname

For IOS:

  • In Xcode, change app name easily
  • To change icon, get icon “AppIcon.appiconset”  folder from any iOS assets software and change accordingly

For App:

  • Go to Wooflux code “/lib/utils/consts.dart” file and change Appname accordingly
  • Go to Wooflux code “/assets/logo.png” and replace logo.png file accordingly

Payment Setting

Payment Setup

Paypal:

Follow instruction and change PAYPAL_SERVER  & PAYPAL_AUTH_USER & PAYPAL_AUTH_PASS in flutter project directoryWooCommerceProject->/lib/utils/consts.dart using this 

Tap:

Follow instruction and change TAP_SERVER & TAP_KEY in flutter project directory using this 

Others Setup
  • After setup project open iOS project in Xcode and install pos lib as “https://cocoapods.org/”
  • Make sure your currency inside app and on Braintree developer console must be same as per your woocommerce store .
  • On code currency change open flutter folder project in android studio go to PaymentBraintree.dart class and change “currencyCode” variable
  • On Braintree currency change go to developer console and change currency as your woo commerce currency

Release

Install App Now

App is available for testing on GooglePlay and AppStore

Note

If you don’t want to spend time in integration and save time you can also contact us and we serve as freelancer to integrate your project in short time with everything working .

Extra Docs Help

For help getting started with Flutter, view online documentation(https://flutter.dev/docs) which offers tutorials,samples, guidance on mobile development, and a full API reference.

Only For MultiVendor App

Install Wcfm plugin

Install Wcfm restapi plugin