Chuẩn template mới - LayoutHub Editor V4

Tiêu chuẩn và cú pháp mới cho việc xây dựng layout.

Sử dụng cấu trúc template của Vuejs

Từ phiên bản 4.0 LayoutHub Editor chuyển sang sử dụng bộ render của Vuejs 3.x. Điều đó đồng nghĩa các nhà phát triển layout có thể sử dụng hầu hết các cú pháp của Vuejs 3.x để xây dựng và phát triển các layout cho nền tảng LayoutHub. Ngoại trừ một số hạn chế về đăng ký và thực thi event trong template:

// LayoutHub Editor không hỗ trợ
<div @click="method">...</div>

Chúng tôi không hỗ trợ đăng ký events trong template để đảm bảo chuẩn đầu ra tương thích với Shopify và các dữ liệu cũ của người dùng vẫn có thể hoạt động được.

Cơ chế đăng ký events sẽ vẫn như chuẩn cũ thông qua các mã javascript được viết trong file /javascript.js.

Dưới đây chúng tôi đề xuất một số các cú pháp chuẩn được dùng phần lớn trong quá trình xây dựng layout:

section.lh (Điều kiện)
<div v-if=" settings.layout == 'flat' " class="flat">
...
</div>
<div v-else-if=" settings.layout == 'column' " class="colum">
...
</div>
section.lh (Vòng lặp)
<div class="items">
<div v-for="(item, index) in settings.items" :key="index">
...
</div>
</div>
section.lh (In dữ liệu ra)
<div class="item">
// 1. In dữ liệu escaped mã HTML
<span v-text="settings.name"></span>
// 2. In dữ liệu HTML nguyên bản
<span v-html="settings.name"></span>
// 3. In dữ liệu hỗ trợ đa ngôn ngữ
<span v-text="lang(settings.name)"></span>
<span v-html="lang(settings.name)"></span>
</div>
section.lh (Attribute động)
<div class="item">
// Chỉ có 1 attribute động
<img :src="settings.img" />
// Nhiều attributes động phải dùng v-bind
// Ưu tiên dùng computed khi không có payload
<img v-bind="img_attributes_computed" />
// Chỉ dùng methods đối với trường hợp cần truyền payload
<div v-for="(img, i) in settings.images" :key="i">
<img v-bind="img_attributes_method(img)" />
</div>
</div>
@register
{
computed: {
img_attributes_computed() {
return {
src: this.settings.img.src,
alt: this.settings.img.alt ? this.settings.img.alt : 'Untiled',
class: 'featured-image '+this.settings.img.classes
}
}
},
methods: {
img_attributes_method( payload ) {
return {
src: payload.src,
alt: payload.alt ? payload.alt : 'Untiled',
class: 'featured-image '+payload.classes
}
}
}
}
@endregister
section.lh (Sử dụng liquid)
// In kết quả dạng html của code liquid đã được server xử lý
<div v-html="liquid('product-title')"></div>
// Sử dụng component Liquid để gọi code liquid (Đối với những code liquid không cần in gì ra)
<Liquid name="product-form" />
/section.lh
/components/MyCom.lh
/section.lh
Gọi component và truyền giá trị tương tự Vuejs
<div class="my-section">
...
<MyCom prop_one="Hello" />
...
</div>
/components/MyCom.lh
Tên component là tên các file *.lh bên trong thư mục /components/
<div class="my-component">
{{prop_one}}
</div>
<script>
export default {
props: ['prop_one']
}
</script>