學(xué)習(xí)高級Axure特性，本教程學(xué)習(xí)創(chuàng)建可展示用戶選購產(chǎn)品數(shù)量和計(jì)算總價(jià)的購物車。

本課程的學(xué)習(xí)基于前兩級系列教程文檔：初級電子商務(wù)網(wǎng)站設(shè)計(jì)、中級電子商務(wù)網(wǎng)站設(shè)計(jì)

部件使用：矩形、按鈕形狀、文本面板、動態(tài)面板、水平線

交互事件：OnPageLoad、Onclick

動作：“邏輯條件”、“設(shè)置變量/部件值”、“設(shè)置面板狀態(tài)為指定狀態(tài)”

01

在“加入購物車”信息面板插入數(shù)量

步驟1：命名信息面板部件

這一步，將設(shè)置AddedToCart狀態(tài)中的文本，動態(tài)顯示用戶選擇的數(shù)量下拉選單中的產(chǎn)品數(shù)量。

打開MessagesPopup動態(tài)面板的AddedToCart狀態(tài)。點(diǎn)擊狀態(tài)中的矩型部件，在部件屬性窗口命名部件為：AddedToCart。

步驟2：添加“設(shè)置變量/部件值”動作

打開ProductPopup面板，點(diǎn)擊“加入購物車”按鈕。

雙擊用例1，添加加動作“設(shè)置變量/部件值”，點(diǎn)擊“打開設(shè)置值編輯器”按鈕。

步驟3：使用局部變量儲存值

設(shè)置條件表達(dá)值：部件文字AddedToCart等于值。然后點(diǎn)擊“編輯文字”按鈕。

在輸入文字對話框，點(diǎn)擊“添加局部變量”，設(shè)置局部變量表達(dá)式為：LVAR1=選中項(xiàng)于QuantityDroplist。

步驟4：在“加入購物車”信息面板插入數(shù)量

下一步，將光標(biāo)放在“Successfully”之前，在插入變量/函數(shù)下拉選單中選擇“LVAR1”，在文本編輯框會插入“[[LVAR1]]”局部變量。

在“[[LVAR1]]”局部變量后輸入 “個"，讓整句為：[[LVAR1]]個己成功加入購物車。

步驟5：列表中選擇動作

點(diǎn)擊確定，關(guān)閉輸入文字對話框，返回用例編輯器。不要關(guān)閉用例編輯器對話框。

重要的下一步，移動前3步設(shè)置的動作，因?yàn)樵贛essagesPopup面板被隱藏之前產(chǎn)品數(shù)量就要被設(shè)置。

步驟6：在動作順序列表中上移動作

右鍵“設(shè)置變量/部件值”動作，選擇“Move Action Up”。己可以直接拖動動作上移。

將動作移動到“設(shè)置MessagesPopup動態(tài)面板到AddedToCart狀態(tài)”下，

生成原型，測試效果。

02

購物車&添加變量

步驟1：在頁首添加購物車部件

在這一步中，在頁首創(chuàng)建一個購物車，保存用戶加入購物車的產(chǎn)品總數(shù)量

母板窗口打開Header母板，在母板右上角添加按鈕形狀。

設(shè)置按鈕線條為白色，按鈕文字加下劃線，編輯按鈕文字為“購物車”。設(shè)置懸停效果為：當(dāng)鼠標(biāo)懸停時取消下劃線。

步驟2：添加鏈接和購物車圖標(biāo)

在Page1中，添加購物車按鈕的鏈接。然后，在站點(diǎn)地圖窗口重命名Page1的名稱為“shopping Cart”。

現(xiàn)在添加購物車圖標(biāo)，拖入圖片部件到線框圖，雙擊圖片部件導(dǎo)入“shoppingcart.png”文件。將圖標(biāo)放到購物車按鈕的右邊。

步驟3：添加購物數(shù)量文本面板

下一步，添加記錄用戶己添加產(chǎn)品數(shù)量的文本面板。

拖入文本面板部件到購物車圖標(biāo)的旁邊，編輯文本為“0”。在屬性面板窗口命名部件為“CartQuantity”。

步驟4：查看Home頁面Header母板更新

雙擊“Home”頁面查看修改。

因?yàn)樘砑恿速徫镘嚢粹o，Header母板移動了位置，按需要重新移動母板位置。

步驟5：創(chuàng)建變量保存數(shù)量

這一步，添加變量保存產(chǎn)品總數(shù)量，在購物車中顯示數(shù)量

打開ProductPopup面板的狀態(tài)1，選擇“加入購物車”按鈕，雙擊用例1，打開用例編輯器，設(shè)置“設(shè)置變量/部件值”動作并打開“打開設(shè)置值編輯器”對話框。

在變量下拉選單，選擇“新建...”，新建一個“TotalQuantityVar”變量。

步驟6：添加局部變量

下一步，點(diǎn)擊函數(shù)值（fx）按鈕打開編輯文字對話框。

添加局部變量LVAR1，設(shè)置LVAR1等于選中項(xiàng)于QuantityDroplist。

然后，編輯文本編輯框中文字為“[[LVAR1 + TotalQuantityVar]]”，

表達(dá)的意思是，設(shè)置TotalQuantityVar變量等于TotalQuantityVar

變量加用戶在下拉選單中選擇的數(shù)量。

步驟7：設(shè)置CartQuantity文本合計(jì)數(shù)量

現(xiàn)在，設(shè)置購物車邊的文本面板顯示產(chǎn)品總量

點(diǎn)擊“設(shè)置值編輯器”的第一行表達(dá)式后的“+”號按鈕，點(diǎn)擊新增一行。設(shè)置第二行的條件表達(dá)式為：部件文字CartQuantity等于值。

