Optredens toevoegen | Handleiding voor Adobe Commerce-ontwikkelaars

In dit onderwerp wordt uitgelegd hoe u een uiterlijk toevoegt aan de oorspronkelijke inhoudstypen van Page Builder. Een overzicht van de stappen en de bestanden die u moet toevoegen, wordt hier geïllustreerd:

:pijl omhoog: Stappen voor het toevoegen van verschijningen

Deze stappen zijn ook van toepassing op het toevoegen van verschijningen aan uw aangepaste inhoudstypen en alle inhoudstypen van derden.

Stap 1: Voeg virtueel type toe voor VisualSelect-klasse

Ten eerste hebben we een manier nodig om ons nieuwe uiterlijk in het formulier te selecteren. In Page Builder gebruiken we de VisualSelect klas. Deze klasse biedt de gebruikersinterface voor het selecteren van verschillende verschijningen. Bijvoorbeeld de VisualSelect class voor de Banner biedt vier optredens om uit te kiezen:

:pijl omhoog: Visuele selector voor Banner

Als u een nieuwe weergaveoptie wilt toevoegen voor een van de oorspronkelijke inhoudstypen van Page Builder (zoals de banner), maakt u een nieuwe di.xml bestand in uw module, zoals hier getoond:

:pijl omhoog: Bestand en locatie voor de VisualSelect-klasse

Binnen de di.xml bestand, voeg een virtueel type toe met behulp van deVisualSelect class met de virtuele typenaam van de Banner (<virtualType name="AppearanceSourceBanner"), zoals hier weergegeven:

1
2
3
4
5
6
7
8
9
10
11
12
13



<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:ObjectManager/etc/config.xsd">
    <virtualType name="AppearanceSourceBanner" type="Magento\PageBuilder\Model\Source\VisualSelect">
        <arguments>
            <argument name="optionsData" xsi:type="array">
                <item name="simple-poster" xsi:type="array">
                    <item name="value" xsi:type="string">simple-poster</item>
                    <item name="title" xsi:type="string" translate="true">Simple Poster</item>
                    <item name="icon" xsi:type="string">Example_PageBuilderBannerAppearance/css/images/content-type/banner/appearance/simple-poster.svg</item>
                </item>
            </argument>
        </arguments>
    </virtualType>
</config>

:pijl omhoog: VisualSelect-klasse voor nieuwe bannerweergave

Het gebruik van dezelfde klassenaam als de banner zorgt ervoor dat Magento’s XML-samenvoeging uw nieuwe visuele verschijningsoptie toevoegt aan de bestaande bannervormgevingsopties.

In de volgende tabel worden de configuratieargumenten voor elke weergaveoptie beschreven.

Om meer uiterlijk-opties toe te voegen, maakt u gewoon meer item arrays met namen die overeenkomen met de valuezoals hier getoond:

1
2
3
4
5
6
7
8
9
10



<item name="tall" xsi:type="array">
    <item name="value" xsi:type="string">tall</item>
    <item name="title" xsi:type="string" translate="true">Tall</item>
    <item name="icon" xsi:type="string">Example_PageBuilderExtensionBanner/css/images/content-type/banner/appearance/tall.svg</item>
</item>
<item name="short" xsi:type="array">
    <item name="value" xsi:type="string">short</item>
    <item name="title" xsi:type="string" translate="true">Short</item>
    <item name="icon" xsi:type="string">Example_PageBuilderBannerExtensionBanner/css/images/content-type/banner/appearance/short.svg</item>
</item>

:pijl omhoog: Voorbeeld van weergave-opties

Een verschijningspictogram maken

Uiterlijk pictogrammen zijn: .svg bestanden die de lay-out van een uiterlijk grafisch weergeven. Voeg uw extra uiterlijkpictogrammen toe aan de css-uiterlijkmap van uw module (css/images/content-type/[content-type-name]/appearance/). U kunt uiterlijkpictogrammen voor de banner toevoegen met behulp van de hier getoonde directorystructuur:

:pijl omhoog: Verschijningspictogrammen voor Banner

