scottopolis / wpionic

Ionic 3.9.2 App with WordPress and WooCommerce integration

wpIonic

This project has not been maintained or updated in a while, it's probably best not to use it.

Completely rewritten and updated for Ionic 3.9.2 Feb 2018

A demo mobile app that uses the Ionic Framework, and integrates with WordPress through the WP-API.

Features:

• Gets posts through WP-API v2
• WordPress login - needs SB App Integration plugin https://github.com/scottopolis/sb-app-integration
• WooCommerce REST API v2 integration
• Stripe payments
• Pull to refresh
• Infinite scroll
• Lots more

Demo

How to setup

Blog post and tutorial here: http://scottbolinger.com/ionic-wordpress-app/

• Install Ionic CLI tools https://ionicframework.com/docs/cli/
• Clone this repository, and run npm install
• Open providers/configure/configure.ts and enter your WordPress site url
• If using WooCommerce, enter your auth key in configure.ts as described
• To use Stripe payments, add your publishable key in app.module.ts
• Install the SB App Integration plugin https://github.com/scottopolis/sb-app-integration
• run ionic serve to see it in your browser

WooCommerce

This app uses basic authentication over SSL to pull products from the WooCommerce REST API.

To use the WooCommerce module, you must create a REST API key in WooCommerce: http://woocommerce.github.io/woocommerce-rest-api-docs/#authentication

In the app, go to providers/configure/configure.ts and change the Authorization header. This is a base64 encoded string of your consumer key and secret. You can generate these using btoa(key:secret), but keep in mind these are discoverable in your app files even in a signed native app package.

Example getting your auth header

consumer key: ck_7af7efdb4ef8708b5f8d5ccdacbd1d8e8ce0f8d5 consumer secret: cs_8777f8b0de8435162162daf22f7e6944ab2bec40

Visit an online base64 encoder and enter your key and secret separated by a semi-colon:

ck_7af7efdb4ef8708b5f8d5ccdacbd1d8e8ce0f8d5:cs_8777f8b0de8435162162daf22f7e6944ab2bec40

Click encode. Copy the encoded string that looks like this:

Y2tfN2FmN2VmZGI0ZWY4NzA4YjVmOGQ1Y2NkYWNiZDFkOGU4Y2UwZjhkNTpjc184Nzc3ZjhiMGRlODQzNTE2MjE2MmRhZjIyZjdlNjk0NGFiMmJlYzQw

Visit providers/configure/configure.ts and change the return string in getAuth to:

return 'Basic Y2tfN2FmN2VmZGI0ZWY4NzA4YjVmOGQ1Y2NkYWNiZDFkOGU4Y2UwZjhkNTpjc184Nzc3ZjhiMGRlODQzNTE2MjE2MmRhZjIyZjdlNjk0NGFiMmJlYzQw';

Included features:

• WP-API v2 and WooCommerce REST API v2 integration
• Product list
• Single product pages
• Add to cart
• Cart modal
• Basic multi-step checkout
• Stripe payments

wpionic's Issues

http://localhost:8100/#/post-list

