Linking to an external URL and opening in browser

ionic-v1
1

Hi,

Started developing my first app. It displays all the products from our online store. I then wish to link to our store so they can buy on the individual product pages which I have now setup in Ionic. We have all the products loaded in a JSON file.

If the JSON entry is productURL for each product

How do I create a button that says “Buy Now” which then clicks through to the url relating to that product using the browser of the phone.

<ion-header-bar class=“bar-positive”

<h2 class = "title" 
<ion-view>
    <ion-content>
      <ion-list class= "list inset"> 
       <ion-item class="item-text-wrap" ng-repeat="item in productdata | filter: { productName:whichproduct }">
        <h2>{{item.productName}}</h3>
        <h3>{{item.productCategory}}</h3>
        <p>{{item.productDescription}}</p>
       </ion-item>
      </ion-list>
    </ion-content>
</ion-view>
2

add an ordinary html button in your repeated element.
add ngClick direktive with a function on your scope, where you pass the url.
https://docs.angularjs.org/api/ng/directive/ngClick

in that function you can make

window.open(URL, '_system');
3

@bengtler is correct but in addition to that you also need to install the inappbrowser plugin so it will actually open up in safari or chrome, don’t need to do anything else just install the plugin

http://ngcordova.com/docs/plugins/inAppBrowser/

2 Likes
4

i think you do not need inappbrowser… if you are using inappbrowser you do not leave the “app context” better said the webview.

But i tested it on android… you get asked how you want to open the url (which browser if no standard is set)

5

Ahh never tested it in Android but in iOS if you just use _system it opens it by default in the embedded webview and that just breaks everything since you can’t go back and the statusbar is still showing in the header.

However installing InAppBrowser is a quick fix since it forces _system to open up in safari in iOS. You can use it to open up urls Inside the App as well but is also has this feature where on iOS it forces _system opens to open in safari.

1 Like
6

Hello Jawache

How to open the url inside the apps? I tried inAppBrowser but its invoke the android’s default browser

7

@blazetama use ‘_blank’ param in open method.

cordova.InAppBrowser.open('https://www.page.com', '_blank', options);

You can even hide navigation bar passing ‘location=no’ to options string