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ùy biến filter dạng dropdown trên nop

Thảo luận trong 'TUT nopCommerce' bắt đầu bởi An Nguyen, 30/9/14.

  1. An Nguyen

    An Nguyen bụi Staff Member

    Bài viết:
    286
    Điểm:
    28
    Nơi ở:
    Biên Hòa
    Trang chủ:
    2014-10-01_234329.png
    Hiện tại Filter mặc định của nop hiện dạng danh sách <li>, nếu có nhiều phân mục sẽ rất dài và chiếm chỗ, để đơn giản mình sẽ tùy biến filter sang dạng dropdown (menu đổ xuống)

    2014-09-30_120354.png
    Áp dụng cho cả phiên bản source và no source, bài viết thực hiện trên nop 3.4 nhé
    Chỉnh sửa file Views\Catalog\_FilterSpecsBox.cshtml
    Tìm đoạn
    PHP:
    <ul class="group">
    <
    li class="title">
    <
    strong>@groupList[0].SpecificationAttributeName</strong>
    </
    li>
    @foreach (var 
    spec in groupList)
    <
    li class="item">
    <
    a href="@spec.FilterUrl">@spec.SpecificationAttributeOptionName</a>
    </
    li>
    </
    ul>
    }
    Thay bằng:
    PHP:
    <div class="group">
    <
    span class="title">
    <
    strong>@groupList[0].SpecificationAttributeName</strong>
    </
    span>
    <
    select class="item" onchange="setLocation(this.value);">
    <
    option value="0">@T("common.all")</option>
    @foreach(var 
    spec in groupList)
    {
    <
    option value="@spec.FilterUrl">@spec.SpecificationAttributeOptionName</option>
    }
    </
    select>
    </
    div>
    Tương tự với file Views\Catalog\_FilterPriceBox.cshtml
    Tìm đoạn
    PHP:
    <ul class="price-range-selector">
    @foreach (var 
    item in Model.Items)
    {
    <
    li><a href="@item.FilterUrl">@FormatPriceRangeText(item)</a> </li>
    }
    </
    ul>
    Thay bằng
    PHP:
    <div class="price-range-selector">
    <
    select class="item" onchange ="setLocation(this.value);">
    <
    option value="0">@T("common.all")</option>
    @foreach (var 
    item in Model.Items)
    {
    <
    option value="@item.FilterUrl">@FormatPriceRangeText(item)</option>
    }
    </
    select>
    </
    div>
    Kết quả:
    2014-09-30_151519.png
    Có thể chỉnh lại css cho đẹp hơn nhé
    Chúc các bạn thực hành tốt :D
     
    Sửa lần cuối: 17/2/16
    Tags:
  2. Đang tải...

    Chủ đề liên quan Diễn đàn Date
    Tuyển lập trình viên Nopcommerce Trợ giúp thương mại (trả tiền) 22/8/16
    Tùy chỉnh menu và ACL menu trong giao diện Admin TUT nopCommerce 28/1/16
    Tùy chỉnh số lượng và sắp xếp Feature Product trên homepage Thảo luận chung về NOP 18/1/16

Draft saved Draft deleted
Tags:

Chia sẻ trang này

Đang tải...