Customize extension ai-cms-grapesjs

[godadada]

I would like to customize it. any references, examples, instructions I can use.

Thanks

[aimeos]

Not yet. This is the most interesting part for customization because it adds new blocks and components: https://github.com/aimeos/ai-cms-grapesjs/blob/master/admin/jqadm/themes/custom.js#L206-L626

You can add your own ones in the custom.js file of your own extension by adding:

Aimeos.CMSContent.GrapesJS.blocks.yourblock = {
    // ...
};

Aimeos.CMSContent.GrapesJS.components.yourcomponent = {
    // ...
};

For how GrapesJS works and what you can do, read the GrapesJS documentation:

• https://grapesjs.com/docs/
• https://grapesjs.com/docs/api/

[Alababdiy]

Not yet. This is the most interesting part for customization because it adds new blocks and components: https://github.com/aimeos/ai-cms-grapesjs/blob/master/admin/jqadm/themes/custom.js#L206-L626

You can add your own ones in the custom.js file of your own extension by adding:

Aimeos.CMSContent.GrapesJS.blocks.yourblock = {
    // ...
};

Aimeos.CMSContent.GrapesJS.components.yourcomponent = {
    // ...
};

For how GrapesJS works and what you can do, read the GrapesJS documentation:

• https://grapesjs.com/docs/
• https://grapesjs.com/docs/api/

how i c

Aimeos.CMSContent.GrapesJS.blocks.yourblock = { // ... };

Aimeos.CMSContent.GrapesJS.components.yourcomponent = { // ... };

Thanks @aimeos but when I try to add my custom component, is not showing and all the existing default elements disappear

*
 * Custom myext JS
 */
Aimeos.CMSContent.GrapesJS.blocks.yourblock = {
    label: "Your Block",
    category: "Custom Blocks",
    content: {
        type: "yourblock",
        components: {
            yourcomponent: {}
        },
        activeOnRender: true
    },
    render: ({ el }) => {
        el.innerHTML = "<div>Your Block Content Goes Here</div>";
    }
};

Aimeos.CMSContent.GrapesJS.components.yourcomponent = {
    label: "Your Component",
    content: {
        type: "yourcomponent",
        components: {},
    },
    render: ({ el }) => {
        el.innerHTML = "<div>Your Component Content Goes Here</div>";
    }
};

[aimeos]

Most likely because of a JS error because your code is wrong. Check the examples to see how they must look like: Blocks: https://github.com/aimeos/ai-cms-grapesjs/blob/master/themes/admin/jqadm/custom.js#L229-L238 Components: https://github.com/aimeos/ai-cms-grapesjs/blob/master/themes/admin/jqadm/custom.js#L383-L412