构建购物车和弹出窗口函数
本教程的一个重要部分是向弹出窗口添加功能，以便在您单击某个零件时，系统会显示可单击的按钮，用于将此零件添加到购物车、查看分解序列或继续检查模型等。不过，在向弹出窗口添加按钮之前，这些按钮必须具有可与其关联的函数。本节中将创建相关函数，用于将零件添加到购物车和开始分解序列。购物车中包含了存储在 cartRepeater 小组件中的信息，并随着零件添加到订单中而增长。
 |
本节的完整代码可在 GitHub 上的附录 3 中找到。
|
打开 Home.js。要通过弹出窗口中的按钮单击与模型进行交互，必须创建以下函数。这些函数将分别绑定到一个按钮。
|
函数
|
说明
|
代码
|
||
|---|---|---|---|---|
|
addToCart
|
添加选定零件到购物车中。此函数作为独立函数创建。
|
完成以下步骤：
1. 在 hilite 函数下方，将 cartLabel 应用程序参数初始化为 Cart。
这将是 labelCart 标签中的开始文本，向购物车中添加物品会改变这部分代码。此外，初始化名为 cart 的空对象。在 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. 启动 addToCart 函数。系统将创建名为 cartItem 的变量，并将其初始化为 cart 中的特性值，该值等于当前选定的零件。
由于购物车初始化为空对象，所以首次选择零件时，此特性未定义。
如果当前所选项未曾添加到购物车对象（又称 undefined），则选定零件的 itemCount、itemNumber、itemName 和 priceInfo 应用程序参数将填充到 cartItem 中。
所有这些应用程序参数将被设置为 cartItem 对象内部的特性值。如果该物品已向购物车中添加过一次，则 cartItem 中唯一会更改的特性为 itemCount 参数。该参数将增加 1，因为已向购物车中添加过同一零件的另一个实例。
此 if 语句后，cartItem 对象及其特性将被添加到购物车对象中。此过程可帮助区分添加到购物车的不同零件。
在 $scope.cart = {}; // declare empty object called cart 之后添加以下内容：
// 3. 为函数初始化更多变量。cartItemAmount 将用于统计购物车中的物品数量，cartContents 将初始化为一个空数组用于保存购物车的内容，而 cartPrice 将成为购物车中物品的总价。在 $scope.cart[$scope.currentSelection] = cartItem; 之后添加以下内容：
// 4. for 循环将用于循环执行购物车中的每个物品以检查以下条件。
itm 将为循环的计数变量。在此循环中，每次将选定零件的另一个实例添加到购物车时，该零件相应对象的 count 特性将会增加。
此外，价格变量 cartPrice 也会根据选定物品在购物车中的 prc 特性而增加。
将物品添加到购物车时，价格将按零件的价格乘以添加的零件数量进行增加。
使用 .push 方法可将选定物品的名称 (tag)、数量 (count) 和价格 (prc) 推送到 cartContents 数组中。然后，将 cartContents 数组设置为等于购物车应用程序参数。
在 var cartPrice = 0; 之后添加以下代码：
// 5. addToCart 函数的最后一部分涉及通过向 cartLabel 应用程序参数添加值来编辑 labelCart 标签的文本。
在 $scope.app.params.cart = cartContents; 之后添加以下代码：
// |
||
|
clearCart
|
此函数可在单击 clearButton 时清除购物车内容。此函数将购物车的应用程序参数设置为空数组，将 cart 对象设置为空白，并将 labelCart 按钮的“文本”特性重新设置为使用 cartLabel 应用程序参数、不显示总价的 Cart。
|
在 addToCart 函数之后添加以下代码：
// |
||
|
hiliteOff
|
此函数用于确保着色器在弹出窗口关闭时从模型中移除。在 PTC API 中，在将着色器添加到零件的位置下方，将添加 hiliteOff 函数。
|
紧接 $scope.hilite([$scope.currentSelection], true); 添加以下代码：
// |
||
|
disassemble
|
在 PTC API 中还将创建 disassemble 函数，用于将该功能添加到弹出窗口的 Disassemble 按钮。该函数使用的逻辑与 playButton 相同，会在设置模型的序列时触发 sequenceloaded 事件侦听器。
|
紧接您刚刚创建的 hiliteOff 函数添加以下代码：
// |
您现已构建购物车并创建弹出窗口功能，接下来需要为弹出窗口创建按钮。