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


#1

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


  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">


              <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.


#2

I would suggest taking the time to go through the Tour of Heroes. The code you have posted here is a giant snarl that really needs to be rearchitected and reorganized, and I think that tutorial will get you in the right frame of mind for how to do that.


#3

Yes i did go through it and it did help!. But I would just need some help with respect to the questionn asked