用户体验是网站建设中最重要的环节,而流量只是其中一个影响SEO排名的因素而已,真正发生转化的是网站拥有良好的用户体验和丰富内容。下面就围绕着用户体验分享一个购物流程的案例。
DedeCMS有简单商城的功能,大多数人不用dede来做商城,而一般的企业站除了展示外,还有订单提交或者订购的功能。网上资源比较有限,大多东抄西抄,能真正做的人还是比较少。废话不多说,看效果图。
可以看到dede商品模板中,实现功能如下:提交衣服尺码,购物数量,自定义字段到购物车;提交到购物车后停留在原页面。
(帖子2016年1月5日更新)
有朋友问我上面商品页的下面几个缩略图的调用和放大镜效果,特写了一个帖子结合dede图集局部放大镜效果jquery特效代码兼容性强
1.衣服尺码、购物数量等自定义字段提交到购物车
这里并不需要js支持,只需要在商品模板中,找到
<form id="formcar" name="formcar" method="post" action="{dede:field name='phpurl'/}/posttocar.php">
在提交表单里面增加字段,guige为自定义,buynum为默认,不可更改。如果想实现按钮自动增加减,请移步dede购物车优化之商品全选及数量增加减按钮。
<form id="formcar" name="formcar method="post" action="{dede:field name='phpurl'/}/posttocar.php"> .... <p>尺码: <select name="guige" > <option value="155/76">155/76</option> <option value="155/78">155/78</option> <option value="155/80">155/80</option> <option value="155/82">155/82</option> </select> </p> <p> <input name="buynum" type="text" id="buynum" value="1"/> </p> ..... </form>
表单的数据发送到/plus/postocar.php,获取数据传送到购物车。找到/plus/postocar.php,大概在43行左右找到
$rows['title'] = $rs['title'];
下面增加,可以理解为增加一个guige的索引,值为提交过来的guige字段
$rows['guige'] = $_POST['guige']; $rows['buynum'] = $_POST['buynum'];
打开/templates/plus/car.htm,找到
{dede:array.Items}
找到下面字段,在下面(或者其他合适的位置)
<td height="23"><span class="price">{dede:value.price/}</span ></td> <!--后面增加--> <td height="23">{dede:value.guige/}</td>
2.提交到购物车后停留在原页面
这里也不需要js支持,打开/plus/postocar.php,大概在46行,修改为对应的部分
$cart->addItem($id, $rows);
ShowMsg("已添加加到购物车!", "javascript:history.go(-1);", false, 500); //修改提示字段,跳转时间为500毫秒,,返回上一页
用户提交商品到购物车后不跳转到购物车,直接返回原页面并刷新该页面。参考文章《DedeCMS用ShowMsg函数提示信息跳转改为弹出提示框》。
DedeCMS购物车优化文章:
①购物车数量和现实缩略图参考文章《DedeCMS全站调用购物车数量显示缩略图》
②订单号修改参考文章《DedeCMS购物车优化之自动更新数量更改订单号》
③提交商品数量到购物车参考文章《DedeCMS购物车优化之商品全选及数量增加减按钮》
发表评论
评论列表(条)