U kunt elke ontwerptool gebruiken om uw SVG te maken. Maar als u uw uiterlijkpictogrammen wilt afstemmen op de pictogrammen van Page Builder perfectgebruik de SVG-structuur en afmetingen die hier worden getoond:

1
2
3
4
5
6
7
8
9



<svg xmlns="http://www.w3.org/2000/svg" width="218" height="110" viewBox="0 0 218 110">
  <g fill="none" fill-rule="evenodd">
    <rect width="149" height="69" x="35" y="21" fill="#524D49"/>
    <!--- Optional shapes displayed on top of base rect -->
    <rect width="45" height="16" x="87" y="60" fill="#FFF"/>
    <rect width="72" height="4" x="73" y="34" fill="#FFF"/>
    <rect width="60" height="4" x="79" y="43" fill="#FFF"/>
  </g>
</svg>

:pijl omhoog: SVG-weergavesjabloon

Deze specifieke afmetingen zorgen ervoor dat uw pictogram naadloos aansluit bij de bestaande uiterlijkpictogrammen van Page Builder:

Stap 2: Vormgevingsconfiguraties toevoegen

Uiterlijkconfiguraties verbinden de gegevens die zijn ingevoerd in de vorm van een inhoudstype met de HTML-sjablonen. Het inhoudstype Kop heeft bijvoorbeeld een <html> configuratie-element (<html name="heading_text" />) die de tekst toewijst die is ingevoerd in de inhoudstype’s heading_text veld (<field name="heading_text" formElement="input">) naar de Heading’s Knockout-sjabloonbinding (html="data.main.html"), zoals hier geïllustreerd:

:pijl omhoog: Uiterlijk configuraties uitgelegd

Hetzelfde concept is van toepassing op: styles, attributesen css elementen. Deze elementen zorgen ervoor dat de formulierinstellingen (zowel inhoud als stijlen) zoals verwacht op de sjablonen worden toegepast.

Om een ​​nieuwe configuratie voor het uiterlijk van de banner toe te voegen, maakt u een configuratiebestand voor het inhoudstype met de naam banner.xmlzoals hier getoond:

:pijl omhoog: Optredens toevoegen aan inhoudstype Banner

Deze procedure is van toepassing op elk type native inhoud dat u wilt uitbreiden. Met andere woorden, u kunt de bestandsnaam gebruiken (zoals heading.xml) en typ naam (zoals <type name="heading">) van elk inhoudstype om het uit te breiden op basis van het XML-samenvoeggedrag van Magento.

Een voorbeeld banner.xml config-bestand voor een nieuwe simple-poster uiterlijk wordt hier getoond:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24



<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
    <type name="banner">
        <children default_policy="deny"/>
        <appearances>
            <appearance name="simple-poster"
                        preview_template="Example_PageBuilderBannerAppearance/content-type/banner/simple-poster/preview"
                        master_template="Example_PageBuilderBannerAppearance/content-type/banner/simple-poster/master"
                        reader="Magento_PageBuilder/js/master-format/read/configurable">
                <elements>
                    <element name="main">
                        <style name="display" source="display" converter="Magento_PageBuilder/js/converter/style/display" preview_converter="Magento_PageBuilder/js/converter/style/preview/display"/>
                        <style name="margins" storage_key="margins_and_padding" reader="Magento_PageBuilder/js/property/margins" converter="Magento_PageBuilder/js/converter/style/margins"/>
                        <attribute name="name" source="data-content-type"/>
                        <attribute name="appearance" source="data-appearance"/>
                        <attribute name="show_button" source="data-show-button"/>
                        <attribute name="show_overlay" source="data-show-overlay"/>
                        <css name="css_classes"/>
                    </element>
                    . . .
            </appearance>
        </appearances>
    </type>
</config>

:pijl omhoog: Eenvoudige posterweergave voor het inhoudstype Banner

Stap 3: Vormgevingsformulieren toevoegen

