Creating Wishlist

Hi,
I need to create a wishlist on ionic3 magento application.When i added to wishlist the button should have to change color.But while reloading the page it looks like the same,any one can help me on this?
Here is my code
HTML

TS

addtoWishlist(a){
    console.log(a);
    if(a==true){
        if(this.customerid){
            this.wishListSer.addtoWishlist(this.customerid,this.productid)
                .subscribe((res:any)=>{
                    console.log(res);
                    if(res.sucess=true){
                        this.messageSer.addedToWishlist();
                    }
            })
        }
        this.heart_clicked=true;
    }else{
          this.heart_clicked=false;
    }
  
}

Can you please post your HTML ?

What you could do is to create a class in CSS and if you click the button the class is added to this certain card or whatever you have.

HI@cherry,Thanks for your reply
HTML
<div class=“heartDiv” *ngIf=“customerid”>
<ion-icon name=“heart-outline” class=“hearticon” *ngIf="!heart_clicked"
(click)=“addtoWishlist(true)”>
<ion-icon name=“ios-heart” class=“hearticon” *ngIf=“heart_clicked”
(click)=“addtoWishlist(false)”>

1 Like

Hi@cherry
i want to change the heart outline icon to ios-heart.And the change have to be retained while reloading the page.Now the item added to wishlist showing again as not marked.

You are confusing me a bit now.

If you push the button the colour already changes or does not change ?

@cherry Color changes thats working.But when i refresh the page the color chnages as previous heart-outline.Hope u understood

Alright, yes I can imagen why it doesn’t work.

Do you use a Backend where you save the users activity ? If not then you have to either save it in the local storage or start with a Backend (Firebase would be easy to start with).

1 Like

@cherry there is no way without backend or local storage?

Not really, since you want to build a user based system you have to use a backend wich handles all the user activity.

The local storage would only work then for yourself but thats more like a click dummy then.

1 Like

@cherry Iam using Magento as my back end .

@cherry Anyway thanks for your reply

hi@vibinflogesoft, i wanna code about, when i click a wishlist the item deatils will be stored in server.
pls give a solution for that.

@muthukannan, At presnet iam storing the wish list item in my native storage.Other wise u have to use a post request to save the item to wishlist

@muthukannan If u want to use native storage,You can use the setvalue method to store the item in ionic native storage.

Please send a code for that

@muthukannan please send your requirement screenshot.

I want a code for whislist. When I click a whis list item details will
store in api server. That one I wanna code from u

@muthukannan I think U will get the Product id in the product details page.
Do you have an api for creating wishlist or adding product to wish list?
HTML

<ion-icon name=“ios-heart” (click)=“addtoWishlist()”>
TS
addtoWishlist(){
this.http.post(url,params)
.subscribe((res:any)=>{
console.log(res,‘success’)
},err=>{
console.log(err,‘error’)
})
}

Use params as your unique productid or something else
Hope U need some thing like this…