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.
Last modified 2yr ago