用戶體驗(yàn)是網(wǎng)站建設(shè)中最重要的環(huán)節(jié),而流量只是其中一個(gè)影響SEO排名的因素而已,真正發(fā)生轉(zhuǎn)化的是網(wǎng)站擁有良好的用戶體驗(yàn)和豐富內(nèi)容。下面就圍繞著用戶體驗(yàn)分享一個(gè)購(gòu)物流程的案例。
DedeCMS有簡(jiǎn)單商城的功能,大多數(shù)人不用dede來做商城,而一般的企業(yè)站除了展示外,還有訂單提交或者訂購(gòu)的功能。網(wǎng)上資源比較有限,大多東抄西抄,能真正做的人還是比較少。廢話不多說,看效果圖。
可以看到dede商品模板中,實(shí)現(xiàn)功能如下:提交衣服尺碼,購(gòu)物數(shù)量,自定義字段到購(gòu)物車;提交到購(gòu)物車后停留在原頁面。
(帖子2016年1月5日更新)
有朋友問我上面商品頁的下面幾個(gè)縮略圖的調(diào)用和放大鏡效果,特寫了一個(gè)帖子結(jié)合dede圖集局部放大鏡效果jquery特效代碼兼容性強(qiáng)
1.衣服尺碼、購(gòu)物數(shù)量等自定義字段提交到購(gòu)物車
這里并不需要js支持,只需要在商品模板中,找到
<form id="formcar" name="formcar" method="post" action="{dede:field name='phpurl'/}/posttocar.php">
在提交表單里面增加字段,guige為自定義,buynum為默認(rèn),不可更改。如果想實(shí)現(xiàn)按鈕自動(dòng)增加減,請(qǐng)移步dede購(gòu)物車優(yōu)化之商品全選及數(shù)量增加減按鈕。
<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>
表單的數(shù)據(jù)發(fā)送到/plus/postocar.php,獲取數(shù)據(jù)傳送到購(gòu)物車。找到/plus/postocar.php,大概在43行左右找到
$rows['title'] = $rs['title'];
下面增加,可以理解為增加一個(gè)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.提交到購(gòu)物車后停留在原頁面
這里也不需要js支持,打開/plus/postocar.php,大概在46行,修改為對(duì)應(yīng)的部分
$cart->addItem($id, $rows);
ShowMsg("已添加加到購(gòu)物車!", "javascript:history.go(-1);", false, 500); //修改提示字段,跳轉(zhuǎn)時(shí)間為500毫秒,,返回上一頁
用戶提交商品到購(gòu)物車后不跳轉(zhuǎn)到購(gòu)物車,直接返回原頁面并刷新該頁面。參考文章《DedeCMS用ShowMsg函數(shù)提示信息跳轉(zhuǎn)改為彈出提示框》。
DedeCMS購(gòu)物車優(yōu)化文章:
①購(gòu)物車數(shù)量和現(xiàn)實(shí)縮略圖參考文章《DedeCMS全站調(diào)用購(gòu)物車數(shù)量顯示縮略圖》
②訂單號(hào)修改參考文章《DedeCMS購(gòu)物車優(yōu)化之自動(dòng)更新數(shù)量更改訂單號(hào)》
③提交商品數(shù)量到購(gòu)物車參考文章《DedeCMS購(gòu)物車優(yōu)化之商品全選及數(shù)量增加減按鈕》