Now we have set up the Ionic-React environment.

For install Ionic-React environment use this link

https://ionicframework.com/docs/react

You should have to install node modules in application first. For this purpose, apply following command

npm install

After node modules installation, if you find following error

Apply following command for successful compilation

npm rebuild node-sass

For configuration of your application

We need to connect our app with woocommerce website. Open the folder name (App Source Code)inside the downloaded packages.

Inside the folder, you will find all the Ionic-React application code.

You can need following file
folder/src/providers/WooComAPI/woo-com-api.ts

Now open project folder/src/providers/WooComAPI/woo-com-api.ts file and change the following.

• http://your-site-url (it will be the URL of your domain)
• consumer key
• consumer secret

It will load woocommerce products data into your application.

For application configurations:

• Color Schemes
  You can change the application color from here.
  
  
  
• Theme mode(light/dark)
  By default you can get light theme mode. If you want to change application theme mode to dark, you can replace light with dark.
  
  
  
• Language(en/ar)

The app has english language as default.the app has 2 languages(English, Arabic) preinstalled. You can switch the language to arabic.

To change the default language of the app. Please open the file app/src/providers/WooComAPI/woo-comp-api.js at the top of the page you can find below code.



localStorage.languageCode =”en”

This is your language two letter code change it to arabic we have to put the arabic country code here. which is “ar“.

localStorage.languageDirection = “ltr”

Every language has its own direction. So if you change the application language then you also has to define its direction(ltr, rtl). For left to right use “ltr” and for right to left use “rtl”. In case of arabic we have to change this to =”rtl”.



Now we have to remove the cache of the browser to see the changes we have made.

Add new language

App has only two languages. But you can add more languages.to add new language. Please open the app/src/provider/i18n/GlobalLanguageJson.js. This folder has one file GlobolLanguageJson.js. This file contains all the app labels.



For example we want to add french language we copy the “a2” object from GolabLanguageJson.js file and add a new object a3{}

Then we open the file in editor and replace the translation of all the labels on right side of the labels. like

we have Close: “Close” in english, we replace it with french like this. Close: “Fermer”

After translating all the labels save the file and then change the language code and direction. To make it default.

// For Example

//a3:{

//}


• Currency(USD/EUR)

Default currency is "USD". You can replace this with "EUR" to change currency.



The app has “$” currency as default.the app can have multiple currencies depending to your admin panel

To change the default currency of the app. Please open the file

app/src/providers/WooComAPI/woo-comp-api.js

at the top of the page you can find below code.

localStorage.currency = “$”

this is the currency Decimal code. you can get your code from the link https://html-css-js.com/html/character-codes/currency/

Please find your currency Decimal code and replace it.

localStorage.currencyCode = “USD”;

this is currency iso code you also find this from the link https://html-css-js.com/html/character-codes/currency/

please find your iso code and replace it with above code.

localStorage.currencyPos = “left”;

you can also control the currency direction you can place it either left or right side. To change it to right just change the left with right.

localStorage.decimals = 2;

this is the decimal placement of the currency with decimal 2 your currency will look like this

6.00$ (six dollar with 2 decimal value)

6.000$(six dollar with 3 decimal value)

change the value according to your requirement.

Please remove the cache of the browser to see the effect of changes. or uninstall the app if you are testing in real device and rebuild the app.

• Navigation(Tabs/Side Menu)

Default navigation is "side". You can replace this with "tabs" to change applicaiton navigation.

For tabs, you have to replace false with true for tabs Navigation

We have added JSON API and Ionic-React eCommerce plugins. These plugins can be installed in two ways.

You will find the JSON API and Ionic-React eCommerce plugins in a zipped folder in the pack.

Method 1

1. Upload the folder “JSON-API” to your WordPress Plugin folder (/wp-content/plugins)
2. Now activate the plugin through the “plugins” menu in WordPress or by using the link provided by the plugin installer.
3. Activate the controller through the JSON API menu found in the WordPress Admin Center (Settings->JSON API)

Method 2

Go straight to the admin panel>Plugin>Add New.

The above-given page will show up. From here, click on the “upload plugin” option, make sure that the plugin that you have is in .zip format. Click on the “Browse” option, upload the plugin folder and once the folder is chosen, click on the “Install Now” option”

Once the plugin is installed, you can activate or deactivate the plugin through settings according to your usage.

After WordPress plugins installation and setup, please follow the below-mentioned instructions to set up your mobile application.

After Intallation of plugin need to activate the controllers from Settings >> Json APi

