Create a section

Search…
Create a section
You can create sections in the developer directory or inside a layout. Start by creating a folder with the following structure:
The folder structure of section.
1.Asset folder: includes section resource like images
2.Components folders: includes the components of section
3.liquid.json embed liquid to template
4.Section.lh: Includes schema and code of this section
5.Settings.js Settings for section
6.Style.css: Stylesheet file of this section
7.Thumbnail file
section.lh
settings.js
includes/MyComponent.lh
@schema
{
    "name": "Product single",
    "author": "Layouthub Team",
    "website": "https://www.layouthub.com",
    "version": "2.0",
    "category": "Product single",
    "platform": "shopify",
    "vendors": ["js_swiper_slider","css_layouthub_base"],
    "dev": "LayoutHub core team"
} 
@endschema 
​
<div class="lh-wrapper">	
		<p class="lh-color-red">
			The setting value: <span v-html="settings.one"></span>
		<p>
		<p v-html="combined"></p> 
		<MyComponent />
		<button class="lh-button"><button>
</div>
​
@javascript
	let $this = jQuery(this);
	$this.find('.lh-button').click(function(e){
		e.preventDefault();
		$this.find('.lh-color-red').toggle();//Show hide a element
	});
@endjavascript
​
​
<script>
export default {
	data:{
		
		},
	computed: {
		combined () {
			return `${this.settings.one} - ${this.settings.two}`;
		}
	},
	methods: {
		callme(item) {
			return 'item name: '+item.name;
		}
	}
}
@endr
</script>
<style lang="scss">
​
	.lh-color-red{
		color:red;
	}
	
</style>
[
    {
        tab_name:"General",
        settings:[
            {
                name: 'one',
                label: 'The first setting',
                type: 'text',
                value: 'The default value'
            },
             {
                name: 'two',
                label: 'The second setting',
                type: 'text',
                value: 'The default value 2'
            },
            {
                name: 'name',
                label: 'The text',
                type: 'text',
                value: 'Hello Component'
            }
        ]
    }
]
<template>
<div>
<h3> The component is: </h3>
<p v-html="settings.name"></p>
</div>
</template>
​
​
If you love LayoutHub, could you consider posting an review? That would be awesome and really help us to grow our business, here is the link.
Chuẩn template mới - LayoutHub Editor V4
Components
Last modified 1yr ago
Copy link