Een JavaScript-module toevoegen
Bijdragen via pull-verzoeken worden niet ondersteund voor dit onderwerp. Open een GitHub-probleem om feedback te geven.
Magento 2 gebruikt requiredJS als tool om de modulestructuur te definiëren. Naast RequireJS heeft Magento 2 echter ook zijn eigen unieke manier om JavaScript-code uit te voeren. U ziet dit in het voorbeeld dat we gebruiken.
We zullen een zeer eenvoudige JavaScript-module ontwikkelen die alleen de begroeting “HELLO WORLD!” biedt. Het zal illustreren hoe Magento 2 werkt met JavaScript-bestanden, de code uitvoert en parameters doorgeeft in een script. De stappen die we moeten nemen zijn:
- Maak een nieuwe module aan.
- Maak een requiredjs-config.js en een JavaScript-modulebestand.
- Maak een lay-outupdate om een sjabloon toe te voegen waarmee de JavaScript-module wordt ingeschakeld.
- Maak een sjabloonbestand.
- Voeg de module toe en test deze.
Laten we elke stap doornemen.
Stap 1: Maak een nieuwe module
We zullen een nieuwe module maken met de naam Learning_Js:
1
mkdir app/code/Learning
1
mkdir app/code/Learning/Js
Maak nu twee bestanden:
app/code/Learning/Js/registration.php
1
2
3
4
5
6
7
8
9
10
11
12
13
<?php
/**
* Copyright © Magento, Inc. All rights reserved.
* See COPYING.txt for license details.
*/
use MagentoFrameworkComponentComponentRegistrar;
ComponentRegistrar::register(
ComponentRegistrar::MODULE,
'Learning_Js',
__DIR__
);
app/code/Learning/Js/etc/module.xml
1
2
3
4
5
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Learning_Js" setup_version="0.0.1">
</module>
</config>
Stap 2: Maak een requiredjs-config.js en een JavaScript-modulebestand aan
Vervolgens maken we een weergavemap:
1
mkdir app/code/Learning/Js/view
1
mkdir app/code/Learning/Js/view/frontend
Voeg het bestand toe app/code/Learning/Js/view/frontend/requirejs-config.js:
1
2
3
4
5
6
7
var config = {
map: {
'*': {
hello: 'Learning_Js/js/hello',
}
}
};
Voeg vervolgens de JavaScript-module toe:
1
mkdir app/code/Learning/Js/view/frontend/web
1
mkdir app/code/Learning/Js/view/frontend/web/js
En tot slot, voeg het bestand toe app/code/Learning/Js/view/frontend/web/js/hello.js:
1
2
3
4
5
6
7
8
9
define([
"jquery"
], function($){
"use strict";
return function(config, element) {
alert(config.message);
}
}
)
Stap 3: Maak een lay-outupdate om een sjabloon toe te voegen waarmee de JavaScript-module wordt ingeschakeld
Eerst moeten we de lay-outmap maken:
1
mkdir app/code/Learning/Js/view/frontend
1
mkdir app/code/Learning/Js/view/frontend/layout
En het bestand toevoegen catalog_product_view.xml:
1
2
3
4
5
6
7
8
<?xml version="1.0"?>
<page layout="1column" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<body>
<referenceContainer name="content">
<block class="MagentoFrameworkViewElementTemplate" template="Learning_Js::hello.phtml" />
</referenceContainer>
</body>
</page>
Stap 4: Maak een sjabloonbestand
Nu gaan we de sjabloon maken waarmee JavaScript wordt ingeschakeld.
1
mkdir app/code/Learning/Js/view/frontend/templates
Voeg in de sjablonenmap het bestand toe app/code/Learning/Js/view/frontend/templates/hello.phtml:
1
2
3
<div data-mage-init='{"hello": {"message": "HELLO WORLD!"}}'>
Content
</div>
Deze code activeert onze module. Het ziet er misschien een beetje vreemd uit voor degenen die al eerder requiredjs hebben gebruikt. Zoals eerder vermeld, heeft Magento 2 zijn eigen unieke proces voor het uitvoeren van JavaScript-code.
Een manier is om de data-mage-initattribute, die een JSON-object als parameter neemt (zoals te zien is in dit voorbeeld). Elke sleutel van dat object komt overeen met de module en de waarde is een config. In dit geval moet de JavaScript-module een functie retourneren met twee parameters: config en element. (Nogmaals, dit is te zien in ons voorbeeld.)
Andere populaire opties voor het uitvoeren van JavaScript-code in Magento 2 zijn onder meer het toepassen van dezelfde configuratie op meerdere DOM-elementen, of, wanneer het JavaScript niet gerelateerd is aan DOM-knooppunten, het gebruik van een asterisk
in plaats van een CSS-selector.
Stap 5: Voeg een module toe en test deze
1
bin/magento setup:upgrade
1
bin/magento cache:clean
Laten we tot slot onze module toevoegen en het resultaat testen.
Nu gaan we naar een willekeurige productweergavepagina en we zouden de “HELLO WORLD!” bericht.
Een nieuw productkenmerk toevoegen
