Exemple d’utilisation: les cartes (items) catégories ou produits du listing catégories ou produits.
Rendre toute une zone cliquable, plutôt qu’uniquement le lien qu’elle contient. Exemple: une carte produit dans le listing produit. app/design/frontend/MyVendor/mytheme/Magento_Catalog/templates/product/list.phtml
.
Utilisation dans un fichier PHTML:
|
// <script type="text/x-magento-init"> // { // // ID ou classe CSS placée sur l'élément parent (zone qui devient cliquable) // ".product-item": { // // Alias de ce plug-in // "zoneClick": { // // Paramètre "targetElement": l'élément enfant qui contient l'URL vers laquelle rediriger (valeur d'un attribut "href") // "targetElement": "a.product-item-link", // // Paramètre "exclude": la zone cliquable peut renfermer d'autres liens (un bouton d'ajout au panier par exemple) qui doivent rester actifs. // // Renseigner les IDs ou classes de ces liens ici. // // Toujours déclarer sous forme de tableau, même si il n'y a qu'un seul élément à exclure. Peut être vide, mais PAS OMIS. // "exclude": [ ".icon-addtocart.icon", ".toto", ".titi", ".tutu" ] // } // } // } // </script> |
Détail des fichiers à mettre en place:
app/web/app/design/frontend/MyVendor/mytheme/web/js/zone-click.js
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([ "jquery" ], function($) { "use strict"; return function (options, element) { $(element).on('click', function (event) { let $this = $(this), $clickedElement = $(event.target), excludeAmount = options.exclude.length, testExclude = []; // On vérifie que l'élément cliqué ne fait pas partie de la liste des exclusions: let i; for (i = 0; i < excludeAmount; i++){ if ($clickedElement.is(options.exclude[i])) { testExclude.push(1); } else { // nada ... } } if (testExclude.length > 0) { // Si l'élément cliqué fait partie de la liste des exclusions, on ne redirige pas vers la page cible. testExclude = []; } else { // Sinon, on redirige vers la page cible. window.location = $this.find(options.targetElement).attr('href'); return false; } }); }; }); // https://www.siphor.com/different-ways-using-javascript-magento-2/ // https://jason.codes/2019/06/magento-2-create-jquery-ui-widget/ |
Note: pour être sûr de ce que vous allez renseigner en paramètre exclude
, vous pouvez ajouter dans le code ci-dessus un console.log($clickedElement.attr('class'));
. Puis allez en front et cliquez sur les éléments à exclure. Les classes qui leur sont affectées apparaîtront en console (F12).
Déclaration via requireJS: app/design/frontend/MyVendor/mytheme/requirejs-config.js
|
var config = { map: { "*": { zoneClick: 'js/zone-click' } } }; |
app/design/frontend/MyVendor/mytheme/Magento_Catalog/templates/product/list.phtml
|
<script type="text/x-magento-init"> { ".product-item": { "zoneClick": { "targetElement": "a.product-item-link", "exclude": [ ".icon-addtocart.icon" ] } } } </script> |