Crear funciones de carro y elementos emergentes
Una parte muy importante de este tutorial consiste en añadir funcionalidad al elemento emergente de modo que, al pulsar en una pieza, haya botones en los que pulsar para añadir la pieza a un carro, ver una secuencia de desmontaje o seguir inspeccionando el modelo. Sin embargo, para poderse añadir al elemento emergente, estos botones deben tener funciones que se puedan asociar a ellos. En esta sección se crearán funciones para añadir una pieza al carro e iniciar la secuencia de desmontaje. El carro contiene información que se almacena en el widget cartRepeater y que aumenta a medida que se añaden piezas al pedido.
 |
El código completo de esta sección se encuentra en el Apéndice 3 en GitHub.
|
Abra Home.js. Para interactuar con el modelo a través de las pulsaciones de los botones en el elemento emergente, se deben crear las funciones siguientes. Estas funciones se asociarán a un botón.
|
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 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:
// 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;:
// 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.
Añada el siguiente código después de var cartPrice = 0;:
// 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;:
// |
||
|
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:
// |
||
|
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);.
// |
||
|
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:
// |
Ahora que se han creado el carro y las funciones emergentes, se deben crear botones para el elemento emergente.