Création de fonctions de panier et de fenêtre contextuelle
Une partie très importante de ce tutoriel concerne l'ajout de fonctionnalités à la fenêtre contextuelle de sorte que lorsque vous cliquez sur une pièce, vous puissiez cliquer sur des boutons pour ajouter la pièce à un panier, afficher une séquence de désassemblage ou poursuivre l'inspection du modèle. Avant de pouvoir ajouter les boutons à la fenêtre contextuelle, vous devez leur associer des fonctions. Dans cette section, vous allez créer des fonctions permettant d'ajouter une pièce au panier et de démarrer la séquence de désassemblage. Le panier contient des informations stockées dans le widget cartRepeater qui s'étendent à mesure que des pièces sont ajoutées à la commande.
 |
Le code complet de cette section est disponible dans l'Appendix 3 sur GitHub.
|
Ouvrez Home.js. Pour interagir avec le modèle en cliquant sur des boutons dans la fenêtre contextuelle, vous devez créer les fonctions suivantes. Ces fonctions seront chacune liées à un bouton.
|
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 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 :
// 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; :
// 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.
Ajoutez le code suivant après var cartPrice = 0; :
// 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; :
// |
||
|
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 :
// |
||
|
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);
// |
||
|
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 :
// |
Maintenant que vous avez créé le panier et les fonctions de la fenêtre contextuelle, vous devez créer des boutons pour la fenêtre contextuelle.