WooCommerce Flutter App Setup

This article describes how you can setup the Ecommerce App downloaded here. If you are not here to checkout how to setup the template, then the information in this page might not be too relevant.

First Steps – Flutter Setup

Before you start the setup, please make sure you do the followings:

  • Have the latest version of Flutter installed. If not, please check this link for instructions.
  • Run flutter doctor and make sure there are no errors with your setup.
  • Follow the iOS/Android setup – https://flutter.dev/docs/get-started/install/macos

App run and customization

Now that you have flutter correctly setup, there are three basics steps that you have to do before being able to generate you WooCommerce App:

  1. Perform the WooCommerce Integration
  2. Build and run.
  3. (Optional) Customize the App.

WooCommerce Integration

  1. Generate a Consumer Key and a consumer Secrete key in the WooCommerce settings panel.

The Consumer Key and the consumer secret are used by the Mobile app to connect to your Woocommerce website via a REST API.

Navigate to the Settings page under Woocommerce in the WordPress Admin panel, tap on the Advanced tab -> REST API:

  • Tap on Add Key
  • Add a description used for you to remember in future what App is using this key.
  • Select an admin panel user that will be the owner of the key. Only the owner of the key can make future changes in future to this key.
  • Select read/write permissions
  • Copy the Consumer Key and the Consumer secret

2. Update Consumer Key and Consumer Secret in the lib/services/imp/woocommerce/woocommerce-config.dart file.

  • User the Consumer Key and the Consumer secret generate above and update the kWooConsumerKey and kWooConsumerSecret with them

3. Update the Base Url of the app in the lib/services/imp/woocommerce/woocommerce-config.dart file.

  • kWooBasedUrl needs to be the url to the website. For example https://demo-woocommerce.fluttertemplates.io

Build and Run

Open the command line or VS Code if you using an editor and run the app using:

flutter run

If the WooCommerce setup was successful you should be able to compile and see the app at this stage. If it doesn’t work, try copying the downloaded template into a different location and try running just the downloaded code without your changes. The app should run with our demo woocommerce app – https://demo-woocommerce.fluttertemplates.io.

Customize

Make sure that you followed the steps above and that you managed to Build and Run the app either on simulator or on a device.

The configuration of the app is controlled via a json file. The app can access this json configuration file in two ways.

  1. Remote – The address at which this config file is found is specified in ecommerce-config.dart under the constant kConfigWebUrl.
  2. Locally – If the remote config string from kConfigWebUrl is an empty string, then the app will try to use a local configuration from assets/default-ecommerce-config.json.

Depending on how you choose to customize the app you will either have to make changes into the remote file or the local file. These are the current options:

  • reviews-enabled – Boolean flag that can be used to disable/enable the reviews section on the app.
  • reviews-display-limit – The number of reviews that we show on the product page.
  • local-wishlist-storage-enabled – If true, we will use the local storage for the Wishlist product, otherwise we will attempt to use your WooCommerce website, but woocommerce has no support for wishlists by default, so you will need to implement that.
  • web-checkout-enabled – If true, we will open a browser for checking out. This could be used if you don’t want to use Firebase with Stripe as the Payment method.
  • promo-code-enabled – You can use this flag to disable promo codes.
  • privacy-policy-url, terms-of-use-url, about-us-url – The app has a section in settings that redirects users to the Privacy Policy, Terms of Use and About Us. You can specify the urls of these features here.
  • supports-multiple-shipping-address – By default, WooCommerce will only let a user have one saved address. The app is built to support multiple addresses, but you will have to build the support on the WooCommerce side for it to work. We recommend disabling this if you don’t have the feature on server side.
  • stripe-public-key – The app uses Stripe as the Payment Method and here you can specify the public key of your Stripe account.
  • home-tab-bar-categories – The home tab has a Home section and more tabs that one can use. You can specify here the WooCommerce category id of the addition tabs that you might use. In our example, 53 and 49 are the ids of the Women/Men category. These have to be top categories that have other subcategories in order for the page to show the subcategories of the main category.
  • home-all-layout-info – This is where you have to specify how you want the Home page to look like. There are 4 types of layouts that you can use.
    • type: horizontal-hero – A horizontal slideshow of heros. These are WooCommerce categories that you have to specify in the data field.
    • type: hero – A vertical list of hero units. These are WooCommerce categories that you specify in the data filed using their category id.
    • type: horizontal-product-collections – Horizontal units that contain the products of a given category inside. You can specify the category inside and we will display the latests products in the category.
    • type: vertical-grid – A vertical grid layout that given a category, shows the product in the category in a given layout. These are 3 different available layouts.

Example

"home-all-layout-info": 
{ "1" : { "type": "horizontal-hero", "data": "47,48" }, 
  "2" : { "type": "hero", "data": "31,30,17" }, 
  "3" : { "type": "horizontal-product-collections", "data": "18" },
  "4" : { "type": "vertical-grid", "data":  "44,TWO_LEFT_ONE_RIGHT,ONE,ONE,THREE_RIGHT_ONE_LEFT" } }

Setting up Payments using Stripe and Firebase

Native payments for WooCommerce apps are hard to do these days. However, using Stripe and Firebase is simple and this was our top choice when it came to having native payments.

If you don’t want to use Stripe and Firebase, then you can simply enable web-checkout-enabled to direct users on a web page in order to do the checkout. Web checkout is very inconvenient, users have to login again in the browser before they can continue their order, so we encourage the Stripe integration with Firebase.

Stripe with Firebase Functions

In order to do payments via Stripe, you need to communicate with a server that has access to your Stripe Private Key and communicates with Stripe. Our chose for the server side communication is Firebase, via Firebase Functions.

  • More details coming soon.

Troubleshooting

The app won’t compile/run/build

  • Try running the default app that came with the template.
    • Copy the downloaded template into a separate location
    • Open an iOS Simulator
    • Run flutter run
  • At this point you should have an app running with our demo website.
  • If you can’t reach this point, there’s either a problem with your setup or with your template.
    • Check your setup using the instructions at the beginning of the article.
    • If it doesn’t work, please contact us as support@jup.dev