Simple Shopping Cart In SharePoint Using Angular

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

• Create a picture library in SharePoint with available products to checkout.
• Create a web page with nice UI for users to pick the items and shop.
• Create appropriate HTML and angular js script for shopping cart,
• Create a list for storing the placed orders by users.
• Create workflows on orders list to get notification on place new orders(Optional)

  Procedure

• Create a picture library in SharePoint with available items to checkout.
  
  
  

• Add the required columns for the product, like name, price, available sizes etc.
  
  
  
  
• Now, create a page with nice UI for shopping, as below, to represent the available products and their information like price, size, etc.

• where the product picture, price, available sizes are coming from a SharePoint list. Let’s have a look at the retrieval script.

Script Code to show up UI as above

function GetListItems($scope){
    $.ajax({
        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*/
        method: "GET",
        async: false,
        headers: { "Accept": "application/json;odata=verbose" },
        success: function(data){
        $scope.ItemsFromOrders= data.d.results;/*binding the retrieved products to a $scope variable*/
        },
        error: function(sender,args){
            console.log(args.get_message());
        }
    });
}

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

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

$scope.AddToCart = function(CurrentItems) {
    $scope.SelectedItems.push({
        Title: CurrentItems.NameOfproduct,
        Price: CurrentItems.Price,
        AvailableSizesForCurItem: CurrentItems.AvailableSize.results,
        Quantity: 1,
        SelectedSize: ''
    });
}

Code for CartItems button

On click of CartItems button,

• Check for array items greater than 0
• Hide product gallery and show up the selected products
• Provide the buttons like ‘Continue shopping’ and ‘Procceed to check out’ as below

$scope.AllSelectedItems=function(ChosenItems){
       if($scope.SelectedItems.length>0){
       $scope.SelectedItemsForBilling=ChosenItems;
       $("#HideAfterCart").hide();
       $("#ShowAfterCart").show();
       }
       }

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

<div class="row" id="ShowAfterCart">
   <h2>My Shopping Cart</h2>
   <table>
      <tbody>
         <tr ng-repeat="SelectedItemForBilling in SelectedItemsForBilling track by $index">
            <td><strong>{{SelectedItemForBilling.Title}}</strong></td>
            <td>
               <strong>Select Size:</strong>
               <select ng-model="SelectedItemForBilling.SelectedSize">
                  <option value="">--Select Size--</option>
                  <option ng-repeat="AvlSize in SelectedItemForBilling.AvailableSizesForCurItem track by $index" value="{{AvlSize}}">{{AvlSize}}</option>
               </select>
            </td>
            <td><strong>Quantity:</strong> <input type="number" ng-model="SelectedItemForBilling.Quantity" /></td>
            <td><strong>Price:</strong>{{SelectedItemForBilling.Price|currency}}</td>
            <td><strong>Item Total Price:</strong>{{SelectedItemForBilling.Price*SelectedItemForBilling.Quantity|currency}}</td>
            <td><a ng-click="RemoveSelectedItem(SelectedItemForBilling)">Remove</a></td>
         </tr>
         <tr>
            <td colspan="4" class="ForSub"></td>
            <td>SubTotal: <input value="{{SubTotal()|currency}}" readonly/><input type="hidden" id="Sbtotal" value="{{SubTotal()}}" readonly/></td>
         </tr>
      </tbody>
   </table>
   <br>
   <div class="row"></div>
   <br/>
   <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>
</div>

See the result on screen as below

On click of cart items:

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

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

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,

Note

• When placing order button posting the data to the SharePoint list using bulk/batch post, please find the batch request code by downloading my code file
• You can use workflows on creating a record on SharePoint orders list to get notifications
• Please download all files and links properly for better understanding

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.