This toptic is explain the basic config for the app, open the common/config.dart and update the default options to change to your own values.

1. const serverConfig

This const helps to connect your own website (which configured all required plugins) to the Fluxstore app.

You just need to open lib/common/config.dart, 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"
};

Refer for more detail: https://docs.inspireui.com/fluxstore/woocommerce-setup/#step-3-setup-fluxstore

2. const afterShip

Use to track order status. This feature is only availalbe for the WooCommerce which install the Delivery Tracking AfterShip plugin. Login to the AfterShip dashboard and copy your own api key and tracking_url.

To test this feature on Fluxstore app, go to the Order Detail screen.

const afterShip = {
  "api": "e2e9bae8-ee39-46a9-a084-781d013xxxxx",
  "tracking_url": "https://fluxstore.aftership.com"
};

3. const Payments

Use for the Multi Payments feature and change the Image for Payment gateway. To add new payment, you should copy the image file to assets folder and add new option value:

const Payments = {
  "paypal": "assets/icons/payment/paypal.png",
  "stripe": "assets/icons/payment/stripe.png",
  "razorpay": "assets/icons/payment/razorpay.png",
};

Refer more detail configuration: https://docs.inspireui.com/fluxstore/multi-payment/

4. const ProductVariantLayout

This const helps to customize the product variant values or order the display position.

const ProductVariantLayout = [
  {
    "name": "color",
    "type": "color"
  },
  {
    "name": "size",
    "type": "box"
  },
  {
    "name": "height",
    "type": "option"
  }
];
  • name: should be matched with the variant name.
  • type: support 3 types of layout color, box and option.

We has also described this const at https://docs.inspireui.com/fluxstore/customization/#7-dynamic-product-variant

5. const kAdvanceConfig

This const helps to config product advance options.

const kAdvanceConfig = {
  "DefaultLanguage": "en",
  "DefaultCurrency": {
    "symbol": "\$",
    "decimalDigits": 2,
    "symbolBeforeTheNumber": true,
    "currency": "USD"
  },
  "IsRequiredLogin": false,
  "GuestCheckout": true,
  "EnableShipping": true,
  "EnableAddress": true,
  "EnableReview": true,
  "GridCount": 3,
  "DetailedBlogLayout": kBlogLayout.halfSizeImageType,
  "EnablePointReward": false,
  "DefaultPhoneISOCode": "+84",
  "DefaultCountryISOCode": "VN",
  "EnableRating": true,
  "EnableSmartChat": true,
  "ZoneIdShipping": [1, 2],
  "hideOutOfStock": true,
  'allowSearchingAddress': true,
  "isCaching": false,
  "OnBoardOnlyShowFirstTime": true,
  "EnableConfigurableProduct": false, //for magento
  "EnableAttributesConfigurableProduct": ["color", "size"], //for magento
  "EnableAttributesLabelConfigurableProduct": ["color", "size"] //for magento
};
  • DefaultLanguage: default language for the app.
  • DefaultCurrency: default currency format.
  • IsRequiredLogin: set to "true" to force the user login before using the app.
  • GuestCheckout: enable the guest checkout. Without logging in, users can still buy products.
  • EnableShipping: set to "false" to skip the shipping info.
  • EnableAddress: enable the address shipping, set false if use for the app like Download Digial Asset which is not required the shipping feature.
  • EnableReview: enable the review on the product.
  • DetailedBlogLayout: to config the detailed layout of Blog. Change the kBlogLayout config to one of following enums: { simpleType, fullSizeImageType, halfSizeImageType, oneQuarterImageType }. Refer to https://docs.inspireui.com/fluxstore/home-layout/#blog-detail-layout for more detail.
  • EnablePointReward: enable the Point and Reward Plugin, the feature will be display from the Setting screen, after logged to the app and purchase product, you can see the collection point, this is good feature to custom for reward app.
  • DefaultPhoneISOCode: default country phone IOS Code when login as SMS Login feature.
  • DefaultCountryISOCode: default country IOS Code.
  • EnableRating: enable the Rating feature for Product detail.
  • EnableSmartChat: enable the Smart Chat feature, it is displayed from Product Detail and Setting screen, this is good feature to allow your user connect with the Admin/Vendor.
  • ZoneIdShipping: default shipping zone id which is loaded from the WooCommerce dashboard.
  • hideOutOfStock: hide the Out Of Stock feature from Product Detail.
  • allowSearchingAddress: enable the Google Map Picker address from Shipping screen
  • isCaching: this configuration helps Caching to improve App Performance. If the isCaching is false, it will load as the local config. Refer to https://docs.inspireui.com/fluxstore/performance/#1-caching-to-improve-app-performance for more detail.
  • OnBoardOnlyShowFirstTime: enable the enable the Onboarding feature only show at first time, otherwise it will show as alway.
  • EnableConfigurableProduct: this is only use for Magento, enable to active the Configurable Product type.
  • EnableAttributesConfigurableProduct: this is only use for Magento, enable to active the Configurable Product type.
  • EnableAttributesLabelConfigurableProduct: this is only use for Magento, enable to active the Configurable Product type.

