高级电子商务网站设计

时间：2022-08-15 06:15:01 | 来源：网站运营

时间：2022-08-15 06:15:01 来源：网站运营

学习高级Axure特性，本教程学习创建可展示用户选购产品数量和计算总价的购物车。




本课程的学习基于前两级系列教程文档：初级电子商务网站设计、中级电子商务网站设计


部件使用：矩形、按钮形状、文本面板、动态面板、水平线


交互事件：OnPageLoad、Onclick


动作：“逻辑条件”、“设置变量/部件值”、“设置面板状态为指定状态”












01

在“加入购物车”信息面板插入数量




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







这一步，将设置AddedToCart状态中的文本，动态显示用户选择的数量下拉选单中的产品数量。


打开MessagesPopup动态面板的AddedToCart状态。点击状态中的矩型部件，在部件属性窗口命名部件为：AddedToCart。

步骤2：添加“设置变量/部件值”动作




打开ProductPopup面板，点击“加入购物车”按钮。


双击用例1，添加加动作“设置变量/部件值”，点击“打开设置值编辑器”按钮。

步骤3：使用局部变量储存值




设置条件表达值：部件文字AddedToCart等于值。然后点击“编辑文字”按钮。


在输入文字对话框，点击“添加局部变量”，设置局部变量表达式为：LVAR1=选中项于QuantityDroplist。

步骤4：在“加入购物车”信息面板插入数量




下一步，将光标放在“Successfully”之前，在插入变量/函数下拉选单中选择“LVAR1”，在文本编辑框会插入“[[LVAR1]]”局部变量。


在“[[LVAR1]]”局部变量后输入 “个"，让整句为：[[LVAR1]]个己成功加入购物车。

步骤5：列表中选择动作




点击确定，关闭输入文字对话框，返回用例编辑器。不要关闭用例编辑器对话框。


重要的下一步，移动前3步设置的动作，因为在MessagesPopup面板被隐藏之前产品数量就要被设置。

步骤6：在动作顺序列表中上移动作




右键“设置变量/部件值”动作，选择“Move Action Up”。己可以直接拖动动作上移。


将动作移动到“设置MessagesPopup动态面板到AddedToCart状态”下，


生成原型，测试效果。











02




购物车&添加变量








步骤1：在页首添加购物车部件





在这一步中，在页首创建一个购物车，保存用户加入购物车的产品总数量


母板窗口打开Header母板，在母板右上角添加按钮形状。


设置按钮线条为白色，按钮文字加下划线，编辑按钮文字为“购物车”。设置悬停效果为：当鼠标悬停时取消下划线。

步骤2：添加链接和购物车图标





在Page1中，添加购物车按钮的链接。然后，在站点地图窗口重命名Page1的名称为“Shopping Cart”。


现在添加购物车图标，拖入图片部件到线框图，双击图片部件导入“shoppingcart.png”文件。将图标放到购物车按钮的右边。

步骤3：添加购物数量文本面板





下一步，添加记录用户己添加产品数量的文本面板。


拖入文本面板部件到购物车图标的旁边，编辑文本为“0”。在属性面板窗口命名部件为“CartQuantity”。

步骤4：查看Home页面Header母板更新





双击“Home”页面查看修改。


因为添加了购物车按钮，Header母板移动了位置，按需要重新移动母板位置。

步骤5：创建变量保存数量


这一步，添加变量保存产品总数量，在购物车中显示数量





打开ProductPopup面板的状态1，选择“加入购物车”按钮，双击用例1，打开用例编辑器，设置“设置变量/部件值”动作并打开“打开设置值编辑器”对话框。


在变量下拉选单，选择“新建...”，新建一个“TotalQuantityVar”变量。

步骤6：添加局部变量





下一步，点击函数值（fx）按钮打开编辑文字对话框。



添加局部变量LVAR1，设置LVAR1等于选中项于QuantityDroplist。




然后，编辑文本编辑框中文字为“[[LVAR1 + TotalQuantityVar]]”，




表达的意思是，设置TotalQuantityVar变量等于TotalQuantityVar




变量加用户在下拉选单中选择的数量。

步骤7：设置CartQuantity文本合计数量





现在，设置购物车边的文本面板显示产品总量


点击“设置值编辑器”的第一行表达式后的“+”号按钮，点击新增一行。设置第二行的条件表达式为：部件文字CartQuantity等于值。




