Tagliste produits

[Magento 2] Un plugin jQuery custom pour rendre cliquable une zone complète plutôt que le seul lien qu’elle renferme avec x-magento-init et requireJS

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:

Détail des fichiers à mettre en place:

app/web/app/design/frontend/MyVendor/mytheme/web/js/zone-click.js

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

app/design/frontend/MyVendor/mytheme/Magento_Catalog/templates/product/list.phtml

[Magento 2] Récupérer la valeur d’un attribut produit dans une page category, product list, product

Les codes des attributs sont visibles en backoffice en se rendant dans STORES > Product [Attributes].

Attention: de manière générale votre attribut ne sera pas visible en front si il n’est pas configuré comme tel en admin. STORES > Product [Attributes]. Editez l’attribut de votre choix. Dans la partie Storefront Properties, vous pouvez configurer la visibilité de votre attribut pour les pages du catalogue, son utilisation pour la recherche, la focntionnalité de comparaison, etc…

Pour un attribut de type text

Pour un attribut de type dropdown

En BO, mettre « Used in Product Listing » à « Yes » dans ATTRIBUTE INFORMATION > Storefront Properties.

[Magento 2] Nombre de produits par rangée via CSS LESS dans les listes de catégories

Utiliser les variables mises à disposition par Magento 2

Si votre thème hérite de blank: dans le fichier @product-grid-items-per-row-layout-2-left-screen-s (que vous devrez surcharger dans votre thème), modifiez les valeurs des variables suivantes:

Utiliser la fonction calc de CSS

Pour 4 produits par rangée:

Pour 1 produit par rangée en Mobile, 2 produits par rangée en Tablet, 4 produits par rangée en Desktop:

Petite subtilité pour les thèmes de merde qui n’utilisent pas Flexbox

Vous allez vous retrouver à devoir surcharger des choses de ce style:

Dans width: calc((100% - 6%) / 4);, la valeur de 6% correspond à la somme des valeurs des marges margin-left apposées pour une rangée donnée et la valeur 4 au nombre de produits attendus pour une rangée.

Dans mon exemple, j’ai par exemple 2% de marge entre mes produits. 4 produits par rangées = 3x la marge de séparation de 2% = 6%.

[Magento 2] Produit configurable – afficher une fourchette de prix plutôt qu’un prix d’appel dans la liste des catégories/produits

Pas testé, mais trouvé par hasard et mis de côté pour le jour où j’ai besoin!

Source: Display Configurable Product Price Ranges in Magento 2 et version PDF pour la postérité.

Dans la liste produits (ou catégories) par défaut, Magento 2 affiche le prix d’un produit configurable de cette manière: A parti de <prix_le_plus_bas>. L’auteur du blog ci-dessus propose d’afficher une fourchette de prix plutôt qu’un prix d’appel: <prix_le_plus_bas><prix_le_plus_haut>.

[Magento 2] Masquer les décimales pour les prix ronds dans la liste produits

Lorsque mon prix affiche 99,00 €, je souhaite que soit affiché uniquement la valeur avant la virgule: 99 €. Pour celà, il faut surcharger le fichier vendor/magento/module-catalog/view/base/templates/product/price/amount/default.phtml dans un thème.

Remarque: on voit dans notre exemple que le fichier natif est « rangé » dans le dossier base ce qui signifie que cette vue PHTML va servir pour afficher des informations autant en front que dans l’interface d’administration de Magento 2. J’ai cependant besoin de n’afficher mon prix sans décimales qu’en front. Pour ce faire, je vais recréer une version modifiée de mon fichier de départ dans app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/price/amount/default.phtml.

La partie qui nous intéresse plus particulièrement se situe dans l’élément <span class="price-wrapper">:

J’ai remarqué, en parcourant la source de la page avec l’inspecteur d’éléments, qu’il existait dans le bloc <div class="price-box"> un data attribut data-price-amount qui contenait déjà les prix ronds sans décimales (data-price-amount="99" au lieu de data-price-amount="99.00"). L’idée ici est de le ré-exploiter.

Ci-dessus, je créer une variable $dot qui contient juste le caractère .. Je vais avoir besoin de savoir si la valeur de mon data-price-amount contient la valeur de $dot ou pas.

Je crée également une variable $price qui contient la valeur de mon data-price-amount (le prix).

Dans une condition if/else, j’utilise la fonction strpos de PHP pour vérifier si la valeur de $price contient la valeur de $dot.

Si « oui » (!== false), alors je conserve l’affichage standard du prix dans Magento 2 (un <span class="price"></span> avec des décimales, peu importe si le prix est de 99,00 €).

Si « non » (code après le <?php else :?>) j’ajoute un <span class="price-without-decimal"> au-dessus de l’affichage standard du prix dans Magento 2 pour y afficher la valeur de mon attribut data-price-amount (un prix sans décimales, si mon code fonctionne correctement).

Attention: je me retrouve désormais avec 2 prix affichés si je suis dans le cas où la valeur du prix ne contient pas de décimales. J’ai choisi de conserver l’affichage standard du prix dans Magento 2 dans le DOM au cas où il sert (via un javaScript ou autre…) à des calculs.

Pour masquer ce dernier à l’utilisateur, j’utilise CSS:

Le fichier app/design/frontend/Sodifrance/pdv/Magento_Catalog/templates/product/price/amount/default.phtml complet:

(partie en work-in-progress) Si vous voulez pouvoir cibler certaines pages spécifiquement, voici ce qu’il faut mettre dans votre layout XML:

[Magento 2] Modifier le nombre de produits par rangée dans les listes produits

app\design\frontend\<Vendor_name>\<theme_name>\web\css\source\module\_listing_extend.less

[Magento 1.x] Un slider multi-produits responsive avec le plugin jQuery Cycle (fourni avec le thème Rwd)

Source : http://jsfiddle.net/kRs2N/6/ et mon fork avec des marges entre les slides http://jsfiddle.net/frontenddeveloper/L3bpavzc/1/.

HTML

CSS

jQuery

[Magento] Changer le nombre de produits par rangée dans les listes produits du thème Rwd

Source : How to change product column quantity in Magento.

Hi pals!, looking for tips to customize your theme?, here’s one very useful and easy to do: How to change the product column quantity in your product list pages. We’ll modify only 2 files:

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

catalog.xml :

Find “Category layered navigation layout” section or “Category default layout” section (if you don’t use layered-nav in your category pages), then add this lines or modify the exisitng ones if you already have them:

Why we do this?: we set 1column layout in category pages since we want to take advantage of the full width of the page, so we can set 4 columns of products (grid mode of course). But it’s not mandatory, you can choose between 1column,2columns-right,etc. to fit your needs.

list.phtml :

Find this line under <?php // Grid Mode ?> section:

Change it to:

Save all files, clear your Magento cache. That’s it, you’ll get a category list with 4 columns of products.

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