Magento2 – How to Display PageBuilder Content in Custom Product Tab

frontendmagento2.4.3page-builder

I have several custom tabs on my product pages that pull data from product variables. The tabs are defined in catalog_product_view.xml and it all seems to work as expected except the data are PageBuilder fields and do not render the HTML. Instead I get "raw" HTML dumped out as the contents of the tab.

Tab definition:

<referenceBlock name="product.info.details">
        <block class="Magento\Catalog\Block\Product\View" name="galleryinfo.tab" as="galleryinfo" template="Magento_Catalog::product/view/custom_attribute_tab.phtml" group="detailed_info" >
           <arguments>
              <argument translate="true" name="title" xsi:type="string">Gallery</argument>
              <argument name="code" xsi:type="string">gallery_tab</argument>              
                <argument name="sort_order" xsi:type="string">60</argument> 
           </arguments>             
        </block>
        <block class="Magento\Catalog\Block\Product\View" name="compatinfo.tab" as="compatibilityinfo" template="Magento_Catalog::product/view/custom_attribute_tab.phtml" group="detailed_info" >
             <arguments>
                <argument translate="true" name="title" xsi:type="string">Compatibility</argument>
              <argument name="code" xsi:type="string">compatibility_tab</argument>                 
                <argument name="sort_order" xsi:type="string">50</argument>
             </arguments>
          </block>

Essentially, I want to duplicate how the "Description" field works in the backend and display content on a tab like the product description.

Template:

<?php echo $block->escapeHtml($block->getProduct()->getData($this->getCode())); ?>

I'm sure this is where the problem is but I just don't find how to render the content. Seems like there should be a ->toHtml() in there, but it doesn't help. How do I render PageBuilder data field(s) associated with a product and render them as HTML in product page tabs?

Glorious Output:

<div data-content-type="block" data-appearance="default" data-element="main">{{widget type="Magento\Cms\Block\Widget\Block" template="widget/static_block/default.phtml" block_id="34" type_name="CMS Static Block"}}</div>

Best Answer

The following, adapted for your compatibility tab needs, is how the native description tab ("Details" - vendor/magento/module-catalog/view/frontend/layout/catalog_product_view.xml) would added in Magento:

<referenceBlock name="product.info.details">
    <block class="Magento\Catalog\Block\Product\View\Description" name="compatibility.tab" as="compatibility_tab" template="Magento_Catalog::product/view/attribute.phtml" group="detailed_info">
        <arguments>
            <argument name="at_call" xsi:type="string">getCompatibilityTab</argument>
            <argument name="at_code" xsi:type="string">compatibility_tab</argument>
            <argument name="css_class" xsi:type="string">your_compatibility_tab_css_class</argument>
            <argument name="at_label" xsi:type="string">none</argument>
            <argument name="title" translate="true" xsi:type="string">Compatibility</argument>
            <argument name="sort_order" xsi:type="string">50</argument>
        </arguments>
    </block>
</block>

Since "description" is an attribute of input type "Page Builder" already, this approach should be working for your custom attribute PB-type fields too without even needing to create a custom template.

Related Solutions

Magento – Magento 2 – add lazy loading to pagebuilder images

Hi @meweb432344 and guys

I write something here if anyone meets the same problem. In order to add lazy into pagebuilder. Please follow up steps here:

Create a new backend theme(mine: [vendor]/backend) app/design/adminhtml/[vendor]/backend/theme.xml

 <theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
 <title>[Theme Name]</title>
 <parent>Magento/backend</parent>

Add master.html into the new theme: app/design/adminhtml/[vendor]/backend/Magento_PageBuilder/web/template/content-type/image/full-width/master.html

 <ifnot args="data.link.attributes().href">
     <img if="data.desktop_image.attributes().src"
          attr="data.desktop_image.attributes"
          class="pagebuilder-mobile-hidden lazy"
          css="data.desktop_image.css"
          ko-style="data.desktop_image.style" loading="lazy"/>
     <img if="data.mobile_image.attributes().src"
          attr="data.mobile_image.attributes"
          class="pagebuilder-mobile-only lazy"
          css="data.mobile_image.css"
          ko-style="data.mobile_image.style" loading="lazy" />
 </ifnot>

 <figcaption if="data.caption.html()"
             attr="data.caption.attributes"
             css="data.caption.css"
             html="data.caption.html"
             ko-style="data.caption.style">
 </figcaption>

Create a custom module to active the backend theme and customize layout for lazy