Error: Uncaught (in promise): [object Object] at c (http://192.168.1.38:8100/build/polyfills.js:3:19752) at c (http://192.168.1.38:8100/build/polyfills.js:3:19461) at http://192.168.1.38:8100/build/polyfills.js:3:20233 at t.invokeTask (http://192.168.1.38:8100/build/polyfills.js:3:15660) at Object.onInvokeTask (http://192.168.1.38:8100/build/vendor.js:4973:33) at t.invokeTask (http://192.168.1.38:8100/build/polyfills.js:3:15581) at r.runTask (http://192.168.1.38:8100/build/polyfills.js:3:10834) at o (http://192.168.1.38:8100/build/polyfills.js:3:7894) at e.invokeTask [as invoke] (http://192.168.1.38:8100/build/polyfills.js:3:16823) at p (http://192.168.1.38:8100/build/polyfills.js:2:27648)

comments = $scope.post._embedded['replies'][0] issue

$scope.comments = $scope.post._embedded['replies'][0];
this code of "0"show : cannot read property '0' of underfined

Not working of Cash on Delivery

Hi, The project is great and is retrieving data correctly.

I am just facing an issue on the check out page and the order is not being received on cash on delivery or paypal.

Images are not adjusted according to screensize

Hi First of all thanks for this nice code.

I observed when I click on a post it's images are shown with actual size which is bigger than the mobile screen size.

Am I supposed to change anything on the code?

Thank you.

Website I am using is cookingshooking.com

watch gulp

I couldn't run watch gulp, while i could do it on an ionic other starter on the same machine. is there anyone faced my issue?

not connect Woocommerce

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

@Injectable()
export class Configure {

// replace with your WordPress site URL. Must be HTTPS for production.
url: string = 'https://yanz.com.br/'

constructor(public http: HttpClient) {
}

getUrl() {
	return this.url;
}

/*
 * The WooCommerce REST API requires authorization. Basic auth requires a base64 encoded string of 'Basic ' + btoa('key:secret') 
 * Replace the Authorization header below with your own by base64 encoding your consumer key and secret key which you can get in the WooCommerce settings: http://woocommerce.github.io/woocommerce-rest-api-docs/#rest-api-keys
 * Must use HTTPS for basic auth.
 */
getAuth() {

return 'Basic YWRtaW4gY2tfOGVlMzhhMWI5ZDQ5YzY0Y2E1NjE1NGJmN2EzM2VhMTkyOGFkNjkwNTpjc19kYTJjMGYwOTdmN2RiOTliOWMwNzllZDcyMWE3ZDRmZTdjMjAxN2Q2';
}

}

Open menu on right

Hi,
I have tried to open the menu on the right but it seems do not work.

<ion-header>

  <ion-navbar>
    <ion-buttons start>
      <button ion-button menuToggle right>
        <ion-icon name="menu"></ion-icon>
      </button>
    </ion-buttons>
    <ion-title>Posts</ion-title>
  </ion-navbar>

</ion-header>

If i do a pull to refresh for the posts, they load again but only 4 posts

Hello Scott, I am working with your great app, and i found a possible problem. when i do a pull to refresh in the posts page, it works, but after the refresh it shows for me only 4 posts, instead of all the ones that were before, and i try to refresh again, it shows only the 4 posts..

is there someway to edit this behavior?

Thanks,
Shaul.

featured_image not showing

featured_image not showing.

Fetch pages rather than posts

The Wordpress site I am wishing to use is entirely built using Pages and has no Posts. Is it a case of a simple tweak to enable this to work or is some major re-writing of code required?

Tabs

Hi scot! Can you help me to add tabsView to your projects, im trying with ionic official docs. But it doesn't work.

Unclear guide

Can you please give me an example of this?

In the app, go to providers/woo/woo.ts and change the Authorization header. This is a base64 encoded string of your consumer key and secret. You can generate these using btoa(key:secret), but keep in mind these are discoverable in your app files even in a signed native app package.

Thank you

POST TYPE

Hey there Scott! I have been using the WpIonic App and I am able to call my regular posts but when my custom 'wp-json/posts?type=ait-dir-item' posts wont show. I can see the JSON code with all the items is there a configuration I need to make to one of the JS or Reactor plugin?

RFC3339 date and time

What is the best way to parse date and time like "2014-09-18T11:00:42" in wpionic?

REST API not working in android

Hi Scott,

Loved it, but unfortunately if I compile and run in android device, the REST API is not working, do you have any idea why?

My device is ASUS Fonepad with Android 4.4 though...

Insert post

It is planned option to insert post in the app?

Limited variable products?

1. I only saw 10 variants from the app. Can you please show them all?

2. I have size and color attribute, is there any way to make the separate?

3. The thumbnails are not full.

4. Can you implement the WooCommerce FB tracking in the future?

5. The site is dead at checkout. Shipping cost is incorrect.

IPv6 Connection issue on iOS Submission

Hi Scott, I have followed all of your steps, and tested my app on my side, using the 'Create NAT64' thingy on my iMAC, Im not facing any issue on grabbing the data from my wordpress site but Apple can't seem to load the data on their side and they said that it is something to do with the IPv6.

How can I solve this issue with your template?

How to get categories

Hello,
How can I get the categories API so that I can make different post-list pages for each category.

Thanks in advance.

Can't load on mobile

Hi Scott,

First of all thanks for the code. I am trying to load the app after packaging on my android phone somehow doesn't seem to work.

It does work fine on the browser though. Any idea what could I be missing?

login page

Hi
1-please add simple login/ register page.
how can save username and password in app for next login(automatic login whithout token,etc...).
2- the top of the pages is under the application header and is unseen.please repair the frame length of inappbrowser .
3- add text under the tabs icon.( icon+ name)

thanks.

help

how it works with value here

Splash Screen

Is there an easy solution to add a splash screen to wpionic app replacing the intro slider so it was just splashscreen then posts?

Do I have to add the platforms for IOS and Android to do so?

Anyway to add Category Posts?

Anyway todo so? Sort by Category?

Youtube Iframes not showing inside app

Hi, thanks for this great project!!
I tested it and it works great, but for some reason, I can't see youtube videos which are embeded in my posts. all the other elements are shown..

please let me know if there is anyway to fix this?

THanks :)

