高級(jí)電子商務(wù)網(wǎng)站設(shè)計(jì)

時(shí)間：2022-08-15 06:15:01 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2022-08-15 06:15:01 來源：網(wǎng)站運(yùn)營

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




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


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


交互事件：OnPageLoad、Onclick


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












01

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




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







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


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

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




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


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

步驟3：使用局部變量儲(chǔ)存值




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


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

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




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


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

步驟5：列表中選擇動(dòng)作




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


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

步驟6：在動(dòng)作順序列表中上移動(dòng)作




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


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


生成原型，測(cè)試效果。











02




購物車&添加變量








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





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


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


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

步驟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母板移動(dòng)了位置，按需要重新移動(dòng)母板位置。

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


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





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


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

步驟6：添加局部變量





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



添加局部變量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á)式后的“+”號(hào)按鈕，點(diǎn)擊新增一行。設(shè)置第二行的條件表達(dá)式為：部件文字CartQuantity等于值。




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

步驟8：生成原型







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


生成原型，測(cè)試效果。




















03




創(chuàng)建購物車頁







步驟1：添加頁首







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


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

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





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

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





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


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

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


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



命名動(dòng)態(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個(gè)文本面板。一個(gè)設(shè)置字體為粗體，編輯文字“AxGuy Jeans”。下面的文本面板設(shè)置文本為：In Stock，第三個(gè)放在頁面中間，文本編輯為：Quantity:


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

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





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


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

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





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


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

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







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


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

步驟9：插入ItemQuantity和CartQuantity








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


在頁面交互窗口中，打開OnPageLoad事件的用例2，添加“設(shè)置變量/部件值”動(dòng)作。設(shè)置第一個(gè)條件表達(dá)為：部件文字ItemsQuantity等于值。點(diǎn)擊打開編輯文字對(duì)話框，在文本編輯框中，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ì)文本面板的邊框。然后，再放一個(gè)矩形在邊框的上面，設(shè)置填充色為深灰，字體為白體帶下劃線，并且編輯文本為：Checkout。


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

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





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


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


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


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





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


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