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

13th鐵人賽

kyminjob

2021-10-08 23:51:07

564 瀏覽

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

清空訂單資訊

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

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

修改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

小計計算

新增 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)
    }

每當顧客修改數量的時候，就會即時的幫忙計算價錢。