|
| 1 | +# Add custom logic to content types |
| 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. [Add image uploader to content type] |
| 14 | + 1. [Module integration] |
| 15 | + 1. [Additional data configuration] |
| 16 | + 1. [Content type configuration] |
| 17 | + 1. [How to add a new content type] |
| 18 | + 1. [Events] |
| 19 | + 1. [Bindings] |
| 20 | + 1. [Master format] |
| 21 | + 1. [Visual select] |
| 22 | + 1. [Reuse product conditions in content types] |
| 23 | + 1. [Store component master format as widget directive] |
| 24 | + 1. [Use the block chooser UI component] |
| 25 | + 1. [Use the inline text editing component] |
| 26 | + 1. [Render a backend content type preview] |
| 27 | + 1. [Custom Toolbar] |
| 28 | + 1. [Full width page layouts] |
| 29 | + 1. **Add custom logic to content types** |
| 30 | +5. [Roadmap and known issues] |
| 31 | +6. [How to create custom PageBuilder content type container] |
| 32 | + |
| 33 | +[Introduction]: README.md |
| 34 | +[Contribution guide]: CONTRIBUTING.md |
| 35 | +[Installation guide]: install.md |
| 36 | +[Developer documentation]: developer-documentation.md |
| 37 | +[Architecture overview]: architecture-overview.md |
| 38 | +[BlueFoot to PageBuilder data migration]: bluefoot-data-migration.md |
| 39 | +[Third-party content type migration]: new-content-type-example.md |
| 40 | +[Iconography]: iconography.md |
| 41 | +[Add image uploader to content type]: image-uploader.md |
| 42 | +[Module integration]: module-integration.md |
| 43 | +[Additional data configuration]: custom-configuration.md |
| 44 | +[Content type configuration]: content-type-configuration.md |
| 45 | +[How to add a new content type]: how-to-add-new-content-type.md |
| 46 | +[Events]: events.md |
| 47 | +[Bindings]: bindings.md |
| 48 | +[Master format]: master-format.md |
| 49 | +[Visual select]: visual-select.md |
| 50 | +[Reuse product conditions in content types]: product-conditions.md |
| 51 | +[Store component master format as widget directive]: widget-directive.md |
| 52 | +[Use the block chooser UI component]: block-chooser-component.md |
| 53 | +[Use the inline text editing component]: inline-editing-component.md |
| 54 | +[Render a backend content type preview]: content-type-preview.md |
| 55 | +[Custom Toolbar]: toolbar.md |
| 56 | +[Full width page layouts]: full-width-page-layouts.md |
| 57 | +[Add custom logic to content types]: add-custom-logic.md |
| 58 | +[Roadmap and Known Issues]: roadmap.md |
| 59 | +[How to create custom PageBuilder content type container]: how-to-create-custom-content-type-container.md |
| 60 | + |
| 61 | +You can customize PageBuilder content types by adding your own logic on the frontend. |
| 62 | + |
| 63 | +To add custom logic to content types: |
| 64 | +1. [Create a JavaScript widget](#create-a-javascript-widget). |
| 65 | +2. [Add XML configuration to load it on the frontend](#add-xml-configuration-to-load-it-on-the-frontend). |
| 66 | + |
| 67 | +### Create a JavaScript widget |
| 68 | + |
| 69 | +Create a JavaScript widget in your module's `/view/frontend/web/js/content-type/{content-type-name}/appearance/{appearance-name}/widget.js` file: |
| 70 | + |
| 71 | +``` javascript |
| 72 | +/** |
| 73 | + * Copyright © Magento, Inc. All rights reserved. |
| 74 | + * See COPYING.txt for license details. |
| 75 | + */ |
| 76 | + |
| 77 | +define([ |
| 78 | + 'jquery', |
| 79 | + 'slick' |
| 80 | +], function ($) { |
| 81 | + 'use strict'; |
| 82 | + |
| 83 | + return function (config, sliderElement) { |
| 84 | + |
| 85 | + var $element = $(sliderElement); |
| 86 | + |
| 87 | + /** |
| 88 | + * Prevent each slick slider from being initialized more than once which could throw an error. |
| 89 | + */ |
| 90 | + if ($element.hasClass('slick-initialized')) { |
| 91 | + $element.slick('unslick'); |
| 92 | + } |
| 93 | + |
| 94 | + $element.slick({ |
| 95 | + autoplay: $element.data('autoplay') === 1, |
| 96 | + autoplaySpeed: $element.data('autoplay-speed') || 0, |
| 97 | + fade: $element.data('fade') === 1, |
| 98 | + infinite: $element.data('is-infinite') === 1, |
| 99 | + arrows: $element.data('show-arrows') === 1, |
| 100 | + dots: $element.data('show-dots') === 1 |
| 101 | + }); |
| 102 | + }; |
| 103 | +}); |
| 104 | + |
| 105 | +``` |
| 106 | + |
| 107 | +### Add XML configuration to load it on the frontend |
| 108 | + |
| 109 | +Add XML configuration to load it on the frontend, and on the stage, so that you can preview content inside both the block and dynamic block content types. |
| 110 | + |
| 111 | +Add the following configuration to the `etc/di.xml` file in your custom module directory: |
| 112 | + |
| 113 | +``` xml |
| 114 | +<type name="Magento\PageBuilder\Model\Config\ContentType\WidgetInitializer"> |
| 115 | + <arguments> |
| 116 | + <argument name="config" xsi:type="array"> |
| 117 | + <item name="%content-type-name%" xsi:type="array"> |
| 118 | + <!-- Name is the appearance name --> |
| 119 | + <item name="default" xsi:type="array"> |
| 120 | + <!--required argument--> |
| 121 | + <item name="component" xsi:type="string">%{vendor-path}/js/content-type/{content-type-name}/appearance/{appearance-name}/widget%</item> |
| 122 | + <!--optional if you need provide some config for your widget--> |
| 123 | + <item name="config" xsi:type="array"> |
| 124 | + <item name="buttonSelector" xsi:type="string">.pagebuilder-slide-button</item> |
| 125 | + <item name="showOverlay" xsi:type="string">hover</item> |
| 126 | + </item> |
| 127 | + <!--optional if you want load widget per appearance--> |
| 128 | + <item name="appearance" xsi:type="string">default</item> |
| 129 | + </item> |
| 130 | + </item> |
| 131 | + </argument> |
| 132 | + </arguments> |
| 133 | +</type> |
| 134 | +``` |
0 commit comments