CODEWITHSUNDEEP
javascriptangularjsshopping-cart
Chesneycar
Chesneycar

Reputation: 563

AngularJS update a shopping cart on button click

I need some help updating my view after I update my controllers $scope.products variable.

Basically when the user clicks on the 'Add to cart' button it needs to update the cart contents view. I have pasted the code below.

I have commented at the particular line where I want to update my cart view :

 //TBD : update the cartController view, how??

any help much appreciated thanks!

    'use strict';

    var giftShopApp = angular.module('giftShopApp', []);

    giftShopApp.factory('storeFactory', function($http) {
      return {
        getProducts : function(callback) {
          //$http.get('php/db.php?action=products').success(callback);
          $http.post('php/db.php', { 'action' : 'products' }).success(callback);
        },
        getProductCategories: function(callback) {
          $http.post('php/db.php', {'action': 'product_categories'}).success(callback);
        },
        getProductSuppliers: function(callback) {
          $http.post('php/db.php', {'action': 'product_suppliers'}).success(callback);
        },
        addProduct: function(product, callback) {
          $http.post('php/db.php', {'action': 'addProduct', 'params': product}).success(callback);
        },
        updateProduct: function(callback) {
          $http.post('php/db.php', {'action': 'updateProduct'}).success(callback);
        },
      }
    });

    giftShopApp.factory('cartFactory', function($http) {
      return {
        getCartItems : function(callback) {
          $http.post('php/db.php', {'action' : 'getCartItems' }).success(callback);
        },
        clearItems : function(callback) {
          $http.post('php/db.php', {'action' : 'clearCart' }).success(callback);
        },
        addItemToCart: function(params, callback) {
          $http.post('php/db.php', {'action': 'addItemToCart', 'params' : params}).success(callback);
        }
      }

});

giftShopApp.controller('StoreController', function($scope, storeFactory, cartFactory) {
  storeFactory.getProducts(function(results) {
    $scope.products = results.products; 
  });
  $scope.addToCart = function(id, price, qty){
   //TBD: Check stock level on PHP side
   console.info('qty');
   console.log(qty);
   var params = {'product_id': id, 'qty': qty, 'price': price}; 
   cartFactory.addItemToCart(params, (function(results) {
     //TBD : update the cartController view, how??
     if (results.success) {
       console.log('update cart');
     }
   }));
  };
});

giftShopApp.controller('CartController', function($scope, cartFactory) {
  $scope.cart_total = 0; 
  cartFactory.getCartItems(function(results) {
    var items = results.rows;
    var cart_total = 0;
    $scope.total_amount = 0;
    $scope.items = items; 
    items.forEach(function(o){
      cart_total += parseInt(o.total_amount,10);
    });
    $scope.cart_total = cart_total;
  });
  //checkout
  //increase qty
  //decrease qty
  $scope.clearItems = function() {
    //$scope.items = [];
  }
});

UPDATE : Added the shopping cart view

<div class="span2 pull-right"  style="width: 200px;" ng-controller="CartController">
  <div class="nav-list">
    <div id="BSCart" class="collections ui-droppable">
      <div class="ShoppingCartHead" style="">
        <img style="width: 28px;" id="BSC_animation_cart" class="slideUp" src="../images/shoppingcart_yellow.png"></img>
          Shopping
      </div>
      <div class="ShoppingCart" style="margin-bottom: 10px;" ng-repeat="item in items">
        {{item.product_name}}
        <br></br> 
        <div class="pull-right" >{{item.total_qty}} x {{item.product_price}}</div>
      </div>
      <div class="ShoppingCartFoot">
        <div id="BSC_animation_count" class="slideDown">
          <!-- Total 3 products -->
          Total items R {{cart_total}}
          <br></br>
          <div class="pull-right"></div>   
        </div>
        <br></br>
        <!-- add route here to full shopping cart href=#/cart -->
        <a href="#/cart">View shopping cart / Checkout</a>
      </div>
    </div>
  </div>
</div>

Upvotes: 0

Views: 1531

Answers (1)

Jayram
Jayram

Reputation: 19578

Use ng-model in your view so that the values will automatically be updated. Or else if you are pushing multiple products in the shopping kart you could use ng-repeat to have a view of all the items present in the $scope.products

Upvotes: 1

Related Questions