Crear funciones de carro y elementos emergentes

Función

Descripción

Código

addToCart

Añade las piezas seleccionadas al carro. Esta función se crea como una función independiente.

Complete el procedimiento indicado a continuación:

1. Debajo de la función hilite, inicialice el parámetro de aplicación cartLabel para que diga simplemente Cart.

Este será el texto inicial de la etiqueta labelCart, y cambiará cuando se añadan elementos al carro. Además, inicialice un objeto vacío llamado cart. Añada lo siguiente bajo la función 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. Inicie la función addToCart. Se crea e inicializa una variable denominada cartItem como valor de la propiedad en cart que equivale a la pieza que está seleccionada.

La primera vez que se selecciona una pieza, esta propiedad estará sin definir porque el carro se inicializó como objeto vacío.

Si todavía no se ha añadido la selección actual al objeto de carro, denominado por otro lado undefined, cartItem se rellenará con los parámetros de aplicación itemCount, itemNumber, itemName y priceInfo para la pieza seleccionada.

Todos estos parámetros de aplicación se definirán como valores de propiedad dentro del objeto cartItem. Si el elemento ya se ha añadido al carro de la compra una vez, la única propiedad de cartItem que cambiará es el parámetro itemCount, que aumentará en 1, ya que se ha añadido otra instancia de la misma pieza al carro.

Después de esta sentencia if, el objeto cartItem y sus propiedades se añadirán al objeto de carro. Este proceso ayuda a diferenciar las piezas que se añaden al carro.

Añada lo siguiente después de $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. Inicialice más variables para la función. Se utilizará cartItemAmount para contar el número de elementos del carro, cartContents se inicializará como matriz vacía que incluirá el contenido del carro y cartPrice será el precio total de los objetos del carro. Añada lo siguiente después de $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. Se utilizará un bucle for para recorrer cada uno de los elementos que se encuentran en el carro y comprobar las siguientes condiciones.

itm será la variable de recuento para el bucle. En este bucle, la propiedad count del objeto correspondiente a la pieza seleccionada se incrementará cada vez que se añada otra instancia de la pieza al carro.

Además, cartPrice, la variable de precio, aumentará en función de la propiedad prc del carro para el artículo seleccionado.

Cuando se añade un artículo al carro, el importe aumentará el precio de la pieza multiplicado por la cantidad de piezas añadidas.

Con el método .push, el nombre (tag), la cantidad (count) y el precio (prc) del objeto seleccionado se transferirán a la matriz cartContents. La matriz cartContents se ajustará para que sea igual al parámetro de la aplicación del carro.

Este bucle se utiliza para rellenar el widget de Repetidor que se ha añadido anteriormente y enlazado al parámetro de aplicación cart. El repetidor mostrará cada fila de la matriz cart en la pantalla y, siempre que los datos cambien dentro de cart, el repetidor volverá a evaluar su contenido y cambiará la visualización.

Añada el siguiente código después de 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 última parte de la función addToCart consiste en editar el texto de la etiqueta labelCart añadiendo un valor al parámetro de aplicación cartLabel.

Añada el siguiente código después de $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

Esta función vaciará el carro cuando se pulse en el botón clearButton. Esta función define el parámetro de aplicación para que el carro sea una matriz vacía, define el objeto cart como vacío y cambia la propiedad Text del botón labelCart para que se vuelva a definir en Cart sin un total de precio mediante el parámetro de aplicación cartLabel.

Añada el siguiente código después de la función 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

Esta función se encarga de que el sombreador se elimine del modelo cuando se cierra la ventana emergente. La función hiliteOff se creará dentro de la API de PTC siguiente, donde el sombreador se añade a la pieza.

Añada el siguiente código directamente debajo de $scope.hilite([$scope.currentSelection], true);.

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

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

}; // end of hiliteOff function

disassemble

También se creará la función disassemble dentro de la API de PTC, que se utiliza para añadir la funcionalidad al botón Disassemble del elemento emergente. Utiliza la misma lógica que se utiliza con playButton y activa el vigilante de eventos sequenceloaded cuando se define la secuencia del modelo.

Añada el código siguiente justo debajo de la función hiliteOff que acaba de crear:

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