然后點(diǎn)擊編輯框，將原文本“0”修改為[[TotalQuantityVar]]。

步驟8：生成原型

點(diǎn)擊確定，關(guān)閉“編輯文字”、“設(shè)置值編輯器”、“用例編輯器”對話框。

生成原型，測試效果。

03

創(chuàng)建購物車頁

步驟1：添加頁首

這一步，設(shè)計(jì)購物車頁面，顯示購物車為空或當(dāng)用戶添加了產(chǎn)品到購物車時的產(chǎn)品總數(shù)和價(jià)格等信息。

在網(wǎng)站地圖窗口，打開“shopping Cart”頁面，將Header母板拖入線框圖中。

步驟2：頁面中添加本頁標(biāo)題

在header母板下添加矩形和水平線部件。編輯矩形部件文本“shopping Cart”，設(shè)置線寬為粗。

步驟3：創(chuàng)建購物車為空的信息

這一步，添加購物車為空的信息提示。

拖兩個文本面板到本頁標(biāo)題的下面。設(shè)置第1個文本面板粗體，并編輯文本“購物車為空”。第2個文本面板，編輯文本“點(diǎn)擊繼續(xù)購物”，并在交互標(biāo)簽下添加鏈接到Home頁面。

步驟4：將提示信息轉(zhuǎn)換為母板

選中兩個文本面板并轉(zhuǎn)換為母板（右鍵,轉(zhuǎn)換->轉(zhuǎn)換為動態(tài)面板）。調(diào)整動態(tài)面板寬度與Header母板一式，高度為300px。

命名動態(tài)面板為：ItemsPanel。命名面板狀態(tài)1為：NoItems，添加狀態(tài)2命名為：Items。

步驟5：Items狀態(tài)添加產(chǎn)品細(xì)節(jié)描述

現(xiàn)在添加產(chǎn)品信息及數(shù)量。

打開“ItemsPanel”的Items狀態(tài)，拖圖片部件到線框圖，導(dǎo)入壓縮文件包中的Jeans1-1.png文檔，調(diào)整圖片大小合適顯示尺寸。添加3個文本面板。一個設(shè)置字體為粗體，編輯文字“AxGuy Jeans”。下面的文本面板設(shè)置文本為：In Stock，第三個放在頁面中間，文本編輯為：Quantity:

命名“Quantity:”文本面板為“ItemQuantity”。

步驟6：設(shè)置OnPageLoad事件顯示正確的狀態(tài)

現(xiàn)在，購物車?yán)镉袃蓚€狀態(tài)，分別是：“Items”和“NoItems”。添加OnPageLoad（頁面載入時）的交互，跟據(jù)購物車中的產(chǎn)品數(shù)量設(shè)置顯示狀態(tài)。

返回“shopping Cart”頁面，在頁面交互標(biāo)簽中，雙擊OnPageLoad事件添加用例。

步驟7：添加檢查結(jié)果是0時的條件

下一步，添加用例條件為：變量值TotalQuantityVar等于“”。如果變量TotalQuantityVar值是為空，說明購物車中沒有添加產(chǎn)品。

下一步，添加動作“設(shè)置ItemsPanel動態(tài)面板到NoItems狀態(tài)”。

步驟8：添加設(shè)置面板到Items狀態(tài)動作

下一步，添加另一個用例，設(shè)置“ItemsPanel”面板到“Items”狀態(tài)。

添加第2個OnPageLoad用例，這個用例不用添加用例條件，因?yàn)榈?個用例默認(rèn)會設(shè)置為“Else if True”。添加“設(shè)置面板狀態(tài)為指定狀態(tài)”動作，設(shè)置ItemsPanel到Items狀態(tài)。

步驟9：插入ItemQuantity和CartQuantity

當(dāng)頁面載入時，要初始化ItemQuantity和CartQuantity文本面板。

在頁面交互窗口中，打開OnPageLoad事件的用例2，添加“設(shè)置變量/部件值”動作。設(shè)置第一個條件表達(dá)為：部件文字ItemsQuantity等于值。點(diǎn)擊打開編輯文字對話框，在文本編輯框中，Quantity:后插入[[TotalQuantityVar]]變量。

步驟10：插入TotalQuantityVar值

TotalQuantityVar變值也需要顯示在購物車上，所以，再添加一行條件表達(dá)式：部件文字Header/CartQuantity等于值 [[TotalQuantityVar]]。

04

計(jì)算購物車總數(shù)

步驟1：顯示價(jià)格

打開ProductPopup面板的狀態(tài)1，在產(chǎn)品描述面板的下面添加文本面板。編輯文本為：$25，并設(shè)置字體為粗體。

步驟2：添加合計(jì)文本面板

打開shopping Cart頁面，打開ItemsPanel面板的Items狀態(tài)。

拖矩形部件到狀態(tài)頁面的右邊做為合計(jì)文本面板的邊框。然后，再放一個矩形在邊框的上面，設(shè)置填充色為深灰，字體為白體帶下劃線，并且編輯文本為：Checkout。

添加文本面板，編輯文字為：Subtotal: $。在部件屬性面板命名文本面板為“Subtotal”。

步驟3：添加顯示總價(jià)的用例

設(shè)置Subtotal文本面板的文本等于價(jià)格乘以產(chǎn)品總數(shù)。

打開shopping Cart頁面，打開OnPageLoad事件用例2。

點(diǎn)擊“設(shè)置變量/部件值”動作，打開“設(shè)置值編輯器”。

步驟4：用TotalQuantityVar變量計(jì)算價(jià)格

添加第3個條件表達(dá)式：部件文字Subtotal等于值“”。點(diǎn)擊“編輯文字”打開編輯文字對話框，在“$”后輸入“[[25*TotalQuantityVar]]”。

完成設(shè)置，生成原型查看效果。