Tùy biến filter dạng dropdown trên nop

Thảo luận trong 'Mẹo và hướng dẫn' bắt đầu bởi An Nguyen, 30/9/14.

  1. An Nguyen

    An Nguyen bụi Staff Member

    30/9/14
    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:
    Đang tải...
Draft saved Draft deleted
Tags:

Chia sẻ trang này

Đang tải...