|
| 1 | +# Render a backend content type preview |
| 2 | + |
| 3 | +## Navigation |
| 4 | + |
| 5 | +1. [Introduction] |
| 6 | +2. [Installation guide] |
| 7 | +3. [Contribution guide] |
| 8 | +4. [Developer documentation] |
| 9 | + 1. [Architecture overview] |
| 10 | + 1. [BlueFoot to PageBuilder data migration] |
| 11 | + 1. [Third-party content type migration] |
| 12 | + 1. [Iconography] |
| 13 | + 1. [Module integration] |
| 14 | + 1. [Additional data configuration] |
| 15 | + 1. [Content type configuration] |
| 16 | + 1. [How to add a new content type] |
| 17 | + 1. [Events] |
| 18 | + 1. [Master format] |
| 19 | + 1. [Visual select] |
| 20 | + 1. [Reuse product conditions in content types] |
| 21 | + 1. [Store component master format as widget directive] |
| 22 | + 1. **Render a backend content type preview** |
| 23 | + 1. [Custom Toolbar] |
| 24 | +5. [Roadmap and known issues] |
| 25 | + |
| 26 | +[Introduction]: README.md |
| 27 | +[Contribution guide]: CONTRIBUTING.md |
| 28 | +[Installation guide]: install.md |
| 29 | +[Developer documentation]: developer-documentation.md |
| 30 | +[Architecture overview]: architecture-overview.md |
| 31 | +[BlueFoot to PageBuilder data migration]: bluefoot-data-migration.md |
| 32 | +[Third-party content type migration]: new-content-type-example.md |
| 33 | +[Iconography]: iconography.md |
| 34 | +[Module integration]: module-integration.md |
| 35 | +[Additional data configuration]: custom-configuration.md |
| 36 | +[Content type configuration]: content-type-configuration.md |
| 37 | +[How to add a new content type]: how-to-add-new-content-type.md |
| 38 | +[content type]: how-to-add-new-content-type.md |
| 39 | +[Events]: events.md |
| 40 | +[Master format]: master-format.md |
| 41 | +[Visual select]: visual-select.md |
| 42 | +[Reuse product conditions in content types]: product-conditions.md |
| 43 | +[Store component master format as widget directive]: widget-directive.md |
| 44 | +[Render a backend content type preview]: content-type-preview.md |
| 45 | +[Custom Toolbar]: toolbar.md |
| 46 | +[Roadmap and known issues]: roadmap.md |
| 47 | + |
| 48 | + |
| 49 | +## What's in this topic |
| 50 | +This topic describes how to use the `RenderPool` on the stage to render a backend [content type] preview. |
| 51 | + |
| 52 | +Using this method, you can preview content types that cannot be rendered on the stage and require further backend processing to be previewed. |
| 53 | + |
| 54 | +The following steps utilize some example values; substitute those with values specific to your situation. |
| 55 | + |
| 56 | +## Overview |
| 57 | + |
| 58 | +To use the stage's `RenderPool` to produce a content type preview: |
| 59 | +1. [Create a renderer](#create-a-renderer) |
| 60 | +2. [Add the renderer to the pool](#add-the-renderer-to-the-pool) |
| 61 | +3. [Submit an HTTP request to the preview controller](#submit-an-HTTP-request-to-the-preview-controller) |
| 62 | +4. [Render the element](#render-the-element) |
| 63 | + |
| 64 | +## Create a renderer |
| 65 | + |
| 66 | +Create a renderer that implements the renderer interface, `Magento\PageBuilder\Model\Stage\RendererInterface`: |
| 67 | + |
| 68 | +``` php |
| 69 | +<?php |
| 70 | +namespace Magento\PageBuilder\Model\Stage\Renderer; |
| 71 | + |
| 72 | +class AwesomeElement implements \Magento\PageBuilder\Model\Stage\RendererInterface |
| 73 | +{ |
| 74 | + public function render(array $params): array |
| 75 | + { |
| 76 | + return ['message' => 'Hello stage! You said ' . $params['message'] . '!']; |
| 77 | + } |
| 78 | +} |
| 79 | +``` |
| 80 | + |
| 81 | +## Add the renderer to the pool |
| 82 | + |
| 83 | +Add the renderer you just created as an argument to the `Magento\PageBuilder\Model\Stage\RendererPool` type that specifies your custom content type role as the name in the `di.xml` file: |
| 84 | + |
| 85 | +``` xml |
| 86 | +<type name="Magento\PageBuilder\Model\Stage\RendererPool"> |
| 87 | + <arguments> |
| 88 | + <argument name="renderers" xsi:type="array"> |
| 89 | + <item name="awesome-element" xsi:type="object">Magento\PageBuilder\Model\Stage\Renderer\AwesomeElement</item> |
| 90 | + </argument> |
| 91 | + </arguments> |
| 92 | +</type> |
| 93 | +``` |
| 94 | + |
| 95 | +## Submit an HTTP request to the preview controller |
| 96 | + |
| 97 | +To invoke the renderer from the stage, submit an HTTP request to the PageBuilder preview controller: |
| 98 | + |
| 99 | +1. Obtain the URL for the HTTP request from within your preview component by calling `getConfig("preview_url")` on the `Magento_PageBuilder/js/config` component. |
| 100 | +2. Make a request to the aforementioned obtained URL specifying your custom content type name and any additional parameters you want to use to render the element: |
| 101 | + |
| 102 | + ``` javascript |
| 103 | + define([ |
| 104 | + 'jquery', |
| 105 | + 'Magento_PageBuilder/js/content-type/preview', |
| 106 | + 'Magento_PageBuilder/js/config' |
| 107 | + ], function ($, Preview, Config) { |
| 108 | + var AwesomeElement = function() { |
| 109 | + Preview.apply(this, arguments); |
| 110 | + }; |
| 111 | + |
| 112 | + AwesomeElement.prototype = Object.create(Preview.prototype); |
| 113 | + AwesomeElement.prototype.constructor = AwesomeElement; |
| 114 | + |
| 115 | + AwesomeElement.prototype.afterObservablesUpdated = function() { |
| 116 | + Preview.prototype.afterObservablesUpdated.call(this); |
| 117 | + // Get the url to call |
| 118 | + var url = Config.getConfig("preview_url"); |
| 119 | + const requestConfig = { |
| 120 | + method: "GET", |
| 121 | + data: { |
| 122 | + role: this.config.name // this would be awesome-element in this case |
| 123 | + // You can also pass any other data to the renderer |
| 124 | + message: 'custom data!' |
| 125 | + } |
| 126 | + }; |
| 127 | + |
| 128 | + $.ajax(url, requestConfig).done(function(response) { |
| 129 | + // Will display: "Hello stage! You said custom content!" |
| 130 | + this.data.main.html(response.data.message); |
| 131 | + }.bind(this)); |
| 132 | + }; |
| 133 | + |
| 134 | + return AwesomeElement; |
| 135 | + }); |
| 136 | + ``` |
| 137 | + |
| 138 | +## Render the element |
| 139 | + |
| 140 | +Your exact configuration and situation determine when, and how, you render the element. |
| 141 | + |
| 142 | +Generally, you would perform this operation when the properties change, by overriding the `afterObservablesUpdated` method with this logic (as shown in the previous example). |
| 143 | + |
| 144 | +To update the Document Object Model (DOM) to display your content, amend the JavaScript property that represents the HTML variable of your main element with the response from the HTTP request, `this.data.main.html(response.content);` from the previous example. |
| 145 | + |
| 146 | + |
0 commit comments