# WooStore App Documentation

## Getting started <a href="#getting-started" id="getting-started"></a>

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/**](https://ionicframework.com/docs/)​

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

```markup
<?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** <a href="#wordpress-plugin-installation" id="wordpress-plugin-installation"></a>

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** <a href="#woocommerce-api" id="woocommerce-api"></a>

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`**

![](https://1319283601-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LF-v8mhdlBDzXsLDgdV%2F-LF2CPVT_S3JSsMrnTyb%2F-LF2CyrFSwYOH92hgC0G%2Fimage.png?alt=media\&token=7c5b2806-20c4-462c-bdcc-24a21049fb57)

Select Add Key

![](https://lh5.googleusercontent.com/BCxxdMeBU9tYPHOZ7wo35zQJbZXLzcN-hf36nzakprLMo7OzcUnG5G25wr6dbx5e8vGLAaq7iXiXZeFwhSvJAd5AXjtWvOU8mKuQn8O8vWOcKQ_yXkotK8jguVgmjzUjj9QWvw9r)

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

![](https://1319283601-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LF-v8mhdlBDzXsLDgdV%2F-LF2CPVT_S3JSsMrnTyb%2F-LF2DBUq3VlZ0ygB9Qud%2Fimage.png?alt=media\&token=07024a31-e506-4d4b-907f-b4abda175a48)

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

![](https://1319283601-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LF-v8mhdlBDzXsLDgdV%2F-LF2CPVT_S3JSsMrnTyb%2F-LF2DEvMWGdRcHLxbdrT%2Fimage.png?alt=media\&token=57575374-8693-4fdb-941f-9565807fd27d)

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

```typescript
    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';
```

{% hint style="info" %}
Also add details in /src/providers/service\_android/config.ts
{% endhint %}

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.

{% hint style="info" %}
Here 1977 is the post id
{% endhint %}

![](https://1319283601-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LF-v8mhdlBDzXsLDgdV%2F-LF2CPVT_S3JSsMrnTyb%2F-LF2DhgxJLjNnJO5fEPH%2FScreen%20Shot%202018-06-15%20at%206.37.10%20AM.png?alt=media\&token=f135db78-b8b9-4d03-8073-75061fb997c3)

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

![](https://1319283601-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LF-v8mhdlBDzXsLDgdV%2F-LF2CPVT_S3JSsMrnTyb%2F-LF2DrUFYQhbaVabFv6Z%2FScreen%20Shot%202018-06-15%20at%206.36.47%20AM.png?alt=media\&token=c7291f67-6609-46d6-8056-e64ac08c0b51)

## 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.

![](https://1319283601-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LF-v8mhdlBDzXsLDgdV%2F-LF2CPVT_S3JSsMrnTyb%2F-LF2EKk8Z_4EvuX1HOgu%2FScreen%20Shot%202018-06-15%20at%204.17.21%20PM.png?alt=media\&token=ee4feae3-0d3f-4d40-b958-25d918e89060)

{% hint style="info" %}
tag\_id is the category id
{% endhint %}

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

```markup
 <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>
```

{% hint style="info" %}
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.
{% endhint %}

##

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 <a href="#if-you-have-an-issue-read-faq-or-feel-free-to-contact-me" id="if-you-have-an-issue-read-faq-or-feel-free-to-contact-me"></a>

​<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>​ .