We has also described this const at https://docs.inspireui.com/fluxstore/customization/#10-product-advance-options

6. const kGoogleAPIKey

This const helps to integrate with the Google Map Feature. Use to show the Map feature from Shipping screen. You can change the value allowSearchingAddress from above kAdvanceConfig value if would like to hide the Map.

const kGoogleAPIKey = {
  "android": "your-google-api-key",
  "ios": "your-google-api-key"
};

Please refer to https://docs.inspireui.com/fluxstore/firebase/#address-filling-via-google-map for the detail.

7. const kProductDetail

There was a feedback from one of our customers to adjust the product detail design screen as he reports the default detail screen just matches with the Fashion UI. The team has made some more flexible product detail upgrades by below config:

const kProductDetail = {
  "height": 0.5,
  "marginTop": 0,
  "isHero": false,
  "safeArea": false,
  "showVideo": true,
  "showThumbnailAtLeast": 3,
  "layout": kProductLayout.simpleType
};
  • height: the percentage height of the featured product images. height=(percent * width-screen).
  • marginTop: the top margin with the top edge. This setting is to prevent cutting without using SafeArea widget.
  • isHero: this option is to enable the hero animate.
  • safeArea: add new extra space on the top when viewing product detail.
  • showVideo: support to enable the show Video feature. Support only for WooCommerce by installing these video plugins.
  • showThumbnailAtLeast: only display the product detail gallery if more than the at least value. For example, if we set the value to 2, it only displays the image gallery when more than 3 images.
  • layout: change to one of to one of enum value { simpleType, fullSizeImageType, halfSizeImageType } - this is great feature if you would like to change the Product Detail Screen to other Layout Design.

8. const smartChat

This const helps to config for the SmartChat feature.

const smartChat = [
  {
    'app': 'whatsapp://send?phone=84327433006',
    'iconData': FontAwesomeIcons.whatsapp
  },
  {'app': 'tel:8499999999', 'iconData': FontAwesomeIcons.phone},
  {'app': 'sms://8499999999', 'iconData': FontAwesomeIcons.sms}
];
const String adminEmail = "admininspireui@gmail.com";
  • app: is the scheme of the opening app.
  • iconData: the icon display on Smart Chat.
  • adminEmail: the default admin for SmartChat, once user chat from the app it will chat with this admin user. You can login as this email to Chat with your all users. For the Multi Vendor App, this config is not required as the User could chat with many Vendor.

Refer to these links for more detail:

9. List onBoardingData

This item helps to customize the onboarding content (welcome screen).

List onBoardingData = [
  {
    "title": "Welcome to FluxStore",
    "image": "assets/images/fogg-delivery-1.png",
    "desc": "Fluxstore is on the way to serve you. "
  },
  {
    "title": "Connect Surrounding World",
    "image": "assets/images/fogg-uploading-1.png",
    "desc":
        "See all things happening around you just by a click in your phone. "
            "Fast, convenient and clean."
  },
  {
    "title": "Let's Get Started",
    "image": "fogg-order-completed.png",
    "desc": "Waiting no more, let's see what we get!"
  },
];

