我們已經可以從顧客填寫菜單、成立訂單、一直到將訂單送到老闆手上。
這篇開始要來處理顧客填寫訂單時UX上的功能實作,
讓客戶覺得網頁版菜單更加親民一點。
為了方便,開始前先附上Customer.cshtml HTML部分的程式碼
<div>
<p>這是顧客-點菜單</p>
</div>
<div>
<table id="menu"
class="table table-bordered table-warning">
<thead>
<tr class="table-active">
<th colspan="3" class="text-center "><h1>店名</h1></th>
</tr>
<tr class="table-light">
<th data-field="item">品名</th>
<th data-field="price">單價</th>
<th data-field="count">數量</th>
</tr>
</thead>
<tbody id="menu_body">
</tbody>
<tfoot>
<tr>
<td colspan="2"></td>
<th class="bg-warning">小計</th>
</tr>
<tr>
<td colspan="2" >
<div class="input-group flex-nowrap">
<span class="input-group-text" id="phoneText">手機</span>
<input type="text" id="phoneNum" class="form-control" maxlength="10" onkeyup="value = value.replace(/[^\d]/g,'')" placeholder="手機號碼" aria-label="phoneNumber" aria-describedby="phoneText">
</div>
</td>
<th class="bg-warning" id="total_price">0</th>
</tr>
<tr>
<td colspan="2"></td>
<td>
<button id="submitBtn" type="button" class="btn btn-primary">
送出
</button>
</td>
</tr>
</tfoot>
</table>
<input id="menu_data" style="visibility:hidden" value=@ViewBag.menuData />
</div>
<!-- 送出後的彈出視窗 -->
<div class="modal fade" id="commitModal" tabindex="-1" role="dialog" aria-labelledby="commitModalTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="commitModalTitle">店名</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
您已經成功訂餐
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal" >關閉</button>
</div>
</div>
</div>
</div>
當完成訂單之後,將原本的資訊刪除,
方便顧客需要填寫新的單子。
count
的name屬性function addItemRow(uid, item, price) {
var data = `
<tr id=uid`+ uid + `>
<td class="item"> `+ item + `</td>
<td class="price">`+ price + `</td>
<td class="count">
<div class="input-group mb-3">
<input type="text" class="form-control" placeholder="" aria-label="Count" name="item_count" value="0">
</div>
</td>
</tr>
`
$('#menu_body').append(data);
}
為了等一下方便取得元素,給count裡面的input一個名字。
success
部分的程式碼success: function (data) {
//清空資訊
$("#phoneNum").val('')
$("input[name='item_count']").val('0')
$("#total_price").text('0')
//開啟互動視窗
$("#commitModal").modal('show')
}
這邊要注意要使用的是val()
而不是text()
電話號碼的驗證我們這邊暫時就先簡單的只規定最大值10個以內的數字即可。
我們直接在input上面來綁定事件。
<input type="text" id="phoneNum" class="form-control" maxlength="10" onkeyup="value = value.replace(/[^\d]/g,'')" placeholder="手機號碼" aria-label="phoneNumber" aria-describedby="phoneText">
當按鍵彈起的時候onkeyup()
我們就將數字以外的字元刪除,
在幫我們的最大長度maxlength
設定為10
$('#menu_body').on("change", 'input[name="item_count"]', function () {
calculate_price()
});
這邊要注意一點,我們input是動態生成的,所以這邊也需要用動態的方式綁定事件。
2. 新增 calculate_price()
function calculate_price() {
var total_price = 0
$("#menu_body > tr").each(function () {
var count = $(this).children(".count").children("div").children("input").val()
if (count > 0) {//有點餐的才計算
item = $(this).children(".item").text()
price = $(this).children(".price").text()
total_price = total_price + (count * price)
}
})
$("#total_price").text(total_price)
}
每當顧客修改數量的時候,就會即時的幫忙計算價錢。
有些人可能會問,為什麼這些功能要留到現在才做開發?
我想有一點開發經驗的小夥伴應該有遇過,
有一些比較沒有經驗的PM(或是一些接觸客戶的職位)三不五時就會拿著客戶的需求來問說,
能不能順便加這個功能,加來加去,到最後才發現跟預想的不一樣通通都重來。
之所以把這些功能放在後面處理是因為,在沒有任何實體東西出來的時候,
構想出來的所有東西都只是腦中的經驗告訴你的,
當經驗又不足夠時,很容易變成寫10行改8行。
花大量的時間在修修補補上,這樣的方式倒不如直接一開始就走最簡單的道路,
先一路通往終點後,再回頭審視應該要怎麼添加其他功能。
另外如果是客製化開發、多人開發、或是需要與其他夥伴溝通的時候,
也有可能因為大家腦中所構思的東西不同導致方向不同步。
如果是先一次將核心功能完成(能從開始通往結束完整的流程),
再逐步增添功能的方式,就可以減少這樣的問題發生。