Shopping cart + Storage + add and remove quantity for specific item in ionic 3

@shashankverma12 wrote:

I am working on this shopping cart module for one of my projects and this is the first time I am working on feature lie Shopping cart. Here I have a button for every item and once I click on one item I want to display the + and - buttons in order to increase/decrease the quantity for that specific item. Now what is happening in my scenario is I am able to display buttons for all items u I am failing to add a specific item, it adds all the items and if i go to remove it doesn’t do anything (It reflects all items), and quantity for that item needs to be stored/removed/updated locally. Here is my code snippets.

my .ts file

export class RestdetailsPage {
  singleRestDetails:any;
  imgResponse:any;
  detailsRestaurantResponse:any;
  scheduleRestaurantResponse:any;
  kitchenRestaurantResponse:any;
  displayItemsResponse:any;
  alive: boolean;
  counter:any = 1;
  isenabled:boolean = true;
  sectionID:any;
  storageValue:any;
  private quantities: number[];
  removeQuantity:any;
  constructor(public navCtrl: NavController, public navParams: NavParams,public http:Http,
    private storage: Storage) {
    this.singleRestDetails = this.navParams.get("nextSingleRestDetail");
    console.log("IdEs", this.singleRestDetails);
    console.log("SectionId", this.sectionID);
    this.imageSlider();
    this.restaurantDet();
    this.loadSchedule();
    this.loadKitchenTime();
    this.displayItemName();

   }

  doRefresh(refresher) {
    this.imageSlider();


    setTimeout(() => {
      console.log('Async operation has ended');
      refresher.complete();
    }, 2000);
  }


  ionViewDidLoad() {
    console.log('ionViewDidLoad RestdetailsPage');
  }
  imageSlider(){
    let circleUrl = 'https://URLNAME/foldername/filename.php?mode=mode&id='+this.singleRestDetails;
    let circleData: Observable<any> = this.http.get(circleUrl);
     circleData.subscribe( data => { this.imgResponse = data.json();
       this.imgResponse = this.imgResponse; 
       console.log(this.imgResponse);
 });
  }
  restaurantDet(){
    let circleUrl = 'https://URLNAME/foldername/filename.php?mode=mode&id='+this.singleRestDetails;
    let circleData: Observable<any> = this.http.get(circleUrl);
     circleData.subscribe( data => { this.detailsRestaurantResponse = data.json();
       this.detailsRestaurantResponse = this.detailsRestaurantResponse; 
       console.log(this.detailsRestaurantResponse);
   });
  }

  loadSchedule(){
    let circleUrl = 'https://URLNAME/foldername/filename.php?mode=mode&id='+this.singleRestDetails;
    let circleData: Observable<any> = this.http.get(circleUrl);
     circleData.subscribe( data => { this.scheduleRestaurantResponse = data.json();
       this.scheduleRestaurantResponse = this.scheduleRestaurantResponse; 
       console.log("kitchen time",this.scheduleRestaurantResponse);
   });
  }

  loadKitchenTime(){
    let circleUrl = 'https://URLNAME/foldername/filename.php?mode=mode&id='+this.singleRestDetails;
    let circleData: Observable<any> = this.http.get(circleUrl);
     circleData.subscribe( data => { this.kitchenRestaurantResponse = data.json();
       this.kitchenRestaurantResponse = this.kitchenRestaurantResponse; 
       console.log("preorder",this.kitchenRestaurantResponse);
   });
  }

  enterPreorder(item){
    console.log("enterPreorder",item);
  }
  enterSchedule(data){
    console.log("enterSchedule",data);
  }
  enterSection(id){
    console.log("enterSchedule",id);
  }
  displayItemName(){
    let circleUrl = 'https://URLNAME/foldername/filename.php?mode=mode&id='+this.singleRestDetails+'&item=Y';
    let circleData: Observable<any> = this.http.get(circleUrl);
     circleData.subscribe( data => { this.displayItemsResponse = data.json();
       this.displayItemsResponse = this.displayItemsResponse; 
       console.log("iTEMS",this.displayItemsResponse);
       this.storageValue = this.displayItemsResponse[0].ITEM;
       console.log("iTEMSARA",this.storageValue);
       this.quantities = new Array(this.counter);

   });
  }

  addQuantity(quantity,counter){
    for (var key in this.storageValue){
          if(this.storageValue[key] === quantity){
            this.storageValue[key].counter += counter;
            console.log(this.storageValue[key].count);
            return;
          }
          this.counter = this.counter+1;
          this.quantities.push(quantity[key]);
          console.log(this.quantities.push(quantity[key]));
    }
  } 

  subQuantity(quantity,counter){

    for (var key in this.storageValue){
      if(this.storageValue[key] === quantity){
        this.storageValue[key].counter--;
        console.log(this.storageValue[key].counter--);
        if(this.storageValue[key]){

        }
        break;
      }

      console.log(this.storageValue[key].counter--);

}

  }

}

my html file

<ion-content>

        <ion-grid *ngFor ="let displayItem of displayItemsResponse">
           <p>{{displayItem.NAME}}</p> 

         <ion-item  *ngFor ="let displayItems of displayItem?.ITEM; let i =index">

        <div class = "col-md-7">
                <ion-thumbnail item-start *ngIf="displayItems.PIC != '';else image">
                    <ion-thumbnail item-start>
                        <img src="{{displayItems.PIC}}">
                      </ion-thumbnail>
                  </ion-thumbnail>

                  <ng-template #image>

                  </ng-template>


               <h2>{{displayItems.ITEMNAME}}</h2>
                <p>Rs: {{displayItems.RATE}}</p> 
       </div>
       <div class="col-md-5">
          <div *ngIf="alive">
            <!-- <button item-end (click)="subQuantity(i)" [disabled]="isenabled<=0" item-right><ion-icon name="remove-circle" ></ion-icon></button>
            <ion-input type="number" min="1" [value]="quantities[i]" [(ngModel)]="quantities[i]"></ion-input>
            <button item-end (click)="addQuantity(i)"item-right><ion-icon name="add-circle" ></ion-icon></button> -->

              <ion-icon name="add-circle" (click)="addQuantity(displayItems.ITEMID)" item-right></ion-icon>
             {{counter}}
              <ion-icon name="remove-circle"(click)="subQuantity(displayItems.ITEMID)" item-right></ion-icon>

          </div>

          <div *ngIf="!alive"> 
            <button ion-button item-end (click)="alive = !alive">Add</button>
          </div>
          <!-- Customisable -->
        </div>
         </ion-item> 


 </ion-grid>

</ion-content>

I am a beginner and learning Ionic. Your guidance will be appreciated.

Posts: 2

Participants: 2

Read full topic