[Modules Shops 4.0.29] Hiển thị 05 sản phẩm trên 1 dòng

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 ....

 

vãi bán đc nhiều dép 

 

Em có đam mê với dép anh ui

 

Đúng là cái mình cần đó, cảm ơn bạn Kenny Nguyễn nhiều nhé, mình sẽ thử chia và duyệt lại trên mobile .

 

 

=_= thì viết theo yêu cầu mà.

Mình test được rồi đấy.

Còn bạn thì mình chúc may mắn. Nhớ xoá các class 15 trước đây đã làm đi nhé.

 

 

Mình test rồi, giao diện desktop trên mobile hiện 5 cột (ok), giao diện mobile trên mobile cũng 5 cột (chưa ok vì mặc định là 1 cột) , khó phết, đến giờ vẫn chưa thể giải quyết, tự dưng cái phiên bản 4 này đi chia 1,2,4,6,8, để chia dạng text tự nhập số cột như bản 3 có phải tốt ko, haizzzzzzz......!!!

 

Đây !

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:

col-xs-24, hoặc 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.

 

a dùng col-..-25 thì chuẩn rồi, ko bị trùng class. :)))))

 

Giao diện desktop trên mobile nó hiện 2 sản phẩm trên 1 dòng (chưa ok) vì cấu hình là 5 sản phẩm 1 dòng, còn giao diện mobile thì vẫn 1 (ok) vì theo mặc định là 1, khó thật.

 

if( $pro_config['per_row'] == 5){
   $num_row = 25;
}else{
    $num_row = 24 / $pro_config['per_row'];
}

Cho em hỏi đoạn này có nghĩa là nếu chọn số sp là 5 sp trên 1 hàng thì bootstrap sẽ chia là 25 cột còn nếu không thì là 2 cột ạ?

 

 

Hại não vcl ...

 

Em cũng méo hiểu 

 

 

Cấu hình trong shops sẽ có thêm số 5.

1 - 2 - 4 - 5 - 6 - 8.

Các cái kia là có sẵn, thêm thằng 5 vào thôi.

Nếu cấu hình là 5 thì

Xuất ra giá trị 25

Không thì.

Lấy 24 chia cho giá trị đặt.

 

Ví dụ cấu hình 6 thì

Lấy 24 / 6 = 4

Khi đó TPL sẽ là col-md-4.

Kiểu kiểu vậy.

 

gần đúng rồi, nhưng giao diện desktop trên mobile nó lại ra 2 cột k phải 5 nữa, hiz..

 

Ah vâng anh, n lấy giá trị cho thằng {num} trong cái này <div class="col-xs-{num} col-sm-{num} col-md-{num}">
Nếu đặt làm 5 sp thì sẽ là col-xs-25, khi đó width mình css là 20%. 
Như mọi người nói giao diện destkop trên mobile chỉ có 2 sp, có nghĩa cái này chưa hoạt động trên giao diện non-reponsive phải không a nhỷ?

 

Trên giao diện destkop thì có lẽ biến {num} không có tác dụng nữa 

 

 

Mình nghĩ cái này do vấn đề CSS.

Do muốn mọi thứ trong 1 nên khổ sở vậy thôi :D

 

A có demo kiểm tra thử xem sao :D

 

Mình gửi link demo của mình nhé, demo này mình bê nguyên si 6 file trong tệp css-5col.zip của bạn Kenny Nguyễn vào trên host của mình, truy cập bằng máy tính test cả 2 giao diện desktop & mobile đều ok, nhưng truy cập trên mobile thì chưa ok lắm, các bạn test nhé, nhớ xoay ngang xoay dọc điện thoại để thấy sự khác biệt nhé, hiz..

Link demo: http://dienlanhhn.tk/

 

Sao mình kiểm tra n vẫn 5 sp nhỷ :3