Een visuele selector toevoegen | Handleiding voor Adobe Commerce-ontwikkelaars
In Page Builder gebruiken we een term genaamd visuele selector, wat verwijst naar een UI-select-besturingselement dat de opties visueel duidelijk maakt voor eindgebruikers. U kunt voorbeelden van deze selectors zien in de formuliervelden voor inhoudstype van Page Builder voor: Achtergrondtype, Achtergrondgrootte, Uitlijning, en meer. In dit onderwerp wordt beschreven hoe u deze visuele selectorbesturingselementen aan uw eigen inhoudstypen kunt toevoegen.
Visuele selectors ondersteunen alle afbeeldingsformaten, maar we raden ten zeerste aan om SVG-afbeeldingen te gebruiken voor scherpte en duidelijkheid.
De geselecteerde component overschrijven met een elementsjabloon
We gebruiken de standaard select-component in de /app/code/Magento/PageBuilder/view/adminhtml/ui-component/pagebuilder_base_form.xml het dossier. U kunt de standaardsjabloon overschrijven door een elementsjabloon en component voor deze functionaliteit op te geven om de optie Visueel selecteren te implementeren.
Specificeer in de meegeleverde sjabloon <elementTmpl> naast het bijwerken van de veldencomponent naar Magento_PageBuilder/js/form/element/visual-select:
1
2
3
4
5
6
<field name="text_align" sortOrder="10" formElement="select" component="Magento_PageBuilder/js/form/element/visual-select">
<settings>
<dataType>text</dataType>
<label translate="true">Alignment</label>
<elementTmpl>Magento_PageBuilder/form/element/align</elementTmpl>
</settings>
Visuele selectie toevoegen aan de XML-configuratie
De beschikbare opties voor selecteren, value, title, icon en noticeMessagekan worden geleverd door de PHP-klasse die de . implementeert \Magento\Framework\Option\ArrayInterface methode.
Opties zouden een array moeten retourneren met de volgende indeling:
1
2
3
4
5
6
[
value => "value", //key used in the component dataSource
title => "Title",
icon => "path/to/picture/on/server",
noticeMessage => "A message to be displayed when option is selected"
]
Deze nieuwe configuratiewaarden worden gebruikt in de align.html sjabloonbestand opgeslagen in Page Builder’s app/code/Magento/PageBuilder/view/adminhtml/web/template/form/element map.
Gebruik een virtueel type van Magento\PageBuilder\Model\Source\VisualSelect in je module’s di.xml configuratiebestand om de opties in een visueel selectieveld te definiëren.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<virtualType name="AlignmentSource" type="Magento\PageBuilder\Model\Source\VisualSelect">
<arguments>
<argument name="optionsSize" xsi:type="string">small</argument>
<argument name="optionsData" xsi:type="array">
<item name="0" xsi:type="array">
<item name="value" xsi:type="string"/>
<item name="title" xsi:type="string" translate="true">Default</item>
</item>
<item name="1" xsi:type="array">
<item name="value" xsi:type="string">left</item>
<item name="title" xsi:type="string" translate="true">Left</item>
<item name="icon" xsi:type="string">Magento_PageBuilder/css/images/form/element/visual-select/alignment/left.svg</item>
</item>
<item name="2" xsi:type="array">
<item name="value" xsi:type="string">center</item>
<item name="title" xsi:type="string" translate="true">Center</item>
<item name="icon" xsi:type="string">Magento_PageBuilder/css/images/form/element/visual-select/alignment/center.svg</item>
</item>
<item name="3" xsi:type="array">
<item name="value" xsi:type="string">right</item>
<item name="title" xsi:type="string" translate="true">Right</item>
<item name="icon" xsi:type="string">Magento_PageBuilder/css/images/form/element/visual-select/alignment/right.svg</item>
</item>
</argument>
</arguments>
</virtualType>
Melding weergeven wanneer optie is geselecteerd
Voor sommige opties wilt u misschien een extra melding weergeven wanneer de gebruiker het item selecteert. U kunt dit doen door een noticeMessage binnen de items aangifte.
1
2
3
4
5
6
<item name="3" xsi:type="array">
<item name="value" xsi:type="string">right</item>
<item name="title" xsi:type="string" translate="true">Right</item>
<item name="icon" xsi:type="string">Magento_PageBuilder/css/images/form/element/visual-select/alignment/right.svg</item>
<item name="noticeMessage" xsi:type="string" translate="true">Message to be displayed below field when selected.</item>
</item>
Hoe verticale uitlijning tussen verschillende inhoudstypen opnieuw te gebruiken
Als u verticale uitlijning wilt toepassen op een inhoudstype met behulp van de component Visueel selecteren, gebruikt u de virtualType Magento\PageBuilder\Model\Source\VerticalAlignment met opties in je module’s di.xml configuratiebestand.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<virtualType name="Magento\PageBuilder\Model\Source\VerticalAlignment" type="Magento\PageBuilder\Model\Source\VisualSelect">
<arguments>
<argument name="optionsSize" xsi:type="string">small</argument>
<argument name="optionsData" xsi:type="array">
<item name="0" xsi:type="array">
<item name="value" xsi:type="string">flex-start</item>
<item name="title" xsi:type="string" translate="true">Top</item>
<item name="icon" xsi:type="string">Magento_PageBuilder/css/images/form/element/visual-select/vertical-align/top.svg</item>
</item>
<item name="1" xsi:type="array">
<item name="value" xsi:type="string">center</item>
<item name="title" xsi:type="string" translate="true">Center</item>
<item name="icon" xsi:type="string">Magento_PageBuilder/css/images/form/element/visual-select/vertical-align/center.svg</item>
</item>
<item name="2" xsi:type="array">
<item name="value" xsi:type="string">flex-end</item>
<item name="title" xsi:type="string" translate="true">Bottom</item>
<item name="icon" xsi:type="string">Magento_PageBuilder/css/images/form/element/visual-select/vertical-align/bottom.svg</item>
</item>
</argument>
</arguments>
</virtualType>
Voeg de optie Visueel selecteren toe aan het formulierconfiguratiebestand van uw module
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<field name="justify_content" sortOrder="20" formElement="select" component="Magento_PageBuilder/js/form/element/visual-select">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="default" xsi:type="string">flex-start</item>
</item>
</argument>
<settings>
<dataType>text</dataType>
<label translate="true">Vertical Alignment</label>
<notice translate="true">Vertical alignment controls how the child blocks of this container will be positioned. Set minimum height in order to use vertical alignment.</notice>
<elementTmpl>Magento_PageBuilder/form/element/visual-select</elementTmpl>
</settings>
<formElements>
<select>
<settings>
<options class="Magento\PageBuilder\Model\Source\VerticalAlignment"/>
</settings>
</select>
</formElements>
</field>
Configureer het inhoudstype met de stijleigenschappen voor verticale uitlijning. Dit voorbeeld is van Row.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<elements>
<element name="main" path=".">
<style name="background_color" source="background_color" converter="Magento_PageBuilder/js/converter/style/color"/>
<style name="background_image" source="background_image" converter="Magento_PageBuilder/js/converter/style/background-image" preview_converter="Magento_PageBuilder/js/converter/style/preview/background-image"/>
<style name="background_position" source="background_position"/>
<style name="background_size" source="background_size"/>
<style name="background_repeat" source="background_repeat"/>
<style name="background_attachment" source="background_attachment"/>
<style name="text_align" source="text_align"/>
<style name="border" source="border_style" converter="Magento_PageBuilder/js/converter/style/border-style"/>
<style name="border_color" source="border_color" converter="Magento_PageBuilder/js/converter/style/color"/>
<style name="border_width" source="border_width" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
<style name="border_radius" source="border_radius" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
<style name="justify_content" source="justify_content" persistence_mode="read"/>
<style name="min_height" source="min_height" converter="Magento_PageBuilder/js/converter/style/remove-px"/>
<style name="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/margins"/>
<style name="margins_and_padding" reader="Magento_PageBuilder/js/property/paddings" converter="Magento_PageBuilder/js/converter/style/paddings" preview_converter="Magento_PageBuilder/js/content-type/row/converter/style/paddings"/>
<attribute name="name" source="data-content-type"/>
<attribute name="appearance" source="data-appearance"/>
<attribute name="enable_parallax" source="data-enable-parallax"/>
<attribute name="parallax_speed" source="data-parallax-speed"/>
<attribute name="background_color_format" source="data-background-color-format" persistence_mode="write"/>
<css name="css_classes"/>
</element>
<element name="container">
<style name="justify_content" source="justify_content"/>
<static_style source="display" value="flex"/>
<static_style source="flex_direction" value="column"/>
</element>
</elements>
Specificeer welke elementen in de voorbeeld- en mastersjablonen de stijleigenschappen moeten krijgen
Voorbeeld mastertemplate:
1
2
3
4
5
<div attr="data.main.attributes"
ko-style="Object.assign(data.container.style(), data.main.style())"
css="data.main.css">
<render args="masterTemplate"/>
</div>
Voorbeeld voorbeeldsjabloon:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="pagebuilder-content-type type-container pagebuilder-row children-min-height" data-bind="attr: data.main.attributes, style: data.main.style, css: Object.assign(data.main.css(), {'empty-container': parent.children().length == 0, 'jarallax': data.main.attributes()['data-enable-parallax'] == 1}), event: {mouseover: onMouseOver, mouseout: onMouseOut }, mouseoverBubble: false, afterRender: function (element) { setTimeout(function () { initParallax.call($data, element); }, 0) }">
<render args="getOptions().template"></render>
<div class="element-children content-type-container" each="parent.getChildren()" ko-style="data.container.style" css="getChildrenCss()" attr="{id: parent.id + '-children'}" data-bind="sortable: getSortableOptions()" afterRender="function (element) { if (typeof afterChildrenRender === 'function') { afterChildrenRender(element); } }">
<if args="$parent.isContainer()">
<div class="pagebuilder-drop-indicator"></div>
</if>
<div class="pagebuilder-content-type-wrapper" template="{ name: preview.template, data: preview, afterRender: function () { preview.dispatchAfterRenderEvent.apply(preview, arguments); } }" attr="{ id: id }"></div>
<if args="$parent.isContainer() && $index() === $parent.parent.getChildren()().length - 1">
<div class="pagebuilder-drop-indicator"></div>
</if>
</div>
<div class="pagebuilder-display-label" data-bind="text: function () { return displayLabel().toUpperCase(); }()"></div>
<div class="pagebuilder-empty-container empty-placeholder" data-bind="css: {visible: parent.children().length == 0}, i18n: 'Drag content types or columns here'"></div>
</div>
