App Development

First You Have to Buy The source code & Unzip It

1. Now Open Vs Code editor.Change your details in app/config.xml. Change id, name, description, author, email, href

[box type=”info” align=”aligncenter” class=”” width=””]

<?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@mstoreapp.com“ href=”http://mstoreapp.com/“>Mstoreapp Team</author>

[/box]

2.Open App source code

[box type=”info” align=”aligncenter” class=”” width=””]$ cd app[/box]

3.Add android and ios platform to your project

[box type=”info” align=”aligncenter” class=”” width=””]ionic cordova platform add android[/box]

WordPress Plugin Installation

To install plugin mstoreapp-mobile-app for WordPress follow these steps.

Install Redux Frameworks. If you have not installed yet – https://wordpress.org/plugins/redux-framework/​

1. In WordPress admin panel. Plugins > Add New > Upload plugin > Choose file Chose downloaded mstoreapp-mobile-app.zip file and Install and activate

OR

1. Unzip downloaded mstoreapp-mobile-app.zip and Upload the mstoreapp-mobile-app folder to the wp-content/plugins/ directory.

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

WooCommerce API

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

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

3. Visit WooCommerce > Settings > Advanced > Legacy API tab and tick the Enable Legacy REST API Checkbox

4. Go to API WooCommerce > Settings > Advanced > REST API > Keys/Apps > 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

[box type=”info” align=”aligncenter” class=”” width=””]Add url, api keys in app/src/providers/service/config.ts file.[/box]

[box type=”info” align=”aligncenter” class=”” width=””] url: any = ‘URL_PLACEHOLDER’;

consumerKey: any = ‘CONSUMER_KEY_PLACEHOLDER’;

consumerSecret: any = ‘CONSUMER_SECRET_PLACEHOLDER’;[/box]

Go to WordPress > Mobile Options. Add Banners Blocks, Category Blocks, Product Blocks and Settings.

OneSignal Push Notification

Login or Signup in https://onesignal.com/

Add an app, Add you app name and click ADD APP

After that select platform and hit NEXT:

Next you need to get Firebase Server Key and Firebase Sender ID. You will get it with Following steps

In another browser tab Open Firebase Console https://console.firebase.google.com and sign in with your Google account.

Press “CREATE NEW PROJECT” or select an existing one below.

Enter a project name and press “CREATE PROJECT”.

Go to project OverView

Click Settings -> Project Settings -> Cloud Messaging

Copy server key And sender Id

And Add it in OneSignal app and click SAVE

Select your target SDK PhoneGap, Cordova, ionic and hit NEXT

Copy Your App ID

Add in OneSignal APP ID, Firebase Server Key and Firebase Sender ID in WordPress -> Mobile App -> Settings

After that Build apk and Subscribe at least one user by launching your app on mobile. Then you need to hit check subscribed user and click DONE

Dynamic Blocks

Banner Blocks

Go to WordPress > Mobile Options > Banner Blocks

1. Status – will allow you to enable or disable blocks

2. Title – This will allow you to add a title for the blocks

3. Title align – Allow you to set the alignment of the title inside blocks. select none to hide the title

4. Title Color – Color of text inside the block. Set Back or Dark color for a light background, Light color for dark back

5. Background Color – Allow you to set background color for blocks

6. Select Style – Allow you to set style slider, grid, or scroll (Horizontal scroll) for banners in the block

7. Set Margin – Allow you to set-top, right, bottom, left margin for the block

8. Set Padding – Allow you to set-top, right, bottom, left padding for the block

9. Margin between banner – Allow you to set a gap between banners

10. Enter Border Radius – Allow you to set border -radius for banners

11. Set Width – Allow you to set the width in % of screen width for Banner. set 100 for one banner in a row. 50 for two banners in a row. 25 for 4 banners in a row.

12. Sort Order – Allow you to set the sort order for blocks. Blocks will appear on the mobile app according to sort order. 0 comes on top and higher-order number comes last

