Umang Darji for Enappd

Posted on Mar 26, 2020 • Originally published at enappd.com

Ionic 4 and Angular WooCommerce Tutorial

#ionic #woocommerce #ecommerce #angular

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!

Dive 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 WooCommerceHome Page

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:-

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.

User Register Screen

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.

Product Page

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.

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.

Cart Page

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.

Check Out Flow

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

If you need a base to start your next Ionic 4 app, you can make your next awesome app using Ionic 4 Full App

Use Ionic 4 Full app for your next awesome app

DEV Community