Ionic-React Woocommerce app works with woocommerce rest api, please follow the link below to enable woocommerce rest api on your server.

https://docs.woocommerce.com/document/woocommerce-rest-api/

After enable rest api, please make sure your site woocommerce rest api working correctly. You can follow that simple tutorial link to check whether rest api works correctly on your sever or not.

https://github.com/woocommerce/woocommerce/wiki/Getting-started-with-the-REST-API

Now you have all set at your wordpress site end. Please proceed with ionic source code setup.

Enable REST API & Generate API keys

To enable the REST API with in WooCommerce, go to WooCommerce> Settings> Advanced and tick the Enable Legacy API link

The WooCommerce REST API works on a key system to control access. These keys are linked to WordPress users on your website.

To create or manage keys for specific WordPress user:

Go to: WooCommerce> Settings> Advanced> REST API

1. Select Add Key
2. Select the user you would like to generate a key for, in the user file and add a description.
3. Choose the desired level of access for this API key , which can be Read access, Write access or Read/Write access.
4. Select the Generate API key button and WooCommwrce will generate API keys for that certain user.
Once the keys have been generated, you will see two new keys, a QRCode and a Revoke API Key button. These two keys are your Consumer Key and Consumer Secret.
5. Place your site link, consumer key and consumer secret in the mobile application config file that uses the WooCommerce API.

This allows you to log in through your Facebook credentials. Here is the official link with the detailed demonstration of Facebook integration

https://ionicframework.com/docs/native/facebook/.

You have to enable facebook from CMS.

For more details please visit

https://ionicframework.com/docs/native/facebook/

Facebook App Id for application

File path for your facebook app id for application is

folder/android/app/src/main/res/values/string.xml

To avail of this feature, you need to create OneSignal account and obtain both needed keys that are App ID and App key. Place them here and make this feature functional. You can offer various discount coupons to your distinguished customers that would appear in their app like this

Here is the official link that would guide you throughout the process of OneSignal account creation

https://ionicframework.com/docs/native/onesignal

Android

Generate a Google Server API Key

Your Google Server API Key and Google Project Number are used to send push notifications to ANDROID devices.

To begin, we’ll obtain a Google Server API Key and Google Project Number. These keys allow OneSignal to use Google’s web push services for your notifications.

Create A Firebase Project

1. Visit the Firebase Console and sign in with your Google account.
   
   
   
   
2. Press “CREATE NEW PROJECT” or select an existing one below
   
   
   
3. Enter a project name and press “CREATE PROJECT”.
   

Firebase Cloud Messaging Token and Sender Id

Getting your Firebase Cloud Messaging token and Sender ID

1. Click the Gear icon in the top left and select “Project settings”.
2. Select the “CLOUD MESSAGING” tab.
3. Save the two values listed:
   • You’ll need your Server key, also known as the Google Server API key.
   • You’ll need your Sender ID, also known as the Google Project Number, later as well

OneSignal App Android Setting

Configure your OneSignal app’s Android platform settings

1. Go to Settings and press the Configure button to the right of Google Android.
   
   
   
   
2. Paste your Google Server API Key and Google Project Number in here and press Save.
   
   
   
   
3. After saving this server API Key and Sender ID from the firebase project, you can get the one signal app Id from the setting
   
   
   
   and your sender id from the firebase project
   
   
   
   
4. place this app id and sender id in state.ts (src/providers/Redux/Reducers/state.ts) file then save it.
   
   
   
   

IOS

Generate an IOS Push Certificate

Required for all IOS apps.

Required For Setup

• A OneSignal Account, if you do not already have one.
• Your OneSignal App Auth Key, available in Keys & IDs.
• A Mac with Xcode 8+. If you are using Xcode 7, PhoneGap Build, or Capacitor, follow this guide instead.

Provisioning

Option A: Create Certificate Request Manually

We recently released a tool to automate this process!

Make sure your role for the team is Admin inside your Apple Developer account > Membership section. Otherwise you will not be able to use this tool.

Simply follow the directions on OneSignal’s Provisionator Tool then continue to Step 4.

OR

Option B: Create Certificate Request Manually

1. Open Keychain Access on your Mac OS X system. It may be located in “Applications” > “Utilities” > “Keychain Access“
2. Select “Keychain Access” > “Certificate Assistant” > “Request a Certificate From a Certificate Authority…“.
   
   
   
   
3. Select the “Save to disk” option and enter your information in the required fields. This creates a certification request file that will be used