13. Banners – allow you to add multiple banners as block

    1. Link Type – Allow to link banner image to product, category, or post. enter product or category or post or stores ( for multivendor only ) in this field. leave blank if you don’t want to link banner

    2. Link Id – Allow you to set link id for the banner. Enter product id or category id or post id according to what you have entered in Link Type for stores Link id is not required to enter. in this field. leave blank if you don’t want to link banner

    3. ​check how to link a banner to multivendor stores​

Category Blocks

Support banner blocks options as mentioned Banner Blocks

1. Main Category id – Allow you to set main category id whose subcategory will appear in blocks

​

Products Blocks

Support banner blocks options as mentioned Banner Blocks

1. Filter Product By – Allow you to set filter products by category id or product tag id

2. Category id or Product tag id – Enter category id or Product tag id according to the previous option. Products under the category or tagged products will appear under blocks accordingly.

​

Flash Sale Blocks

Support banner blocks options as mentioned Banner Blocks

1. Flash Sale End Date – Allow you to set an end date for flash sale

2. Filter Product By – Allow you to set filter products by category id or product tag id

3. Category id or Product tag id – Enter category id or Product tag id according to the previous option. Products under the category or tagged products will appear under blocks accordingly.

​

Geolocation

Social Login

Read this document to avoid any mistake or conflict

