Tạo Carousel slide sản phẩm trên homepage

Thảo luận trong 'Tùy chỉnh giao diện' bắt đầu bởi An Nguyen, 16/10/14.

  1. An Nguyen

    An Nguyen bụi Staff Member

    16/10/14
    Thấy trang demo này có slide sản phẩm trên trang chủ khá hay, nên mình sẽ hướng dẫn mọi người dùng jquery bxSlider để tạo slide cho sản phẩm của mình.

    Demo: http://computer-theme-demo.nopcommerce.com/

    Bước 1:
    - Tải bxSlider trên trang http://bxslider.com/
    + Giải nén file jquery.bxslider.min.js vào thư mục Themes\DefaultClean\Scripts
    + Giải nén file jquery.bxslider.css vào thư mục Themes\DefaultClean\Content
    + Giải nén các file trong thư mục images vào Themes\DefaultClean\Content\images

    - Copy file _Root.Head.cshtml trong thư mục Views\Shared vào thư mục Themes\DefaultClean\Views\Shared

    - Mở file _Root.Head.cshtml, tìm đoạn code
    Mã:
    //resources
    Thêm vào bên dưới
    Mã:
        Html.AddScriptParts("~/Themes/DefaultClean/Scripts/jquery.bxslider.min.js");
        Html.AddCssFileParts("~/Themes/DefaultClean/Content/jquery.bxslider.css");
    Bước 2:
    - Copy file HomepageProducts.cshtml trong thư mục Views\Product vào Themes\DefaultClean\Views\Product

    - Mở file HomepageProducts.cshtml thay toàn bộ bằng đoạn code bên dưới :
    PHP:
    @model IList<ProductOverviewModel>

    @
    using Nop.Web.Models.Catalog;
      

    @if (
    Model.Count 0)
    {
        <
    div class="product-grid home-page-product-grid">
            <
    div class="title">
                <
    strong>@T("HomePage.Products")</strong>
            </
    div>
            <
    ul class="bxslider">
            @foreach (var 
    item in Model)
            {
                <
    div class="slide">
                <
    div class="item-box">
                    @
    Html.Partial("_ProductBox"item)
                </
    div>
                </
    div>
            }
            </
    ul>
        </
    div>
    }

    <
    script>
    $(
    document).ready(function(){
      $(
    '.bxslider').bxSlider({
        
    slideWidth155,
        
    minSlides2,
        
    maxSlides3,
        
    moveSlides1,
        
    slideMargin10
      
    });
    });
    </
    script>
    Đã xong. Chúc các bạn thành công!
     

    Các file đính kèm:

    Sửa lần cuối: 17/2/16
    Đang tải...
Draft saved Draft deleted

Chia sẻ trang này

Đang tải...