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>
