Theme development

Now Beae help the theme developer can create new or overwrite the element and store on the theme

To get start theme development must have coding skills:

1. HTML + CSS + JS

2. Vue

3. Liquid

Structure

• beae.elements.json

• MyCustom.beae.html

beae.elements.json

You can define all your element will build in this file.

{
  "elements": {
    "myCustom": {
      "types": [
        "home",
        "product",
        "page",
        "section"
      ],
      "name": "myCustom",
      "title": "My custom element",
      "file": "MyCustom.beae.html",
      "icon": "<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"> <path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z\" \/> <\/svg>",
      "category": [
        "Theme"
      ],
      "data": {
        "title": "My custom element title",
        "settings": {
          "content": "Hello"
        }
      }
    }
  }
  ... Other elements add to below
}

MyCustom.beae.html

<template>
    <div class="beae-element element__my-custom">
        <component :is="data?.settings?.tag ?? 'h2'" v-if="data.settings.link && data.settings.link.href" class="element__my-custom--heading">
            <a
                v-bind="data.settings.link"
                spellcheck="false"
                v-html="lang(data.settings.content)"
            />
        </component>
        <component
            :is="data?.settings?.tag ?? 'h2'"
            v-else
            class="element__my-custom--heading"
           v-html="lang(data.settings.content)"
        />
    </div>
</template>

<script>
    export default {
        name: 'Test',
        props: {
            data: {
                type: Object,
                default () {
                    return {};
                }
            }
        },
        data () {
            return {
                
            };
        },
        computed: {
            settings () {
                return [
                    {
                        params: [
                            {
                                type: 'textarea',
                                label: 'Headline text',
                                name: 'content',
                                options: {
                                    toolbar: 'short',
                                    height: 80
                                }
                            },
                            {
                                type: 'link',
                                label: 'Insert Link',
                                name: 'link'
                            },
                            {
                                type: 'choose',
                                label: 'HTML Tag',
                                name: 'tag',
                                options: {
                                    type: 'heading'
                                }
                            }
                        ]
                    }
                ];
            },

            style () {
                return [
                    {
                        group_name:'general',
                        group_title:'General',
                        selector: ' .element__heading .beae__heading',
                        type: 'text_full'
                    }
                ];
            },
            }
        },
        watch: {
             
        },
        methods: {
             
        }
    };
</script>