WooStore App Documentation

Getting started

You are required to setup ionic environment in your Computer - to know more about ionic environment setup see ionic framework official document - https://ionicframework.com/docs/intro/installation/

After setting up ionic environment, unzip the files downloaded from CodeCanyon.

  1. Open the app folder (it can be found inside downloaded files) and change your details in app/config.xml. Change id, name, description, author, email, href

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.ionic.starter" version="0.0.1" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">    
    <name>WooCommerce</name>    
    <description>An awesome WooCommerce app.</description>    
    <author email="support@woostore.com" href="http://woostore.com/">WooStore Team</author>

2.Then open Command Prompt (in Windows) or Terminal (in macOS) and change directory to app folder

 cd app

3.Then add Android and iOS platform to your project

ionic cordova platform add android
ionic cordova platform add ios

Wordpress Plugin Installation

To connect WooStore App with your WooCommerce website , you need to install plugin woostore-plugin for WordPress. To install it follow these steps.

  1. In Wordpress admin panel. Goto Plugins > Add New > Upload plugin > Choose file . Choose downloaded woostore-plugin.zip file which can be found inside the downloaded files. Install and activate.

OR

  1. Unzip downloaded woostore-plugin.zip and upload the woostore-plugin folder to the wp-content/plugins/ directory.

  2. Activate the plugin through the Plugin menu in WordPress.

WooCommerce API

  1. It's required to turn on the WordPress permalink on Settings > Permalinks

  2. Visit WooCommerce > Settings > Advance > Rest API tab and tick the Enable REST API Checkbox

  3. Go to API > Keys/Apps

Select Add Key

Select the user in user field and add a description. Choose level of access Read/Write. then select the button Generate API Key and WooCommerce will generate API keys for that user

Now you should see two new keys, These two keys are your Consumer Key and Consumer Secret

After generating Consumer Key and Consumer Secret add them in /src/providers/service/config.ts file. Note - OneSignal app id, Google project id and webClient are optional and you can add when configuring push notification and social login

    url: any = 'http://example.com';    
    consumerKey: any = 'ck_bf87b818dfd31d3dsfg4543hdjbcd82cb5f3b07e';    
    consumerSecret: any = 'cs_11f6613b7eeefdsfhg456ac814058b67cda9c5';    
    oneSignalAppId: any = '2916e1f4-b655-47b4-8ac8-4e7fdf06c';    
    googleProjectId: any = '5734632549046';    
    webClientId: any = '456352511209-fbam1kgj6354543tretdgfdgtvfidbs1.apps.googleusercontent.com';    
    appDir: any = 'ltr';

Also add details in /src/providers/service_android/config.ts

Get post id for About us, Privacy and Policy, Terms and Conditions. You will find post id on URL bar while editing post or pages.

Here 1977 is the post id

Go to Wordpress > Mobile App. Add Banner URL, About us, Privacy and Policy, Terms and Conditions Post Id.

Changing category images, name and id on home screen

You need to change the category images and their name on the home screen as per your requirement.

  1. To change category images on home screen of app , change images in www/assets/image

  2. Get category id of each category from your website.

tag_id is the category id

3.After getting category id, update it in app/src/pages/home/home.html

 <ion-col> 
 <ion-card (click)="getCategory(15,'Household Needs')"> 
 <img src="assets/image/cat7.jpg" /> 
 <div class="card-title">Household Needs</div> 
 </ion-card> </ion-col>

Here 15 is the category id, cat7.jpg is the category image and Household Needs is the category name. Change for the other categories too.

By default there are six categories shown on the home page of the app.

There are two service folder at app/src/providers. service and service_android

  1. service folder is default one. It will work for iOS and for the browser. While building iOS app you can delete service_android

  2. While building android app delete service folder and rename service_android to service

Now you can run your app. Due to CORS, your app may not work on browser. Try ionic serve --port 8080.

 ionic serve --port 8080
 ionic cordova build android
 ionic cordova build ios

Debug apk may take time to load on some android devices. you need to build --prod to load faster

ionic cordova build android --prod
ionic cordova build ios --prod

If you have an issue read FAQ Or Feel free to contact me

https://codecanyon.net/user/maxakash Or send me a mail with details of the issue and your purchase code, URL, API, keys admin panel access akashchaudharymax@gmail.com​ .

Last updated