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:
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/
):
- Uw mastercomponent moet een naam hebben
master.js
en hier in je module geplaatst (view/frontend/web/js/content-type/example-quote/
):
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_component als 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 |
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:
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.
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