建構購物車與快顯功能
此教學專區的一個非常重要的部份是將功能新增至快顯視窗，以便在您按一下零件時，有可按的按鈕能將零件新增至購物車、查看拆解序列或繼續檢查模型。不過，這些按鈕必須具有可關聯的功能，才能新增至快顯視窗。在此部份會建立函數，以將零件新增至購物車並啟動拆解序列。購物車包含儲存在 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 函數下方新增下列程式碼：
// |
現在，您已建立購物車及快顯函數，您需要為快顯建立按鈕。