Biblioteca jQuery este o functionalitate de baza care include functii de baza pentru lucrul cu elemente. Ajuta la gestionarea continutului paginii, manipularea, modificarea si gestionarea evenimentelor prin JavaScript.
Puteti utiliza jQuery cu un script ca acesta:
<script>
require([
'jquery'
],
function ($) {
$("#elementul_meu").show();
});
</script>jQuery UI in Magento 2
In plus, exista jQuery UI care extinde functionalitatea jQuery cu addon-uri pentru imbunatatirea UI, pentru a adauga efecte, widgeturi si teme. Lista completa a instrumentelor disponibile o puteti gasi in documentatia oficiala.
Sa vedem cum puteti sa utilizati jQuery UI in Magento 2. Exista mai multe moduri in care puteti solicita elementele din biblioteca UI.
1) Puteti utiliza acest script:
<script>
require([
'jquery',
jquery/ui
],
function ($) {
$("#elementul_meu").accordion();
});
</script>Cu toate acestea, Magento recomanda utilizarea urmatoarelor doua moduri.
2) Setati o configuratie data-mage-init:
<div id="elementul_meu" data-mage-init='{"collapsible":{"openedState": "active",
"collapsible": true, "active": true, "collateral": { "openedState": "filter-active", "element": "body"
} }}'>
<div data-role="collapsible">
<div data-role="trigger">
<span>Primul titlu 1</span>
</div>
</div>
<div data-role="content">Primul continut</div>3) Puteti configura tipul special de script - text/x-magento-init:
<script type="text/x-magento-init">
{
"#elementul_meu": { // Selectorul va utiliza widget-ul
"accordion": // <?php echo $block->getNavigationAccordionConfig(); ?>
}
}
<script>jQuery UI in Magento 2.3.3
Biblioteca jQuery UI a fost restructurata in Magento 2.3.3. jQuery UI a fost impartit in widgeturi separate care pot fi incarcate de modulele de baza numai atunci când sunt necesare. A fost creat pentru a imbunatati performantele caracteristicilor magazinului.
Aceasta inseamna ca trebuie sa eliminati dependenta „jquery/u”. In caz contrar, veti vedea urmatoarea notificare:
"Fallback to JQueryUI Compat activated. Your store is missing a dependency for a jQueryUI widget. Identifying and addressing the dependency will dramatically improve the performance of your site. Message from compat.js"
Iata un exemplu de script corect pentru Magento 2.3.3:
<script>
define([
'jquery',
‘jquery-ui-modules/widget’
],
function ($) {
‘use strict’;
$.widget(‘...’);
});
</script>Sau puteti utiliza abordarea dependentei „delegate” pentru a sustine compatibilitatea cu versiunile mai vechi:
<script>
define([
'jquery',
‘Magento_Ui/js/modal/modal’
],
function ($) {
‘use strict’;
$.widget(‘...’);
});
</script>Editati metodele intr-un widget
Magento accepta implementarea widgeturilor jQuery.
Exista doua moduri in care puteti face acest lucru: mixin si dezvoltarea de componente personalizate. Daca doriti sa adaugati noi metode la codul existent, este mai bine sa utilizati mixin. Dar daca creati un cod nou de la zero, puteti crea singura o componenta personalizata. Sa luam in considerare ambele optiuni.
Mixin
In acest caz, trebuie sa faceti doar 2 pasi:
- Creati app/code/<Vendor>/<Module>/view/frontend/requirejs-config.js cu ajutorul codului:
var config = {
"config": {
"mixins": {
"mage/tabs": {
'<Vendor>_<Module>/js/accordion-mixin': true
}
}
}
};Creati app/code/<Vendor>/<Module>/view/frontend/web/js/accordion-mixin.js cu specificatiile necesare:
define([
'jquery'
], function($) {
return function (original) {
$.widget('mage.accordion', original, {
activate: function() {
// restul codului aici
return this._super();
}
}
);
return $['mage']['accordion'];
}
});Adaugati metode la un widget
Pentru a-l adauga, trebuie sa creati app/code/<Vendor>/<Module>/view/frontend/web/js/custom-accordion.js si sa configurati codul:
define([
'jquery',
'jquery/ui',
'mage/accordion'
], function($) {
$.widget('vendor.customAccordion', $.mage.accordion, {
someAction: function(elementul_meu) {
// codul dvs. aici
}
});
});Apoi accesati template-ul app/code/<Vendor>/<Module>/view/frontend/templates/example.phtml si adaugati urmatorul cod:
<div id="elemen_examplet"></div>
<script>
require([
'jquery',
'<Vendor>_<Module>/js/custom-accordion'], function ($) {
$("#elementul_meu").customAccordion();
$("#elementul_meu").customAccordion("someAction");
});
</script>
HostX va pune la dispozitie un serviciu de gazduire Magento specializat si va poate ajuta in rezolvarea problemelor dvs.. Contactati-ne pentru a afla cum solutiile noastre de gazduire Magento va pot ajuta in atingerea obiectivelor dvs.