然后点击编辑框，将原文本“0”修改为[[TotalQuantityVar]]。

步骤8：生成原型







点击确定，关闭“编辑文字”、“设置值编辑器”、“用例编辑器”对话框。


生成原型，测试效果。




















03




创建购物车页







步骤1：添加页首







这一步，设计购物车页面，显示购物车为空或当用户添加了产品到购物车时的产品总数和价格等信息。


在网站地图窗口，打开“Shopping Cart”页面，将Header母板拖入线框图中。

步骤2：页面中添加本页标题





在header母板下添加矩形和水平线部件。编辑矩形部件文本“Shopping Cart”，设置线宽为粗。

步骤3：创建购物车为空的信息





这一步，添加购物车为空的信息提示。


拖两个文本面板到本页标题的下面。设置第1个文本面板粗体，并编辑文本“购物车为空”。第2个文本面板，编辑文本“点击继续购物”，并在交互标签下添加链接到Home页面。

步骤4：将提示信息转换为母板


选中两个文本面板并转换为母板（右键,转换->转换为动态面板）。调整动态面板宽度与Header母板一式，高度为300px。



命名动态面板为：ItemsPanel。命名面板状态1为：NoItems，添加状态2命名为：Items。

步骤5：Items状态添加产品细节描述





现在添加产品信息及数量。


打开“ItemsPanel”的Items状态，拖图片部件到线框图，导入压缩文件包中的Jeans1-1.png文档，调整图片大小合适显示尺寸。添加3个文本面板。一个设置字体为粗体，编辑文字“AxGuy Jeans”。下面的文本面板设置文本为：In Stock，第三个放在页面中间，文本编辑为：Quantity:


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

步骤6：设置OnPageLoad事件显示正确的状态





现在，购物车里有两个状态，分别是：“Items”和“NoItems”。添加OnPageLoad（页面载入时）的交互，跟据购物车中的产品数量设置显示状态。


返回“Shopping Cart”页面，在页面交互标签中，双击OnPageLoad事件添加用例。

步骤7：添加检查结果是0时的条件





下一步，添加用例条件为：变量值TotalQuantityVar等于“”。如果变量TotalQuantityVar值是为空，说明购物车中没有添加产品。


下一步，添加动作“设置ItemsPanel动态面板到NoItems状态”。

步骤8：添加设置面板到Items状态动作







下一步，添加另一个用例，设置“ItemsPanel”面板到“Items”状态。


添加第2个OnPageLoad用例，这个用例不用添加用例条件，因为第2个用例默认会设置为“Else if True”。添加“设置面板状态为指定状态”动作，设置ItemsPanel到Items状态。

步骤9：插入ItemQuantity和CartQuantity








当页面载入时，要初始化ItemQuantity和CartQuantity文本面板。


在页面交互窗口中，打开OnPageLoad事件的用例2，添加“设置变量/部件值”动作。设置第一个条件表达为：部件文字ItemsQuantity等于值。点击打开编辑文字对话框，在文本编辑框中，Quantity:后插入[[TotalQuantityVar]]变量。

步骤10：插入TotalQuantityVar值









TotalQuantityVar变值也需要显示在购物车上，所以，再添加一行条件表达式：部件文字Header/CartQuantity等于值 [[TotalQuantityVar]]。



















04





计算购物车总数





步骤1：显示价格





打开ProductPopup面板的状态1，在产品描述面板的下面添加文本面板。编辑文本为：$25，并设置字体为粗体。

步骤2：添加合计文本面板





打开Shopping Cart页面，打开ItemsPanel面板的Items状态。


拖矩形部件到状态页面的右边做为合计文本面板的边框。然后，再放一个矩形在边框的上面，设置填充色为深灰，字体为白体带下划线，并且编辑文本为：Checkout。


添加文本面板，编辑文字为：Subtotal: $。在部件属性面板命名文本面板为“Subtotal”。

步骤3：添加显示总价的用例





设置Subtotal文本面板的文本等于价格乘以产品总数。


打开Shopping Cart页面，打开OnPageLoad事件用例2。


点击“设置变量/部件值”动作，打开“设置值编辑器”。


步骤4：用TotalQuantityVar变量计算价格





添加第3个条件表达式：部件文字Subtotal等于值“”。点击“编辑文字”打开编辑文字对话框，在“$”后输入“[[25*TotalQuantityVar]]”。


完成设置，生成原型查看效果。