We has also described this item at https://docs.inspireui.com/fluxstore/customization/#8-onboarding-and-login-mode

10. const PaypalConfig

This const helps to config the Native Payment Paypal:

const PaypalConfig = {
  "clientId":
      "ASlpjFreiGp3gggRKo6YzXMyGM6-NwndBAQ707k6z3-WkSSMTPDfEFmNmky6dBX00lik8wKdToWiJj5w",
  "secret":
      "ECbFREri7NFj64FI_9WzS6A0Az2DqNLrVokBo0ZBu4enHZKMKOvX45v9Y1NBPKFr6QJv2KaSp5vk5A1G",
  "production": false,
  "paymentMethodId": "paypal",
  "enabled": true,
  "returnUrl": "http://return.example.com", 
  "cancelUrl": "http://cancel.example.com",
};

Please review this video for more details on how to config the payments:

Refer to this link for more detail https://docs.inspireui.com/fluxstore/multi-payment/

11. const RazorpayConfig

This const helps to config the RazorpayConfig:

const RazorpayConfig = {
  "keyId": "rzp_test_WHBBYP8YoqmqwB",
  "callbackUrl": "http://example.com",
  "paymentMethodId": "razorpay",
  "enabled": true
};

Please review this video for more details on how to config the Native Payment Paypal:

Refer to this link for more detail https://docs.inspireui.com/fluxstore/multi-payment/

12. const TapConfig

This const helps to config the TapConfig:

const TapConfig = {
  "SecretKey": "sk_test_XKokBfNWv6FIYuTMg5sLPjhJ",
  "RedirectUrl": "http://your_website.com/redirect_url",
  "paymentMethodId": "",
  "enabled": false
};

13. const List DefaultCountry

This const helps to limit the country list from the Delivery screen, from Billing Address. Set the default DefaultCountry: [] if you would like to display all the Country from Shipping screen.

Otherwise, if you would like to display on 3 countries only, configure as below:

const List DefaultCountry = [
  {
    "name": "Vietnam",
    "iosCode": "VN",
    "icon": "https://cdn.britannica.com/41/4041-004-A06CBD63/Flag-Vietnam.jpg"
  },
  {
    "name": "India",
    "iosCode": "IN",
    "icon":
        "https://upload.wikimedia.org/wikipedia/en/thumb/4/41/Flag_of_India.svg/1200px-Flag_of_India.svg.png"
  },
  {"name": "Austria", "iosCode": "AT", "icon": ""},
];

We has also described this const at https://docs.inspireui.com/fluxstore/customization/#12-country-settings

14. const kAdConfig

Use to config the Admob or Facebook Ads

const kAdConfig = {
  "enable": false,
  "type": kAdType.facebookNative,
  // ----------------- Facebook Ads  -------------- //
  "hasdedIdTestingDevice": "ef9d4a6d-15fd-4893-981b-53d87a212c07",
  "bannerPlacementId": "430258564493822_489007588618919",
  "interstitialPlacementId": "430258564493822_489092398610438",
  "nativePlacementId": "430258564493822_489092738610404",
  "nativeBannerPlacementId": "430258564493822_489092925277052",

  // ------------------ Google Admob  -------------- //
  "androidAppId": "ca-app-pub-2101182411274198~6793075614",
  "androidUnitBanner": "ca-app-pub-2101182411274198/4052745095",
  "androidUnitInterstitial": "ca-app-pub-2101182411274198/7131168728",
  "androidUnitReward": "ca-app-pub-2101182411274198/6939597036",
  "iosAppId": "ca-app-pub-2101182411274198~6923444927",
  "iosUnitBanner": "ca-app-pub-2101182411274198/5418791562",
  "iosUnitInterstitial": "ca-app-pub-2101182411274198/9218413691",
  "iosUnitReward": "ca-app-pub-2101182411274198/9026842008",
  "waitingTimeToDisplayInterstitial": 10,
  "waitingTimeToDisplayReward": 10,
};

For more detail: