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

Hướng dẫn cơ bản về theme nopCommerce

Thảo luận trong 'TUT nopCommerce' bắt đầu bởi An Nguyen, 22/4/12.

  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ủ:
    Chào tất cả anh em, do nopCommerce còn quá mới ở VN, nên tiện đây mình sẽ hướng dẫn ae tự tạo hoặc chỉnh sửa lại giao diện của NOP cho đẹp mắt hơn.
    1. Tổng quan
      Theme (giao diện) là tập hợp các thiết lập thuộc tính cho phép bạn định nghĩa lại cách hiển thị của trang và cách bạn điều khiển trang web, sau đó áp dụng giao diện này vào trang của bạn.

      Theme tạo thành từ nhiều thành phần: skin + CSS + image + khác. Cơ bản của theme đó là skin. Theme được dịnh nghĩa sẵn trong 1 thư mục đặc biệt trên Web Server.

      Theme cũng gồm CSS. Khi đặt 1 file CSS vào thư mục chứa theme nào đó, nó sự tự động áp dụng đối với theme đó.
    2. Định nghĩa theme nopCommerce[​IMG]
      Cấu trúc theme của NOP
      [​IMG]

      Theme của NOP thường nẳm ở thư mục root/themes (root là thư mục gốc trang web của bạn)

      Cài đặt và áp dụng theme trong NOPKhi bạn download đâu đó 1 theme về, muốn cài đặt chỉ cần copy thư mục đó vào root/themes của server.
      [​IMG]
      Áp dụng theme vào trang web:
      Vào Administration của Nop (www.yoursite.com/admin)
      [​IMG]
      Tới Configuration > Settings > General And Miscellaneous Settings [​IMG]

      Vào Store Information > Store Theme > Chọn theme bạn đã cài vào
      [​IMG]
    3. Cách tạo 1 theme cho NOP
      Cách tạo theme đơn giản nhất đó là sử dụng theme mặc định có sẵn và sửa lại
      Đầu tiên tạo 1 bản copy theme có sẵn và đổi tên lại theo ý thích của bạn
      2012-04-22_230558.png
      Cấu trúc 1 thư mục theme:
      NopClassic (tên theme):
      ___Content (phần quan trọng của theme)
      ______images (chứa các ảnh liên quan)
      ______styles.css (sửa giao diện và các liên kết tới image)
      ___Views
      ______shared
      _________head.cshtml (thiết lập lại tên theme)
      ______web.config
      ___theme.config (thiết lập lại tên theme)

      Mở file theme.config Head.cshtml sửa tên cũng như đường dẫn lại cho phù hợp với theme mới
      Code theme.config
      PHP:
      <?xml version="1.0" encoding="utf-8" ?>
      <Theme title="[color=blue]nop classic[/color]"
        supportRTL="false"
        mobileTheme="false"
            previewImageUrl="[color=blue]~/Themes/nopClassic/preview.png[/color]"
            previewText="[color=blue]This is the 'nopClassic' site theme[/color].">
      </Theme>
      Code Head.cshtml
      PHP:
      @using Nop.Core
      @using Nop.Core.Infrastructure
      @using Nop.Web.Framework;
      @{
      var 
      supportRtl EngineContext.Current.Resolve<IWorkContext>().WorkingLanguage.Rtl;
      }
      @if (
      supportRtl)
      {
      //this theme supports RTL
      Html.AppendCssFileParts(Url.Content("~/Themes/DarkOrange/Content/styles.rtl.css"));
      }
      else
      {
      Html.AppendCssFileParts(Url.Content("~/Themes/DarkOrange/Content/styles.css"));
      }
      Thêm ảnh vào thư mục /Content/Images và tùy chỉnh lại file style.css
     
    Sửa lần cuối: 17/2/16
    Đức Định thích bài này.
  2. Đang tải...

    Chủ đề liên quan Diễn đàn Date
    VIDEO Video hướng dẫn tạo database và sử dụng cơ bản MS SQL Server 2005 Quản trị Windows Server 25/12/16
    Chia sẻ template nopplugin.com + code đa gian hàng + Tài liệu hướng dẫn Phát triển nopCommerce 25/6/16
    nopCommerce_User_Guide_3.10 - CHia sẻ tài liệu hướng dẫn Chia sẻ Plugin và Theme nopCommerce 3/4/16

  3. An Nguyen

    An Nguyen bụi Staff Member

    Bài viết:
    287
    Điểm:
    28
    Nơi ở:
    Biên Hòa
    Trang chủ:
    4. Tìm hiểu về Layout trong thiết kế giao diện

    Thế layout là gì? là bố cục, cách sắp xếp thể hiện các thành phần của trang web nhìn sao cho trực quan nhất tùy theo ý người thiết kế.
    Trong nopCommerce, có 3 kiểu layout:
    _ColumnsOne.cshtml
    _ColumnsTwo.cshtml
    _ColumnsThree.cshtml
    Cả 3 layout này thừa hưởng từ layout chính _Root.cshtml. Nằm trong thư mục root/views/shared hoặc /Presentation/Nop.web/views/shared (nếu là bản source)
    Layout chính _Root.cshtml
    design.4.1.jpg

    Layout _Root.cshtml (gồm cả class css)​
    design.4.2.jpg

    Layout _ColumnsOne.cshtml (gần như giống layout _root.cshtml)​
    design.4.3.jpg

    Layout _ColumnsTwo.cshtml (có 2 cột trong cấu trúc Body)​
    design.4.4.jpg

    Layout _ColumnTwo.cshml (gồm các Block nội dung)​
    design.4.5.jpg

    Layout _ColumnsThree.cshml (gồm 3 cột trong phần Body)​
    design.4.6.jpg

    Layout _ColumnsThree.cshml (gồm các Block nội dung)​
    design.4.7.jpg
     
  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ủ:
    5. Tùy biến Theme nopCommerce

    Thay đổi logo trang web: bạn muốn thay đổi logo mặc định của nop , có 2 cách

    logo.gif
    -Cách 1:

    Vào thư mục root/theme/tên theme/content/images Tìm kiếm thay thế file logo.gif mặc định bằng logo của bạn với cùng kích cỡ 225x60px
    2012-04-27_203750.png
    -Cách 2: chép file ảnh logo của bạn vào thư mục root/theme/tên theme/content/images với tên bất kỳ, ví dụ tên logomoi.gif

    Mở file style.css tìm và sửa lại đường dẫn tên logo mới.​
    Mã:
    a.logo{background:url(images/logo.gif);display:block;width:225px;height:60px;text-decoration:none;}
    Thay đổi giá trị logo.gif thành logomoi.gif, chỉ định kích thước rộng (width) và cao (height) của logo nhé..:D
    Và cuối cùng lưu lại.
     
  5. 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ách thay đổi layout trang web

    - Nếu bạn muốn tùy chỉnh hoặc thay đổi layout trang web (dựa vào các file _Root.cshtml)
    Tìm và sửa code này trong style.css
    Mã:
    .master-wrapper-page{margin:10px auto;width:960px;}
    .master-wrapper-content{float:left;width:960px;margin:15px 0 0;text-align:left;background:#555 url(images/bg_container.gif) repeat-x;}
    - Nếu muốn thay đổi layout 1 cột (_ColumnOne.cshtml). Hãy tìm đoạn code này trong style.css

    Mã:
    /* one column master page */
    .master-wrapper-center-1{float:left;width:960px;background:url(images/bg_maincolumn_1.gif) no-repeat left top #FFF;display:inline;}
    .master-wrapper-cph-1{float:left;width:940px;color:#000;min-height:600px;padding:10px;}
    - Thay đổi layout 2 cột (_ColummTwo.cshtml) tìm code này trong style.css

    Mã:
    /* two column master page */
    .master-wrapper-side-2{float:left;width:180px;margin:0 0 0 10px;font-family:arial, helvetica, sans-serif;display:inline;}
    .master-wrapper-center-2{float:left;width:760px;margin:0 0 0 10px;background:url(images/bg_maincolumn_2.gif) no-repeat left top #FFF;display:inline;}
    .master-wrapper-cph-2{float:left;width:740px;color:#000;min-height:600px;padding:10px;}
    - Thay đổi layout 3 cột (_ColumnThree.cshtml)
    Mã:
    /* three column master page */
    .master-wrapper-leftside-3{float:left;width:180px;margin:0 0 0 10px;font-family:arial, helvetica, sans-serif;display:inline;}
    .master-wrapper-center-3{float:left;width:560px;margin:0 0 0 10px;background:url(images/bg_maincolumn_3.gif) no-repeat left top #FFF;display:inline;}
    .master-wrapper-cph-3{float:left;width:540px;color:#000;min-height:600px;padding:10px;}
    .master-wrapper-rightside-3{float:right;width:180px;margin:0 10px;font-family:arial, helvetica, sans-serif;display:inline;}
    .master-wrapper-fluid-content{height:1%;margin:0;overflow:hidden;padding:0;}
    .master-wrapper-fluid-content-inner{overflow:hidden;width:100%;padding:0 10px;}
    .master-wrapper-fluid-content-left .master-wrapper-fluid-content-sidebar{float:left;overflow:hidden;padding-right:20px;margin-left:10px;width:180px;font-family:arial, helvetica, sans-serif;}
    .master-wrapper-fluid-content-right .master-wrapper-fluid-content-sidebar{float:right;overflow:hidden;padding-left:20px;margin-right:10px;width:180px;font-family:arial, helvetica, sans-serif;}
     
  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ủ:
    Các class CSS quan trọng diện mạo trang nopCommerce trong file style.css

    Giống như các thành phần trong layout, các lớp (class) css cũng tương tự
    class css.png

    Nếu biết 1 chút xíu về css là có thể chỉnh sửa giao diện các thành phần lại rồi hehe:D
     
  7. An Nguyen

    An Nguyen bụi Staff Member

    Bài viết:
    287
    Điểm:
    28
    Nơi ở:
    Biên Hòa
    Trang chủ:
    Widget
    Widget là một ứng dụng độc lập mà có thể nhúng vào website như 1 phần mở rộng. Ví như widget quảng cáo, widget html, widget javascript, đồng hồ, lịch..
    Trong nop, một widget sẽ cho phép nhúng các đoạn code ứng dụng vào trang web store, có thể đặt ở bất kỳ vị trí nào, ví dụ ở head tag, body tag, left column block, right column block.
    Mặc định khi cài đặt nop sẽ có sẵn 2 widget: Live person (Chat)Google Analytics

    Truy cập Admin Panel > Configuration > Plugin
    Widget Live person (Chat)

    livepersion.png
    Tạo 1 kênh hỗ trợ online (Chat) trên website (public store). Có thể đặt widget này ở 4 vùng khác nhau trong website. Đây là một giải pháp thương mại.
    design.6.1.jpg
    Ngoài ra: bạn cũng có thể tạo nhiều widget như nút Like Facebook, Twitter, Google+...
    Widget Google Analytics
    Google Analytics là 1 tool thống kê (stats) miễn phí của ông Google. Nó theo dõi các số liệu thống kê về người truy cập và các thay đổi trên website. Widget này có thể đặt ở thẻ header hoặc trong thẻ body

    Tạo 1 tài khoản trên Google Analytics và lấy các thông số ID tracking code tương ứng..
    google analytics.png
     
  8. nhatduongchi123

    nhatduongchi123 NopNew

    Bài viết:
    2
    Điểm:
    1
    bạn có thể hướng dẫn chi tiết cách chèn nick chát và skype vào nop 2.6 được ko ? thanks
     
  9. dka

    dka NopNew

    Bài viết:
    5
    Điểm:
    1
    còn nếu muốn add widget ở một số trang cụ thể thì làm sao admin ?
     
  10. Phạm Biên Cương

    Phạm Biên Cương NopNew

    Bài viết:
    12
    Điểm:
    1
    Nơi ở:
    Hà Nội

    Mình đang dùng bản Nop 2.65. Bạn cho hỏi tại sao widges live chat của mình không hoạt động được. Mình đã kích hoạt is active = true, khi ra trang home chỉ hiển thị vùng chứa "Hỗ trợ trực tuyến"(như hình ảnh trong file attack) còn biểu tượng yahoo thì ko hiển thị???
     

    Các file đính kèm:

  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ủ:
    cái liveperson này tốn tiền thì phải, bữa trước mình cũng đã chat hỏi rồi. thôi xài yahoo hay skype cho tiện
     
  12. hunter

    hunter NopMember

    Bài viết:
    16
    Điểm:
    3
    chỉnh sửa giao diện 3.4 có tương tự thế này nữa ko #An Nguyen nhỉ ?
     
  13. Kem_Tun_28

    Kem_Tun_28 NopMember

    Bài viết:
    24
    Điểm:
    3
    Cũng thế thôi mà
     
  14. Hải Quân

    Hải Quân NopPopular

    Bài viết:
    55
    Điểm:
    18
    Nơi ở:
    Hà Nội
    Trang chủ:
    Với 1 themes mà dùng chung cho nhiều gian hàng thì cách này gặp vấn đề. Nếu bạn dùng 1 themes cho đa website thì ảnh logo vào trong topic nhé.

    <div class="header-logo">
    @Html.Action("TopicBlock", "Topic", new { systemName = "HeadLogo" })
    </div>
     
  15. Đức Định

    Đức Định NopNew

    Bài viết:
    3
    Điểm:
    1
    Nếu mình muốn tạo 1 theme hoàn toàn mới cho cả site, đồng nghĩa với việc phải customize lại css và layout cho tất cả các plugin mình sử dụng trong site à bạn?
     
  16. An Nguyen

    An Nguyen bụi Staff Member

    Bài viết:
    287
    Điểm:
    28
    Nơi ở:
    Biên Hòa
    Trang chủ:
    Đúng rồi, hoặc tạo thêm 1 css riêng với ưu tiên cao hơn, view nào cần thì sửa thôi
     
Draft saved Draft deleted

Chia sẻ trang này

Đang tải...