[button color=”green” size=”small” link=”https://github.com/EddyVerbruggen/cordova-plugin-googleplus” icon=”fas fa-book-reader” target=”true” nofollow=”false”]READ THIS[/button]

Uncomment Facebook and GooglePlus import in src/app/app.module.ts and src/app/account/login/login.ts

[box type=”info” align=”aligncenter” class=”” width=””]

//import { Facebook } from ‘@ionic-native/facebook/ngx’;

//import { GooglePlus } from ‘@ionic-native/google-plus/ngx’;

[/box]

Uncomment Facebook and GooglePlus in providers section of src/app/app.module.ts

[box type=”info” align=”aligncenter” class=”” width=””]

// Facebook,

// GooglePlus,

[/box]

Uncomment GooglePlus, Facebook in constructor in src/app/account/login/login.ts file

[box type=”info” align=”aligncenter” class=”” width=””]/*private googlePlus: GooglePlus, private fb: Facebook*/[/box]

Uncomment Social login in src/app/account/login/login.ts file

[box type=”info” align=”aligncenter” class=”” width=””]

/*googleLogin(){ this.googleLogingInn = true; this.googlePlus.login({}) .then(res => { this.googleStatus = res; this.api.postItem(‘google_login’, { “access_token”: this.googleStatus.userId, “email”: this.googleStatus.email, “first_name”: this.googleStatus.givenName, “last_name”: this.googleStatus.familyName, “display_name”: this.googleStatus.displayName, “image”: this.googleStatus.imageUrl }).subscribe(res => { this.status = res; if (this.status.errors) { this.errors = this.status.errors; } else if (this.status.data) { this.settings.customer.id = this.status.ID; if (this.platform.is(‘cordova’)){ this.oneSignal.getIds().then((data: any) => { this.form.onesignal_user_id = data.userId; this.form.onesignal_push_token = data.pushToken; }); this.api.postItem(‘update_user_notification’, this.form).subscribe(res =>{}); } if(this.status.allcaps.dc_vendor || this.status.allcaps.seller || this.status.allcaps.wcfm_vendor){ this.settings.vendor = true; } this.navCtrl.navigateBack(‘/tabs/account’); } this.googleLogingInn = false; }, err => { this.googleLogingInn = false; }); this.googleLogingInn = false; }) .catch(err => { this.googleStatus = err; this.googleLogingInn = false; }); } facebookLogin(){ this.facebookLogingInn = true; this.facebook.login([‘public_profile’, ‘user_friends’, ’email’]) .then((res: FacebookLoginResponse) => { this.googleStatus = res; this.api.postItem(‘facebook_login’, { “access_token”: this.googleStatus.userId, }).subscribe(res => { this.status = res; if (this.status.errors) { this.errors = this.status.errors; } else if (this.status.data) { this.settings.customer.id = this.status.ID; if (this.platform.is(‘cordova’)){ this.oneSignal.getIds().then((data: any) => { this.form.onesignal_user_id = data.userId; this.form.onesignal_push_token = data.pushToken; }); this.api.postItem(‘update_user_notification’, this.form).subscribe(res =>{}); } if(this.status.allcaps.dc_vendor || this.status.allcaps.seller || this.status.allcaps.wcfm_vendor){ this.settings.vendor = true; } this.navCtrl.navigateBack(‘/tabs/account’); } this.facebookLogingInn = false; }, err => { this.facebookLogingInn = false; }); this.facebookLogingInn = false; }) .catch(e => { this.googleStatus = e; this.facebookLogingInn = false; }); }*/

[/box]

Uncomment Social login buttons in src/app/account/login/login.html file

[box type=”info” align=”aligncenter” class=”” width=””] <!–div>
<ion-row class=”login-div”>
<ion-col class=”col1″> <button ion-button outline full type=”submit” text-uppercase [disabled]=”disableSubmit” (click)=”facebookLogin()”>{{“Facebook” | translate}}</button> </ion-col>
<ion-col class=”col2″> <button ion-button outline full type=”submit” text-uppercase [disabled]=”disableSubmit” (click)=”gmailLogin()”>{{“Google” | translate}}</button> </ion-col>
</ion-row>
</div–> [/box]

Google Authentication

1. Get your credentials from Google.

2. Install the Google native plugin.

1. Get your credentials from Google.

Go to https://console.firebase.google.com and create a project.

Once project is added we need to create both ios and android app in firebase console https://console.firebase.google.com.

let’s start with the iOS one,

Choose your project. Click settings icon and then select project settings

Click on ADD APP and then choose platform

It will ask you an iOS Bundle ID, to get it, go into your app’s config.xml file and copy the package id you’re using, it’s the one that looks like (id=”com.ionicframework.something”) from your config.xml file.

Click REGISTER APP. It will generate GoogleService-Info.plist file.

Click on Download GoogleService-Info.plist file, which is a config file for iOS.

After downloading GoogleService-Info.plist file click on Continue > Continue > FINISH.

Copy GoogleService-Info.plist file to your project root directory.

Once we add iOS app, we need to add Android app.

Click ADD APP and choose android platform

It will ask you an Android Bundle ID, to get it, go into your app’s config.xml file and copy the package id you’re using, it’s the one that looks like (id=”com.ionicframework.something”) from your config.xml file.

Click REGISTER APP. It will generate google-services.json file

Click on Download google-services .json file, which is a config file for Android.

After downloading google-services.json file click on Continue > FINISH

Copy google-services.json file to your project root directory. that is app folder

Add CLIENT_ID in src/providers/config.ts file

2. Install the GooglePlus Cordova Plugin.

[box type=”success” align=”aligncenter” class=”” width=””]get REVERSED_CLIENT_ID in GoogleService-Info.plist file[/box]

Run following command to install GooglePlus Cordova plugin. CLIENT ID with REVERSE CLIEND ID

[box type=”success” align=”aligncenter” class=”” width=””]ionic cordova plugin add cordova-plugin-googleplus –variable REVERSED_CLIENT_ID=CLIENT_ID[/box]

[box type=”success” align=”aligncenter” class=”” width=””]npm install –save @ionic-native/google-plus[/box]

Facebook Authentication

More detail – https://ionicframework.com/docs/native/facebook https://github.com/jeduan/cordova-plugin-facebook4

Make sure you’ve registered your Facebook app with Facebook and have an APP_ID

1.First have to create a new Facebook App inside of the Facebook developer portal at https://developers.facebook.com/apps.

Retrieve the App ID and App Name

2.Add android and ios platform. Go to settings>basics as shown below and click +Add Platform.

3.Fill required fields while adding android and ios platforms and save changes.

4.Final step, Change status of the app from development mode to Live .

Install the Cordova and Ionic Native plugins. where App ID and App Name are the values from the Facebook Developer portal.

[box type=”success” align=”aligncenter” class=”” width=””]ionic cordova plugin add cordova-plugin-facebook4 –variable APP_ID=”123456789″ –variable APP_NAME=”myApplication[/box]

[box type=”success” align=”aligncenter” class=”” width=””]npm install –save @ionic-native/facebook[/box]