Vào thẳng nội dung

Hướng dẫn thiết kế giao diện nopCommerce#

Tổng quan về thiết kế giao diện#

Giao diện (theme) là gì?

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.

Giao diện tạo thành từ nhiều thành phần: skin + CSS + image + tài nguyên khác. Cơ bản của giao diện đó là skin. Giao diện được định nghĩa trong 1 thư mục đặc biệt trên trang web của bạn.

Giao diện cũng gồm CSS. Khi đặt 1 file CSS vào thư mục giao diện, style đó sẽ tự động được áp dụng với giao diện. Xem thêm về CSS

Định nghĩa về giao diện nopCommerce

Giao diện nopCommerce về cơ bản được sử dụng để tạo layout phù hợp và đồng nhất trên tất cả các trang hoặc toàn bộ trang web. Giao diện nopCommerce cũng hỗ trợ các thành phần cơ bản gồm CSS, ảnh..

giao diện nopcommerce

Tất cả giao diện nopCommerce được đặt ở thư mục gốc của nopCommerce: /Themes

Cài đặt và áp dụng giao diện trong nopCommerce#

Khi bạn download một giao diện về, việc tiếp theo là:

  1. Copy nội dung giao diện đó vào thư mục gốc/Themes

theme nopcommerce

  1. Vào trang admin của bạn (http://www.yourdomain.com/admin)
  2. Vào Configuration > Settings > General And Miscellaneous settings
  3. Chọn giao diện bạn mới chép vào ở mục Default Store Theme, sau đó Save

Tạo một giao diện mới trong nopCommerce#

Bạn có thể tạo giao diện cho nopCommerce từ giao diện mặc định có trước. Vị trí thư mục themes với

  • bản source code là \Nop.Web\Themes\
  • bản no source (web) là \Themes\

cài đặt theme nopcommerce

Copy giao diện mặc định và paste vào thư mục themes, đặt tên folder giao diện mới cho phù hợp

nopcommerce tiếng việt

Mở file theme.config trong folder giao diện bạn vừa tạo, sửa lại tên giao diện, ảnh xem trước, mô tả...

nopcommerce việt nam

Bây giờ giao diện bạn vừa tạo sẽ xuất hiện ở mục Default store theme trong trang admin.

theme nopcommerce

Tìm hiểu về layout (bố cục) trong nopCommerce#

Thế layout là gì? là bố cục, là 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ế. Layout trong nopCommerce được thiết kế theo mô hình Master Pages trong ASP.NET 2.0, sử dụng cú pháp Razor để tùy chỉnh

Layout cho phép bạn định nghĩa một trang phổ biến (các trang như header, footer..) và các trang khác thừa hưởng giao diện của trang đó.

Trong nopCommerce, hiện tại có 2 kiểu layout:

  • _ColumnsOne.cshtml
  • _ColumnsTwo.cshtml

Cả 2 layout này thừa hưởng từ layout chính _Root.cshtml. Bản thân _Root.cshtml cũng thừa hưởng từ _Root.Head.cshtml.File _Root.Head.cshtml chứa các thông tin liên kết CSS và jquery (các file .css và .js). Vị trí tất cả các file layout nopCommerce nằm trong thư mục root /Views/Shared hoặc /Presentation/Nop.web/Views/Shared (nếu là bản source)

Layout của _Root.cshtml {.center}

layout nopcommerce

Layout của _Root.cshtml (theo các thành phần class)

bố cục nopcommerce

^^Hai layout thừa hưởng từ _Root.cshtml^^

_ColumnsOne.cshtml

Không có thay đổi layout trong body, cấu trúc vẫn khá giống với _Root.cshtml

tùy chỉnh giao diện nopcommerce

_ColumnsTwo.cshtml

Có 2 cột trong cấu trúc body

thiết kế giao diện nopcommerce

Tùy chỉnh giao diện nopCommerce#

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)

Các thành phần trong layout (class css):

class trong layout nopcommerce

Cách thay đổi logo trang web#

Để thay đổi logo trang web, có 2 cách:

^^Cách 1:^^

  1. Truy cập folder root /Theme/tên_theme/Content/images
  2. Tìm và thay file logo.gif bằng logo của bạn (có cùng kích thước cũ: 310x60pc)

^^Cách 2:^^

  1. 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
  2. Mở file /Views/Shared/Header.cshtml và tìm và thay đổi như bên dưới:
1
var logoPath = "~/Themes/" + currentThemeName + "/Content/images/logomoi.gif";
  1. Cuối cùng lưu lại file Header.cshtml để hoàn tất

Chú ý:

Bạn phải refresh hoặc xóa history, cookie của trình duyệt để thấy thay đổi logo trên.

Nếu bạn muốn thay đổi cách thể hiện logo, chỉnh sửa file /Content/styles.css ở các đoạn sau:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
.header-logo {
    margin: 0 0 20px;
    text-align: center;
    }
.header-logo a {
    display: inline-block;
    max-width: 100%;
    line-height: 0; /*firefox line-height bug fix*/
    }
.header-logo a img {
    max-width: 100%;
    opacity: 1;
    }

Cách thay đổi bố cục (layout) trang web#

1. Nếu bạn muốn tùy chỉnh hoặc thay đổi layout cơ bản (_Root.cshtml) của trang web

Tìm và sửa code này trong style.css:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
.master-wrapper-content {
    position: relative;
    z-index: 0;
    width: 90%;
    margin: 0 auto;
    }
