Quy tắc: Sao lưu là vàng.
Mục đích :
+ Hiển thị được 05 SP trên 1 dòng.
Ưu điểm của phương pháp này:
+ Hiển thị được 05 SP trên 1 dòng.
+ Bán được nhiều dép hơn.
Khuyết điểm:
+ Còn lâu mới nói.
** Cách làm **
PHP:
01/ Setting.php
=> /modules/shops/admin/setting.php
Tìm :
// Số sản phẩm hiển thị trên một dòng for ($i = 1; $i <= 10; $i++) { if (24 % $i == 0) { $xtpl->assign('PER_ROW', array( 'value' => $i, 'selected' => $data['per_row'] == $i ? 'selected="selected"' : '' )); $xtpl->parse('main.per_row'); } }
Thay hết bằng:
// Số sản phẩm hiển thị trên một dòng $i = array(1,2,4,5,6,8); foreach ($i as $ii) { $xtpl->assign('PER_ROW', array( 'value' => $ii, 'selected' => $data['per_row'] == $ii ? 'selected="selected"' : '' )); $xtpl->parse('main.per_row'); }
02/theme.php
=> /modules/shops/theme.php
Tìm tất cả các dòng :
$num_row = 24 / $pro_config['per_row'];
Thay tất cả bằng :
if( $pro_config['per_row'] == 5){ $num_row = 25; }else{ $num_row = 24 / $pro_config['per_row']; }
TPL:
Bước này là chung, áp dụng cho 03 file:
main_procate.tpl
main_product.tpl
view_gird.tpl
=> /themes/ten_theme_dang_dung/modules/shops/
Tìm:
<!-- BEGIN: items --> <div class="col-sm-12 col-md-{num}">
Cập nhật 19h18 - 22/07/2016
Thay toàn bộ thành:
<!-- BEGIN: items --> <div class="col-xs-24 col-sm-12 col-md-{num} col-lg-{num}">
CSS:
Tuỳ vào mong muốn áp dụng cho toàn bộ site hay chỉ dùng cho shops mà điền vào CSS tương ứng.
=> /themes/ten_theme_dang_dung/css/shops.css (style.css)
Bài này làm thử với shops.css
Cập nhật 19h18 - 22/07/2016
=> /themes/ten_theme_dang_dung/css/style.css ( Giờ là bắt buộc, tốt cho ai ko thích làm theme Responsive và Mobile).
Thêm vào cuối file CSS nội dung sau:
/* Bootstrap 5 column*/ .col-xs-25, .col-sm-25, .col-md-25, .col-lg-25 { position: relative; min-height: 1px; padding-right: 5px; padding-left: 5px; } .col-xs-25 { width: 20%; float: left; } @media (min-width: 768px) { .col-sm-25 { width: 20%; float: left; } } @media (min-width: 992px) { .col-md-25 { width: 20%; float: left; } } @media (min-width: 1200px) { .col-lg-25 { width: 20%; float: left; } }
Ta sẽ có kết quả như hình dưới :
/// Còn đây là cái vụ mà bạn thớt yêu cầu:
Giao diện PC trên Mobile phải "chuẩn". :D
Bạn có thể tải các file demo trong bài viết về để tham khảo ở phần đính kèm. Vui lòng sao lưu và kiểm tra kỹ trước khi dùng, có thể còn sót lỗi hoặc code từ một demo khác.
Lưu ý: Nếu áp dụng col-xs-{num} mà cấu hình 5 SP 1 dòng thì có thể vỡ giao diện mobile ( dùng điện thoại truy cập thì cũng hiện 5SP/1 dòng.
Do đó nếu cần tối ưu thì sửa thành viết một theme riêng biệt cho mobile, vì hiện tại hệ thống tự gọi TPL cho mobile nếu không có theme riêng, sẽ dễ bị xung đột CSS "không chuẩn" blah blah ....