Monthdécembre 2014

[Magento] Ajouter un champ Quantité à chaque item dans la page de liste des catégories/produits

Source : How to add quantity option to each product item in the category list page?.

Dans le fichier /app/design/frontend/rwd/default/template/catalog/product.list.phtml repérer la ligne suivante (bouton d’ajout au panier) :

Et la remplacer par :

[jQuery] Click/toggle entre deux fonctions (bouton play/pause, start/stop)

Source : jQuery click / toggle between two functions.
Plug-in : [jQuery-Function-Toggle-Plugin
] A jQuery plugin that binds multiple event handlers which are executed on each consecutive event
.

Ajout d’un bouton Play/Pause au carousel Bootstrap : Simulation, fil de discussion sur Stack Overflow.

Problème : lancer deux opérations (ou fonctions) distinctes lorsqu’on clique sur un seul et même bouton (bouton play/pause par exemple).

[jQuery] Au clic, agir sur plusieurs éléments d’une même page qui portent un data-attribute similaire

Dans l’exemple ci-dessous, nous avons une liste d’éléments soumise à des critères de tri (Nom, Pertinence, Nouveauté…) par ordre ascendant et descendant. La barre de tri est présente deux fois dans la page, en haut et en bas de la liste d’éléments.
J’ai logiquement souhaité qu’au clic sur un pictogramme ‘ascendant’/’descendant’ se trouvant dans l’une des deux barres de tri, le switch de puce soit automatiquement répercuté dans l’autre barre de tri.

desc-asc

[Magento] Remplacer un template de page par le biais du fichier local.xml

Admettons qu’on souhaite afficher la page de liste des catégories (qui est par défaut un template 3 colonnes) en 1 seule colonne. Cette page porte le libellé de classe suivant, affecté au body :

Il existe dans les fichiers layout de Magento une balise <reference /> dont l’attribut name possède une valeur root qui permet d’assigner par défaut un gabarit de page à un bloc donné. Exemple :

Dans l’exemple ci-dessus, le template page/1column.phtml est assigné par défaut au bloc catalog_category_default/

Ainsi, éditer /app/design/frontend/rwd//layout/local.xml en prenant soin de déclarer pour quel bloc vous assignez un nouveau template par défaut :

Les libellés des blocs (catalog_category_default, catalog_category_layered) sont disponibles dans les fichiers layout en relation avec le module auxquels appartiennent les blocs.

[Brackets] Fonctionnalités natives et plug-ins utiles

Fonctionnalités natives utiles de l’éditeur Brackets

Multi-sélection et multi-édition

Source : Multi-sélection et multi-édition.

Pour, par exemple, remplacer un même terme à x endroits différents dans un même fichier, sélectionner sa première occurrence puis maintenez la touche Ctrl enfoncée et sélectionnez la suite. Une fois l’ensemble des occurrences à remplacer sélectionnées, saisir ce qui va en lieu et place.

[Magento] Résolution de problèmes liés à l’affichage d’un thème

Le thème défini en BO refuse de s’afficher en front (c’est toujours l’ancien thème qui s’affiche)

Vérifier qu’un design temporaire n’est pas affecté de manière permanente (sans dates de début et fin).

En BO, se rendre dans Système > Design et vérifier si le design qui persiste à s’afficher en front est présent dans la liste. Si oui, l’éditer pour vérifier si une Date de création et une Date de fin sont définies.

Supprimer ce design temporaire peut régler le problème.

[Bootstrap 3] Un site ciblant uniquement le support Desktop en désactivant les classes responsive déclarées dans votre code HTML avec les media-queries

Source doc officielle : Disabling responsiveness.

Méthode #3

Pas encore testée : idée au-réveil-ce-matin…

Conserver l’ensemble des classes .col-xs-, .col-sm, .col-md, .col-lg dans la CSS mais supprimer les media-queries. Attention : si le site comporte des composants responsive hors grille, il faudra également vérifier la présence de media-queries au niveau des styles qui servent à les afficher.
Pour résumer : vos CSS doivent être exemptes de toute media-querie.

Méthode #2 :

Achtung! Après un test rapide, n’a pas l’air de fonctionner mais je n’ai peut-être pas tout bien fait comme il fallait … A re-tester éventuellement.

Source : How to remove responsive features in Twitter Bootstrap 3?

Utiliser l’éditeur en ligne Customize and download pour générer une grille non responsive.
Sous Media queries breakpoints entrer les paramètres suivants :

Attention : ne pas inclure les responsive utilities dans vos styles osus peine de voir s’appliquer les classes de type .hidden-xs ou .visible-xs.

Test #1 :

Attention : solution expérimentale encore non-testée, mais sachant que je ne trouvais pas de solution à ma convenance sur le net…
Ne fonctionne pas.

Cette astuce consiste à conserver l’ensemble des classes responsive dans votre code HTML (pas besoin de retirer la succession de classes col-xs-12 col-sm-6 col-md-6 col-lg-4).
Avec quelques lignes de CSS, vous pourriez donc très bien partir systématiquement de vos templates HTML conçues pour un affichage fluide sans les modifier pour obtenir un affichage figé Desktop.

Admettons que le breakpoint ciblé correspond aux classes préfixées par col-md- (Medium devices : Desktops (≥992px) défini par défaut à 970px dans la grille Bootstrap.)

[Magento 1.9] Réinitialiser le mot de passe admin

password_01

password_02

[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 ↑