Componenten toevoegen | Handleiding voor Adobe Commerce-ontwikkelaars


In deze stap zullen we een voorbeeldcomponent maken om het optiemenu voor onze Offerte aan te passen. Het optiemenu is het pop-upmenu dat verschijnt wanneer u met de muis over een inhoudstype gaat, zoals hier wordt weergegeven:

Componenten Toevoegen Handleiding Voor Adobe Commerce Ontwikkelaars

Het optiemenu biedt eindgebruikers verschillende functies, waaronder een knop om de formuliereditor van het inhoudstype te openen, die we zullen toevoegen in Formulier toevoegen.

Over componenten

Componenten zijn JavaScript-bestanden die het gedrag van uw inhoudstype definiëren wanneer ze in de beheerdersfase verschijnen (met behulp van de preview.js component) en in de etalage (met behulp van de master.js onderdeel). Als zodanig zijn ze complementair aan de sjablonen die u eerder in stap 2 hebt toegevoegd en fungeren ze als weergavemodellen voor de weergaven van de sjabloon.

Het toevoegen van gebruikerscomponentbestanden aan uw inhoudstypen is volledig optioneel. Of je er een nodig hebt of niet, hangt af van de complexiteit van je inhoudstype. Als u geen componenten aan uw inhoudstype toevoegt, gebruikt Page Builder deze standaardinstellingen:

  • Standaard voorbeeldcomponent: Magento_PageBuilder/js/content-type/preview
  • Standaard mastercomponent: Magento_PageBuilder/js/content-type/master

Wanneer u begint met het ontwikkelen van complexere inhoudstypen, moet u aangepaste voorbeeldcomponenten maken om deze en andere functies beschikbaar te maken in de beheerfase:

  • Initiëren en gebruiken van extra bibliotheken van derden, zoals schuifregelaars en tabbladen.
  • Ondersteuning voor het uploaden van afbeeldingen toevoegen.
  • Het verstrekken van dynamische gegevens in uw voorbeeldsjablonen vanaf de back-end.
  • De back-end toestaan ​​om rendering uit te voeren (zoals onze blok- en dynamische blokinhoudstypen).
  • Speciale statussen declareren op basis van de opgeslagen gegevens, bijvoorbeeld een uitgeschakelde status weergeven wanneer bepaalde velden zijn ingesteld op specifieke waarden.

Voorbeelden van het implementeren van deze functies zullen worden toegevoegd aan toekomstige tutorials en andere onderwerpen in deze documentatie.

Het toevoegen van een eigen mastercomponent is veel minder gebruikelijk. De mastercomponent is alleen nodig als u de uiteindelijke uitvoer van uw inhoudstype wilt manipuleren voordat deze in de database wordt bewaard.

Componentconventies

De conventies voor het benoemen van uw componenten en het toevoegen ervan aan uw module zijn als volgt:

  • Uw voorbeeldcomponent moet een naam hebben preview.js en hier in je module geplaatst (view/adminhtml/web/js/content-type/example-quote/):

Componenten Toevoegen Handleiding Voor Adobe Commerce Ontwikkelaars

  • Uw mastercomponent moet een naam hebben master.js en hier in je module geplaatst (view/frontend/web/js/content-type/example-quote/):

Componenten Toevoegen Handleiding Voor Adobe Commerce Ontwikkelaars

We zullen geen hoofdcomponent maken voor ons Quote-voorbeeld, maar de locatie wordt hier gegeven als u er een moet opnemen voor complexere inhoudstypen.

Voeg, voordat u verder gaat, het voorbeeldbestand van de component toe (preview.js) aan jouw PageBuilderQuote module binnen de vermelde directorystructuur.

Componentconfiguratie

Verwijs in uw configuratiebestand naar uw Admin preview_component (preview.js) zoals hier getoond:

1
2
3
4
5
6
7
8
9
10
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_PageBuilder:etc/content_type.xsd">
    <type name="example_quote"
        label="Quote"
        component="Magento_PageBuilder/js/content-type"
        preview_component="Example_PageBuilderQuote/js/content-type/example_quote/preview"
        master_component="Magento_PageBuilder/js/content-type/master">
        ...
    </type>
</config>

Een beschrijving van elk onderdeelgerelateerd kenmerk uit de Offerte-configuratie volgt:

Attribuut Beschrijving
component Page Builder biedt twee typen componenten waaruit u kunt kiezen: content-type en content-type-collection. Gebruik Magento_PageBuilder/js/content-type voor statische inhoudstypen die geen kinderen hebben (zoals onze offerte). Gebruik Magento_PageBuilder/js/content-type-collection voor inhoudstypen die kinderen kunnen bevatten (containerinhoudstypen). U kunt ook uw eigen componentimplementaties maken en specificeren, op voorwaarde dat ze voldoen aan de Page Builder-interfaces.
preview_component Optioneel. De preview.js bestand biedt weergavelogica voor de voorbeeldsjabloon voor beheerders. Als uw inhoudstype geen wijzigingen in de standaardweergavelogica van Page Builder vereist, kunt u dit kenmerk weglaten uit de type element. Wanneer u het kenmerk weglaat, gebruikt Page Builder Magento_PageBuilder/js/content-type/preview standaard.

