0

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>
3
  • What does your layout, and if existing template, look like..? Commented Feb 22, 2022 at 1:10
  • well, just don't escapeHtml().. ? ;) i.e. <?= $block->getProduct()->getData($this->getCode()); ?>; You may however want to do this in a custom template used for these tabs only. Commented Feb 22, 2022 at 1:41
  • Thanks. Removing the "escapeHtml() removes the <div> but the embedded content block {{....}} does not render correctly as content...
    – gnicko
    Commented Feb 22, 2022 at 1:55

1 Answer 1

1

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.

1
  • 1
    Perfect! In retrospect, very simple. Thanks!
    – gnicko
    Commented Feb 22, 2022 at 3:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.