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.

Tất cả kịch bản javascript để thực thi cho layout cần viết thông qua phương thức @javascript hoặc trong file /script.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)

<template>
    <div v-if=" settings.layout == 'flat' " class="flat">
        ...
    </div>
    <div v-else-if=" settings.layout == 'column' " class="colum">
        ...
    </div>
</template>

section.lh (Vòng lặp)

<template>
    <div class="items">
        <div v-for="(item, index) in settings.items" :key="index">
            ...
        </div>
    </div>
</template>

section.lh (In dữ liệu ra)

<template>
    <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>
</template>

section.lh (Attribute động)

<template>
    <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>
</template>

<script>
export default {
    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
            }
        }
    }
}
</script>

section.lh (Sử dụng liquid)

<template>
    // 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" />
</template>

/section.lh

Gọi component và truyền giá trị tương tự Vuejs

<template>
    <div class="my-section">
        ...
        <MyCom static_prop="Hello" :dynamic_prop="your_data" />
        ...
    </div>
</template>

/components/MyCom.lh

Tên component là tên các file *.lh bên trong thư mục /components/

<template>
    <div class="my-component">
        {{prop_one}}
    </div>
</template>

<script>
export default {
    props: ['static_prop', 'dynamic_prop']
}
</script>

/section.lh

Đăng ký javascript cho section và components

<template>
    <div class="my-section">
        <a href="#">Click on me</a>
    </div>
</template>

// Đây là kịch bản javascript được dùng để chạy khi export ra môi trường thực
// Khuyến khích viết các mã javascript cho layout ở file /script.js 
// Hoặc viết trong cặp thẻ @javascipt ... @endjavascript của các component

@javascript
    // Biến this đại diện cho root element <div class="my-section">
    $(this).find('a').on('click', () => { ... });
@endjavascript