Creating a Magento Widget
Since widgets are created in the admin panel, we first need to write some Magento logic for the backend part of the widget.
Create a Block class for the widget. It needs to extend
Templateand implement the
BlockInterface. Other than that, the only thing we need to do is specify the
_templatethe widget uses.
class NewsletterWidget extends Template implements BlockInterface
protected $_template = "widget/newsletter_widget.phtml";
But we haven't created the template yet! So let's do that next. If you were writing the template for Magento, you would need to render all the elements needed for the widget.
However, since all the Scandi rendering logic happens on the frontend using React, the template can be much simpler. The template merely needs to render a single element to specify the widget type.
This is also where we "send" all the widget parameters to the frontend. Let's say our widget will have a single String parameter, the title. We can get that parameter with
$block->escapeHtml($block->getData('title'))and assign it to the
/** ScandiTutorials\\CustomWidget\\Block\\Widget\\NewsletterWidget $block */
<widget type="newsletter" data-title="<?= $block->escapeHtml($block->getData('title')) ?>"></widget>
You may realize that
widgetis not a real element type, and both attributes are custom too. This is ok, because all the HTML will get parsed on the frontend to render a custom React element.
For now, we haven't implemented any rendering on the frontend yet. So if you create a test page with this widget and view it, you won't see it. However, if you check the CMS content response received from the server, you'll see that the widget is there!
"content": "<widget type=\\"newsletter\\" data-title=\\"hello world\\"></widget>\\n",