PHP laravel-admin 加入查看購物車鈕

上篇在這 PHP laravel-admin 載入商品至購物車內

選購完商品後我們要有一個可以觀看並修改購物數量及輸入相關折扣(客戶要求)的購物清單畫面，並在總價下方增加一個加總欄位。

根據 PHP laravel-admin 購物車清單 ，在addCart中加入查看購物車的按鈕，藍色那行。

protected function addCart() {
    $this->iScript();
    return '
    <div class="btn-group pull-right" style="margin-right: 10px;">
    <a class="btn btn-md btn-success" title="購物車"><i class="fa fa-shopping-cart"></i><span class="hidden-xs"> 購物車</span></a>
    <button type="button" class="btn btn-md btn-success dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
    </button>
    <ul id="isale" class="dropdown-menu" role="menu" style="min-width:300px">
        <li id="total"><a class="btn btn-md btn-danger" style="color:#FFF" title="查看購物車" href="../carts?saleid='.$saleid.'"><i class="fa fa-shopping-basket"></i><span class="hidden-xs"> 查看購物車</span></a></li>
    </ul>
</div>';
}

請先建立好cart的controller跟model，然後打開controller。

進入查看購物車頁面後可以編輯購買的商品數量及設定相關折扣，我們直接在grid頁面使用行內編輯的功能進行商品的數量及扣折編輯。

※每個editable在form裡面一定要有一個相對應的欄位，不然怎麼儲存都會無效哦，特別是後來新增的欄位別忘了也加要到form中。

protected function grid()
{
    Admin::js('../vendor/laravel-admin/AdminLTE/dist/js/cart.js');
    $this->iScript();
    $grid = new Grid(new Cart());
    $grid->model()->where('sale_id', '=', request('saleid'));
    $grid->disableActions();
    $grid->disableCreateButton();
    $grid->disableFilter();
    $grid->tools(function ($tools) {
        $tools->append($this->prev(request('saleid')));
        $tools->append($this->createBill(request('saleid')));
    });

    $grid->number('序號');
    $grid->rows(function($row, $number){
        $row->column('number', $number + 1);
    });
    $grid->column('product.name', __('商品/療程名稱'));
    $grid->column('unit', __('單價'))->editable();
    $grid->column('sale_amount', __('數量'))->editable();
    $grid->column('discount', __('折扣'))->editable();
    $grid->column('total', __('總價'))->totalRow();

    return $grid;
}

總價我們採用js即時計算並更新至資料庫中，先在單價、數量、折扣加上異動時觸發的js。

protected function iScript() {
    $script = <<<EOT
    //數量
    $('.column-sale_amount').change(function () {
        saleinfo_list_edittable($(this), 'sale_amount');
    });
    //單價
    $('.column-unit').change(function () {
        cart_list_edittable($(this), 'unit_price');
    });
    //折扣
    $('.column-discount').change(function () {
        cart_list_edittable($(this), 'discount_price');
    });
EOT;
    Admin::script($script);
}

在頁面多增加兩個按鈕，一個是繼續購物、一個是前往結帳。

protected function prev($saleid) {
    return '
<a class="btn btn-md btn-success" title="繼續選購商品" href="../products?saleid='.$saleid.'"><i class="fa fa-cart-plus"></i><span class="hidden-xs"> 繼續選購商品</span></a>
';
}

protected function createBill($saleid) {
    return '
<a class="btn btn-md btn-danger" title="結帳" href="../bills/create?sale_id='.$saleid.'&type=1"><i class="fa fa-usd"></i><span class="hidden-xs"> 結帳</span></a>
';
}

cart.js主要是做即時的總價計算並將結果儲存至資料表中。

function cart_list_edittable(obj, name) {
    var amount, price, discount;
    var ele = obj.closest('tr');
    var url = '../carts/';
    switch (name) {
        case 'sale_amount':
            amount = obj.find('.form-control').val();
            price = parseInt(ele.children('.column-unit').text());
            discount = parseInt(ele.children('.column-discount').text());
        break;
        case 'unit':
            price = obj.find('.form-control').val();
            amount = parseInt(ele.children('.column-sale_amount').text());
            discount = parseInt(ele.children('.column-discount').text());
        break;
        case 'discount':
            discount = obj.find('.form-control').val();
            amount = parseInt(ele.children('.column-sale_amount').text());
            price = parseInt(ele.children('.column-unit').text());
        break;

    }
    /* 呼叫editable() begin */
    var pk = obj.children('a').data('pk');
    var sum = amount*price-discount;
    $.ajax({
        method: 'POST',
        url: url+pk,
        data: {name: 'total', value: sum, pk: pk, _token: $.admin.token, _editable: 1, _method: 'PUT'}
    });
    /* 呼叫editable() end */
    ele.children('.column-total').text(sum);
    var total = 0;
    $('.table tbody .column-total').each(function (i, val) {
        total += parseInt($(this).text());
    });
    $('.table tfoot .column-total').text(total);    
}

好嘍，查看購物車內容完成！

下一篇我們要來介接結帳。