cancel
Showing results for 
Search instead for 
Did you mean: 

Pagebuilder don't save data

Pagebuilder don't save data

Hello,
I trying create custom PB (pagebuilder) component and every things looks fine.
I create component based on tabs and want to add custom attributes/template and etc. This component added in admin panel and I can grag&drop it, also I can add content. But after click save page, this data did't render again in admin panel, but in DB I can see my master.html template with all data. Also this component is rendered on storefront.

 

My question is, where I can create mistake?
I need any ideas how to fix this or debug.

 

P.s. I was thinking that problem is in differences between preview.html and master.html
This two files must have differences, but I'm talking about differences in structure or classes.

As for example:
preview.html

<div class="pagebuilder-content-type pagebuilder-tabs children-min-height"
     attr="Object.assign({}, data.main.attributes())"
     ko-style="Object.assign({}, data.main.style())"
     css="Object.assign({}, data.main.css())"
     event="{ mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false">
    <render args="getOptions().template"
            visible="focusedTab() === null" />
    <div class="tabs-container"
         afterRender="function (element) { onContainerRender.call(this, element); }">
        <ul role="tablist"
            class="tabs-navigation"
            each="contentType.getChildren()"
            attr="data.navigation.attributes"
            ko-style="data.navigation.style"
            css="data.navigation.css"
            data-bind="sortableChildren: getSortableOptions()">
            <with args="preview">
                <li role="tab"
                    class="tab-header"
                    css="{focused: contentType.parentContentType.preview.focusedTab() === $index()}"
                    ko-style="contentType.parentContentType.preview.getTabHeaderStyles()"
                    click="function (context, event) { onClick($index(), event); }"
                    event="{ focusin: function (context, event) { onFocusIn($index(), event); }, focusout: function (context, event) { onFocusOut($index(), event); } }">
                    <a href="#no-tab"
                       class="tab-title focus-options"
                       attr="{ href: '#' + contentType.id }"
                       event="{ dragstart: function(context, event) { event.preventDefault(); }}">
                        <render args="getOptions().template" />
                        <span class="tab-drag-handle"
                              css="{disabled: contentType.parentContentType.children().length <= 1}"></span>
                        <span class="tab-title tab-name"
                              data-tab-title="true"
                              data-bind="liveEdit: { field: 'tab_name', placeholder: $t('...'), selectAll: true }, hasFocusNoScroll: contentType.parentContentType.preview.focusedTab() === $index()"></span>
                    </a>
                </li>
            </with>
        </ul>
        <div class="tabs-content children-min-height"
             attr="data.content.attributes"
             ko-style="data.content.style"
             css="data.content.css">
            <render args="childTemplate" />
        </div>
    </div>
</div>

and master.html

<div class="lb-tab-wrapper"
     attr="Object.assign({}, data.main.attributes())"
     ko-style="Object.assign({}, data.main.style())"
     css="Object.assign({}, data.main.css())">
    <div class="lb-tab-top-line"
         attr="Object.assign({}, data.background_wrapper.attributes())"
         ko-style="Object.assign({}, data.background_wrapper.style())"
         css="Object.assign({}, data.background_wrapper.css())"></div>

    <div class="container-fluid">
        <div class="lb-tab-arrow"
             style="--arrow-offset: 0px"></div>

        <div class="tabs-container tab-list-wrapper">
            <ul role="tablist"
                class="tabs-navigation lb-tab-list"
                each="contentType.getChildren()"
                attr="data.navigation.attributes"
                ko-style="data.navigation.style"
                css="data.navigation.css">
                <with args="content">
                    <li role="tab"
                        class="tab-header lb-tab-list__item"
                        attr="Object.assign({}, contentType.parentContentType.content.data.headers.attributes(), { active: getData().default_active_tab }, {'data-tab': contentType.id })"
                        ko-style="contentType.parentContentType.content.data.headers.style"
                        css="contentType.parentContentType.content.data.headers.css">
                        <a href="#no-tab"
                           class="tab-title"
                           attr="{ href: '#' + contentType.id }">
                            <span text="getData().tab_name"></span>
                        </a>
                    </li>
                </with>
            </ul>
        </div>
    </div>

    <div class="lb-tab-content tabs-content children-min-height"
         attr="data.content.attributes"
         ko-style="data.content.style"
         css="data.content.css">
        <render args="masterTemplate" />
    </div>
</div>