I have a problem that I can't solve.
I created an ecommerce with woocommerce. I use onesignla to send update notifications etc.
But I want each user to have their own notification when the order changes status eg:
From Received to Completed ...
I have tried with localnotification but unsuccessfully is anyone able to help me?
my-orders-page.ts
orderstatus: any;
orderChangeStatus(){
if (this.orderstatus == 'processing') {
this.LocalNotifications.schedule({
title: 'My first notification',
text: 'flight is landed',
foreground: true
});
}
if (this.orderstatus == 'completed') {
this.LocalNotifications.schedule({
title: 'My first completed',
text: 'flight is landed',
foreground: true
});
}
}
html
</ion-row>
<ion-row [class.pending]="order.status=='pending' || order.status=='refunded'"
[class.cancel]="order.status=='cancelled' || order.status=='failed'"
[class.inprocess]="order.status=='processing'" [class.complete]="order.status=='completed'">
<ion-col size="6">
{{'Status'|translate}}
</ion-col>
<ion-col class="ion-text-right" size="6">
<strong>{{order.status|translate}}</strong>
</ion-col>
</ion-row>
Ionic Local Notifications is for notifications that are triggered from the app itself, without push notifications server (for example, a calendar reminder). They're not suitable for push notifications unless you have set your own push notification framework with background workers.
You should instead use Ionic OneSignal plugin. Find out the documentation here: https://ionicframework.com/docs/native/onesignal
I cannot help you more at this stage, you should try to use this plugin and if you have further problems, please ask another question.
Related
i'm beginner in Ionic
the download function in my website doesn't work (it doesn't show anything) if the web is run in an iframe embedded in IONIC 4, like this:
<ion-content fullscreen>
<iframe src="http://www.myweb.com" scrolling="yes" frameBorder="0" allowfullscreen></iframe>
</ion-content>
but if the web is run on a browser such as opera, chrome, mozilla, and others, the download function works fine.
How to solve this problem, thanks...
Instead of using in you app, try using inAppBrowser:
installation:
npm install cordova-plugin-inappbrowser
npm install #ionic-native/in-app-browser
ionic cap sync
then in ts file:
import { InAppBrowser } from '#ionic-native/in-app-browser/ngx';
openPage(){
let browser = this.iab.create('http://www.myweb.com', '_blank'
, {
lefttoright: 'yes',
hideurlbar: 'no',
fullscreen: 'yes',
hardwareback: 'yes',
toolbarcolor: '#145a7b',
zoom: 'no',
useWideViewPort: 'no',
hidenavigationbuttons: 'no',
footer: 'yes',
message: "Hello",
toolbar : 'yes',
location: 'yes'
}
);
}
In html:
<ion-button (click)="openPage()">Open Page</ion-button>
I am trying to take pictures from an Ionic 4 PWA application.
I read this docs from Ionic team and implemented all the proposed steps... (https://capacitor.ionicframework.com/docs/guides/ionic-framework-app/)
The (weird) result can be seen in the picture below:
When the camera prompt seen in this picture is shown, Chrome console prints out an object called MediaStreamTrack with this values:
kind: "video"
id: "6250dfa4-d9aa-4a87-ab9f-ae085f929c3f"
label: "screen-capture-recorder"
enabled: true
muted: false
onmute: null
onunmute: null
readyState: "live"
onended: null
contentHint: ""
proto: MediaStreamTrack
When I click in the button to take picture, I can see this message:
Unable to take photo! DOMException: setOptions failed - pwa-camera.entry.js:259
I have used the sample code the Ionic team presented in the docs:
export class Tab2Page {
photo: SafeResourceUrl;
constructor(
private sanitizer: DomSanitizer
) { }
async takePicture() {
const image = await Plugins.Camera.getPhoto({
quality: 100,
allowEditing: false,
resultType: CameraResultType.DataUrl,
source: CameraSource.Camera
});
this.photo = this.sanitizer.bypassSecurityTrustResourceUrl(image && (image.dataUrl));
}
}
And...
<ion-content>
<img [src]="photo">
<ion-fab vertical="bottom" horizontal="center" slot="fixed">
<ion-fab-button (click)="takePicture()">
<ion-icon name="camera"></ion-icon>
</ion-fab-button>
</ion-fab>
</ion-content>
I changed everything in this code trying to figure out what is going wrong, but nothing seem to fix this behavyour.
Can anyone point me in the right direction?
My Chrome version is 79.0.3945.79
Thanks in advance.
In Vue 2, I'm implementing Github Social Registration and login with my app.
In my Register.vue, I have button click that would lead to Github
<button class="btn github" #click="registerWithGithub()"><i class="fab fa-github fa-fw"></i> Register with Github</button>
registerWithGithub() method would look like this
registerWithGithub () {
window.location.href = `https://github.com/login/oauth/authorize?scope=user:email&client_id=${this.githubClientId}`
}
and I have configured a route to get callback from Github?
How do we manage those callbacks in Vue?
I have created a view component called GithubCallback.vue
and my route would look like
{
name: 'githubCallback',
path: '/auth/github',
component: GithubCallback
},
<template>
<div>callback</div>
</template>
<script>
export default {
name: 'githubCallback',
mounted() {
}
}
</script>
However, clueless on how to handle callback response returned from Github.
Try vue-authenticate plug-in. It helped me solve the same problem with Facebook
How do I find element in Protractor to click on a button (login button).... I have entered login name and Password but no luck clicking on my "log in" button. My code does not have model, Repeater , ID or class for the login section to enter the App.
Thanks in advance for the help. Ho do I format the actual code so I can run this using Protratcor?
Following is my code:
<div class="btn-panel">
div>
<div ng-show="loginAsAdmin" hs-gesture="{handler: goToPin}" class="ng-hide">
<i class="icon-back-round"></i>
</div>
!--<div class="brad-all attention" hs-gesture="{handler: clearLogin}">
i class="icon-close-round"></i>
</div>-->
<div class="btn-ok" hs-gesture="{handler: doSubscribe}" localize="(!canSubscribe || loginAsAdmin) ? 'Log In' : 'Subscribe'">Log In</div>
</div>
</div>
<div ng-show="loginAsAdmin" hs-gesture="{handler: goToPin}" class="ng-hide">
<i class="icon-back-round"></i>
</div>
<div class="btn-ok" hs-gesture="{handler: doSubscribe}" localize="(!canSubscribe || loginAsAdmin) ? 'Log In' : 'Subscribe'">Log In</div>
Edit for future users (This command was a workaround rather than a direct solution to his original problem of not finding/clicking button):
You could also try submitting the form by hitting enter (you may want to do this while within the password field) - browser.driver.actions().sendKeys(protractor.Key.ENTER).perform();
Another Edit: This also just occurred to me - there is another option to simulate a click event: browser.driver.actions().mouseDown(loginBtn).mouseUp().perform();
Original Post
You say your code does not have an ID or class, but I see your Login links having the class 'btn-ok'? Maybe I'm misunderstanding but you could try using cssContainingText:
var loginBtn = element(by.cssContainingText('.btn-ok', 'Log In');
loginBtn.click();
That will locate the element with a class of 'btn-ok' with the specified string of 'Log In'
Source: https://angular.github.io/protractor/#/api?view=ProtractorBy.prototype.cssContainingText
#kevin Presuming that
' <div class="btn-ok" hs-gesture="{handler: doSubscribe}" localize="(!canSubscribe || loginAsAdmin) ? 'Log In' : 'Subscribe'">Log In</div>
</div>'
is the tag that holds the your login button and also only clicking is what you need. following might work for you:
element(by.xpath("//div[contains(#class,'btn-ok') and contains(text(),'Log In')]")).click();
You can select it by className using element(by.className('btn-ok')) or element(by.css('.btn-ok')) and then simply throw a .click() on the end and voila:
element(by.css('.btn-ok')).click(); or $('.btn-ok').click()
Hey I was wondering if someone could help me out in how can I print a specific item's title after clicking on their link. My code is essentially the default menu start:
In my mainPage I have:
<ion-view view-title="main">
<ion-content>
<ion-list>
<ion-item ng-repeat="page in sidePages" href="#/abstractMain/mainPage/{{page.id}}">
{{page.title}}
</ion-item>
</ion-list>
</ion-content>
</ion-view>
Each item is linked to my Page view:
<ion-view view-title="Page">
<ion-content>
<!-- display {{page.title}} -->
<h1>Hello</h1>
</ion-content>
</ion-view>
And my controller for sidePages is:
.controller('pageCtrl', function($scope){
$scope.sidePages = [
{ title: 'name 1', id: 1 },
{ title: 'name 2', id: 2 },
{ title: 'name 3', id: 3 },
{ title: 'name 4', id: 4 },
{ title: 'name 5', id: 5 },
{ title: 'name 6', id: 6 }
];
});
I'm not sure how to show each sidePages title when you click at their page, because right now they all just print "Hello". Is there a way to do this or do I have to rethink my design?
I think you should rethink your design. Here is one possible way:
Create a service which holds your pages.
Create two controllers: one for the page list and one for the opened page. Inject the created service into both controllers. You have access to the array of pages through this service.
You could add a getAll() and a get(id) method to the service. It's straightforward what are these doing, right?
In the controller of the pageList: $scope.sidePages = PagesService.getAll() and the controller of the single page: $scope.page = PagesService.get(id). You find the id of the opened page in the $stateParams object (you need to inject that too in you controller).
I hope this is enough to get you started at least.