Mais c'est fini jQuery dans Magento ?
Et oui, avec Alpine JS on a plus besoin de jQuery.
Ok mais moi je fais comment pour manipuler le DOM ?
Vous pouvez consulter le site You might not need jQuery pour voir comment utiliser le javascript natif pour faire ce vous faisiez avant avec jQuery !
Quelques exemples rapides :
// jQuery
const AddToCartButton = $("#addToCart");
//--> Maintenant
const AddToCartButton = document.getElementById("addToCart");
// jQuery
$("li").each(function (index, element) {
console.log($(element).text());
});
// Maintenant
document.querySelectorAll("li").forEach((element, index) => {
console.log(element.textContent);
});
// jQuery
$("button").on("click", function() {
console.log("Clicked!");
});
$("button").trigger('click');
// Maintenant
document.querySelectorAll("button").forEach(button => {
button.addEventListener("click", () => {
console.log("Clicked!");
});
});
// Pour déclencher un événement
document.getElementById("myButton").click();
Attention a rajouter quelques tests !
jQuery avait l'avantage de rajouter des tests à votre place. Par exemple si on prendre le code suivant :
// jQuery
$("#monBoutonQuiNexistePas").html("Passer la commande"); // Ne va pas génerer d'erreur si l'élément n'existe pas
// Maintenant
document.getElementById("monBoutonQuiNexistePas").innerHTML = "Passer la commande"; // Va générer une erreur si l'élément n'existe pas
// Pour éviter l'erreur, il faut faire un test avant
const AddToCartButton = document.getElementById("monBoutonQuiNexistePas");
if (AddToCartButton) {
AddToCartButton.innerHTML = "Passer la commande";
}
Et ça implique quoi pour les développeurs ?
Ça implique surtout que si vous avez besoin d'une librairie JavaScript, vous devez en choisir une qui n'utilise pas jQuery.
Si ce n'est pas le cas, vous pouvez toujours utiliser jQuery, mais il faudra l'inclure manuellement dans votre projet.