Build the Cart and Popup Functions

Sample Projects and Use Cases > Use Case: 3D-Guided Service Instructions > 3D-Guided Service Instructions 301: Add Pricing Data and a Shopping Cart to a Model > Build the Cart and Popup Functions

A very important part of this tutorial is adding functionality to the popup so that when you click on a part, there are clickable buttons to add the part to a cart, view a disassembly sequence, or continue inspecting the model. Before they can be added to the popup, though, these buttons must have functions that can be tied to them. Functions will be created in this section for adding a part to the cart and starting the disassembly sequence. The cart contains information that is stored in the cartRepeater widget and grows as parts are added to the order.

The complete code for this section can be found in Appendix 3 in GitHub.

Open Home.js. In order to interact with the model through button clicks in the popup, the following functions must be created. These functions will each be tied to a button.

Function

Description

Code

addToCart

Adds the selected parts to the cart. This function is created as a standalone function.

Complete the following steps:

1. Below the hilite function, initialize the cartLabel application parameter to just say Cart.

This will be the beginning text in the labelCart label and will change as items are added to the cart. Also, initialize an empty object named cart. Add the following below the hilite function:

$scope.app.params.cartLabel = "Cart"; // set cartLabel app parameter to be "Cart". This will bind to the Text property for the labelCart label
$scope.cart = {}; // declare empty object called cart

2. Start the addToCart function. A variable called cartItem is created and initialized to be the value of the property in cart that is equal to the part that is currently selected.

The first time that a part is selected, this property will be undefined because the cart was initialized as an empty object.

If the current selection has not yet been added to the cart object, otherwise called undefined, then cartItem will become populated with the itemCount, itemNumber, itemName, and priceInfo application parameters for the selected part.

All of these application parameters will be set as property values inside the cartItem object. If the item has already been added to the cart once, then the only property in cartItem that will change is the itemCount parameter, which will increase by 1, since another instance of that same part has been added to the cart.

After this if statement, the cartItem object and its properties will be added to the cart object. This process helps differentiate between the different parts that are added to the cart.

Add the following after $scope.cart = {}; // declare empty object called cart:

//
// function for adding a selected part to the cart   
$scope.addToCart = function () {

  //
  // create variable called cartItem that is equal to the value of the currentSelection property of the cart object. 
  //If the selected part hasn't been added to the cart yet, then the cartItem variable will be undefined and populate the cartItem variable with the current 
  //information about the part so that cartItem becomes an object. If the selected part has already been added, then the count property of cartItem will increase by the item count
  var cartItem =$scope.cart[$scope.currentSelection];
  
  if (cartItem === undefined) {
  	cartItem = { count: $scope.app.params.itemCount, 
                   itm: $scope.app.params.itemNumber, 
                   tag: $scope.app.params.itemName, 
                   prc: $scope.app.params.priceInfo }
  } else {
    cartItem.count += $scope.app.params.itemCount
  }
  
  $scope.cart[$scope.currentSelection] = cartItem;

} // end of addToCart function

3. Initialize more variables for the function. cartItemAmount will be used to count the number of items in the cart, cartContents will be initialized as an empty array that will hold the contents of the cart, and cartPrice will be the total price of the objects in the cart. Add the following after $scope.cart[$scope.currentSelection] = cartItem;:

  //
  //cartItemAmount initialized as 0. will be used to count how many items are in the cart
  var cartItemAmount = 0;
  
  //  
  // set an empty array for the cart. this array will have an object pushed into it 
  var cartContents = [];
  
  //  
  // initialize variable for keeping track of the price of the objects in the cart
  var cartPrice = 0;

4. A for loop will be used to loop over each item that is in the cart to check for the following conditions.

itm will be the counting variable for the loop. In this loop, the count property for the object corresponding to the selected part will be increased for each time that another instance of the part is added to the cart.

In addition to this, cartPrice, the price variable, will increase based on the prc property in the cart for the selected item.

When an item is added to the cart, the price will increase by the price of the part multiplied by the quantity of parts added.

Using the .push method, the name (tag), quantity (count), and price (prc) of the selected object will be pushed into the cartContents array. The cartContents array will then be set to be equal to the cart application parameter.

This loop is used to populate the Repeater widget that was added earlier and bound to the cart application parameter. The repeater will display each row of the cart array on the screen and whenever the data changes inside of cart, the repeater will reevaluate its contents and change the display.

Add the following code after var cartPrice = 0;:

  //
  //loop over each item that is added to the cart
  for (var itm in $scope.cart) {
    
    //
    //add a number to the counting variable for each item added
    cartItemAmount += $scope.cart[itm].count;
    
    //
    // add the price of each item to the total price of the cart
    cartPrice = cartPrice += $scope.cart[itm].count*$scope.cart[itm].prc
    
    //
    //push the name (tag), item count (count), and price (prc) of each part into the repeater for the cart
    cartContents.push({ 
      tag  : $scope.cart[itm].tag, 
      count: $scope.cart[itm].count, 
      prc  : $scope.cart[itm].prc
    }); // end of the push method for cartContents
    
  }// for loop end
  
  //
  // set the app parameter for cart to be equal to the cartContents array
  $scope.app.params.cart = cartContents;

5. The last portion of the addToCart function involves editing the text for the labelCart label by adding a value to the cartLabel application parameter.

Add the following code after $scope.app.params.cart = cartContents;:

  //
  //setting the cartLabel app parameter. if there are items to put into the cart (true), the text of the cart label should be cart(total cost of cart). If false, just keep the label text as cart
  $scope.app.params.cartLabel = cartItemAmount > 0 ? "Cart($" + cartPrice + ")" 
  												   : "Cart";

clearCart

This function will clear the cart when the clearButton button is clicked. This function sets the application parameter for cart to be an empty array, sets the cart object to be empty, and changes the Text property for the labelCart button to be set back to Cart without a price total using the cartLabel application parameter.

Add the following code after the addToCart function:

//
// clear the cart. set the part app parameter and cart object to be empty. change the text on the cart label back to just Cart
$scope.clearCart = function () {
  
  $scope.app.params.cart = [];
  $scope.cart = {};
  $scope.app.params.cartLabel = "Cart";
  
} // end of clearCart function

hiliteOff

This function makes sure that the shader is removed from the model when the popup closes. The hiliteOff function will be created inside the PTC API below where the shader is added to the part.

Add the following code directly below $scope.hilite([$scope.currentSelection], true);

    //
    //function for removing the highlight
    $scope.hiliteOff = function() {
      
      $scope.hilite([$scope.currentSelection], false)
      
    }; // end of hiliteOff function

disassemble

The disassemble function will be created inside the PTC API, as well, and is used to add the functionality to the Disassemble button on the popup. It uses the same logic used with the playButton and triggers the sequenceloaded event listener when the sequence of the model is set.

Add the following code directly below the hiliteOff function that you just created:

//
    // function to be bound to the Disassemble button in the popup
    $scope.disassemble = function () {
      
      //
      // set an object that targets the model and its instruction property
      var modelObject = {      model: targetName, 
                         instruction: 'l-Creo 3D - ' + instructionName + '.pvi' };
      
      //
      // set the sequence for the quadcopter to be the name of the associated instruction
      $scope.view.wdg.quadcopter.sequence = modelObject.instruction
      
    } //disassemble function end

Now that you’ve built the cart and created the popup functions, you’ll need to create buttons for the popup.

Was this helpful?