Tagliste

[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] 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:

[jQuery] Alimenter un tableau à partir d’une boucle .each() avec .push() et générer une liste UL LI avec les données stockées dans celui-ci

Sources: How to create an array from .each loop with jQuery et How to generate UL Li list from string array using jquery?.

[CSS] Changer la couleur et l’apparence des puces de l’élément UL

[Change cross commerce] Backoffice : configuration du bloc de facettes pour affichage sur Liste de produits

1. Associer des facettes par défaut à une liste de produits

E-commerce > Catalogue > (sidebar, section Merchandising) Liste de produits > éditer une liste de produits.

Dans la section Facettes Associées, sélectionner les facettes de tri à affecter par défaut à la liste de produits sélectionnée.

c4-catalogue-liste_produits-edit_facettes

2. Afficher les facettes dans la page fonctionnelle Liste de Produits

Gestion de contenus > Sites et pages > (onglet) Pages Fonctionnelles > (page) Liste de Produits.

(sidebar) Contenu de la page > sélectionner le bloc Rbs_Elasticsearch_StoreFacets et configurer les propriétés de bloc comme suit :

c4-facettes-pf-liste_produits

Remarque : si vous cochez « non » pour Utiliser la liste de la section, vous pouvez redéfinir des facettes spécifiques pour la page que vous êtes en-train d’éditer.

[CSS] [jQuery] Afficher une liste d’éléments dont la hauteur peut varier

looks_products

Exemple de solution mise en place : http://www.despetitshauts.com/fr/t-shirtsm-courtes-25.html.

Tentative en exploitant la fonction outerHeight de jQuery

La solution ci-dessous semble fonctionner 🙂

Simulation : http://jsfiddle.net/frontenddeveloper/2s0s1eag/29/.
Même chose mais à partir de Bootstrap : http://jsfiddle.net/frontenddeveloper/51xxem3p/6/.

Tentative avec la propriété columns de CSS3

Simulation : http://jsfiddle.net/frontenddeveloper/5doayaa5/5/.

Pour :

  • On conserve un markup HTML cohérent (les éléments de la liste sont déclarés dans un ordre logique d’apparition)
  • On ne surcharge pas le serveur par l’emploi de JavaScript

Contre :

  • Pas compatible à partir d’IE9 (<a href="http://caniuse.com/#search=columns">columns</a>) (voir pour l’existence d’un polyfill qui gère les contraintes responsive)
  • Le contenu n’est pas ordonné de gauche à droite (rangée après rangée), mais de haut en bas (colonne après colonne)
  • Pas de contrôle sur le comportement lorsqu’il n’y a pas le nombre exact d’éléments (2 looks + 16 produits) dans la page, notamment en responsive
  • Comportement responsive pas terrible…

Tentative avec Bootstrap 3 et Masonry

Inspiré de : http://codepen.io/anon/pen/eIxCp. Simulation : http://jsfiddle.net/frontenddeveloper/rbgsypLm/2/.

Pour :

  • Le contenu est ordonné de gauche à droite (rangée après rangée)

Contre :

  • On est obligé de surcharger légèrement Bootstrap (.container { padding-left:0; padding-right:0; }) et le framework CSS peut poser problème lorsqu’il est couplé à Masonry…
  • On ne conserve pas un markup HTML cohérent (les éléments de la liste ne sont pas déclarés dans un ordre logique puisque le deuxième look est intercalé entre le produit 13 et le produit 14)… Avec tous les ennuis que cela comporte de gérer son imbrication au sein de la liste et de conserver un affichage cohérent (y compris en responsive) lorsque le nombre d’éléments change !
  • Toujours pas de contrôle sur le comportement lorsqu’il n’y a pas le nombre exact d’éléments (2 looks + 16 produits) dans la page
  • Comportement responsive catastrophique

Conclusions :

A moins de partir dans un dev JS très lourd qui prend en compte le nombre d’éléments à afficher pour replacer le 2ème look dans le DOM à chaque fois :

  • qu’on agit soit sur la largeur de la fenêtre (problématique responsive),
  • ou qu’on agit sur le nombre de produits à afficher (design prévu pour 2 looks et 16 produits – il peut y avoir moins de produits dans le rayon ou suite à un tri effectué par l’utilisateur)

…c’est pas possible d’avoir un affichage cohérent :/

[CSS] Forcer une liste de définitions à se comporter comme un tableau avec la propriété display: inline-table;

Fonctionnera également pour des listes ordonnées ou non-ordonnées 😉

display_inline-table

Code HTML

Code CSS

[Magento 1.9] Afficher un nombre de produits par rangée différent en fonction du viewport dans la liste de catégories/produits du thème RWD

Méthode #1 : vous avez une contrainte responsive

Une solution full CSS qui gère le nombre de produits par rangée en fonction du viewport.
Cette solution repose sur l’exploitation du mixin SASS product-grid natif au thème Rwd et sur la modification de 2 fichiers :

  • app/design/frontend/rwd/yourpackage/template/catalog/product/list.phtml pour l’ajout de classes supplémentaires nécessaires à l’activation des media-queries
  • skin/frontend/rwd/yourpackage/scss/module/_product-list.scss pour l’ajout des mediaqueries

list.phtml

Trouver la ligne suivante sous la section <?php // Grid Mode ?> :

…et ajouter les classes suivantes :

Remarque : la logique est la même que celle du système de grid responsive proposé par Bootstrap pour ceux qui connaissent.

_product-list.scss

Pour info : les variables prédéfinies à exploiter

  • $product-column-spacing : espace entre les colonnes (valeur en px).
  • $productsGridActionHeight : hauteur d’un item produit (valeur en px – si la hauteur de l’élément .product-info change, cette valeur devrait être ajustée).

Repérer le mixin suivant :

…et ajouter juste en dessous :

Méthode #2 : vous n’avez pas de contrainte responsive

Prendre la main sur le nombre de produits par rangée en modifiant un paramètre de layout.

catalog.xml :

Trouver la section Category layered navigation layout ou la section Category default layout et localiser la ligne suivante :

Modifier la valeur de <count /> selon le nombre de colonnes souhaité.

Méthode #3 (bidouille – ne pas utiliser)

Source : How to change product column quantity in Magento

Il faut modifier 2 fichiers :

  • app/design/frontend/default/yourtheme/layout/catalog.xml
  • app/design/frontend/default/yourtheme/template/catalog/product/list.phtml

catalog.xml :

Trouver la section Category layered navigation layout ou la section Category default layout et ajouter les lignes suivantes (ou modifiez les si elles existent déjà) :

Remarque : vous pouvez cibler le template de votre choix en modifiant la valeur entre la balise <template />.

list.phtml :

Trouver la ligne suivante sous la section <?php // Grid Mode ?> :

…et la remplacer par :

Remarque : vous pouvez choisir le nombre de colonnes par rangée à affocher en modifiant la valeur de $_columnCount.

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