.master-column-wrapper {
    position: relative;
    z-index: 0;
    }
.master-column-wrapper:after {
    content: "";
    display: block;
    clear: both;
    }

2. Nếu muốn thay đổi layout 1 cột (_ColumnOne.cshtml). Hãy tìm đoạn code này trong style.css

1
2
3
.center-1 {
    margin: 0 0 100px;
    }

3. Thay đổi layout 2 cột (_ColummTwo.cshtml): tìm code này trong style.css

1
2
3
4
5
6
7
8
.center-2, .side-2 {
    margin: 0 0 50px;
    }
.side-2:after {
    content: "";
    display: block;
    clear: both;
    }

Xem thêm bài cách thay đổi layout ở trang nopviet.com

Cách thay đổi header menu (top menu)#

  • Nếu muốn tùy chỉnh hoặc thay đổi header menu (top menu) trang web. Mở file /Views/Catalog/TopMenu.cshtml
  • Thêm hoặc xóa các mục trong menu ở tag <li>
  • Nếu muốn tùy chỉnh hoặc thay đổi footer (footer links) trang web, Mở file /Views/Common/Footer.cshtml
  • Thêm hoặc xóa các liên kết trong footer ở tag <li>

Hỗ trợ ngôn ngữ RTL (phải sang trái)#

Giao diện mặc định DefaultClean của đã hỗ trợ style sheet RTL (styles.rtl.css), nhưng bạn cần kích hoạt nó trong nopCommerce.

Để sử dụng phiên bản RTL của theme, vào Administration > Configuration > Languages, nhấn Edit ngôn ngữ sử dụng, và bật tùy chọn Right-to-Left.

Right to left (RTL) nopcommerce

Giao diện trang cửa hàng khi sử dụng RTL

Right to left (RTL) nopcommerce

Css hỗ trợ RTL nằm ở file styles.rtl.css:

RTL theme nopcommerce

Widget#

Widget là một ứng dụng web độc lập của bên thứ 3 được nhúng vào trang web của bạn.

Trong nopCommerce, plugin widget cho phép bạn nhúng các đoạn mã/ứng dụng của bên thứ 3 vào một vị trí nhất định trong trang web (ví dụ thẻ head, body, block trái, block phải)

Mặc định, chỉ có 2 plugin widget được cài sẵn trên trang admin nopCommerce:

  1. Google Analytics
  2. Nivo Slider

Google Analytics:

Google Analytics là công cụ thống kê trang web của Google. Giúp bạn theo dõi lượng khách truy cập và khả năng chuyển đổi thương mại điện tử trên trang web của bạn. Tìm hiểu thêm về Google Analytics

Để thiết lập, vào Administration > Content Management > Widgets, nhấn nút Configures mục Google Analytics.

Xem thêm về cách thiết lập Google Analytics

Nivo Slider:

Nivo Slider là một jquery image slider cho trang chủ, dùng để hiển thị một số ảnh xoay vòng với các hiệu ứng độc nhất.

Xem thêm về cách thiết lập Nivo Slider

Thiết kế giao diện Responsive#

Thiết kế responsive (thiết kế web đáp ứng), là kiểu mẫu phong cách thiết kế với giao diện, bố cục website thể hiện đẹp, mang tính mỹ thuật với độ hiển thị nội dụng co giãn phù hợp trên tất cả các màn hình thiết bị như desktop, laptop, tablet, smartphone, với mọi độ phân giải màn hình, duy trì sự hiển thị nội dung nhất quán thẩm mỹ trên mọi chế độ phân giải. (Nguồn wikipedia.org)

giao diện thiết kế responsive nopcommerce

Mẹo và thủ thuật#

Một số mẹo và thủ thuật thiết kế giao diện nopCommerce:

  1. Một trong những vấn đề chính trong phát triển/thiết kế là các trình duyệt khác nhau sử dụng những giá trị thuộc tính CSS mặc định khác nhau. Khi tùy chỉnh hoặc tạo giao diện riêng, hãy luôn đảm bảo rằng CSS của bạn tương thích với tất cả trình duyệt. Nhớ kiểm tra website của bạn ở các trình duyệt phổ biến như: Chrome, Firefox, Opera, Safari, IE và Edge.
  2. Khi chỉnh sử CSS, nếu không thấy bất kỳ thay đổi cho trang web. Hãy thử hóa history và cookie của trình duyệt và refresh lại trang web.
  3. Cận hiểu sự khác nhau giữa id và class. Class có thể áp dụng cho nhiều thành phần, trong khi id chỉ là một phần tử.
  4. Sử dụng công cụ Inspect (Developer tool/F12) của trình duyệt để sửa, debug.. CSS, HTML, Javascript trực tiếp trang web.
  5. CSS không cho phép bạn đặt tên idclass bắt đầu bằng số hoặc ký tự.
  6. Đừng giới hạn bản thân chỉ sử dụng các thẻ span và div. Có rất nhiều tính năng khác tốt hơn cung cấp bởi CSS để thiết kế trang web.

Phân phối giao diện#

Bạn có thể chia sẻ giao diện (theme) của bạn với người khác thông qua trang Extensions của nopCommerce

Bạn cần có tài khoản trên trang nopCommerce, truy cập trang My account, ở tab Your contributions and extensions, nhấn nút Upload a new extension để tải giao diện của bạn lên.

^