Dismiss Notice

Chào bạn!

Hãy đăng nhập diễn đàn nopViet.com để thảo luận và nhận thông tin mới nhất về nopCommerce nhé.

Đăng nhập bằng Facebook

Tạo các tab thông tin trên trang chi tiết sản phẩm

Thảo luận trong 'Thảo luận về Thiết kế giao diện' bắt đầu bởi An Nguyen, 9/1/16.

  1. An Nguyen

    An Nguyen bụi Staff Member

    Bài viết:
    287
    Điểm:
    28
    Nơi ở:
    Biên Hòa
    Trang chủ:
    Bằng cách sử dụng ít kiến thức về javascript, css và html là chúng ta có thể tạo ra các tab với các thông tin khác nhau về sản phẩm
    tab.png
    Bước 1: HTML
    Mở file Views\Product\ProductTemplate.Simple.cshtml
    Tìm
    PHP:
    @if (!String.IsNullOrEmpty(Model.FullDescription))
                        {
                            <
    div class="full-description" itemprop="description">
                                @
    Html.Raw(Model.FullDescription)
                            </
    div>
                        }
    Thay thế bằng
    PHP:
    <div class="tabs">
        <
    ul class="tab-links">
            <
    li class="active"><a href="#tab-nop1">Thông số</a></li>
            <
    li><a href="#tab-nop2">Giải pháp</a></li>
            <
    li><a href="#tab-nop3">Khuyến mãi</a></li>
        </
    ul>
        <
    div class="tab-content">
            <
    div id="tab-nop1" class="tab active">
                        @if (!
    String.IsNullOrEmpty(Model.FullDescription))
                        {
                            <
    div class="full-description" itemprop="description">
                                @
    Html.Raw(Model.FullDescription)
                            </
    div>
                        }
            </
    div>
            <
    div id="tab-nop2" class="tab">
            </
    div
            <
    div id="tab-nop3" class="tab">
            </
    div>
        </
    div>
    </
    div>    
    Thay các tên tab thông số, giải pháp, khuyến mãi theo ý thích của bạn, bên dưới mục tab-content là chứa nội dung của các thẻ.
    Bước 2: CSS
    Thêm đoạn CSS sau:
    PHP:
    /*----- Tabs -----*/
    .tabs{width:100%;display:inline-block;}
    .
    tab-links:after{display:block;clear:both;content:'';}
    .
    tab-links li{float:left;list-style:none;margin:0 5px;}
    .
    tab-links a{display:inline-block;border-radius:0;background:#cccccc;font-size:13px;font-weight:bold;color:#fff;transition:all linear .15s;padding:6px 15px;color: #3a3a3a;}
    .tab-links a:hover{background:#a7cce5;text-decoration:none;color: #000;}
    .tabs li.active a,.tabs li.active a:hover{background:rgba(124182471);color:#fff;}
    .tab-content{border-radius:0;box-shadow:none;background:#fff;padding:0;}
    .tab{display:none;}
    .
    tab.active{display:block;}
    Bước 3: Jquery
    Tạo file script tab.js với nội dung dưới vào Views\Shared\_Root.Head.cshtml
    PHP:
    jQuery(document).ready(function() {
        
    jQuery('.tabs .tab-links a').on('click', function(e)  {
            var 
    currentAttrValue jQuery(this).attr('href');
            
    // Show/Hide Tabs
            
    jQuery('.tabs ' currentAttrValue).show().siblings().hide();
            
    // Change/remove current tab to active
            
    jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
            
    e.preventDefault();
        });
    });
    Ví dụ cách chèn file tab.js vào Views\Shared\_Root.Head.cshtml
    PHP:
    Html.AppendScriptParts("~/Themes/{0}/Content/scripts/tab.js");
    2016-01-12_135559.png

    Chúc mọi người thực hành tốt nhé:D
     
    Sửa lần cuối: 17/2/16
    Tags:
    Nam Nguyen thích bài này.
  2. Đang tải...


  3. Nam Nguyen

    Nam Nguyen NopMember Staff Member

    Bài viết:
    25
    Điểm:
    3
    Thanks ca.
     
  4. An Nguyen

    An Nguyen bụi Staff Member

    Bài viết:
    287
    Điểm:
    28
    Nơi ở:
    Biên Hòa
    Trang chủ:
    no problem! hehe :v
     
  5. KenMT

    KenMT NopActive

    Bài viết:
    41
    Điểm:
    8
  6. An Nguyen

    An Nguyen bụi Staff Member

    Bài viết:
    287
    Điểm:
    28
    Nơi ở:
    Biên Hòa
    Trang chủ:
    đẹp lắm, bạn dùng nop à, cái chat bạn dùng của ai vậy, chỉ mình với
     
  7. KenMT

    KenMT NopActive

    Bài viết:
    41
    Điểm:
    8
    Nop 3.6 anh ạ, cái chat thì nhờ ông anh crack hộ thôi ạ, nó chạy riêng trên server khác. Trong Nop cũng có 1 cái Live Chat Free mà chưa xem cụ thể nó ntn :D :D
     
    Sửa lần cuối: 14/1/16
    An Nguyen thích bài này.
  8. Nam Nguyen

    Nam Nguyen NopMember Staff Member

    Bài viết:
    25
    Điểm:
    3
    trong nop có live chát free mà a :D
     
  9. An Nguyen

    An Nguyen bụi Staff Member

    Bài viết:
    287
    Điểm:
    28
    Nơi ở:
    Biên Hòa
    Trang chủ:
    cái nào vậy em, sao a k thấy, cấu hình sao nhỉ
     
  10. Nam Nguyen

    Nam Nguyen NopMember Staff Member

    Bài viết:
    25
    Điểm:
    3
    Nop.Chat đó a ;);););)
     
  11. An Nguyen

    An Nguyen bụi Staff Member

    Bài viết:
    287
    Điểm:
    28
    Nơi ở:
    Biên Hòa
    Trang chủ:
    hình nhứ cái đó tốn tiền mà, livechat.com fai k
     
  12. Nam Nguyen

    Nam Nguyen NopMember Staff Member

    Bài viết:
    25
    Điểm:
    3
  13. An Nguyen

    An Nguyen bụi Staff Member

    Bài viết:
    287
    Điểm:
    28
    Nơi ở:
    Biên Hòa
    Trang chủ:
  14. Nam Nguyen

    Nam Nguyen NopMember Staff Member

    Bài viết:
    25
    Điểm:
    3
    Cái luôn thật mà sài a :D sao phải thử làm j :D
     
  15. An Nguyen

    An Nguyen bụi Staff Member

    Bài viết:
    287
    Điểm:
    28
    Nơi ở:
    Biên Hòa
    Trang chủ:
    anh dg cài, a đọc thấy nó mới free đây thôi.
    https://www.nop.rocks/nopchat
    trong link trên anh thấy thông tin sản phẩm gồm các tab :General, Installation,Configuration,Getting Started
    làm sao để tạo các tab với các thông tin bên trong đó thì a chưa biết
     
  16. Nam Nguyen

    Nam Nguyen NopMember Staff Member

    Bài viết:
    25
    Điểm:
    3
  17. An Nguyen

    An Nguyen bụi Staff Member

    Bài viết:
    287
    Điểm:
    28
    Nơi ở:
    Biên Hòa
    Trang chủ:
    tab thì anh biets roi, như bài hướng dẫn này mà, qua trong các noi dung của nó thôi
     
  18. Đức Định

    Đức Định NopNew

    Bài viết:
    3
    Điểm:
    1
    Đẹp, mà bấm dzô link sản phẩm, sao nó ra link local nhẩy :D

    Chính xác là slide hình chiếc giày nhé, set lại link đi bạn :)
     
Draft saved Draft deleted
Tags:

Chia sẻ trang này

Đang tải...