How to Increment and decrements item quantity for a specific product from list of product list

Ionic Framework ionic-v3
1

Here is my html code

<ion-col col-12 class="pro-listing" *ngFor="let item of product_list ; let i=index" >
          <ion-avatar item-left (click)="openProductDetails(item)">
            <img src="{{item.image}}">
            <div class="off-bg">{{item.product_discount}}% off</div>
            <div class="vegstatus"><img src="assets/imgs/veg-symbol.png" ></div>
          </ion-avatar>
          <div class="avatar-content">
            <div class="expressimg"><img src="assets/imgs/express.png"></div>
            <!-- <strong>FRESHO</strong> -->
            <h2>{{item.product_name}}</h2>
           
            <div class="form-group">
            <ion-list>
                <ion-item class="form-control">
                  
                  <ion-select>
                    <ion-option  *ngFor="let price of item.price_list" [value]="price.price_id">{{price.price_quanty}}-{{price.price_quanty_unit}} Rs.{{price.net_price}}</ion-option>
                  </ion-select>
                </ion-item>
              </ion-list>
            </div>
            <div class="rdt">
           
          
                <ion-item class="redirect-bg" >
                
                    <ion-row>
                        <ion-col col-6>
                        <div class="special-price"> 
                            <span class="old-price"> Rs.{{item.product_mrp}}</span> 
                            <span class="price-label">Rs.{{item.product_net}}</span> 
                        </div>
                      </ion-col> 
                      <ion-col col-6 class="calculation" width-25>
                      <button class="add-btn" clear (click)="decrementQty()"><ion-icon name="remove-circle" ></ion-icon></button>
                      <span>{{item_qty}}</span>
                      <button class="add-btn" clear (click)="incrementQty()"><ion-icon name="add-circle" ></ion-icon></button>
                    </ion-col>
                    </ion-row>
                  </ion-item>
                </div>
          </div>
        </ion-col>

.ts

incrementQty(){
  this.item_qty += 1;
  console.log(this.item_qty + 1);
  }
  
  //decrements item
  
  decrementQty(){
  if(this.item_qty-1 < 1){
    this.item_qty = 1;
    console.log('item_1->' + this.item_qty)
  }
  else{
    this.item_qty -= 1;
    console.log('item_2->' + this.item_qty);
  }
  }

the number gets incremented and decremented but the price gets incremented when i CLick on the (+) and (-) icon but it gets incremented and decremented for all the items in the grid…

but i want to for a specific product

Screenshot_7

Thanks in advance

2

You are calling the function on each element in the array. Instead you should specify the index of that the element.
Secondly, item_qty should be key for each object in the array the same way you have item.product_name for each element.
item.qty.

Here is the explanation:

You can pass the element or the index.
Here I am passing the index.
To pass the element replace i with item.
<button class="add-btn" clear (click)="decrementQty(i)">

/* if you pass item then do decrementQty(item) */

.ts

 decrementQty(index:number){
/*. if item passed then item.qty. */
  if(this.product_list[index].qty-1 < 1){
    this.product_list[index].qty = 1;
    console.log('item_1-> ' + this.product_list[index].qty)
  }
  else{
    this.product_list[index].qty -= 1;
    console.log('item_2-> ' + index +  '  '+this.product_list[index].qty);
  }
  }

Do the same for incrementQty.

3

Thanks for your response please can you send the html code how to represent the increment decrement value in page
below my Json response

product_id	123
product_name	my fruitz
availability	Yes
available_quantity_unit	null
nutrition	
benefits	
description	<p>veg</p>
express_delivery	No
express_delivery_slot	
offer_zone	Yes
time_slot	Today Evening
image	http://192.168.0.12/dhupguri_bazaar/site/assets/upload/product/large/000390400_1554977506.jpg
multiple_image	[…]
product_mrp	5000
product_discount	2
product_net	4900.00
available_quantity	500
price_list	[…]
qty	1
4

Here is the full card page design for ionic and woocommerce amd increment and decrements:
.html

