1. Nam Nguyen

    Nam Nguyen Gà tre Ban quản trị

    12/1/16
    #1
    [​IMG]
    Xây dựng chức năng đơn giản gần giống với NOP JCAROUSEL.
    Chắc các bạn sử dụng nop đều biết tới jcarousel trên trang chủ http://www.nop-templates.com/jcarousel-plugin-for-nopcommerce. Nhưng không phải ai cũng đủ tiền mua mà muốn crack nó :D... Nhưng đừng lo nop khá dễ tùy chỉnh, bạn có thể dễ dàng xây dựng một chức năng tương tự bằng cách sử dụng Plugin jquery http://bxslider.com/ . :D

    Dưới đây mình xin đá qua vài hướng dẫn cơ bản.

    Đây là trang Featured products cơ bản của chúng ta, nhìn rất là cơ bản mà,
    [​IMG]
    1. Bạn có các thư viện tải tại trang sau http://bxslider.com/
    [​IMG]
    2. Copy thư viện :D
    Đây là bước đơn giản nhất, bạn chỉ cần sư dụng thuần thục 2 thao tác đơn giản ctr+c và ctr+v là xong :)
    • Bạn copy các file trong thư mục images/ tới
    [​IMG]

    Tiếp tục copy file css vào thư mục chứa css của themes nhưu hình trên,
    Còn file javascript thì copy vào thư mục Nop.web/Scripts
    [​IMG]

    3. Làm sao để khai báo chúng đây vào dự án Nop đây?

    [​IMG]
    Ban mở File Head.cshtml theo đường dẫn Như hình trên, [Root]/Nop.Web/Themes/{Theme-Name}/Views/Shared/Head.cshtml.

    3.1 Chèn file Css và js sử dụng vào đây
    [​IMG]

    4. Cấu hình thư viện bxSlider để sử dụng chức năng.
    Bạn mở File Nop.Web/Views/Product/HomePageProducts.cshtml lên
    và thêm vào dòng sau:
    [​IMG]
    Tiếp tục viết đoạn script cho nó :) ở đây dùng jquery


    Sau khi thêm xong bạn sẽ được giao diện như hình
    [​IMG]
    bạn sửa lại đường dẫn images cho nó và sẽ được kết quả tương tự

    Chúc bạn thực hành tốt.
    Ngoài lề tý, mình cũng là một người mới bắt đầu làm việc với framework này, nên có j thiếu sót mong đc các bạn góp ý giúp mh, chúng ta cùng học hỏi nhau.

    Mà xin phép admin nopview, mình rất ghét dùng cái công cụ soạn thảo hiện tại của nopviet :D sự thật là soạn thảo bằng cái này nó rất lâu, nhất là các phần chèn hình ảnh và chèn code :D cái chèn code mình lâu khong dùng diễn đàn nên mình quên mất, với lại ngại search :D còn phần chèn hình ảnh thì phải upload qua 1 trang trug gian rồi mới chèn link dc :D mong admin nopview bổ sung chức năng này cho anh em
     
    1
    An Nguyen thích bài này.
    An Nguyen thích bài này
    Đang tải...
    • ngày tạo

      Nam Nguyen 12/1/16
    • trả lời cuối

      An Nguyen 13/1/16
    • 1,735

      lượt xem

    • 4

      trả lời

    • 1

      lượt thích

  2. An Nguyen

    An Nguyen bụi Ban quản trị

    12/1/16
    #2
    bài viết rất hay và hướng dẫn cụ thể.
    cám ơn bạn đã góp ý về diễn đàn nopviet, phần upload ảnh nằm ở mục tải lên đó bạn, rất đơn giản mà. Còn chèn code thì nó ở đây giống như hình dưới

    2016-01-12_232842.
     
  3. Nam Nguyen

    Nam Nguyen Gà tre Ban quản trị

    12/1/16
    #3
    à nó nằm ở bên dưới :D e ko tháy, cám ơn anh!
     
    1
    An Nguyen thích bài này.
    An Nguyen thích bài này
  4. KenMT

    KenMT Tích cực

    13/1/16
    #4
    Cái bxSlider này mình dùng khá nhiều, nhưng cho hỏi là làm sao để khi người dùng click next or prev thì xong nó vẫn tự động chạy nhỉ, hiện tại là click next or prev xong thì slide nó ko tự động chạy nữa.
     
    1
    An Nguyen thích bài này.
    An Nguyen thích bài này
  5. An Nguyen

    An Nguyen bụi Ban quản trị

    13/1/16
    #5
    cái autoplay tiếp mình cũng chưa test, nhưng m thấy trên mạng hướng dẫn khá nhiều, bạn test thử xem.
    Tìm với từ khóa: bxslider autoplay after click
     
    1
    KenMT thích bài này.
    KenMT thích bài này
Đã lưu nháp Draft deleted
Đang tải...