Création de fonctions de panier et de fenêtre contextuelle

Fonction

Description

Code

addToCart

Ajoute les pièces sélectionnées au panier. Cette fonction est créée sous la forme d'une fonction indépendante.

Effectuez les étapes suivantes :

1. Sous la fonction hilite, initialisez le paramètre d'application cartLabel pour qu'il indique simplement Cart.

Il s'agit du texte de départ de l'étiquette labelCart qui sera modifié au fur et à mesure que des éléments sont ajoutés au panier. Initialisez également un objet vide nommé cart. Ajoutez les éléments suivants sous la fonction 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. Démarrez la fonction addToCart. Une variable nommée cartItem est créée et initialisée comme étant la valeur de la propriété dans cart qui est égale à la pièce actuellement sélectionnée.

La première fois qu'une pièce est sélectionnée, cette propriété n'est pas définie car le panier a été initialisé en tant qu'objet vide.

Si la sélection actuelle n'a pas encore été ajoutée à l'objet de panier, autrement appelé undefined, cartItem est alors renseigné avec les paramètres d'application itemCount, itemNumber, itemName et priceInfo pour la pièce sélectionnée.

Tous ces paramètres d'application seront définis en tant que valeurs de propriété à l'intérieur de l'objet cartItem. Si l'élément a déjà été ajouté au panier une fois, la seule propriété dans cartItem qui sera modifiée est le paramètre itemCount, qui augmente de 1, car une autre instance de cette même pièce a été ajoutée au panier.

Après cette instruction if, l'objet cartItem et ses propriétés seront ajoutés à l'objet de panier. Ce processus permet de différencier les différentes pièces qui sont ajoutées au panier.

Ajoutez les éléments suivants après $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. Initialisez davantage de variables pour la fonction. cartItemAmount sera utilisé pour compter le nombre d'éléments dans le panier, cartContents sera initialisé comme un tableau vide qui contiendra le contenu du panier et cartPrice sera le prix total des objets dans le panier. Ajoutez les éléments suivants après $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. Une boucle for sera utilisée pour effectuer une boucle pour chaque élément du panier afin de vérifier les conditions suivantes.

itm sera la variable de comptage de la boucle. Dans cette boucle, la propriété count de l'objet correspondant à la pièce sélectionnée sera augmentée chaque fois qu'une autre instance de la pièce sera ajoutée au panier.

En plus de cela, cartPrice, la variable de prix, augmente en fonction de la propriété prc dans le panier pour l'élément sélectionné.

Lorsqu'une pièce est ajoutée au panier, le prix augmente du prix de la pièce multiplié par la quantité de pièces ajoutées.

A l'aide de la méthode .push, le nom (tag), la quantité (count) et le prix (prc) de l'objet sélectionné seront envoyés dans le tableau cartContents. Le tableau cartContents sera alors défini pour être égal au paramètre d'application de panier.

Cette boucle sert à renseigner le widget Répéteur qui a été ajouté précédemment et lié au paramètre d'application cart. Le répéteur affiche chaque ligne du tableau cart à l'écran et chaque fois que les données sont modifiées à l'intérieur de cart, le répéteur réévalue son contenu et modifie l'affichage.

Ajoutez le code suivant après 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. La dernière partie de la fonction addToCart implique la modification du texte de l'étiquette labelCart en ajoutant une valeur au paramètre d'application cartLabel.

Ajoutez le code suivant après $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

Cette fonction effacera le panier lorsque vous cliquerez sur le bouton clearButton. Cette fonction définit le paramètre d'application pour que le panier soit un tableau vide, définit l'objet cart comme étant vide et modifie la propriété Texte pour que le bouton labelCart soit redéfini sur Cart sans prix total à l'aide du paramètre d'application cartLabel.

Ajoutez le code suivant après la fonction 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

Cette fonction permet de s'assurer que le moteur de rendu est retiré du modèle lorsque la fenêtre contextuelle se ferme. La fonction hiliteOff est créée à l'intérieur de l'API PTC ci-dessous, dans laquelle le nuanceur est ajouté à la pièce.

Ajoutez le code suivant directement sous $scope.hilite([$scope.currentSelection], true);

//
//function for removing the highlight
$scope.hiliteOff = function() {

$scope.hilite([$scope.currentSelection], false)

}; // end of hiliteOff function

disassemble

La fonction disassemble sera créée à l'intérieur de l'API PTC également, et sera utilisée pour ajouter la fonctionnalité au bouton Disassemble de la fenêtre contextuelle. Elle utilise la même logique que celle utilisée avec playButton et déclenche l'écouteur d'événements sequenceloaded lorsque la séquence du modèle est définie.

Ajoutez le code suivant directement sous la fonction hiliteOff que vous venez de créer :

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