Étiquette : hover

[Magento 2] Des images au survol hover dans la liste produit en ajoutant un attribut custom

Testé fonctionnel Magento 2.3, 2.4!

Attention: j’ai trouvé plusieurs tutos sur le net qui m’ont mis sur la bonne voie, mais seul celui-ci comporte l’ensemble des éléments qui permettra de mettre en place la fonctionnalité voulue: How to change product image on hover?.

En backoffice:

Créer un attribut custom hover_image

  • boutiques > attributs > produit
  • ajouter un attribut
  • propriétés de l’attribut:
    • libellé par défaut: « hover_image »
    • type d’entrée…: « image »
  • Propriétés avancée des attributs:
    • code: « hover_image »
    • ajouter aux option de colonne: « non »
    • utiliser dans les options de filtrage: « non »
  • Propriétés du front office: (se référer au paragraphe ATTENTION juste en-dessous)
    • Visible sur les pages du catalogue de la boutique: oui
    • Utiliser dans les listes de produits: oui
  • bouton enregistrer l’attribut

ATTENTION

Là, vous vous dites probablement: « Mais où qu’il est ce menu Propriétés du front office??? ». Il y a un bug dans le BO de Magento 2 qui applique un display: none; sur cette entrée de menu, mais elle est bien présente!!! Supprimer le display: none; avec l’inspecteur d’éléments pour pouvoir accéder à ce menu.

Sinon, vous pouvez également suivre la méthode suivante et appliquer directement la modification en base de données:

Now we have to use this attribute in the listing page. So we have to make used_in_product_listing to 1. We can do that by using MySQL.

You need to take hover_image Attribute_ID from admin. You can go to your hover_image attribute page in admin and get its ID from URL.

Suppose that Attribute_ID is 99 in our case. Now, go to the database and select the catalog_eav_attribute table. Select the attribute with id 99 and change the value of the used_in_product_listing column to 1.

Or use below MySQL query :

Plaçons notre attribut custom hover_image dans le bon groupe d’attributs (images)

  • boutiques > attributs > jeu d’attributs
  • choisir le jeu d’attributs (« default » si il n’y a que celui là)
  • dans la colonne « groupes » glisser le nouvel attribut hover_image dans le dossier « images » (normalement, vous le trouverez tout en bas de l’arbre)
  • bouton enregistrer

Affectons une image hover à l’un de nos produits

  • catalogue > produits
  • éditer un produit
  • boutons ajouter un attribut
  • cocher hover_image
  • bouton ajouter la sélection
  • section Images et vidéos
  • accéder à la configuration de l’image que vous souhaitez voir apparaître au hover en cliquant sur la petite icône en forme de damier située en haut à gauche du visuel
  • Dans Role, sélectionner hover_image
  • cliquez sur la croix pour fermer
  • bouton enregistrer

Dans le code source:

app/design/frontend/VendorName/themename/etc/view.xml

app/design/frontend/VendorName/themename/Magento_Catalog/templates/product/list.phtml

app/design/frontend/VendorName/themename/Magento_Catalog/web/css/source/_modules.less

En bash:


Une autre source (incomplète) m’ayant mis sur la voie: How to make a Product Listing with Hover images on Magento 2 et version PDF de l’article, pour la postérité.

[jQuery][CSS][Internet Explorer] Bug de détection de la pseudo-classe :hover ou de l’événement mouseover sur une bordure CSS

Problème:

Sous IE (Internet Explorer), j’ai un menu déroulant dropdown dont la partie déroulée (les sous-niveaux) se masque involontairement lorsqu’elle est survolée au passage de la souris.

Autrement dit, IE (même les versions les plus récentes) n’est pas capable de détecter une bordure CSS comme un élément « physique ». Dans le cas de mon menu, le sous-niveau est encadré par une bordure grise de 10px d’épaisseur. Lorsqu’on navigue à la souris et qu’on fait le chemin de l’entrée « Particuliers » vers le sous-menu correspondant (cf. capture ci-dessous), le curseur traverse la bordure ce qui a pour effet une perte de focus et une disparition prématurée de la partie déroulée. (La bordure incriminée est en noir dans ma capture – lorsque le curseur de la souris passe dessus, le sous-menu disparaît).

Solution:

Ne pas utiliser la propriété CSS border pour un habillage se trouvant sur le passage de la souris. 🙂
J’ai d’abord tenté (sans succès) de remplacer la border-top par une ombre interne avec la propriété CSS box-shadow et la valeur inset.

La solution qui fonctionne consiste à utiliser un dégradé CSS (gradient). On commence par générer son dégradé via un outil en ligne comme Ultimate CSS Gradient Generator par Colorzilla.

Le code CSS généré est le suivant:

Suivant les navigateurs qu’on souhaite supporter, on peut réduire le code à cette ligne (à condition d’utiliser un outil d’auto-prefixage CSS qui rajoute les -moz, -webkit, -o, -ms en fonction du scope de navigateurs et OS prédéfinis) :

Il reste ensuite à modifier cette ligne en fonction de notre besoin. Dans mon cas, remplacer par les bonnes couleurs et remplacer l’unité % par du px pour coller aux 10px de ma bordure: