Chế độ gỡ lỗi - Tìm CSS Selectors
Dùng Shopify? Có thể bạn không cần trang này. Navi+ đã có sẵn selector đúng cho 331 theme Shopify (hamburger, header, logo, main menu, icon search & cart). Chỉ cần chọn theme ở bước Publish — hoặc ở bước “Where should this menu go?” khi tạo menu — là các ô CSS Selector được điền sẵn. Xem danh sách đầy đủ kèm ảnh tại naviplus.io/shopify-themes. Các bước dưới đây chỉ dành cho theme tuỳ biến/chưa có trong danh sách, hoặc website ngoài Shopify.
Chế độ gỡ lỗi là một bộ công cụ nhẹ được tích hợp trong thư viện Navi+ giúp bạn làm việc hiệu quả hơn với các menu của Navi+.
1. Tìm CSS selectors
Để kích hoạt chế độ gỡ lỗi, sử dụng định dạng URL sau:
yourdomain.com#navidebug-on
Website của bạn sẽ chuyển sang Chế độ Gỡ lỗi Navi+. Di chuột qua các khu vực khác nhau của website để xem các CSS selectors tương ứng. Di chuyển con trỏ của bạn để xác định chính xác khu vực mục tiêu mong muốn.
Vui lòng chú ý đến các phím tắt dưới đây để làm việc hiệu quả hơn.
Phím tắt 1. Sao chép một CSS selector
- Nhấn ⌘+C trên MacOS hoặc Ctrl+C trên Windows để sao chép CSS selector đã chọn.
Bạn có thể dán nó vào cài đặt Publish Menu cho:
- Mega Menu / Grid Menu: để chèn menu trước, sau hoặc thay thế CSS selector mục tiêu
- Slide Menu: để kích hoạt menu trượt khi CSS selector mục tiêu được nhấp hoặc chạm vào
Phím tắt 2. Điều hướng giữa các cấp độ selector
- Nhấn [↑/←], hoặc Backspace để di chuyển đến selector cấp cha
- Nhấn [↓/→] để di chuyển đến selector cấp con
Mẹo quan trọng: Trong hầu hết các trường hợp, bạn sẽ không tìm thấy CSS selector hoàn hảo ngay lập tức. Dựa trên kinh nghiệm, thường thì dễ hơn để:
- Bắt đầu bằng cách chọn một selector cấp con
- Sau đó di chuyển lên 1–2 cấp cha (một điểm nhấn trực quan sẽ xuất hiện trên website của bạn)
- Sao chép selector bằng ⌘+C (Ctrl+C)
- Dán nó vào cấu hình menu và kiểm tra
Đôi khi, bạn có thể cần lặp lại quy trình này nhiều lần khi chèn, thay thế hoặc liên kết các sự kiện menu với CSS selectors để đạt được trải nghiệm người dùng mong muốn.
1.1. Tìm CSS Selector trên Desktop
1.2. Tìm CSS Selector trên Mobile
Để tìm một CSS selector trên di động, hãy kích hoạt chế độ Di động (Responsive) trong trình duyệt của bạn.
Sau đó nhấp chuột phải vào bất kỳ đâu trên trang và chọn:
- Chrome: Inspect
- Safari: Inspect Element
- Firefox: Inspect
- Edge: Inspect / Inspect Element
