Einkaufswagen- und Popup-Funktionen erstellen

Beispielprojekte und Anwendungsfälle > Anwendungsfall: 3D-Guided Service Instructions > 3D-Guided Service Instructions 301: Preisdaten und Einkaufswagen zu Modellen hinzufügen > Einkaufswagen- und Popup-Funktionen erstellen

Ein sehr wichtiger Teil dieses Lernprogramms ist das Hinzufügen von Funktionen zu einem Popup, sodass beim Klicken auf ein Teil anklickbare Schaltflächen vorhanden sind, um das Teil einem Einkaufswagen hinzuzufügen, eine Demontagesequenz anzuzeigen oder das Modell weiter zu prüfen. Bevor die Schaltflächen zum Popup hinzugefügt werden können, müssen sie über Funktionen verfügen, welche an sie gebunden werden können. In diesem Abschnitt werden Funktionen zum Hinzufügen eines Teils zum Einkaufswagen und zum Starten einer Demontagesequenz erstellt. Der Einkaufswagen enthält Informationen, die im Widget cartRepeater gespeichert sind. Die Zahl der Informationen steigt, wenn der Bestellung Teile hinzugefügt werden.

Den vollständigen Code für diesen Abschnitt finden Sie in Appendix 3 in GitHub.

Öffnen Sie Home.js. Es müssen die folgenden Funktionen erstellt werden, um durch Klicken auf Schaltflächen im Popup mit dem Modell zu interagieren. Diese Funktionen werden jeweils an eine Schaltfläche gebunden.

Funktion

Beschreibung

Code

addToCart

Fügt die ausgewählten Teile zum Einkaufswagen hinzu. Diese Funktion wird als eigenständige Funktion erstellt.

Führen Sie die folgenden Schritte aus:

1. Initialisieren Sie unter der hilite-Funktion den Anwendungsparameter cartLabel, sodass er einfach "Cart" lautet.

Dies ist der Anfangstext in der Beschriftung labelCart, der sich ändert, wenn Artikel dem Einkaufswagen hinzugefügt werden. Initialisieren Sie außerdem ein leeres Objekt mit dem Namen cart. Fügen Sie Folgendes unter der hilite-Funktion hinzu:

$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. Starten Sie die addToCart-Funktion. Eine Variable mit dem Namen cartItem wird erstellt und initialisiert. Sie wird der Wert der Eigenschaft in cart sein, die dem derzeit ausgewählten Teil entspricht.

Bei der ersten Auswahl eines Teils ist diese Eigenschaft nicht definiert, da der Einkaufswagen als leeres Objekt initialisiert wurde.

Wenn die aktuelle Auswahl noch nicht zum Einkaufswagen-Objekt (auch undefined genannt) hinzugefügt wurde, wird cartItem mit den Anwendungsparametern itemCount, itemNumber, itemName und priceInfo gefüllt.

Alle diese Anwendungsparameter werden als Eigenschaftswerte im Objekt cartItem festgelegt. Wenn der Artikel bereits einmal dem Einkaufswagen hinzugefügt wurde, ist die einzige Eigenschaft in cartItem, die sich ändert, der Parameter itemCount. Dieser erhöht sich um 1, weil eine weitere Instanz desselben Teils zum Einkaufswagen hinzugefügt wurde.

Nach dieser if-Anweisung werden das Objekt cartItem und dessen Eigenschaften zum Einkaufswagen-Objekt hinzugefügt. Dieser Prozess hilft bei der Unterscheidung zwischen den verschiedenen Teilen, die dem Einkaufswagen hinzugefügt werden.

Fügen Sie Folgendes nach $scope.cart = {}; // declare empty object called cart hinzu:

//
// 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. Initialisieren Sie weitere Variablen für die Funktion. cartItemAmount wird verwendet, um die Anzahl der Elemente im Einkaufswagen zu zählen. cartContents wird als leeres Array initialisiert, das den Inhalt des Einkaufswagens enthält. cartPrice ist der Gesamtpreis der Objekte im Einkaufswagen. Fügen Sie Folgendes nach $scope.cart[$scope.currentSelection] = cartItem; hinzu:

  //
  //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. Eine for-Schleife wird verwendet, um jeden Artikel im Einkaufswagen zu durchlaufen und die folgenden Bedingungen zu überprüfen:

itm ist die Zählvariable für die Schleife. In dieser Schleife wird die Eigenschaft count für das Objekt, das dem ausgewählten Teil entspricht, jedes Mal erhöht, wenn eine weitere Instanz des Teils zum Einkaufswagen hinzugefügt wird.

Außerdem erhöht sich die Preisvariable cartPrice basierend auf der Eigenschaft prc im Einkaufswagen für den ausgewählten Artikel.

Wenn ein Artikel zum Einkaufswagen hinzugefügt wird, erhöht sich der Preis um den Preis des Teils multipliziert mit der Menge der hinzugefügten Teile.

Mit der .push-Methode werden der Name (tag), die Menge (count) und der Preis (prc) des ausgewählten Objekts in das Array cartContents verschoben. Für das Array cartContents wird dann festgelegt, dass es gleich dem Einkaufswagen-Anwendungsparameter ist.

Diese Schleife wird verwendet, um das zuvor hinzugefügte Widget Repeater zu füllen, das mit dem Anwendungsparameter cart verbunden ist. Der Repeater zeigt jede Zeile des cart-Array auf dem Bildschirm an. Wenn sich die Daten in cart ändern, bewertet der Repeater den Inhalt neu und ändert die Anzeige.

Fügen Sie den folgenden Code nach var cartPrice = 0; hinzu:

  //
  //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. Der letzte Teil der addToCart-Funktion beinhaltet das Bearbeiten des Textes für die Beschriftung labelCart durch Hinzufügen eines Werts zum Anwendungsparameter cartLabel.

Fügen Sie den folgenden Code nach $scope.app.params.cart = cartContents; hinzu:

  //
  //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

Diese Funktion löscht den Inhalt des Einkaufswagens, wenn auf die Schaltfläche clearButton geklickt wird. Diese Funktion legt fest, dass der Anwendungsparameter für "cart" ein leeres Array ist und dass das Objekt cart leer ist. Außerdem ändert es die Eigenschaft Text für die Schaltfläche labelCart, sodass diese unter Verwendung des Anwendungsparameters cartLabel auf Cart ohne einen Gesamtpreis zurückgesetzt wird.

Fügen Sie den folgenden Code nach der addToCart-Funktion hinzu:

//
// 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

Diese Funktion stellt sicher, dass der Shader beim Schließen des Popups aus dem Modell entfernt wird. Die hiliteOff-Funktion wird in der PTC API unten erstellt, wo der Shader zum Teil hinzugefügt wird.

Fügen Sie den folgenden Code direkt unter $scope.hilite([$scope.currentSelection], true); hinzu:

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

disassemble

Die disassemble-Funktion wird auch innerhalb der PTC API erstellt und verwendet, um die Funktionalität zur Schaltfläche Disassemble im Popup hinzuzufügen. Sie verwendet dieselbe Logik wie für playButton und löst den Ereignis-Listener sequenceloaded aus, wenn die Sequenz des Modells festgelegt wird.

Fügen Sie den folgenden Code direkt unter der hiliteOff-Funktion hinzu, die Sie gerade erstellt haben:

//
    // 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

Nachdem Sie den Einkaufswagen und die Popup-Funktionen erstellt haben, müssen Sie Schaltflächen für das Popup erstellen.

War dies hilfreich?