Introduction

This is a simple shopping cart in SharePoint that helps users to pick items from a gallery and place the order with a simple and nice UI.

Objective

Place an order of picked items from a picture library in SharePoint using AngularJS.

Overview Procedure
Script Code to show up UI as above

  1. function GetListItems($scope){
  2. $.ajax({
  3. url: _spPageContextInfo.webAbsoluteUrl+"/_api/web/Lists(guid'86D80345-773F-4EC0-A5E0-C01765723BDF')/Items?$select=FileRef,NameOfproduct,Price,AvailableSize",/* url of picture library by guid to get the product info*/
  4. method: "GET",
  5. async: false,
  6. headers: { "Accept": "application/json;odata=verbose" },
  7. success: function(data){
  8. $scope.ItemsFromOrders= data.d.results;/*binding the retrieved products to a $scope variable*/
  9. },
  10. error: function(sender,args){
  11. console.log(args.get_message());
  12. }
  13. });
  14. }

HTML code to show up the product info from $scope.ItemsFromOrders

  1. <div class="row bigge-bucks-store">
  2. <div class="col-lg-6 col-md-12 col-sm-12 col-xs-12" ng-repeat="ItemsFromOrder in ItemsFromOrders"><!--from script-->
  3. <div class="products-img">
  4. <img src='{{ItemsFromOrder.FileRef}}'/><!--image-->
  5. </div>
  6. <p><strong>{{ItemsFromOrder.NameOfproduct}}</strong><br/>{{ItemsFromOrder.Price|currency}} Product Bucks<br/><label ng-show="ItemsFromOrder.AvailableSize!=null">Available Sizes:</label><br/>
  7. <ul ng-repeat="AvailSize in ItemsFromOrder.AvailableSize.results">
  8. <li>{{AvailSize}}</li>
  9. </ul>
  10. <br/>
  11. <input type="button" class="AddCartBtn" ng-click="AddToCart(ItemsFromOrder)" value="ADD TO CART"/>
  12. <hr>
  13. </p>
  14. </div>
  15. </div>
Code for AddToCart

On click of "AddToCart" button, it is pushing the selected product info to an array and binding with custom properties as below

  1. $scope.AddToCart = function(CurrentItems) {
  2. $scope.SelectedItems.push({
  3. Title: CurrentItems.NameOfproduct,
  4. Price: CurrentItems.Price,
  5. AvailableSizesForCurItem: CurrentItems.AvailableSize.results,
  6. Quantity: 1,
  7. SelectedSize: ''
  8. });
  9. }

Code for CartItems button

On click of CartItems button,

  1. $scope.AllSelectedItems=function(ChosenItems){
  2. if($scope.SelectedItems.length>0){
  3. $scope.SelectedItemsForBilling=ChosenItems;
  4. $("#HideAfterCart").hide();
  5. $("#ShowAfterCart").show();
  6. }
  7. }

in the page, displays the below html on click of CartItems

  1. <div class="row" id="ShowAfterCart">
  2. <h2>My Shopping Cart</h2>
  3. <table>
  4. <tbody>
  5. <tr ng-repeat="SelectedItemForBilling in SelectedItemsForBilling track by $index">
  6. <td><strong>{{SelectedItemForBilling.Title}}</strong></td>
  7. <td>
  8. <strong>Select Size:</strong>
  9. <select ng-model="SelectedItemForBilling.SelectedSize">
  10. <option value="">--Select Size--</option>
  11. <option ng-repeat="AvlSize in SelectedItemForBilling.AvailableSizesForCurItem track by $index" value="{{AvlSize}}">{{AvlSize}}</option>
  12. </select>
  13. </td>
  14. <td><strong>Quantity:</strong> <input type="number" ng-model="SelectedItemForBilling.Quantity" /></td>
  15. <td><strong>Price:</strong>{{SelectedItemForBilling.Price|currency}}</td>
  16. <td><strong>Item Total Price:</strong>{{SelectedItemForBilling.Price*SelectedItemForBilling.Quantity|currency}}</td>
  17. <td><a ng-click="RemoveSelectedItem(SelectedItemForBilling)">Remove</a></td>
  18. </tr>
  19. <tr>
  20. <td colspan="4" class="ForSub"></td>
  21. <td>SubTotal: <input value="{{SubTotal()|currency}}" readonly/><input type="hidden" id="Sbtotal" value="{{SubTotal()}}" readonly/></td>
  22. </tr>
  23. </tbody>
  24. </table>
  25. <br>
  26. <div class="row"></div>
  27. <br/>
  28. <div class="row"><input type="button" class="AddCartBtn" ng-click="Continueshop()" value="Continue shopping..." style="float:left;font-size: large;"/><input type="button" class="AddCartBtn" ng-click="OrderTolist(SelectedItemForBilling)" value="PROCEED TO CHECKOUT" style="float:right;font-size: large;"/></div>
  29. </div>

See the result on screen as below

On click of cart items:

SharePoint

Click on Continue shopping.

It will hide the selected cart items temporarily and show up the gallery of products with existing selected products.

Code for remove

  1. $scope.RemoveSelectedItem = function (CurItem) {
  2. if ($scope.SelectedItems.length > 1) {
  3. var index = $scope.SelectedItems.indexOf(CurItem);
  4. $scope.SelectedItems.splice(index, 1);
  5. }
  6. };

Click on PROCEED TO CHECKOUT

If we select the available size then, it will post the selected cart items to the SharePoint list which we have created to store the placed orders

And get as below,
SharePoint
Note

Conclusion

This article may help to develop simple shopping cart using angular, also you can find several functions like dynamic calculations, dynamic remove record and bulk post/update to the SharePoint list.