Intro Doesn't Start from first slide

Hi Scott, I noticed that if you go to the intro page after starting the app, it will show the last slide.... Is there any way to do that the slider will begin from the first page?

thanks,
Shaul.

Help..

can someone help me to configure to access woocommerce, where I put consumer key and secret key, wordpress is ok.

'page' is declared but never used.

/wpIonic-master/src/providers/posts/posts.ts, line: 23
'page' is declared but never used.

  L22:  if( !page ) {
  L23:    let page = '1';

///////////////in command line error .please help

Missing Title On Login Page

Hi Scott, when you go to the login page, there is no title.... please add it when you have a sec...

Is it possible to use this code directly in Ionic Creator?

I tried using the code directly on Ionic Creator but I did not succeed. Do you know of any way to deploy this code in Ionic Creator and display the results?

Thanks any help!

Ionic 2 Beta?

Hey Scott, I'm just curious if you've considered how this will all work in Ionic 2, and if so I'd be very interested to see an example!

I can not connect woocommerce, can you give me an example

I can not connect woocommerce, can you give me an example

Infinite scroll

Hi. Im testing this app with ion view and when I am at /posts and scroll, some posts more load, but if click one post and go back again to posts and scroll down, no more are loaded. only the first page.

Tab disappears after navigating from Side Menu

Hi Scott,

Tab seems to disappear after navigating from the side menu. How can I fix this?

convert internal links

How to convert internal links so that it opens via the app. Or is there any way to remove the hyperlinks for the domain?

REST API Featured Images

https://wordpress.org/plugins/better-rest-api-featured-images/

can't load image

`

<ion-infinite-scroll
ng-if="moreDataExists()"
on-infinite="loadMore()"
distance="1%"
immediate-check="false">

` can't load image

Iframe Can't Be Swiped Over

Hello Scott, I have found a bug, but it's not something with your project, it is in all ionic projects, so i am not sure how to fix this, but maybe you can help..

The problem is that elements in an iframe, for example, a youtube video, can't be swiped down or up , it does nothing, so it makes a problem when you have wordpress posts with a video, and you can't scroll down sometimes... did you notice this and is there any way to fix this?

Thanks for your time,
Shaul.

Security risk to include consumer key and consumer secret in code

Titles display ’ and “

Scott,

We're seeing an issue where titles display characters such as " and ' as and

The issue is only in post titles. Post content looks normal.

Does the correction of post content for these sorts of characters happen here?
$scope.content = $sce.trustAsHtml(data.content);

And if so, how can I use something similar to target the post.title?

Cheers!

Cheers!

Display feature image

Hi there.

Thanks for a great tutorial and a great starter app!

I see the featured image is being returned in the JSON, however it seems to just be an ID of some kind, how does one take that and actually create an IMG tag SRC?

I saw this line commented out, I removed the comments but it doesn't display an image:

Thanks a lot!

Map Listings

Scott, So I am currently using this themehttp://preview.ait-themes.com/businessfinder/wp1/ that has a Map Pin Listing plugin integrated within the template that uses Google Maps API. Basically each individual pin on the map is a Custom post type and within the back end item/post you input address/longitude latitude. I have got my Ionic app the call the custom post type and would love to know if is possible to use the similar map pin feature. Any thoughts or feedback you could give me would be so helpful.

Failed To Post Order

I saw this issue when placing order with Paypal:

XHR finished loading: POST "https://www.domainname.com/wp-json/wc/v2/orders".

I haven't tested with Stripe yet.
2. It doesn't work with custom shipping Like Table Rate Shipping for WooCommerce. Customer can still place order without shipping option. It should be required.

https://codecanyon.net/item/table-rate-shipping-for-woocommerce/3796656?s_rank=3

The introslides are not scrollable.

Hey
If I add some texts to the intro slides I can not scroll down to see the texts.
I tried adding the to each item but it only scrolls to the down and bring back to the initial position again.