构建购物车和弹出窗口函数

函数

说明

代码

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
$scope.cart = {}; // declare empty object called cart

2. 启动 addToCart 函数。系统将创建名为 cartItem 的变量，并将其初始化为 cart 中的特性值，该值等于当前选定的零件。

由于购物车初始化为空对象，所以首次选择零件时，此特性未定义。

如果当前所选项未曾添加到购物车对象（又称 undefined），则选定零件的 itemCount、itemNumber、itemName 和 priceInfo 应用程序参数将填充到 cartItem 中。

所有这些应用程序参数将被设置为 cartItem 对象内部的特性值。如果该物品已向购物车中添加过一次，则 cartItem 中唯一会更改的特性为 itemCount 参数。该参数将增加 1，因为已向购物车中添加过同一零件的另一个实例。

此 if 语句后，cartItem 对象及其特性将被添加到购物车对象中。此过程可帮助区分添加到购物车的不同零件。

在 $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. 为函数初始化更多变量。cartItemAmount 将用于统计购物车中的物品数量，cartContents 将初始化为一个空数组用于保存购物车的内容，而 cartPrice 将成为购物车中物品的总价。在 $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. for 循环将用于循环执行购物车中的每个物品以检查以下条件。

itm 将为循环的计数变量。在此循环中，每次将选定零件的另一个实例添加到购物车时，该零件相应对象的 count 特性将会增加。

此外，价格变量 cartPrice 也会根据选定物品在购物车中的 prc 特性而增加。

将物品添加到购物车时，价格将按零件的价格乘以添加的零件数量进行增加。

使用 .push 方法可将选定物品的名称 (tag)、数量 (count) 和价格 (prc) 推送到 cartContents 数组中。然后，将 cartContents 数组设置为等于购物车应用程序参数。

此循环用于填充先前添加并绑定到 cart 应用程序参数的“重复器”小组件。重复器将在屏幕上显示 cart 数组的每一行，每当 cart 中发生数据更改时，重复器都会重新计算其内容并更改显示内容。

在 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. addToCart 函数的最后一部分涉及通过向 cartLabel 应用程序参数添加值来编辑 labelCart 标签的文本。

在 $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

此函数可在单击 clearButton 时清除购物车内容。此函数将购物车的应用程序参数设置为空数组，将 cart 对象设置为空白，并将 labelCart 按钮的“文本”特性重新设置为使用 cartLabel 应用程序参数、不显示总价的 Cart。

在 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

此函数用于确保着色器在弹出窗口关闭时从模型中移除。在 PTC API 中，在将着色器添加到零件的位置下方，将添加 hiliteOff 函数。

紧接 $scope.hilite([$scope.currentSelection], true); 添加以下代码：

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

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

}; // end of hiliteOff function

disassemble

在 PTC API 中还将创建 disassemble 函数，用于将该功能添加到弹出窗口的 Disassemble 按钮。该函数使用的逻辑与 playButton 相同，会在设置模型的序列时触发 sequenceloaded 事件侦听器。

紧接您刚刚创建的 hiliteOff 函数添加以下代码：

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