Intro

Element là thành phần nhỏ nhất trong builder. Từ element sẽ build ra blocks, sections

Tạo element như thế nào?

Mỗi element được cấu tạo từ config, css, js và template files.

Được viết trong src/elements/

Ví dụ khi ta tạo 1 element "heading" sẽ có cấu trúc như sau

├── heading
│   ├── config.ts
│   ├── heading.css
│   ├── heading.js
│   ├── heading.fallback.xojs
│   └── heading.xojs
│...

Theo ví dụ heading phía trên ta sẽ có các file tương ứng như sau:

config.ts: Nơi config tên, các trường dữ liệu cho người dùng có thể nhập

heading.css: (Optional) Style của element viết theo BEM

heading.js: (Optional) Script của element (thường ít element cần)

heading.fallback.xojs: (Optional) HTML dự phòng khi element cần được compile, thường là skeleton loading (Chú ý: Chỉ sử dụng cho các element có chứa dữ liệu từ shopify, và nếu không có nó sẽ hiển thị fallback mặc định)

heading.xojs: Đây là template hiển thị UI