iT邦幫忙

2021 iThome 鐵人賽

DAY 25
3
自我挑戰組

【Side Project】 系列 第 25

【Side Project】 (顧客)訂單UX功能實作

  • 分享至 

  • xImage
  •  

我們已經可以從顧客填寫菜單、成立訂單、一直到將訂單送到老闆手上。
這篇開始要來處理顧客填寫訂單時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>

清空訂單資訊

當完成訂單之後,將原本的資訊刪除,
方便顧客需要填寫新的單子。

  1. 打開 Customer.cshtml
  2. 新增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一個名字。

  1. 修改ajax中 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

小計計算

  1. 新增 onchange事件
$('#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行。
花大量的時間在修修補補上,這樣的方式倒不如直接一開始就走最簡單的道路,
先一路通往終點後,再回頭審視應該要怎麼添加其他功能。

另外如果是客製化開發、多人開發、或是需要與其他夥伴溝通的時候,
也有可能因為大家腦中所構思的東西不同導致方向不同步。
如果是先一次將核心功能完成(能從開始通往結束完整的流程),
再逐步增添功能的方式,就可以減少這樣的問題發生。


上一篇
訂單清單 - 已完成清單(MVC 的權責分職)
下一篇
【Side Project】 (老闆)訂單清單UX功能實作
系列文
【Side Project】 30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言