Verschijningen voor een inhoudstype kunnen dezelfde vorm delen of verschillende vormen gebruiken. Het inhoudstype Producten gebruikt bijvoorbeeld twee verschillende vormen, één voor elk uiterlijk. Het Grid-uiterlijk maakt gebruik van de pagebuilder_products_form.xml om opties te bieden voor het weergeven van producten in een raster. Terwijl het Carousel-uiterlijk de . gebruikt pagebuilder_products_carousel_form.xml om extra mogelijkheden te bieden voor het tonen van producten in een carrousel.

Wanneer u een uiterlijk met een formulier selecteert, vervangt Page Builder het formulier van het inhoudstype (gedefinieerd in de <type> element) met de vorm van het uiterlijk. Maar wanneer u een uiterlijk selecteert dat dat wel doet niet als u een formulier hebt gedefinieerd, schakelt het uiterlijk terug naar het gebruik van het formulier van het inhoudstype.

1
2
3



<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"...>
    <type name="products"
          form="pagebuilder_products_form"

:pijl omhoog: Formulier voor inhoudstype dat standaard wordt gebruikt voor alle verschijningen

Voeg a . toe om een ​​formulier voor een verschijning toe te voegen <form> element als een kind van de <appearance> element in het configuratiebestand van uw inhoudstype. Zoals vermeld, gebruikt het inhoudstype Producten een formulier voor het uiterlijk van de carrousel, zoals hier wordt weergegeven:

1
2
3
4
5
6
7



<appearance name="carousel"
            preview_template="Magento_PageBuilder/content-type/products/grid/preview"
            master_template="Magento_PageBuilder/content-type/products/grid/master"
            reader="Magento_PageBuilder/js/master-format/read/configurable">
    <form>pagebuilder_products_carousel_form</form>
    <elements>
    . . .

:pijl omhoog: Een formulier toevoegen aan een verschijning

Stap 4: Vormgevingssjablonen toevoegen

Uiterlijk gebruiken verschillende HTML-sjablonen om verschillende lay-outs te maken. Ze gebruiken ook sjablonen om verschillende stijlen op dezelfde lay-outs toe te passen. De Banner gebruikt bijvoorbeeld vier sets van: preview.html en master.html sjablonen, één set voor elk uiterlijk:

:pijl omhoog: Sjablonen voor bannerweergave

Merk op hoe Page Builder de bannersjablonen indeelt op uiterlijknaam. We raden dezelfde werkwijze aan bij het toevoegen van sjablonen voor uw optredens.

Sjablonen maken voor extra bannerweergaven, zoals de simple-poster zoals beschreven in stap 1 en 2, voegt u een nieuwe uiterlijkmap toe met uw master.html en preview.html sjablonen, zoals hier weergegeven:

:pijl omhoog: Voeg extra sjablonen toe aan template/content-type/[content-type-name]/[appearance-name]

Stap 5: Vormgevingsstijlen toevoegen

Uiterlijk gebruiken verschillende CSS/LESS-bestanden om verschillende visuele stijlen voor een inhoudstype te creëren. Het inhoudstype Banner gebruikt bijvoorbeeld een andere .less bestand voor elke verschijning, zoals hier getoond:

:pijl omhoog: Banner-stylesheets

Een stylesheet maken voor een extra bannerweergave, zoals de simple-postervoeg een map toe met de naam banner en een .less bestand met de naam van het uiterlijk, zoals hier weergegeven:

:pijl omhoog: Voeg extra stylesheets toe aan css/source/content-type/[content-type-name]/

De _module.less file is een importbestand dat ervoor zorgt dat het extra stylesheet wordt toegevoegd aan de bestaande bannerstijlen. De _module.xml bestand voor onze simple-poster.less bestand ziet er als volgt uit:

1



@import "_simple-poster";

Gebruik _module.less voor importverklaringen

Voorbeeldmodule

Een voorbeeldmodule voor dit onderwerp is beschikbaar om te downloaden in de repository van pagebuilder-examples.

Laatste gedachten

Het gebruik van verschijningen om de oorspronkelijke inhoudstypen van Page Builder uit te breiden, is een van de best practices van Page Builder voor het maken van een verscheidenheid aan nieuwe inhoudsbouwstenen op basis van bestaande inhoudstypen.