Hướng dẫn chỉnh sửa code giao diện

Khi bạn lựa chọn sử dụng một giao diện từ Haraweb, sẽ có rất nhiều thứ cần tùy chỉnh như hình ảnh, danh mục, thông tin cửa hàng,... Một số tùy chỉnh cần phải thông qua việc can thiệp các bộ code (source code/mã nguồn) vào của website.

Bài viết này nhằm hỗ trợ bộ phận kĩ thuật của nhà bán hàng có thể truy cập vào bộ code của giao diện để điều chỉnh.

Nội dung

Những điều cần biết
Hiệu chỉnh mã nguồn của giao diện
Thêm mới một giao diện
Thêm mới một tập tin asset
Thông tin hỗ trợ

Những điều cần biết

Giao diện của một website được cấu tạo từ HTML, CSS, JavaScript,... thông qua một tập hợp các tập tin (file).

Đối với các giao diện của Haraweb, các tập tin này được chứa trong các thư mục: Layouts, Giao diện, Assets, Snippets, Config, Locales (có thể khác đôi chút với một số giao diện).

Bạn có thể thay đổi các tập tin từ các thư mục này để tùy chỉnh giao diện theo ý muốn. Việc tùy chỉnh này yêu cầu cần có một số kiến thức về HTML, CSS, JavaScript,...

Thư mục Config không cho thêm phép thêm mới tập tin, các thư mục còn lại đều cho phép thêm và chỉnh sửa linh hoạt.

Ngoài ra, bạn có thể liên hệ Haravan để được hỗ trợ trực tiếp.

Hiệu chỉnh mã nguồn của giao diện

Để thực hiện, Nhà bán hàng làm theo các bước sau:

Tại Trang quản trị → Website → Giao diện.
Chọn giao diện cần hiệu chỉnh và nhấp chọn Chỉnh sửa code.
Chọn vào một thư mục, bạn sẽ thấy danh sách các tập tin có trong thư mục đó. Hoặc gõ tên tập tin cần sửa trong thanh tìm kiếm. Điều này giúp bạn nhanh chóng tìm được tập tin mà không cần biết tập tin đó nằm trong thư mục nào.
Bạn nhấp chọn tập tin muốn thay đổi. Tại đây, bạn thay đổi một số đoạn mã để có được kết quả theo ý muốn. Nhấp Lưu để hoàn tất.
Bên cạnh việc thay đổi mã nguồn, bạn có thể xóa hoặc đổi tên tập tin đó.

Bạn có thể Tham chiếu các biến Liquid để việc tùy chỉnh được chính xác và có kết quả hợp ý nhất

Lưu ý: bạn có thể dùng nút phóng to ở góc phải để dễ dàng thao tác.

Thêm mới một giao diện

Bạn có thể tạo mới một giao diện kế thừa từ một file giao diện sẵn có. Các giao diện bạn có thể kế thừa:

404: trang không tìm thấy thông tin.
article: trang chi tiết bài viết.
blog: trang danh sách bài viết.
cart: trang giỏ hàng.
collection: trang danh mục sản phẩm.
index: trang chủ.
product: trang chi tiết sản phẩm.
page: trang nội dung.
search: trang kết quả tìm kiếm.
customers[account]: trang thông tin tài khoản.
customers[activate_account]: trang kích hoạt tài khoản mới.
customers[addresses]: trang danh sách địa chỉ của tài khoản.
customers[login]: trang đăng nhập dành cho khách mua hàng.
customers[order]: trang quản lý đơn hàng của khách mua hàng.
customers[register]: trang đăng ký tài khoản cho khách mua hàng.
customers[reset_password]: trang khôi phục mật khẩu cho khách mua hàng.

Các bước thêm mới một file giao diện:

Tại Trang quản trị → Website → Giao diện.
Chọn giao diện cần hiệu chỉnh và nhấp chọn Chỉnh sửa code.
Tại mục Giao diện bên trái, chọn Thêm mới một Giao diện. Ví dụ chúng ta thêm một file giao diện 404 mới kế thừa từ trang 404 mặc định.
Kết quả chúng ta có một file giao diện 404 mới có thể chỉnh sửa code để dùng cho phần Thiết lập theme.

Thêm mới một tập tin asset

Đối với những trường hợp bạn cần chèn thêm hình ảnh cố định, file CSS, JS của các plugin gắn ngoài vào giao diện của mình. Bạn có thể dùng tính năng tải lên asset.