建構購物車與快顯功能

函數

描述

編碼

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