Tagproduit

[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é.

[Magento 2] Récupérer le compte des produits possédant un attribut donné

Attention: pas testé.

Source: Magento 2 product count by attribute.

[Magento 2] Créer un Helper pour récupérer sous forme d’objet dans un template PHTML des informations (ID, nom…) sur la catégorie produit en cours

Testé fonctionnel Magento 2.3!

ATTENTION: bien que cette méthode soit fonctionnelle, ce billet consigne mes notes sur la façon de créer un Helper pour récupérer sous forme d’objet dans un template PHTML des informations (ID, nom…) sur catégorie produit en cours. Les fichiers ne sont pas forcément placés aux bons endroits par rapport aux bonnes pratiques Magento 2.

Créer un module

Sodifrance_GetCurrentCategory

app/code/Sodifrance/GetCurrentCategory/etc/di.xml

app/code/Sodifrance/GetCurrentCategory/Model/Layer/Resolver.php

Hérité de vendor/magento/module-catalog/Model/Layer/Resolver.php.

Créer un module

Pdv_Catalog

app/code/Pdv/Catalog/Helper/Data.php

Hérité de vendor/magento/module-catalog/Helper/Data.php.

app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/list_abonnements.phtml

Hérité de vendor/magento/module-catalog/view/frontend/templates/product/list.phtml.

Dans le bloc de code suivant:

…mettre à la suite:

Pour récupérer le nom ou l’ID de la catégorie en cours

La majeure partie des informations récupérables est définie ici: vendor/magento/module-catalog/Model/Category.php. Mais précisément pour le nom et l’ID de la catégorie en cours:

Vous pouvez également utiliser les fonctionnalités d’auto-complétion de votre IDE pour avoir accès à toute la liste des informations contenues dans votre objet PHP $currentCategory en commençant à taper <?php echo $currentCategory->get.

[Magento 2] Afficher les descriptions courte et complète des produits dans la page de liste produits

Testé fonctionnel Magento 2.3! Source: How to get products description and short description in products list page?

[Magento 2] Afficher la description courte d’un produit dans la liste produits

Dans un template PHTML hérité de vendor/magento/module-catalog/view/frontend/templates/product/list.phtml mettre le paramètre $showDescription à true pour le mode d’affichage désiré (grid ou list – j’ai mis les deux à true dans l’exemple ci-dessous):

[Magento 2] Afficher la description détaillée d’un produit dans la liste produits

Pas testé! Toujours dans un template PHTML hérité de vendor/magento/module-catalog/view/frontend/templates/product/list.phtml, ajouter le code suivant:

[Magento 1.9] Ajouter un nouvel onglet (tab) sur la fiche produit dans le thème rwd

Source : Alternative way of adding tabs to the Magento product page.

Afin que cette technique fonctionne, il faut d’abord vérifier que le template phtml qui injecte les onglets ait le code adéquat. C’est normalement le cas avec le thème rwd. Ouvrir le fichier app/design/frontend/<mon_package>/<mon_theme>/template/catalog/product/view.phtml et vérifier la présence du code suivant :

Dans app/design/frontend/<mon_package>/<mon_theme>/template/catalog/product/view/ créer un fichier newtab.phtml.

Dans app/design/frontend/<mon_package>/<mon_theme>/layout/local.xml ajouter ceci :

© 2020 devfrontend.info

Theme by Anders NorénUp ↑