Enable Push Notification

To enable Push Notifications and apply the Certification Request to generate Certificate.

1. Select your app from the Apple’s Developer site and press “Edit“.
   
   
   
   
2. Scroll down to the bottom and enable Push Notifications. Press Done, but do not configure either Production or Development certificate.
3. Instead, go to Add iOS Certificate and select “Apple Push Notification service SSL (Sandbox & Production)” and click Continue.
4. This certificate will be applicable to both Sandbox and Production environments, so you do not need a separate key for each.
   
   
   
   
   1. Choose an App ID from the App ID pop-up menu.
   2. Press “Continue”.
   3. Press “Choose File…” select the “certSigningRequest” file you saved in step 1, press “open“, and then press “Generate“.
   
   
   
   
   Press “Download” to save your certificate.
   
   
   
   

Creating A Private Key

1. Open the .cer file you downloaded in the last step by double clicking on it in Finder.
   
   
   
   
2. After a few seconds the “Keychain Access” program should pop up. Select Login > My Certificates, then right click on your key in the list and select “Export“.
   
   
   
   
3. Give the file a unique name using the .p12 extension, and press save. You will have an option to protect the file with a password. If you add a password, you need to enter this same password on OneSignal.

Upload Your Push

Upload Your Push Certificate to OneSignal.

If you haven’t already, you should set up your OneSignal account.

1. Select your app from the All Apps page in OneSignal, then go to “App Settings” and press “Configure” to the right of the Apple iOS Settings.
   
   
   
   
2. Select the .p12 you exported along with a password that you added, and press Save.
   
   
   
   

If you want to show the “cancel order” button, select show. While you can also hide it by applying the “hide” option.

From here you can set a certain time duration, prior to which the buyer can cancel the order. For instance, the 8 Hours option implies that order could be cancelled at least 8 hours prior to the agreed delivery time.

This allows you to choose any of Home Screen Style from 8 available styles.

This option allows you to display or hide the “Cart”.

Here you need to place the URL of your business website.

Here you ought to place a specific currency symbol that you deal in.

This option allows you to tag your new arrivals as “New Product” for as many days as you select this option.

This option allows you to place a filter of maximum price so that the products falling within this certain range show on your site page.

If you want to show the “cancel order” button, select show. While you can also hide it by applying the “hide” option.

a) Checkout Type

In checkout types, there are three further options available.

1. Defaultby selecting this option, you allow the web view of checkout. This checkout option appears in your app.
2. Virtual This checkout option is meant for those sinesses that deal in virtual or intangible products that cannot be shipped physically, rather just downloaded. For instance, digital products, Pdf files, books, etc. In this checkout style, only the billing detail page appears and not the shipping detail page.
3. Screen in Appin this checkout type, a separate order page is created right within the app where billing and shipping details are entered and stored.

b) Guest Checkout.

By enabling this option, you allow a random visitor to place the order without properly registering.

c) Custom CSS for Checkout Page.

This custom CSS allows you to change/modify your checkout page options right in the manner you like.

This entire page is designed in order to facilitate the client in contacting you. You are supposed to fill in each column on this page appropriately and accurately. This contact form is a bridge between you and the client.

Wishlist

Wishlist is meant for the visitor where he/she can add products that he/she is likely to buy in the future. You can display or hide the wishlist.

Edit Profile.

This is again meant for the visitor to edit his/her profile information that was used in registration. Through this, you can allow or restrict the visitor from editing the profile.

My orders

Through this page, the visitor can see his/her order details and history. You can show or hide this option.

Contact us.

This is the page that carries the details of your contact information. You can show or hide this.

About Us

This is the page that shows the “about us” content. You can show or hide this from this option.

Billing Shipping Info

This segment is meant for the user where he/she can store billing and shipping information. You can show or hide it in the left menu.

Downloads

This is again meant for the visitor whether he/she wants downloads or not. You can show or hide it in the left menu.

News

This carries the latest news about your business. You can show or hide this from the left menu.

Introduction

This segment contains your business’s introduction. You can show or hide it from here.

Share App

Through this option, the visitor can share your app through different mediums with other users. You can show or hide this option from here.

RateApp

Through this option, the visitor can share your app through different mediums with other users. You can show or hide this option from here.

Wishlist

Through this option, the visitor can rate your app. You can show or hide this option from here.

Settings

Show or hide the settings from the left menu.

This feature allows you to display different information for the visitor I.e Your About Us page, Refund Policy, Privacy Policy, Terms, and Conditions content.