This is Part-2 of two post series. In this post, you will learn how to implement the WooCommerce REST API Mobile App in Ionic 4 . 🔥 Part 1 of the series discusses how to use Wordpress Post Integration using Wordpress REST API In Ionic 4 app
You can check out this App it has all the ecommerce features already implemented:-Ionic 4 Woocommerce Complete app
Throughout this tutorial, we are going to build a full Ionic 4 eCommerce app with a WooCommerce backend designed for people who need an Android/iOS mobile app for their WooCommerce based store.
We are going to use Ionic 4 for front end and WordPress + WooCommerce for the back-end
What is WooCommerce?
WooCommerce is an open-source e-commerce plugin for WordPress. It is designed for small to large-sized online merchants using WordPress. Launched on September 27, 2011,[3] the plugin quickly became popular for its simplicity to install and customize and free base product.
What is Ionic 4?
You probably already know about Ionic, but I’m putting it here just for the sake of beginners. Ionic is a complete open-source SDK for hybrid mobile app development created by Max Lynch, Ben Sperry and Adam Bradley of Drifty Co. in 2013. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices by leveraging Cordova.
So, in other words — If you create Native apps in Android, you code in Java. If you create Native apps in iOS, you code in Obj-C or Swift. Both of these are powerful but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS.
Tutorial requirements
This tutorial requires you to have
- A local WordPress installation with WooCommerce installed and configured.
- Or a hosted WooCommerce store which you can test with.
- Node.js and Ionic CLI installed on your development machine.
- Some working experience with Ionic 4.
We are not going to cover how to install WordPress and how to add the WooCommerce plugin since you can find many tutorials on the web already showing that.
Setting up a WooCommerce API?
This app uses basic authentication over SSL to pull products from the WooCommerce REST API.
To use the WooCommerce module, you must create a REST API key in WooCommerce: http://woocommerce.github.io/woocommerce-rest-api-docs/#authentication
consumer key: ck_bc98995c28477bc2fce7bb5eb49e7cc839c71801
consumer secret: cs_66c7d6d45ae47e8a490f6fe8540298e1c77fd060
With the help of these two keys, you can access your woocommerce Project in your ionic app
Included features:
- WP-API v2 and WooCommerce REST API v2 integration
- User Auth
- Product list
- Single product pages
- Add to cart
- Cart modal
- Basic multi-step checkout
Structure
We’ll follow a stepped approach to create a Music player app in Ionic 4. We’ll use an IONIC native plugin for music playback. Following are the steps
- Step 1 — Create a basic Ionic 4 app
- Step 2 — Set up your app for WooCommerce
- Step 3 — Set Authentication in your app
- Step 4 — Fetch Products from your WooCommerce with REST api
- Step 5 — Basic Check Out Flow
So let’s dive right in!
Step 1 — Create a basic Ionic 4 app
I have covered this topic in detail in this blog.
In short, the steps you need to take here are
- Make sure you have node installed in the system (V10.15.3 at the time of this blog post)
- Install ionic cli using npm (my Ionic version is 4.1.0 currently)
- Create an Ionic app using
ionic start
You can create a sidemenu
starter for the sake of this tutorial. On running ionic start ionic-4-local-notifications sidemenu
, node modules will be installed. Once the installation is done, run your app on browser using
$ ionic serve
The app will launch on the browser. You can go to Inspect → Device Mode to see the code in a mobile layout. You can create a basic layout for triggering WooCommerce product.
Step 2 — Set up your app for WooCommerce
For getting WooCommerce product in the Ionic app we will use WooCommerce API without any plugin.
Before we go into creating our views we set up the logic to retrieve all product. In our post, we will simply make a call to get a list of products, but you can get basically all data from the WooCommerce API like categories, tags, pages, reviews…
We will also limit our calls to only retrieve 10 Products at a time and also use the page parameter so we can later add some cool loading to our list.
In the very first step, we need to include the module to make Http calls to the API so we will import HttpClientModule
from @angular/common/http
which comes by default installed with IONIC package.
so change your app/app.module.ts to:
Now we will create pages for our app. We will have multiple pages in our app for handling Auth and Product checkout flow. so we will generate this page by command ionic g page — -
. when we generate a page from this command we will not need to add routes in our app/app-routing.module.ts
. This command generates it automatically.
so after adding routes your app/app-routing.module.ts
something looks like this.
Step 3 — Set Authentication in your app
In Authentication flow of user, we will add This Features
- Login User
- Register User
Login User:-
You can create a basic layout for triggering User Login Flow.
For login user, you can use this function
Here you have to change URL value with your WordPress URL.
Register User: —
You can create a basic layout for triggering Register User Flow.
For Register user, you can use this function
Here you have to change URL, consumerKey, consumerSecret with yours.
Step 4 — Fetch Products from your WooCommerce with REST API
we will divide this step into further points
- Fetch products from woocommerce
- Fetch product details
- Add Product to the cart
Fetch products from woocommerce
You can create a basic layout for triggering Products List.
For getting product list you can use this function.
Don't forget to change url, consumerKey, consumerSecret with yours
you can also filter your product according to your requirements like this:
In attr, we can use different parameters like tags, categories, etc
Fetch product details
You can create a basic layout for triggering Product details.
For getting product details you can use this function
You probably already know about You have to change url, consumerKey, consumerSecret, but I’m putting it here just to make sure you don't forget about it.
Add Product to the cart
for cart feature, we are using Storage
API from @ionic/storage
if you want to learn more about this You can refer to this link :- Ionic 4 — Save and Retrieve Data Locally on Device. Here we have explained all the storage features.
You can create a basic layout for triggering cart for the user.
And you can use these functions for User cart Flow.
Add Into cart
Get Data from cart
Remove Data From Cart
Step 5 — Basic Check Out Flow
You can create a basic layout for triggering checkout flow for the user.
In checkout flow, you can use three woocommerce functions
- Get our all payment gateways
- Update user Address
- Create Order
- Get all user orders
Get our all payment gateways: —
For getting all payment gateways you can use this function.
update user Address: —
For updating user address you can use this function
Create Order: —
For creating user order you can use this function
Get all user orders: —
For getting all user order you can use this function
Conclusion
In this blog you learnt how to implement WooCommerce in an Ionic 4 app. This feature is useful when want to build our own ECommerce Startup
That’s all for this blog.
Stay tuned for more Ionic blogs!
You can check out this App it has all the ecommerce features already implemented:-Ionic 4 Woocommerce Complete app
The Pros and Cons of This Approach
First, why would you want to build a WooCommerce app when you have a mobile website? Besides the obvious reason of being on the app store, here are a few benefits:
- It’s really fast, way faster than your website.
- The user experience is awesome, which could mean higher conversions.
- It works offline or in places with a poor network connection.
- It can be used as a native mobile app or a progressive web app.
There are also cons to this type of app, so it’s not for everyone. There are 2 major drawbacks to using the REST API in an app:
- None of your customizations or plugins work in the app (custom checkout fields for example) You can customize the app, it just doesn’t automatically mimic your existing site.
- You have to custom code payment gateways. The WC REST API does not support payments, so you have to do that yourself.
One solution to these problems is using an iframe to display your checkout, which would automatically use any customizations you made on your site. There are some big downsides to that approach, you lose some of the offline functionality and it’s a worse checkout experience.
I decided to go full API with this project, mostly for fun. It allows for more offline support, faster checkout, and better overall user experience.
Next Steps
Now that you have learnt the implementation of Firebase push notifications in Ionic 4, you can also try
- Ionic 4 PayPal payment integration — for Apps and PWA
- Ionic 4 Stripe payment integration — for Apps and PWA
- Ionic 4 Apple Pay integration
- Twitter login in Ionic 4 with Firebase
- Facebook login in Ionic 4 with Firebase
- Geolocation in Ionic 4
- QR Code and scanners in Ionic 4 and
- Translations in Ionic 4
If you need a base to start your next Ionic 4 app, you can make your next awesome app using Ionic 4 Full App
Top comments (0)