Tìm kiếm nhanh

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

Thảo luận trong 'Modules sản phẩm' đăng bởi anhyeuviolet, 21/07/2016 21:23.

  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

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

     

    Tệp đính kèm:

    hunterlovevnvnn thích điều này.
  • nhimthulinh

    nhimthulinh

    Điều hành viên Quản trị diễn đàn

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

     
    anhyeuviolet thích điều này.
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

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

     
  • hunterlovevnvnn

    hunterlovevnvnn Nguyễn Đình Báu

    Đú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 surprise.

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

     

    =_= 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é.

     

     
  • hunterlovevnvnn

    hunterlovevnvnn Nguyễn Đình Báu

    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) frown , 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......!!!

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

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

     
    hunterlovevnvnn thích điều này.
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

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

     
  • hunterlovevnvnn

    hunterlovevnvnn Nguyễn Đình Báu

    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.

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    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 ạ?

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

     

    Hại não vcl ...

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    Em cũng méo hiểu frown

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

     

    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.

     
  • hunterlovevnvnn

    hunterlovevnvnn Nguyễn Đình Báu

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

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

    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ỷ?

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

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

     
  • anhyeuviolet

    anhyeuviolet Kenny Nguyen

     

    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

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

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

     
  • hunterlovevnvnn

    hunterlovevnvnn Nguyễn Đình Báu

    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/

     
  • huongpro_love

    huongpro_love Nguyễn Văn Hưởng

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

     

Chia sẻ trang này

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây