CSS, JavaScript và mã tuỳ chỉnh của menu

Bài này tra cứu các ô code của cả menu. Chúng nằm cạnh nhau ở cuối tấm Configure. Nếu bạn muốn đọc theo tình huống (“làm sao đổi màu chữ cả menu?”), xem bài CSS riêng, class dùng lại và font chữ. Code của riêng một mục menu thì nằm ở bài Hiệu ứng, class, CSS và thuộc tính của một mục.

Đây là phần nâng cao. Nếu chỉ cần đổi màu, cỡ chữ hay khoảng cách, bạn nên dùng các ô trong bước Design trước.

Mở các ô code ở đâu?

Mở menu, bấm bước Configure trên thanh bước dọc ở mép trái. Một tấm Configure trượt ra từ bên phải.
Kéo xuống cuối tấm. Các khối code nằm liền nhau theo thứ tự: Reusable Classes (CSS) → Custom CSS for this menu → Global CSS → JavaScript for this menu → Global Javascript → Google Icon Weight → Smart Optimization → Attributes → Environment Variables.
Gõ code thẳng vào ô, không bọc trong thẻ style hay script vì Navi+ tự thêm. Xong bấm Save.

Configure

Visibility rules

Device · Cart · Schedule · Market · CustomerAlways visible

Display / hide by URL keywordsAll pages

Behavior

Scroll effectsNone

Z-index (stacking order)4

Advanced

Custom CSS for this menuEdit Ô CSS

Custom JavaScriptEdit Ô JavaScript

Cả sáu loại menu đều có các ô này, ở mọi gói. Riêng Reusable Classes thêm mới được từ gói trên Starter, và Preload Image có ghi chú về gói ở phần dưới.

Lưu ý

Code chỉ chạy trên thiết bị mà menu đang bật. Menu chỉ bật Show menu on mobile thì CSS, JavaScript và Attributes chỉ có tác dụng khi khách xem bằng điện thoại. Menu bật cả hai thì chạy trên cả hai. Menu tắt cả hai thì không chạy gì.

Ô	Ảnh hưởng tới	Mặc định
Custom CSS for this menu	Chỉ menu này	Trống
Reusable Classes (CSS)	Các mục gắn class	Chưa có class
Global CSS	Cả cửa hàng	Trống
JavaScript for this menu	Hàm riêng của menu	Trống
Global Javascript	Cả cửa hàng	Trống
Attributes	Khung menu	Trống
Environment Variables	Cỡ chữ menu	Trống
Preload Image	Ảnh trong menu con	Chỉ hiện trạng thái

CSS

Custom CSS for this menu

Ô CSS riêng của menu này. Bạn thấy nó ở tấm Configure, khối Custom CSS for this menu, cạnh link Navi+ CSS structure để tra tên các phần của menu.

Nhập gì: CSS bình thường. Mặc định để trống.
Navi+ tự giới hạn: mỗi menu có một mã riêng dạng #SF-12345678. Navi+ gắn mã này (kèm tên loại menu) vào đầu mỗi dòng nên CSS chỉ chạm đúng menu này. Dùng dấu & để chỉ chính menu, ví dụ & .name { color: #fff; }.
Áp cho: cả sáu loại menu, mọi cấp, mọi loại mục. Không cần gói trả phí. Chỉ chạy trên thiết bị menu đang bật (xem lưu ý ở trên).
Đổi ô này thì khách thấy gì: các mục khớp với dòng CSS của bạn đổi kiểu ngay trên cửa hàng. Phần còn lại của trang giữ nguyên. Menu khác trên cùng cửa hàng cũng không bị ảnh hưởng.

Mẹo

Tra tên phần .name, .icon, .inner… ở bài Tra cứu tên class CSS của menu. Khung xem trước trong app đôi khi hiện khác ngoài cửa hàng thật, nên kiểm lại bằng bước Preview & Test.

Reusable Classes (CSS)

Nơi tạo class CSS đặt tên sẵn, rồi gắn cho từng mục qua ô Class names (reusable). Khối này nằm ngay trên Custom CSS for this menu, gồm một bảng danh sách class và nút Add new.

Tạo class: bấm Add new, nhập Class name (bắt đầu bằng chữ cái, chỉ dùng chữ, số hoặc dấu gạch dưới, không có dấu cách), ghi chú ở Description (tuỳ chọn, tối đa 100 ký tự), gõ CSS Code, bấm Add.
Gắn vào mục: mở Edit item của mục, chọn class trong ô Class names (reusable). Xem bài về code của một mục.
Gói: Starter chỉ xem danh sách (hiện nhãn “Starter — view only”), không thêm mới được. Từ gói Business trở lên thì thêm và sửa thoải mái.
Áp cho: cả sáu loại menu.
Đổi ô này thì khách thấy gì: mọi mục gắn class này đổi kiểu cùng lúc. Sửa class một lần là cả nhóm đổi theo. Class chưa được gắn vào mục nào thì không có tác dụng.

Code của các class được lưu chung với Custom CSS for this menu nhưng tự ẩn khỏi ô đó, nên bạn không thấy lẫn hai bên khi gõ.

Global CSS

CSS áp cho cả trang cửa hàng, không bị giới hạn trong menu. Khối này khác Custom CSS for this menu ở chỗ Navi+ không gắn mã menu vào đầu dòng.

Nhập gì: CSS bình thường. Mặc định để trống.
Áp cho: cả sáu loại menu, ở mọi gói.
Đổi ô này thì khách thấy gì: nếu bạn viết body { background: red; } thì cả trang cửa hàng đổi nền. Đây đúng là lý do cần cẩn thận.

Cẩn thận

Viết xong mà phần ngoài menu cũng đổi theo thường là do code nằm nhầm ở Global CSS. Chuyển lên Custom CSS for this menu và thêm & ở đầu dòng. Chỉ dùng Global CSS khi bạn muốn chạm tới cả cửa hàng, ví dụ chỉnh .naviItem ul li.navi-active cho mọi menu Navi+.

JavaScript

JavaScript for this menu

Nơi khai báo các hàm riêng của menu. Trong app khối này có thể hiện tên Internal Navi. Javascript Functions.

Nhập gì: các hàm JavaScript, ví dụ function yourFunc() { console.log('Hello'); }. Mặc định để trống.
Navi+ tự gói hàm lại: mọi hàm khai báo dạng function tenHam(…) {…} hoặc var tenHam = function(…) {…} được đưa vào đối tượng Navi. Bạn gọi hàm bằng Navi.tenHam() từ nơi khác, chẳng hạn khi khách bấm một mục.
Áp cho: cả sáu loại menu, ở mọi gói. Chỉ nạp trên thiết bị menu đang bật.
Đổi ô này thì khách thấy gì: khai báo hàm thì chưa có gì thay đổi cho tới khi có nơi gọi Navi.tenHam(). Dòng code đứng riêng bên ngoài hàm thì chạy ngay khi menu được nạp.

Global Javascript

JavaScript chạy chung trên cả trang cửa hàng, không có lớp bọc riêng.

Nhập gì: JavaScript thường, ví dụ console.log('Hello world');. Mặc định để trống.
Áp cho: cả sáu loại menu, ở mọi gói. Chỉ nạp trên thiết bị menu đang bật.
Đổi ô này thì khách thấy gì: code chạy trên cả cửa hàng khi menu được nạp, nên lỗi trong ô này có thể ảnh hưởng tới các phần khác của trang. Giống Global CSS, hãy dùng thận trọng.

Thuộc tính và biến

Attributes

Gắn thêm thuộc tính HTML vào khung ngoài của menu, để công cụ khác (như một tour hướng dẫn) nhận ra menu. Khối này thu gọn sẵn, tự mở ra khi đã có dữ liệu.

Nhập gì: theo dạng tên=giá trị. Nhập nhiều thuộc tính thì ngăn cách bằng ; hoặc ,, ví dụ attr1=value1;attr2=value2. Mặc định để trống.
Áp cho: cả sáu loại menu, ở mọi gói. Chỉ gắn trên thiết bị menu đang bật.
Đổi ô này thì khách thấy gì: không thấy thay đổi nào bằng mắt. Thuộc tính chỉ hiện trong mã trang, giá trị của bạn được bọc trong dấu nháy kép.

Thuộc tính của một mục riêng lẻ nằm ở ô Attributes trong Edit item, xem bài về code của một mục.

Environment Variables

Ô khai biến môi trường cho các xử lý đặc biệt của Navi+. Trong app khối này mang nhãn (Deprecated), nghĩa là đã ngừng phát triển, nên chỉ dùng khi đang cần giữ menu cũ.

Nhập gì: TÊN=giá trị, ngăn cách bằng ; hoặc ,. Dấu cách trong tên được đổi thành _, dấu nháy quanh giá trị bị bỏ. Mặc định để trống.
Biến duy nhất còn tác dụng: ENV_FONT_SIZE. Ví dụ ENV_FONT_SIZE=12px; đặt cỡ chữ của tên mục (.name) trong menu này thành 12px. Các tên khác, kể cả ENV_FONT_FAMILY trong dòng gợi ý của ô, hiện không làm gì.
Áp cho: cả sáu loại menu, ở mọi gói.
Đổi ô này thì khách thấy gì: chữ tên mục trong menu đổi sang cỡ bạn nhập. Muốn chỉnh cỡ chữ bình thường, bạn nên dùng ô trong bước Design thay vì ô này.

Tối ưu tốc độ

Preload Image

Nằm trong khối Smart Optimization. Đây không phải ô để bạn bật hay tắt: công tắc luôn mờ, không bấm được, chỉ cho bạn biết trạng thái.

Để làm gì: khi trình duyệt của khách đang rảnh, Navi+ tải trước các ảnh nằm trong menu con (cấp 2, 3, 4). Nhờ vậy khi khách bấm mở menu con, ảnh hiện ngay thay vì chờ tải.
Gói: ghi chú trong app là dành cho gói Elite (công tắc bật sẵn ở Elite, các gói thấp hơn hiện “Upgrade →”).
Áp cho: cả sáu loại menu có ảnh ở menu con.
Đổi ô này thì khách thấy gì: ảnh trong menu con mở nhanh hơn. Đổi lại, trang tải thêm một ít dữ liệu. Navi+ tự bỏ qua việc tải trước khi khách đang bật chế độ tiết kiệm dữ liệu hoặc mạng chậm (2G/3G), và tải từng ảnh một để không tranh chỗ với nội dung chính của trang. Ảnh của mục đang bị ẩn với khách đó cũng không được tải.

Nền tảng khác

Các bước ở trên dành cho Shopify — đây là cách mặc định.