Ionic 4 and Angular WooCommerce Tutorial
Tags: ionic, woocommerce, ecommerce, angular
Published: 2020-03-26 01:04:16

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="8090" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="5f89" class="graf graf--p graf-after--figure">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&nbsp;. 🔥 Part 1 of the series discusses how to use Wordpress Post Integration using <a href="https://enappd.com/blog/wordpress-integration-with-ionic-4-app/71/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Wordpress REST API In Ionic 4 app</a></p><blockquote name="e6c7" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">You can check out this App it has all the ecommerce features already implemented:-</strong><a href="https://store.enappd.com/product/ionic-4-woocommerce-starter/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic 4 Woocommerce Complete app</strong></a></blockquote><p name="92f6" class="graf graf--p graf-after--blockquote">Throughout this tutorial, we are going to build a full <strong class="markup--strong markup--p-strong">Ionic 4 eCommerce</strong> app with a WooCommerce backend designed for people who need an Android/iOS mobile app for their WooCommerce based store.</p><p name="32c8" class="graf graf--p graf-after--p">We are going to use Ionic 4 for front end and WordPress + WooCommerce for the back-end</p><h3 name="a716" class="graf graf--h3 graf-after--p">What is <strong class="markup--strong markup--h3-strong">WooCommerce</strong>?</h3><p name="fabf" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">WooCommerce</strong> is an <a href="https://en.wikipedia.org/wiki/Open-source_software"  class="markup--anchor markup--p-anchor" title="Open-source software" rel="noopener"    target="_blank">open-source</a> <a href="https://en.wikipedia.org/wiki/E-commerce"  class="markup--anchor markup--p-anchor" title="E-commerce" rel="noopener"    target="_blank">e-commerce</a> <a href="https://en.wikipedia.org/wiki/Plug-in_%28computing%29"  class="markup--anchor markup--p-anchor" title="Plug-in (computing)" rel="noopener"    target="_blank">plugin</a> for <a href="https://en.wikipedia.org/wiki/WordPress"  class="markup--anchor markup--p-anchor" title="WordPress" rel="noopener"    target="_blank">WordPress</a>. It is designed for small to large-sized online <a href="https://en.wikipedia.org/wiki/Merchants"  class="markup--anchor markup--p-anchor" title="Merchants" rel="noopener"    target="_blank">merchants</a> using WordPress. Launched on September 27, 2011,<a href="https://en.wikipedia.org/wiki/WooCommerce#cite_note-3"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">[3]</a> the plugin quickly became popular for its simplicity to install and customize and free base product.</p><h3 name="0e91" class="graf graf--h3 graf-after--p">What is Ionic&nbsp;4?</h3><p name="56d0" class="graf graf--p graf-after--h3">You probably already know about Ionic, but I’m putting it here just for the sake of beginners. <strong class="markup--strong markup--p-strong">Ionic</strong> is a complete open-source SDK for hybrid mobile app development created by <a href="https://medium.com/u/a76fa51de1ba?source=post_page---------------------------"  class="markup--anchor markup--p-anchor"    target="_blank">Max Lynch</a>, <a href="https://medium.com/u/14b1be5c1354?source=post_page---------------------------"  class="markup--anchor markup--p-anchor"    target="_blank">Ben Sperry</a> 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.</p><p name="010c" class="graf graf--p graf-after--p">So, in other words&#8202;—&#8202;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. <strong class="markup--strong markup--p-strong">With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android </strong>(and windows!), that too with the simplicity of HTML, CSS, and JS.</p><h3 name="e0b5" class="graf graf--h3 graf-after--p">Tutorial requirements</h3><p name="af87" class="graf graf--p graf-after--h3">This tutorial requires you to have</p><ul class="postList"><li name="4475" class="graf graf--li graf-after--p">A local WordPress installation with WooCommerce installed and configured.</li><li name="37d5" class="graf graf--li graf-after--li">Or a hosted WooCommerce store which you can test with.</li><li name="16c9" class="graf graf--li graf-after--li">Node.js and Ionic CLI installed on your development machine.</li><li name="a430" class="graf graf--li graf-after--li">Some working experience with Ionic 4.</li></ul><p name="76da" class="graf graf--p graf-after--li">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.</p><h3 name="2eaf" class="graf graf--h3 graf-after--p">Setting up a WooCommerce API?</h3><p name="3e7a" class="graf graf--p graf-after--h3">This app uses basic authentication over SSL to pull products from the WooCommerce REST API.</p><p name="634f" class="graf graf--p graf-after--p">To use the WooCommerce module, you must create a REST API key in WooCommerce: <a href="http://woocommerce.github.io/woocommerce-rest-api-docs/#authentication"  class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">http://woocommerce.github.io/woocommerce-rest-api-docs/#authentication</a></p><p name="3236" class="graf graf--p graf-after--p">consumer key: ck_bc98995c28477bc2fce7bb5eb49e7cc839c71801</p><p name="3001" class="graf graf--p graf-after--p">consumer secret: cs_66c7d6d45ae47e8a490f6fe8540298e1c77fd060</p><p name="297a" class="graf graf--p graf-after--p">With the help of these two keys, you can access your woocommerce Project in your ionic app</p><p name="d466" class="graf graf--p graf-after--p">Included features:</p><ul class="postList"><li name="5dc0" class="graf graf--li graf-after--p">WP-API v2 and WooCommerce REST API v2 integration</li><li name="badf" class="graf graf--li graf-after--li">User Auth</li><li name="1fec" class="graf graf--li graf-after--li">Product list</li><li name="1e51" class="graf graf--li graf-after--li">Single product pages</li><li name="d7d7" class="graf graf--li graf-after--li">Add to cart</li><li name="a3c2" class="graf graf--li graf-after--li">Cart modal</li><li name="3db9" class="graf graf--li graf-after--li">Basic multi-step checkout</li></ul><h3 name="c092" class="graf graf--h3 graf-after--li">Structure</h3><p name="4e4f" class="graf graf--p graf-after--h3">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</p><ul class="postList"><li name="06d1" class="graf graf--li graf-after--p">Step 1&#8202;—&#8202;Create a basic Ionic 4 app</li><li name="93d1" class="graf graf--li graf-after--li">Step 2&#8202;—&#8202;Set up your app for WooCommerce</li><li name="79e9" class="graf graf--li graf-after--li">Step 3&#8202;—&#8202;Set Authentication in your app</li><li name="a19a" class="graf graf--li graf-after--li">Step 4&#8202;—&#8202;Fetch Products from your WooCommerce with REST api</li><li name="b4ad" class="graf graf--li graf-after--li">Step 5&#8202;—&#8202;Basic Check Out Flow</li></ul><p name="e399" class="graf graf--p graf-after--li">So let’s dive right in!</p><figure tabindex="0" contenteditable="false" name="6615" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 480px; max-height: 322px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 67.10000000000001%;"></div><img class="graf-image" data-image-id="1*9-k-XhV-slcNcdg5kQH-wg.gif" data-width="480" data-height="322" src="https://cdn-images-1.medium.com/max/720/1*9-k-XhV-slcNcdg5kQH-wg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Dive In</figcaption></figure><h3 name="279a" class="graf graf--h3 graf-after--figure">Step 1&#8202;—&#8202;Create a basic Ionic 4&nbsp;app</h3><blockquote name="ee25" class="graf graf--blockquote graf-after--h3"><em class="markup--em markup--blockquote-em">I have covered this topic in detail in </em><a href="https://enappd.com/blog/how-to-create-an-ionic-4-app-for-beginners/13/?source=post_page---------------------------"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--blockquote-em">this blog</em></a><em class="markup--em markup--blockquote-em">.</em></blockquote><p name="7cf9" class="graf graf--p graf-after--blockquote">In short, the steps you need to take here are</p><ul class="postList"><li name="9e47" class="graf graf--li graf-after--p">Make sure you have node installed in the system (V10.15.3 at the time of this blog post)</li><li name="622c" class="graf graf--li graf-after--li">Install <strong class="markup--strong markup--li-strong">ionic cli </strong>using npm (my Ionic version is 4.1.0 currently)</li><li name="9de3" class="graf graf--li graf-after--li">Create an Ionic app using <code class="markup--code markup--li-code">ionic start</code></li></ul><p name="edf3" class="graf graf--p graf-after--li">You can create a <code class="markup--code markup--p-code">sidemenu</code> starter for the sake of this tutorial. On running <code class="markup--code markup--p-code">ionic start ionic-4-local-notifications sidemenu</code>&nbsp;, node modules will be installed. Once the installation is done, run your app on browser using</p><pre name="e3ab" class="graf graf--pre graf-after--p">$ ionic serve</pre><p name="5c38" class="graf graf--p graf-after--pre">The app will launch on the browser. You can go to <strong class="markup--strong markup--p-strong">Inspect → Device Mode</strong> to see the code in a mobile layout. You can create a basic layout for triggering WooCommerce product.</p><figure tabindex="0" contenteditable="false" name="4177" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*GudYGakaXllCKfk_HqcZoQ.jpeg" data-width="300" data-height="533" src="https://cdn-images-1.medium.com/max/720/1*GudYGakaXllCKfk_HqcZoQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Step 2&#8202;—&#8202;Set up your app for WooCommerceHome Page</figcaption></figure><h3 name="c491" class="graf graf--h3 graf-after--figure">Step 2&#8202;—&#8202;Set up your app for WooCommerce</h3><p name="05d3" class="graf graf--p graf-after--h3">For getting WooCommerce product in the Ionic app we will use WooCommerce API without any plugin.</p><p name="6163" class="graf graf--p graf-after--p">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 <a href="http://woocommerce.github.io/woocommerce-rest-api-docs"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">WooCommerce API</a> like categories, tags, pages, reviews…</p><p name="72ee" class="graf graf--p graf-after--p">We will also limit our calls to only retrieve <strong class="markup--strong markup--p-strong">10 Products</strong> at a time and also use the page parameter so we can later add some cool loading to our list.</p><p name="3fab" class="graf graf--p graf-after--p">In the very first step, we need to include the module to make Http calls to the API so we will import <code class="markup--code markup--p-code">HttpClientModule</code> from <code class="markup--code markup--p-code">@angular/common/http</code> which comes by default installed with IONIC package.</p><p name="c5f2" class="graf graf--p graf-after--p">so change your <strong class="markup--strong markup--p-strong">app/app.module.ts</strong> to:</p><figure tabindex="0" contenteditable="false" name="4897" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/b0ffa957dcaff84dc44f57865fd99823.js %}</div></div></figure><p name="a419" class="graf graf--p graf-after--figure">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 <code class="markup--code markup--p-code">ionic g page&#8202;—&#8202;-</code>&nbsp;. when we generate a page from this command we will not need to add routes in our <code class="markup--code markup--p-code">app/app-routing.module.ts</code>&nbsp;.<strong class="markup--strong markup--p-strong"> </strong>This command generates it automatically.</p><p name="475b" class="graf graf--p graf-after--p">so after adding routes your <code class="markup--code markup--p-code">app/app-routing.module.ts</code> something looks like this.</p><figure tabindex="0" contenteditable="false" name="ec58" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/e12f9292ffbaf168fa24dff196064d43.js %}</div></div></figure><h3 name="0b2b" class="graf graf--h3 graf-after--figure">Step 3&#8202;—&#8202;Set Authentication in your&nbsp;app</h3><p name="6bbe" class="graf graf--p graf-after--h3">In Authentication flow of user, we will add This Features</p><ol class="postList"><li name="af93" class="graf graf--li graf-after--p">Login User</li><li name="6b99" class="graf graf--li graf-after--li">Register User</li></ol><h4 name="a8a2" class="graf graf--h4 graf-after--li">Login User:-</h4><p name="e9d8" class="graf graf--p graf-after--h4">You can create a basic layout for triggering User Login Flow.</p><figure tabindex="0" contenteditable="false" name="889a" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*YjNdCa3_vK0yrXe1LyiI5Q.jpeg" data-width="300" data-height="533" src="https://cdn-images-1.medium.com/max/720/1*YjNdCa3_vK0yrXe1LyiI5Q.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Log In&nbsp;Screen</figcaption></figure><p name="775f" class="graf graf--p graf-after--figure">For login user, you can use this function</p><figure tabindex="0" contenteditable="false" name="7e52" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/9864d359e809f316dae5b980155c0b75.js %}</div></div></figure><p name="7f53" class="graf graf--p graf-after--figure">Here you have to change URL value with your WordPress URL.</p><h4 name="9aca" class="graf graf--h4 graf-after--p">Register User:&nbsp;—</h4><p name="f2a4" class="graf graf--p graf-after--h4">You can create a basic layout for triggering Register User Flow.</p><figure tabindex="0" contenteditable="false" name="791f" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*k5MZzc_RQKH8phULlXpX6Q.jpeg" data-width="300" data-height="533" src="https://cdn-images-1.medium.com/max/720/1*k5MZzc_RQKH8phULlXpX6Q.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">User Register&nbsp;Screen</figcaption></figure><p name="6280" class="graf graf--p graf-after--figure">For Register user, you can use this function</p><figure tabindex="0" contenteditable="false" name="f186" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/6efd81e71ed8c20c652739d89f0e969b.js %}</div></div></figure><p name="a6c4" class="graf graf--p graf-after--figure">Here you have to change URL, consumerKey, consumerSecret with yours.</p><h3 name="801e" class="graf graf--h3 graf-after--p">Step 4&#8202;—&#8202;Fetch Products from your WooCommerce with REST&nbsp;API</h3><p name="c07a" class="graf graf--p graf-after--h3">we will divide this step into further points</p><ol class="postList"><li name="c93e" class="graf graf--li graf-after--p">Fetch products from woocommerce</li><li name="acdd" class="graf graf--li graf-after--li">Fetch product details</li><li name="dbf8" class="graf graf--li graf-after--li">Add Product to the cart</li></ol><h4 name="2cef" class="graf graf--h4 graf-after--li">Fetch products from woocommerce</h4><p name="43d4" class="graf graf--p graf-after--h4">You can create a basic layout for triggering Products List.</p><figure tabindex="0" contenteditable="false" name="2252" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*GudYGakaXllCKfk_HqcZoQ.jpeg" data-width="300" data-height="533" src="https://cdn-images-1.medium.com/max/720/1*GudYGakaXllCKfk_HqcZoQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Product Page</figcaption></figure><p name="dd2e" class="graf graf--p graf-after--figure">For getting product list you can use this function.</p><figure tabindex="0" contenteditable="false" name="95ee" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/8087fd654b5c5d54b02e7fb17ff7c64b.js %}</div></div></figure><p name="30de" class="graf graf--p graf-after--figure">Don't forget to change url, consumerKey, consumerSecret with yours</p><p name="e630" class="graf graf--p graf-after--p">you can also filter your product according to your requirements like this:</p><figure tabindex="0" contenteditable="false" name="63ce" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/6eb60e35fec36613317ebe02051835c8.js %}</div></div></figure><p name="1155" class="graf graf--p graf-after--figure">In attr, we can use different parameters like tags, categories, etc</p><h4 name="c658" class="graf graf--h4 graf-after--p">Fetch product&nbsp;details</h4><p name="e778" class="graf graf--p graf-after--h4">You can create a basic layout for triggering Product details.</p><figure tabindex="0" contenteditable="false" name="6dee" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*41sYM6rGAEgJUwzBYQGwtg.jpeg" data-width="300" data-height="533" src="https://cdn-images-1.medium.com/max/720/1*41sYM6rGAEgJUwzBYQGwtg.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Product details</figcaption></figure><p name="d178" class="graf graf--p graf-after--figure">For getting product details you can use this function</p><figure tabindex="0" contenteditable="false" name="374b" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/263ec6b79bcdbbbf6ab059aedb6f897d.js %}</div></div></figure><p name="a754" class="graf graf--p graf-after--figure">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.</p><h4 name="075a" class="graf graf--h4 graf-after--p">Add Product to the&nbsp;cart</h4><p name="7e64" class="graf graf--p graf-after--h4">for cart feature, we are using <code class="markup--code markup--p-code">Storage</code> API from <code class="markup--code markup--p-code">@ionic/storage</code> if you want to learn more about this You can refer to this link&nbsp;:- <a href="https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 4&#8202;—&#8202;Save and Retrieve Data Locally on Device</a>. Here we have explained all the storage features.</p><p name="2853" class="graf graf--p graf-after--p">You can create a basic layout for triggering cart for the user.</p><figure tabindex="0" contenteditable="false" name="aa69" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*gQZ6pvY_V0zuxqxgdeAnlw.jpeg" data-width="300" data-height="533" src="https://cdn-images-1.medium.com/max/720/1*gQZ6pvY_V0zuxqxgdeAnlw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Cart Page</figcaption></figure><p name="fbb4" class="graf graf--p graf-after--figure">And you can use these functions for User cart Flow.</p><p name="cded" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Add Into cart</strong></p><figure tabindex="0" contenteditable="false" name="08fe" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/615681637eab4370afbd6bbab3f071f1.js %}</div></div></figure><p name="07b2" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Get Data from cart</strong></p><figure tabindex="0" contenteditable="false" name="1bb2" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/f8c4d7087390ce2db90b114d52be8ddd.js %}</div></div></figure><p name="5b8b" class="graf graf--p graf-after--figure"><strong class="markup--strong markup--p-strong">Remove Data From Cart</strong></p><figure tabindex="0" contenteditable="false" name="8c1f" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/92842473450341e88fc7358252838b4d.js %}</div></div></figure><h3 name="efd5" class="graf graf--h3 graf-after--figure">Step 5&#8202;—&#8202;Basic Check Out&nbsp;Flow</h3><p name="206d" class="graf graf--p graf-after--h3">You can create a basic layout for triggering checkout flow for the user.</p><figure tabindex="0" contenteditable="false" name="0bf9" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 300px; max-height: 533px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 177.7%;"></div><img class="graf-image" data-image-id="1*R17GvrffiN68JfX_cgyugA.jpeg" data-width="300" data-height="533" src="https://cdn-images-1.medium.com/max/720/1*R17GvrffiN68JfX_cgyugA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Check Out&nbsp;Flow</figcaption></figure><p name="1c5a" class="graf graf--p graf-after--figure">In checkout flow, you can use three woocommerce functions</p><ol class="postList"><li name="68c9" class="graf graf--li graf-after--p">Get our all payment gateways</li><li name="9334" class="graf graf--li graf-after--li">Update user Address</li><li name="5b53" class="graf graf--li graf-after--li">Create Order</li><li name="d328" class="graf graf--li graf-after--li">Get all user orders</li></ol><h4 name="d95c" class="graf graf--h4 graf-after--li">Get our all payment gateways: —</h4><p name="1b7d" class="graf graf--p graf-after--h4">For getting all payment gateways you can use this function.</p><figure tabindex="0" contenteditable="false" name="6b4a" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/82360b403a675d45f53777bfc63b5874.js %}</div></div></figure><h4 name="1b46" class="graf graf--h4 graf-after--figure">update user Address:&nbsp;—</h4><p name="b3ce" class="graf graf--p graf-after--h4">For updating user address you can use this function</p><figure tabindex="0" contenteditable="false" name="5e34" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/c6f94eab061a3bb8a3bde62cdff6619d.js %}</div></div></figure><h4 name="59e3" class="graf graf--h4 graf-after--figure">Create Order:&nbsp;—</h4><p name="2806" class="graf graf--p graf-after--h4">For creating user order you can use this function</p><figure tabindex="0" contenteditable="false" name="f102" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/58dc87468ec25c902f19caa3d6106384.js %}</div></div></figure><h4 name="58ea" class="graf graf--h4 graf-after--figure">Get all user orders:&nbsp;—</h4><p name="ab27" class="graf graf--p graf-after--h4">For getting all user order you can use this function</p><figure tabindex="0" contenteditable="false" name="df4f" class="graf graf--figure graf--iframe graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/enappd/9e3c14deba4d6a3e0fcb493e50ecbd7b.js %}</div></div></figure><h3 name="a977" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="570b" class="graf graf--p graf-after--h3">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</p><p name="4e2a" class="graf graf--p graf-after--p">That’s all for this blog.</p><p name="ed76" class="graf graf--p graf-after--p">Stay tuned for more Ionic blogs!</p><blockquote name="78dc" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">You can check out this App it has all the ecommerce features already implemented:-</strong><a href="https://store.enappd.com/product/ionic-4-woocommerce-starter/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic 4 Woocommerce Complete app</strong></a></blockquote><h3 name="47c6" class="graf graf--h3 graf-after--blockquote">The Pros and Cons of This&nbsp;Approach</h3><p name="4dd0" class="graf graf--p graf-after--h3">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:</p><ul class="postList"><li name="a0c1" class="graf graf--li graf-after--p">It’s really fast, way faster than your website.</li><li name="e30d" class="graf graf--li graf-after--li">The user experience is awesome, which could mean higher conversions.</li><li name="cb0a" class="graf graf--li graf-after--li is-selected">It works offline or in places with a poor network connection.</li><li name="f82e" class="graf graf--li graf-after--li">It can be used as a native mobile app or a progressive web app.</li></ul><p name="146e" class="graf graf--p graf-after--li">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:</p><ul class="postList"><li name="60c4" class="graf graf--li graf-after--p">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.</li><li name="a79a" class="graf graf--li graf-after--li">You have to custom code payment gateways. The WC REST API does not support payments, so you have to do that yourself.</li></ul><p name="c86b" class="graf graf--p graf-after--li">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.</p><p name="12a7" class="graf graf--p graf-after--p">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.</p><h3 name="e9ab" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3">Now that you have learnt the implementation of Firebase push notifications in Ionic 4, you can also try</p><ul class="postList"><li name="9f48" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 PayPal payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="aa95" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 Stripe payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="fc67" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 Apple Pay integration</a></li><li name="b1fc" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login in Ionic 4 with Firebase</a></li><li name="57fe" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook login in Ionic 4 with Firebase</a></li><li name="97f4" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--li-anchor"    target="_blank">Geolocation</a> in Ionic 4</li><li name="34a6" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--li-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and</li><li name="de81" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-translate-in-ionic-4-globalization-internationalization-and-localization-31ec5807a8bc"  class="markup--anchor markup--li-anchor"    target="_blank">Translations in Ionic 4</a></li></ul><p name="2930" class="graf graf--p graf-after--li">If you need a base to start your next Ionic 4 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="89dc" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.2%;"></div><img class="graf-image" data-image-id="1*2BzL8TesnBHuazHr3VA4SQ.jpeg" data-width="760" data-height="480" src="https://cdn-images-1.medium.com/max/720/1*2BzL8TesnBHuazHr3VA4SQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Use Ionic 4 Full app for your next awesome&nbsp;app</figcaption></figure><p name="d1d1" class="graf graf--p graf--empty graf-after--figure graf--trailing"><br></p></div></div></section></div></article></main>