<ion-header>

  <ion-navbar>
    <ion-title style="text-align: center"> Keep Shopping </ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-card class="card-discreption">
    <ion-grid>
        <ion-row>
            <ion-col>Your Cart Description</ion-col>
        </ion-row>
        <ion-row [hidden]="!showEmptyCartMessage">
            <ion-col>There are no products in your cart!</ion-col>
          <ion-col style="color: red"> Please Note: At least one product is required here to go ahead! </ion-col>
        </ion-row>
    </ion-grid>
</ion-card>


<ion-card *ngFor="let item of cartItems; let i = index">
    <ion-item color="light">

        <ion-thumbnail item-left>
            <img [src]="item.product.images[0].src" class="img-width" />
        </ion-thumbnail>
        <h2>{{ item.product.title }}</h2>

        <p *ngIf="item.variation"><span *ngFor="let att of item.variation.attributes">{{ att.option | titlecase }} &nbsp;</span></p>

        <p>{{ item.qty }} •
            <span *ngIf="!item.variation">{{ item.product.price }}</span>
            <span *ngIf="item.variation">{{ item.variation.price }}</span></p>

    </ion-item>

    <ion-item class="compact">
        <ion-row no-padding>
            <ion-col col-8>
                <button ion-button icon-only clear color="danger" (click)="changeQty(item, i, -1)">
          <ion-icon name="remove-circle"></ion-icon>
        </button>
                <button ion-button clear color="danger"> {{ item.qty }} </button>
                <button ion-button icon-only clear color="danger" (click)="changeQty(item, i, 1)">
          <ion-icon name="add-circle"></ion-icon>
        </button>
            </ion-col>
            <ion-col col-4 style="text-align: right;">
                <button ion-button small outline (click)="removeFromCart(item, i)" color="danger" style="width: 64px;">Remove</button>
            </ion-col>
        </ion-row>
    </ion-item>
</ion-card>


<ion-grid>
    <ion-card>
        <ion-grid>
            <ion-row>
                <ion-col col-1>

                </ion-col>
                <ion-col col-4>
                    <b>TOTAL</b>
                </ion-col>
                <ion-col col-3>

                </ion-col>
                <ion-col col-3>
                    <b> ${{ total }} </b>
                </ion-col>


            </ion-row>
        </ion-grid>
    </ion-card>

</ion-grid>
</ion-content>

<ion-footer>
  <ion-toolbar>
      <ion-grid>
          <ion-row>
              <ion-col>
                  <button ion-button color="danger" outline block (click)="closeModal()">Back</button>
              </ion-col>
              <ion-col>

        <button ion-button color="danger" block (click)="checkout()" [disabled]="showEmptyCartMessage">Checkout</button>
              </ion-col>
          </ion-row>
      </ion-grid>
  </ion-toolbar>
</ion-footer>

.ts file:

import { Component } from '@angular/core';
import {NavController, NavParams, ViewController, ToastController, LoadingController} from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { CheckoutPage } from '../checkout/checkout';
import { LoginPage } from '../login/login';

