#188191 post by quocviet2006
Day 24 Month 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.

Last edit by quocviet2006 time Day 24 Month 03 2018 , 01:25, with 1 edit count.

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