3.1. File module.xml(app/code/[Vendor]/Backend/etc/module.xml)

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="[Vendor]_Backend" setup_version="1.0.0">
        <sequence>
            <module name="Magento_Theme"/>
            <module name="Magento_Enterprise"/>
            <module name="Magento_PageBuilder"/>
        </sequence>
    </module>
</config>

3.2. File di.xml(app/code/[Vendor]/Backend/etc/di.xml)

<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <type name="Magento\Theme\Model\View\Design">
        <arguments>
            <argument name="themes" xsi:type="array">
                <item name="adminhtml" xsi:type="string">[Vendor]/backend</item>
            </argument>
        </arguments>
    </type>
</config>

Add layout for file image.xml(app/code/[Vendor]/Backend/view/adminhtml/pagebuilder/content_type/image.xml)

 <config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
     <type name="image"
           label="Image"
           component="Magento_PageBuilder/js/content-type"
           preview_component="Magento_PageBuilder/js/content-type/image/preview"
           form="pagebuilder_image_form"
           menu_section="media"
           icon="icon-pagebuilder-image"
           sortOrder="1"
           translate="label">
         <appearances>
             <appearance default="true"
                         name="full-width"
                         preview_template="Magento_PageBuilder/content-type/image/full-width/preview"
                         master_template="Magento_PageBuilder/content-type/image/full-width/master"
                         reader="Magento_PageBuilder/js/master-format/read/configurable">
                 <elements>
                     <element name="desktop_image">
                         <attribute name="mobile_image" source="data-src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
                     </element>
                     <element name="mobile_image">
                         <attribute name="mobile_image_data_src" source="data-src" converter="Magento_PageBuilder/js/converter/attribute/src" preview_converter="Magento_PageBuilder/js/converter/attribute/preview/src"/>
                     </element>
                 </elements>
                 <converters>
                     <converter component="Magento_PageBuilder/js/mass-converter/empty-mobile-image" name="empty_mobile_image">
                         <config>
                             <item name="mobile_image_data_src_variable" value="mobile_image_data_src"/>
                         </config>
                     </converter>
                 </converters>
             </appearance>
         </appearances>
     </type>
 </config>

There is a new attribute named "mobile_image_data_src" in the above code.

Declare the new attribute: app/code/[Vendor]/Backend/view/adminhtml/ui_component/pagebuilder_image_form.xml

 <form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd" extends="pagebuilder_base_form">
     <fieldset name="general" sortOrder="20">
         <field name="mobile_image_data_src" formElement="imageUploader">
             <settings>
                 <label translate="true">Mobile Image</label>
                 <componentType>imageUploader</componentType>
             </settings>
             <formElements>
                 <imageUploader>
                     <settings>
                         <allowedExtensions>jpg jpeg gif png</allowedExtensions>
                         <maxFileSize>2097152</maxFileSize>
                         <uploaderConfig>
                             <param xsi:type="string" name="url">pagebuilder/contenttype/image_upload</param>
                         </uploaderConfig>
                         <previewTmpl>Magento_PageBuilder/form/element/uploader/preview</previewTmpl>
                     </settings>
                 </imageUploader>
             </formElements>
         </field>
     </fieldset>
 </form>

Add value for the new field. Copy file empty-mobile-image.js from core into the new Backend theme: app/design/adminhtml/[Vendor]/backend/Magento_PageBuilder/web/js/mass-converter/empty-mobile-image.js

###Keep code here###

     _proto.toDom = function toDom(data, config) {
       var mobileImage = (0, _object.get)(data, config.mobile_image_variable);

       if (mobileImage === undefined || mobileImage[0] === undefined) {
         (0, _object.set)(data, config.mobile_image_variable, (0, _object.get)(data, config.desktop_image_variable));
         (0, _object.set)(data, config.mobile_image_data_src_variable, (0, _object.get)(data, config.desktop_image_variable));//Add value for the new field.
       }

       return data;
     };

     ###Keep code here###

I assign the value of desktop_image_variable to variable mobile_image_data_src_variable

Magento 2.4.3 Page Builder – Fixing Knockout Master.html Rendering Issues

In master.html I had class="bypass-html-filter" in the root <div> element.

This class tells Magento2 to not do anything to the html when you save the page. So it's not fixing any missing closing tags, and especially!! doesn't filter out any knockout.

Removing this class "fixes" the behaviour and the html frontend will be saved in database without containing any knockout.

Best Answer

Related Solutions

Magento – Magento 2 – add lazy loading to pagebuilder images

Magento 2.4.3 Page Builder – Fixing Knockout Master.html Rendering Issues

Related Topic