@Component({
  selector: 'page-cart',
  templateUrl: 'cart.html',
})
export class CartPage {
  cartItems: any[] = [];
  total: any;
  showEmptyCartMessage: boolean = false;
  constructor(public navCtrl: NavController, public navParams: NavParams, private loadCtrl: LoadingController ,public storage: Storage, public viewCtrl: ViewController, public toastController: ToastController) {
    const run = this.loadCtrl.create({content: 'Please wait...'});
    run.present();
    setTimeout(() => {
      this.total = 0.0;
      this.storage.ready().then(()=>{
        this.storage.get("cart").then( (data)=>{
          this.cartItems = data;
          console.log(this.cartItems);
          if(this.cartItems.length > 0){
            this.cartItems.forEach( (item, index)=> {
              if(item.variation){
                this.total = this.total + (parseFloat(item.variation.price) * item.qty);
              } else {
                this.total = this.total + (item.product.price * item.qty)
              }
            })
          } else {
            this.showEmptyCartMessage = true;
          }
        })
      })
      run.dismissAll();
    }, 2000)
    this.test();

  }
  removeFromCart(item, i){
    const run = this.loadCtrl.create({content: 'Please wait...'});
    run.present();
    setTimeout(() => {
      let price;
      if(item.variation){
        price = item.variation.price;
        run.dismissAll()
      } else {
        price = item.product.price;
        run.dismissAll();
      }
      let qty = item.qty;
      this.cartItems.splice(i, 1);
      this.storage.set("cart", this.cartItems).then( ()=> {
        this.total = this.total - (price * qty);
      });
      if(this.cartItems.length == 0){
        this.showEmptyCartMessage = true;
        run.dismissAll();
      }
    }, 1000)

  }
  closeModal(){
    const run = this.loadCtrl.create({content: 'Please wait...'});
    run.present();
    setTimeout(() => {
      this.viewCtrl.dismiss();
      run.dismissAll();
    }, 1000)
  }
  test() {
    const run = this.loadCtrl.create({content: 'Please wait...'});
    run.present();
    setTimeout(() => {
      this.storage.get("enrolled").then( (data) => {
        console.log(data)
      })
    }, 20)

  }
  checkout(){
    const run = this.loadCtrl.create({content: 'Please wait...'});
    run.present();
    setTimeout(() => {
      this.storage.get("userLoginInfo").then( (data) => {
        if(data != null){
          this.navCtrl.push(CheckoutPage);
          run.dismissAll();
        } else {
          this.navCtrl.push(LoginPage, {next: CheckoutPage})
          run.dismissAll();
        }
      })
    }, 2000)

  }
  changeQty(item, i, change){
    const run = this.loadCtrl.create({content: 'Please wait...'});
    run.present();
    setTimeout(() => {
      let price;
      if(!item.variation) {
        price = item.product.price;
        run.dismissAll();
      }
      else {
        price = parseFloat(item.variation.price);
        run.dismissAll();
      }
      let  qty = item.qty;
      if(change < 0 && item.qty == 1){
        return;
      }
      qty = qty + change;
      item.qty = qty;
      item.amount = qty * price;
      this.cartItems[i] = item;
      this.storage.set("cart", this.cartItems).then( ()=> {
        this.toastController.create({
          message: "Cart Updated.",
          duration: 2000,
          showCloseButton: true
        }).present();
      });
      this.total = (parseFloat(this.total.toString()) + (parseFloat(price.toString()) * change));
    }, 5)
  }
}

.scss

page-cart {

ion-header.header.header-md ion-navbar.toolbar.toolbar-md div {
    background: purple !important;
    color: white !important;    
} 
page-cart .item-md-light, page-cart .item-divider-md-light {
    color: #000;
    background-color: #fff !important;
    border-top: 2px solid #f53d3d;
    border-radius: 1px;
    border-bottom: 1px solid #333 !important;
    padding: 8px 15px !important;
}
.item-md-light, .item-divider-md-light {
    background-color: #ffffff !important;
    border-top: 3px solid gold;
    border-radius: 1px;
    border-bottom: 1px solid #333 !important;
    padding: 8px 15px !important;    
}    
.label-md {
    margin: 0px 8px 0px 0 !important;
} 
button.disable-hover.button.button-md.button-outline.button-outline-md.button-small.button-small-md.button-outline-md-danger {
    margin-top: 8px;
}    
.input-wrapper {
    text-align: right;
}    
ion-item.compact.item.item-block.item-md ion-col.col {
    padding: 0 !important;
}    
 ion-card.card-discreption {
    border-top: 1px dashed black;
    border-bottom: 1px dashed black;
    border-radius: 8px;
    border-left: none;
    border-right: none;
}   
.button-outline-md-danger {
    border-color: gold !important;
    color: gold !important;
}    
.button-clear-md-danger {
    color: gold !important;
}    
.button-md-danger {
    color: #fff;
    background-color: purple !important;
}
}

Hope this will help!

1 Like