Implementing a widget with the Layout Update extension is similar to the standard method:

  1. Create a widget in Magento.

  2. Update ScandiPWA to associate the widget block with a valid component in the Widget component.

    This step is similar to creating a plugin for the WidgetFactory component. But now is for the typeToRenderMap member property from the Widget component:

    import MyWidget from '../component/MyWidget';
import { MY_WIDGET_TYPE } from '../component/MyWidget/MyWidget.config';

const addMyWidgetToRenderMap = (member) => ({
    ...member,
    [MY_WIDGET_TYPE]: MyWidget
});

export default {
    'Scandiweb/LayoutUpdates/Component/Widget/Component/WidgetComponent': {
        'member-property': {
            typeToRenderMap: addMyWidgetToRenderMap
        }
    }
};

    MY_WIDGET_TYPE is the block class that you defined in the widget.xml file, which is the same as the content of the item tag in the etc/graphql/di.xml file. In the first tutorial, the value is <YOUR VENDOR>\\<YOUR MODULE>\\Block\\Widget\\<WIDGET NAME>.

    <aside> ⚠️ The typeToRenderMap member property of the Widget component requires the block class as defined in the widget.xml. This is different from the renderMap property of the WidgetFactory.

    </aside>

    MyWidget should be replaced with the component you want to render for the given type

Implementation Example #1

This example implements a widget called Countdown.

ScandiPWA files

Magento files:

Implementation Example #2

ScandiPWA files:

Magento files:

recommended

How does the WidgetFactory component determine what to render for a widget in ScandiPWA?

Question 6 Answer[ ] The WidgetFactory component does not determine what to render for a widget. [ ] The WidgetFactory component checks for a property called type. [ ] The WidgetFactory component renders all widgets as React components. [ ] The WidgetFactory component renders all widgets as normal HTML. [ ]