Ionic2Woostore is an Ionic2 WooCommerce Full Application based on Android and iOS. We create this app to easily connecting your WooCommerce website with hybrid mobile application (Android & iOS). Just follow our getting started and your app is ready to run.

In this beta version, we include some features that will bring your business into the apps. You can manage your products, categories and orders from WooCommerce dashboard and it will connect with the apps. We add PayPal as your payment method and some method for shipping. Your customer can use quick search from the app to quickly find the wanted product. We also add signin and signup feature.

We still have a very huge homework to make this app work perfect for your business. So, don’t be hesitate to contact us and tell us what feature do you need. We will keep update this project and keep learning to the next project. If you have any question to ask, feel free to contact us.

Thanks!

Here is what you need:

1.WooCommerce

You must be using WooCommerce 2.1 or newer and the REST API must be enabled under WooCommerce > Settings. You must enable pretty permalinks, as default permalinks will not work.

2.PayPal account

When you extract the zip package, you will find this:

  • Folder Ionic2WooStore: Our main project files
  • Folder Documentation: Our documentation details
  • File README: You should read this first

1) Installation

If you have web hosting already and would like to install WooCommerce using the WordPress Admin, follow this step:

  1. Login to your WordPress Admin panel
  2. Go to Plugins -> Add New
  3. Type “WooCommerce” in the search field and hit enter. Wait until it’s found
  4. Click Install Now
  5. Wait until WordPress completes the installation
  6. After the installation finish, configure the WooCommerce

Once WooCommerce is activated, the WooCommerce Onboarding Wizard can help you set up your shop. Select Let’s Go! to get started. Or select Not Right Now if you prefer to manually set up your WooCommerce shop.

onboarding-wizard-550x452

2) Import Dummy Data

WooCommerce provide dummy data products and categories for your eCommerce store. You can use it to see how the app app works with WooCommerce.

Dummy data for WooCommerce is located in a file called dummy-data.xml, which is located in the WooCommerce plugin directory. Once WooCommerce is installed, you can find it three ways:

  • Use your cPanel or FTP, go to ‘wp-content/plugins/woocommerce/dummy-data’ and locate the dummy-data.xml file
  • Unpack or unzip the WooCommerce .zip file
  • Download from WooCommerce Github

Importing the WooCommerce Dummy Data

  1. Login to your WordPress Admin panel
  2. Go to Tools -> Import. Select WordPress.
import-1

3.If you do not have the WordPress importer installed, you will be prompted to install the importer and then proceed. You have the choice of installing manually or clicking the Install Now button. Select the Choose a file from your computer button and then the dummy-data.xml file you located above.

import-2

4.You will be presented with a screen to import or select an author and various other options related to download and import file attachments

5.Select who you want to make the author of the new products from the dropdown, such as your admin user, and Select the download and import file attachments checkbox. The latter will download all the images to your local server for use on the products

import-3

6.Click Submit and your dummy data will be installed. You now have a working copy of WooCommerce with data.

Reload and re-run your app to see the dummy data.

Reference: Importing WooCommerce Dummy Data

3) Rest API

In order to get app works with your WooCommerce website, you have to activate the Rest API of WooCommerce. Please follow this step to do it:

  1. Login to your WordPress Admin panel
  2. Go to WooCommerce -> Settings -> API. Enable the REST API.
restapi-1

3.Click Add Key button

restapi-2

4.Input the Description, User and set the Permission to Read/Write. Then click Generate API Key

restapi-3

5.Copy the Consumer Key and Consumer Secret into the src/app/app-config.ts at constant variable (variable Shop_ConsumerKey & Shop_ConsumerSecret)

restapi-4

Now, your app ready to works.

1)Installing Ionic Framework.check the reference below.

http://ionicframework.com/docs/v2/setup/installation/

2) App Configuration

Setup your app by changing Shop_Name, Shop_URL,
, Shop_ConsumerKey & Shop_ConsumerSecret, PayPal_EnvironmentProduction, in src/app/app-config.ts file with your own.

You can Paypal_Environments and PayPal_EnvironmentSandbox in src/app/app-config.ts to test paypal pay.

You can enable / disable OneSignal in src/app/app-config.ts.if enable OneSgnal,you need to set OneSignal_AppID and GCM_SenderID.

