#188191 gửi bởi quocviet2006
Ngày 24 Tháng 03 2018 , 01:18

Mặc định chức năng sắp xếp kiểu hiện thị dạng danh sách hoặc lưới của module shop Nukeviet là select. Để giao diện được gọn gàng và chuyên nghiệp hơn cần thay đổi nó bằng button.

Kiểu hiển thị mặc định

Các bước thực hiện:

- Mở view_gird.tpl theo đường dẫn \themes\default\modules\shops, tìm dòng:

<!-- BEGIN: displays --> ... <!-- END: displays -->

Thay bằng:

<!-- BEGIN: displays -->
<div class="view-mode">
<div class="view-type pull-left">
<button class="btn btn-default grid active" data-toggle="tooltip" title="Xem theo lưới"><i class="fa fa-th-large"></i></button>
<button class="btn btn-default list" data-toggle="tooltip" title="Xem theo danh sách"><i class="fa fa-bars"></i></button>
</div>
<div class="form-group form-inline pull-right">
<label class="control-label">{LANG.displays_product}</label>
<select name="sort" id="sort" class="form-control input-sm" onchange="nv_chang_price();">
<!-- BEGIN: sorts -->
<option value="{key}" {se}> {value}</option>
<!-- END: sorts -->
</select>
</div>
</div>

<div class="form-group form-inline pull-right">
<div style="display:none">
<label class="control-label">{LANG.title_viewnum}</label>
<select name="viewtype" id="viewtype" class="form-control input-sm" onchange="nv_chang_viewtype();">
<!-- BEGIN: viewtype -->
<option value="{VIEWTYPE.key}" {VIEWTYPE.selected}> {VIEWTYPE.value}</option>
<!-- END: viewtype -->
</select>
</div>
</div>
<div class="clear">&nbsp;</div>
<!-- END: displays -->

- Làm tương tự như trên cho view_list.tpl. Chú ý thay phần khác biệt được tô khác màu:

<button class="btn btn-default grid" data-toggle="tooltip" title="Xem theo lưới"><i class="fa fa-th-large"></i></button>
<button class="btn btn-default list active" data-toggle="tooltip" title="Xem theo danh sách"><i class="fa fa-bars"></i></button>

- Mở shops.css theo đường dẫn \themes\default\css, thêm vào dưới cùng:

.active.btn-default,.btn-default:focus, .btn-default:hover {cursor:pointer;color:#fff;background:#20bc5a;border-color:#20bc5a}
.view-mode{line-height:1.5;padding-bottom:10px;width:100%;display:inline-block;border-bottom:1px solid #ccc}

- Mở main.js theo đường dẫn \themes\default\js, thêm vào dưới cùng:

$(document).ready(function(){
$(".view-mode .grid").click(function () {
$('#viewtype').val('viewcat_page_gird').trigger('change');
});
$(".view-mode .list").click(function () {
$('#viewtype').val('viewcat_page_list').trigger('change');
});
});

Giờ thì hãy view lên xem kết quả. Chúc các bạn thành công.

Nút hiển thị sản phẩm

Để tải toàn bộ code đã được làm sẵn, bạn cần vào đây.

Sửa lần cuối bởi quocviet2006 vào Ngày 24 Tháng 03 2018 , 01:25, với tổng số 1 lần sửa.

Việt Tí - Chia sẻ để thành công - http://quocviet.net