1

I need to show in my home page a bestseller products list of certain category. To do so, i already created programmatically my own widget that lists bestseller products, but there's no way to drag a widget content with page builder. I know that i can drag a HTML content and insert there my widget, but i wonder if there's a better solution.

What's the best way to achieve it? Is there any way to extend Page Builder so i can add a widget type? Would you recommend any other option?

3

You have a couple of options. The simplest is using the Text content type to include the widget using the standard TinyMCE widget feature.

Your other option is to create a new content type which wraps your widget in a Page Builder content type. Our Products content type does exactly this, it's just an interface for the Catalog Product List widget.

products.xml contains a mass converter to create the widget directive:

view/adminhtml/pagebuilder/content_type/products.xml

<converters>
    <converter component="Magento_PageBuilder/js/content-type/products/mass-converter/widget-directive" name="widget_directive">
        <config>
            <item name="html_variable" value="html"/>
        </config>
    </converter>
</converters>

Which in turn within widget-directive.ts (or JS depending on which source you're viewing) we create the standard product list widget directive:

view/adminhtml/web/ts/js/content-type/products/mass-converter/widget-directive.ts:

    public toDom(data: ConverterDataInterface, config: ConverterConfigInterface): object {
        const attributes = {
            type: "Magento\\CatalogWidget\\Block\\Product\\ProductsList",
            template: "Magento_CatalogWidget::product/widget/content/grid.phtml",
            anchor_text: "",
            id_path: "",
            show_pager: 0,
            products_count: data.products_count,
            type_name: "Catalog Products List",
            conditions_encoded: this.encodeWysiwygCharacters(data.conditions_encoded || ""),
        };

        if (attributes.conditions_encoded.length === 0) {
            return data;
        }

        set(data, config.html_variable, this.buildDirective(attributes));
        return data;
    }

You can read more about mass converters here: https://devdocs.magento.com/page-builder/docs/reference/configurations.html#mass-converter

You can look to duplicate the Products content type and modify it to your needs. On a high level, it just feeds it's configured form fields into the directive's parameters.

Alongside the above, we have a great step by step tutorial on how to create a new content type available here: https://devdocs.magento.com/page-builder/docs/create-custom-content-type/overview.html

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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