You can enable / disable login with password in src/app/app-config.ts.if enable login with password,you need to add some codes in readme-first.txt,it is located in the readme-first.txt file.

Some other setting in src/app/app-config.ts,you can read the notes to setting it.

3) Run on Browser(can be Skip)

Now, we have completed all of requirements to run our apps. First, we will run app on browser by run:

cd Ionic2WooStore
ionic serve

When you run your app on browser, it will be CORS issue happen. This issue is only happen on your browser, not in your apps. To solve this problem, you can install Chrome extension: Allow-Control-Allow-Origin and enable the cross-origin.

Now, you app is on chrome browser and running well.
Note: All of hardware plugin will not work on browser.

4)Add Platforms

Next step is we have to tell the Ionic that we want to enable the Android and iOS platform. Open your cmd.exe for windows or Terminal for mac and run.

cd Ionic2WooStore
ionic platform add ios
ionic platform add android

Note: Unless you are on Mac, leave out the iOS platform.

5)Deploying to a Device.Check the reference below.

http://ionicframework.com/docs/v2/setup/deploying/

You need to install android sdk for android or xcode for ios.

1) Sandbox Account

Sandbox Account are your default BUSINESS and PERSONAL account to make a demo transaction. Business indicate the merchant account and personal indicate the buyer account.

sandbox-1

To change the password, profile, balance of Sandbox account, you can click the record.

2)Create App & Sandbox Mode

To get our apps work with PayPal. We need to create app (REST API) from PayPal. This Apps will generate Client ID and Secret that we used in our mobile app. We will used Sandbox mode to test the PayPal with our app. While using Sandbox, PayPal will not charge your balance. To create app in PayPal and active Sandbox, follow this step:

  1. Login to your PayPal Developer account
  2. Go to My Apps & Credentials and click Create App button
paypal-1

3.Type your App Name. Then the Sandbox developer account is your default PayPal business account for Sandbox. Now clickCreate App. button

paypal-2

4.The Client ID will be shown on your screen. Make sure the Sandbox button at the top right is in active position

paypal3

5.Copy the client ID constant variable in src/app/app-config.ts file (variable PayPal_EnvironmentSandbox)

Now you can use PayPal Sandbox in your app. Re-run your app in Android. When you make an order, choose PayPal as your payment method. Then, on the login screen. Use your default Sandbox personal account (for me, it is wolfljj-buyer@gmail.com). So, this Sandbox mode will demonstrate how the PayPal works when a buyer pay for their order for the merchant.

To view the transaction history, you can go to Sandbox Transactions menu in the PayPal Developer Dashboard.

3) Live/Production Mode

To use Live Mode, you can repeat the above process by selecting/activating Live button first. Then copy the Client ID, and copy to the constant variable in your src/app/app-config.js file (variable PayPal_EnvironmentProduction).

paypal-5

To view the transaction history, you can go to Live Transactions menu in the PayPal Developer Dashboard.

To learn more about Ionic Framework, you can visit:

Ionic2 Getting started guide
ionicframework.com/getting-started

Ionic2 Documentation
ionicframework.com/docs

Ionic2 Community Forum
forum.ionicframework.com

ngCordova Documentation
http://ngcordova.com/docs

WooCommerce REST API
http://woothemes.github.io/woocommerce-rest-api-docs

When you have any issues related to Ionic, please don’t be hesitate to contact us using:

You can also visit: forum.ionicframework.com for more informations and any issues about Ionic Framework.

How to change the icon and splash screen?

To change Icon and Splash Screen, you can do it by following this step:

  1. Open your cmd or Terminal, then:
    1
    2
    cd Ionstore
    ionic resources

    Ionic Framework will create resource directory at the root of the project. This resource directory contains image file for icon and splash screen.

  2. Create your own icon by save an icon.png within resource directory. Change all of default icon file with your own icons file. The icon images dimension should follow the Ionic Framework recommended icon file dimension. This icon template provide the recommended size icon files.
  3. Create your own splash screen by save an splash.png within resource directory. Change all of default splash screen file with your own splash screen file. The splash screen images dimension should follow the Ionic Framework recommended splash screen file dimension. This splash screen template provide the recommended size splash screen files.
  4. Every time you change the icon or splash screen, deploy and run the project.

Why my app can not show products on browser?

Please make sure that you have active the Chrome Cross-Origin extension. Please read here.

  • Version 1.0 – Released December 25, 2016