Als u echter wijzigingen wilt aanbrengen in het optiemenu voor uw inhoudstype, of andere gebruikersinteractiviteit in de Beheerder wilt aanpassen, moet u uw eigen voorbeeldcomponent maken, zoals we hebben gedaan voor het inhoudstype Offerte.

master_component Optioneel. De master.js bestand biedt weergavelogica voor de storefront-sjabloon in hoofdformaat. zoals bij de preview_componentals uw inhoudstype geen specifieke gebruikersinteractiviteit of ander gedrag vereist wanneer het in de etalage wordt weergegeven, kunt u dit kenmerk gewoon weglaten uit de type element. Wanneer u het kenmerk weglaat, gebruikt Page Builder Magento_PageBuilder/js/content-type/master standaard.

In de Quote-configuratie, de master_component attribuut is alleen ter discussie opgenomen. Het verwijst gewoon naar de standaardinstelling van Page Builder master.js component dat zou worden gebruikt, is het kenmerk weggelaten.

Citaat preview_component

De Quote preview_component (preview.js) voorbeeld wordt hier volledig getoond zodat u het kunt kopiëren naar uw preview.js bestand, gevolgd door een uitleg van de belangrijkste onderdelen.

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
31
32
33
34
35
define([
  'Magento_PageBuilder/js/content-type/preview',
], function (PreviewBase) {
    'use strict';
    var $super;

    function Preview(parent, config, stageId) {
    PreviewBase.call(this, parent, config, stageId);
    }

    Preview.prototype = Object.create(PreviewBase.prototype);
    $super = PreviewBase.prototype;

    Preview.prototype.retrieveOptions = function retrieveOptions() {
    var options = $super.retrieveOptions.call(this, arguments);

    // Change option menu icons
    options.remove.icon = "<i class="icon-admin-pagebuilder-error"></i>";

    // Change tooltips
    options.edit.title = "Open Editor";
    options.remove.title = "Delete";
    // options.move.title = "Move";
    // options.duplicate.title = "Duplicate";

    // Remove menu options
    // delete options.move;
    // delete options.duplicate;
    // delete options.edit;
    // delete options.remove;

    return options;
    };
    return Preview;
});

Verlengen van Preview

Het eerste wat we doen in onze preview-component is het uitbreiden van Page Builder Preview klas (magento2-page-builder/app/code/Magento/PageBuilder/view/adminhtml/web/ts/js/content-type/preview.ts) door het als een afhankelijkheid te declareren en het als volgt aan te roepen vanuit de constructor van de preview-component:

1
2
3
4
5
6
7
8
9
10
11
12
define([
  'Magento_PageBuilder/js/content-type/preview',
], function (PreviewBase) {
    'use strict';
    var $super;

    function Preview(parent, config, stageId) {
    PreviewBase.call(this, parent, config, stageId);
    }

    Preview.prototype = Object.create(PreviewBase.prototype);
    $super = PreviewBase.prototype;

Je hoeft niet te verlengen Preview op deze manier, maar als je dat doet, krijg je toegang tot zowel de openbare als de beschermde functies. In ons Quote-voorbeeld hebben we toegang nodig tot één beschermde functie, die hierna wordt besproken.

Ons doel voor de voorbeeldcomponent Offerte is om het standaard Page Builder-optiemenu voor een inhoudstype aan te passen, zoals hier wordt weergegeven:

Componenten Toevoegen Handleiding Voor Adobe Commerce Ontwikkelaars

Om dit te doen, moeten we de beschermde . overschrijven retrieveOptions() functie van de Preview class, zodat we verschillende opties kunnen wijzigen, zoals hier wordt weergegeven:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
Preview.prototype.retrieveOptions = function retrieveOptions() {
    var options = $super.retrieveOptions.call(this, arguments);

    // Change option menu icons
    options.remove.icon = "<i class="icon-admin-pagebuilder-error"></i>";

    // Change tooltips
    options.edit.title = "Open Editor";
    options.remove.title = "Delete";
    // options.move.title = "Move";
    // options.duplicate.title = "Duplicate";

    // Remove menu options
    // delete options.move;
    // delete options.duplicate;
    // delete options.edit;
    // delete options.remove;

    return options;
};

In de voorgaande code hebben we wijzigingen aangebracht in de optiemenupictogrammen en knopinfo. U kunt ook opties uit het menu verwijderen. Als u bijvoorbeeld niet wilt dat eindgebruikers uw inhoudstype verplaatsen of dupliceren, kunt u die opties uit uw menu verwijderen met delete options.move en delete options.duplicate zoals weergegeven in de code.

Componenten Toevoegen Handleiding Voor Adobe Commerce Ontwikkelaars

Hoewel u de eigenschappen van het basisoptiemenu kunt wijzigen zoals beschreven, raden we u aan de standaardopties zo veel mogelijk te behouden om eindgebruikers een consistente ervaring te bieden tussen de inhoudstypen van Magento en andere inhoudstypen van derden die in de loop van de tijd worden opgenomen. gaat verder.

Citaat master_component

Zoals eerder vermeld, heeft ons inhoudstype Offerte geen mastercomponent nodig. We gebruiken het standaard hoofdcomponentbestand van Page Builder: Magento_PageBuilder/js/content-type/master.

Volgende

Formulier toevoegen

badges

Let’s connect

We hebben altijd zin in nieuwe en uitdagende projecten. We gaan graag met je in gesprek!