Progetti di esempio e casi di utilizzo > Caso di utilizzo: 3D-Guided Service Instructions > 3D-Guided Service Instructions 301 - Aggiungere i dati del prezzo e il carrello a un modello > Creare le funzioni per carrello e popup
Creare le funzioni per carrello e popup
Una parte molto importante di questo tutorial consiste nell'aggiunta di funzionalità al popup in modo che quando si fa clic su una parte siano disponibili pulsanti selezionabili per aggiungere la parte al carrello, visualizzare una sequenza di disassemblaggio o continuare a ispezionare il modello. Prima di poter essere aggiunti al popup, tuttavia, questi pulsanti devono disporre di funzioni collegate ad essi. In questa sezione vengono create le funzioni per l'aggiunta di una parte al carrello e per l'avvio della sequenza di disassemblaggio. Il carrello contiene informazioni memorizzate nel widget cartRepeater e il suo contenuto aumenta man mano che si aggiungono parti all'ordine.
* 
Il codice completo di questa sezione è disponibile in Appendix 3 in GitHub.
Aprire Home.js. Per interagire con il modello facendo clic sul pulsante nel popup è necessario creare le funzioni riportate di seguito. Queste funzioni sono collegate a un pulsante.
Funzione
Descrizione
Codice
addToCart
Aggiunge al carrello le parti selezionate. Questa funzione viene creata come funzione indipendente.
Completare la procedura descritta di seguito:
1. Sotto la funzione hilite, inizializzare il parametro di applicazione cartLabel semplicemente con Cart.
Questo è il testo iniziale dell'etichetta labelCart e cambia man mano che vengono aggiunti elementi al carrello. Inoltre, inizializzare un oggetto vuoto denominato cart. Aggiungere quanto segue sotto la funzione hilite:
$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. Avviare la funzione addToCart. Viene creata e inizializzata una variabile denominata cartItem per fungere da valore della proprietà in cart uguale alla parte attualmente selezionata.
La prima volta che si seleziona una parte, questa proprietà non è definita perché il carrello è stato inizializzato come oggetto vuoto.
Se la selezione corrente non è ancora stata aggiunta all'oggetto cart, altrimenti chiamata undefined, cartItem viene completato con i parametri di applicazione itemCount, itemNumber, itemName e priceInfo per la parte selezionata.
Tutti questi parametri di applicazione vengono impostati come valori di proprietà nell'oggetto cartItem. Se l'elemento è già stato aggiunto al carrello una volta, l'unica proprietà in cartItem che cambia è il parametro itemCount che aumenta di 1 poiché un'altra istanza della stessa parte è stata aggiunta al carrello.
Dopo questa istruzione if, l'oggetto cartItem e le relative proprietà vengono aggiunti all'oggetto cart. Questo processo aiuta a distinguere tra le diverse parti che vengono aggiunte al carrello.
Aggiungere quanto riportato di seguito dopo $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. Inizializzare altre variabili per la funzione. cartItemAmount è utilizzata per contare il numero di elementi nel carrello, cartContents è inizializzata come matrice vuota per includere il contenuto del carrello e cartPrice è il prezzo totale degli oggetti nel carrello. Aggiungere quanto riportato di seguito dopo $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. Si utilizza un loop for per eseguire il loop di ogni elemento presente nel carrello e verificare le condizioni riportate di seguito.
itm è la variabile che effettua il conteggio per il loop. In questo loop, la proprietà count dell'oggetto corrispondente alla parte selezionata viene aumentata ogni volta che viene aggiunta al carrello un'altra istanza della parte.
Inoltre, la variabile cartPrice per il prezzo nel carrello aumenta in base alla proprietà prc dell'elemento selezionato.
Quando un elemento viene aggiunto al carrello, il prezzo aumenta in base al prezzo della parte moltiplicato per il numero di parti aggiunte.
Utilizzando il metodo .push, il nome (tag), la quantità (count) e il prezzo (prc) dell'oggetto selezionato vengono inseriti nella matrice cartContents. La matrice cartContents viene quindi impostata in modo che sia uguale al parametro di applicazione cart.
* 
Questo loop viene utilizzato per completare il widget Ripetitore aggiunto in precedenza e associato al parametro di applicazione cart. Il ripetitore visualizza sullo schermo ogni riga della matrice cart e tutte le volte che i dati cambiano in cart ne rivaluta il contenuto e modifica la visualizzazione.
Aggiungere il seguente codice dopo 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. Nell'ultima parte della funzione addToCart è necessario modificare il testo dell'etichetta labelCart aggiungendo un valore al parametro di applicazione cartLabel.
Aggiungere il seguente codice dopo $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
Questa funzione azzera il carrello quando si fa clic sul pulsante clearButton. Questa funzione imposta il parametro di applicazione per cart come matrice vuota, imposta l'oggetto cart come vuoto e reimposta la proprietà Testo del pulsante labelCart su Cart senza prezzo totale tramite il parametro di applicazione cartLabel.
Aggiungere il seguente codice dopo la funzione addToCart:
//
// 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
Questa funzione rimuove lo shader dal modello quando il popup viene chiuso. La funzione hiliteOff viene creata nell'API PTC al di sotto del punto in cui lo shader viene aggiunto alla parte.
Aggiungere il codice seguente direttamente sotto $scope.hilite([$scope.currentSelection], true);
    //
    //function for removing the highlight
    $scope.hiliteOff = function() {
      
      $scope.hilite([$scope.currentSelection], false)
      
    }; // end of hiliteOff function
disassemble
Anche la funzione disassemble viene creata nell'API PTC e viene utilizzata per aggiungere funzionalità al pulsante Disassemble nel popup. Utilizza la stessa logica di playButton e attiva il listener dell'evento sequenceloaded quando viene impostata la sequenza del modello.
Aggiungere il codice seguente direttamente sotto la funzione hiliteOff appena creata:
//
    // 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
Ora che sono creati il carrello e le funzioni popup è necessario creare i pulsanti per il popup.
È stato utile?