Mois : février 2015

[LESS][Mixin] Une navigation simple en mode « inline » avec les guards

27/02/2015 /

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée :

Résultat : entrée 1 | entrée 2 | entrée 3

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et un séparateur supplémentaire devant la première entrée :

Résultat : | entrée 1 | entrée 2 | entrée 3

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et un séparateur supplémentaire derrière la dernière entrée :

Résultat : entrée 1 | entrée 2 | entrée 3 |

Une navigation simple en mode « inline » incluant un séparateur entre chaque entrée et deux séparateurs supplémentaires placés respectivement devant et derrière la première et la dernière entrée :

Résultat : | entrée 1 | entrée 2 | entrée 3 |

[Docker] Les bases de l’utilisation de Docker

25/02/2015 /

Lancer son Docker

A la racine du répertoire qui contient votre Docker :

Pour continuer à utiliser le même shell, ajouter un caractère & à la fin de la commande pour lancer le script en tâche de fond :

Si vous obtenez un message d’erreur de type : FATA[0000] Error response from daemon: Conflict. The name « [nom_de_votre_projet] » is already in use by container 0d615cabbd75. You have to delete (or rename) that container to be able to reuse that name., il faut supprimer le container 0d615cabbd75 en tapant :

Se connecter en shell à son conteneur

Une fois le dock lancé, dans un autre terminal :

Supprimer un volume Docker

Source, documentation officielle: docker volume rm

Depuis le terminal de votre VM : docker volume ls.

Pour supprimer un volume Docker : docker volume rm <nom_de_la_base>.

Supprimer tous les conteneurs persistants (exited containers)

Error response from daemon: Unable to remove volume, volume still in use:

Si, en voulant supprimer une base, vous obtenez un message de type Error response from daemon: Unable to remove volume, volume still in use: remove gpvmagento_mysql-data: volume is in use - [a2d529aed4f462276ac45e58849e983f26a72a9f51e2925603215813dbfc996a], faites un docker ps -a pour obtenir la liste des containers encore montés. Exemple:

Taper docker rm <ID_du_container_à_supprimer> pour supprimer le container.

[Magento] Déplacer la fonctionnalité d’inscription à la newsletter sur la page d’accueil du compte client (dashboard)

19/02/2015 /

Nativement dans Magento, l’inscription à la newsletter se fait depuis une page Abonnements à la newsletter accessible depuis la navigation contextuelle du compte client.

standard-magento_newsletter_subscription
Capture #1

Le but de ce tuto est de déplacer la fonctionnalité directement dans la page Espace de travail du compte.

standard-magento_dashboard
Capture #2

Surcharger le template info.phtml du module Customer:

Le template app/design/frontend/base/default/template/customer/account/dashboard/info.phtml qui affiche la section informations du compte (cf. capture #2) est à copier en l’état et à coller sous app/design/frontend/rwd/[votre_theme]/template/customer/account/dashboard/info.phtml.

Créer un nouveau template form.phtml sur la base du template newsletter.phtml du module Customer :

Le template app/design/frontend/base/default/template/customer/form/newsletter.phtml qui affiche nativement la checkbox d’inscription à la newsletter dans la page Abonnements à la newsletter (cf. capture #1) est à copier en l’état et à coller sous app/design/frontend/rwd/[votre_theme]/template/customer/account/dashboard/newsletter/form.phtml.

Attention : dans ce cas, on change le chemin et le nom du fichier par rapport à l’original car ce dernier demeure exploité dans le site (page Abonnements à la newsletter) et ne doit pas faire l’objet de modifications de manière à continuer de s’afficher et de fonctionner correctement.
Le template form.phtml constitue ainsi un nouveau bloc qu’il conviendra de déclarer dans un fichier Layout.

Déclarer le template form.phtml nouvellement créé dans un fichier Layout :

Si il n’existe pas déjà, créer un fichier app/design/frontend/rwd/[votre_theme]/layout/local.xml et ajoutez-y le code suivant pour déclarer votre nouveau template /customer/account/dashboard/newsletter/form.phtml :

Modification des templates :

Dans info.phtml repérer la ligne <?php /* Extensions placeholder */ ?> (ligne 60 si vous partez bien du fichier sus-nommé) et, juste en dessous, placez le code suivant :

La valeur de getChildHtml() doit être la même que celle de l’attribut <block name="" /> correspondant au bloc déclaré dans le fichier layout (local.xml dans notre exemple) comme celui qui embarque le code du formulaire.

Dans form.phtml repérer la ligne <form action="<?php echo $this->getAction() ?>" method="post" id="form-validate"> (ligne 32 si vous partez bien du fichier susnommé) et la remplacer par :

standard-magento_dashboard-w_newsletter
Capture #3 – le résultat escompté 🙂

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

17/02/2015 /

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] Iframe, object & embed responsive

12/02/2015 /

Ressources en ligne

Solution 1 :

La plus récente, mais pas testée!

Responsive Iframes — The Right Way (CSS Only)! par Ben Marshall. Version PDF.

Solution 2 :

Mise en place dans un projet OK. Source : Fluid Width Video.

Solution 3 :

Attention : privilégier la solution #1. La solution #2 fonctionne en demo sur le site de l’auteur, mais j’ai rencontré quelques soucis lorsque j’ai souhaité la mettre en pratique.
Source : Iframe, object & embed responsive.

Solution 4 avec Bootstrap 3

Jamais testé… Bootstrap 3 Tips and Tricks You Still Might Not Know – Responsive Video Embeds that Maintain Aspect Ratio.

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

12/02/2015 /

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 :

[jQuery] Lancer une fonction après un délais avec setTimeout

11/02/2015 /

Source : Run Function After Delay.

[jQuery] Conflits, message d’erreur « $ is not a function » et corrections possibles

11/02/2015 /

En jQuery, l’appel d’une fonction se fait en général de la manière suivante :

L’objet $ est utilisé par jQuery en tant que récupérateur de fonctions, et le script sait quelle librairie appeler. Problème : si vous utilisez d’autres librairies qui utilisent aussi le dollar comme objet par défaut (Prototype, Scriptaculous dans Magento par exemple…), vous obtiendrez potentiellement des conflits et un message d’erreur de type $ is not a function !

Solution 1 :

Utiliser la fonction jQuery.noConflict(); et créer une fonction anonyme. Source : jquery – is not a function error.

Solution 2 :

Remplacer tous les $ par un alias jQuery afin de réassigner toutes les variables de l’objet $ à ce dernier. Source : « $ is not a function » dans JQuery – La solution.

[Magento] Formulaires : anatomie de l’ossature HTML et taxonomie des classes CSS standard

10/02/2015 /

Simulation : http://jsfiddle.net/frontenddeveloper/d205ar7j/10/ (toujours vérifier la dernière update).

Squelette général

Obtenir une ossature standard de formulaire (affichage des étiquettes au-dessus des champs qui leur sont associés) :

Les libellés des classes parlent d’eux-mêmes. .fieldset et .legend reprennent le nom des balises HTML bien connues (la pratique est mauvaise d’un point de vue sémantique, mais c’est défini comme ça…), .form-instructions permet de laisser à l’utilisateur quelques instructions pour bien remplir son formulaire, .required pour le traditionnel message « les champs marqués d’une étoile * doivent être renseignés! », .form-list embarque la liste des champs qui constituent le formulaire et .buttons-set vous servira à englober les boutons d’annulation, validation, etc..

Pour information, une amélioration sémantique par rapport au standard en introduisant les éléments <fieldset /> et <legend /> semble possible sans casser tout l’affichage à condition de conserver les classes .fieldset et .legend :

Simulation : http://jsfiddle.net/frontenddeveloper/d205ar7j/11/.

Obtenir une ossature de formulaire avec des étiquettes alignées sur les champs associés en ajoutant la classe .scaffold-form à l’élément <form /> (voir ici pour plus d’information sur la mise en place et l’utilité de cet affichage) :

Les différents champs

Les champs sont sémantiquement déclarés sous forme de liste :

Champ texte unique

  • Les classes required sur l’élément <label /> et required-entry sur l’élément <input /> sont à mettre en place si le champ est à remplir obligatoirement.
  • La classe validate-[etiquette_du_champ] sur l’élément <input /> est facultative.

Champ texte unique dont la validation a réussi

Une classe .validation-passed est ajoutée à l’élément <input />.

Champ de texte unique dont la validation a échoué

  • Une classe .validation-failed est ajoutée à l’élément <input />.
  • Un élément #advice-required-entry-[etiquette_du_champ] apparaît immédiatement après l’élément <input /> auquel il se rapporte pour donner un complément d’information sur le mode de saisie de celui-ci. Notez que cet élément possède aussi une classe .validation-advice.

Groupe de champs texte empilés

Groupe de champs texte alignés horizontalement (exemple : affichage d’une date)

Les boutons

Les messages d’erreur

Scaffold forms

scaffold n (around building) (Construction) échafaudage nm.

Documentation officielle : Scaffold Forms – Magento CE 1.9 and EE 1.14 Responsive Web Design Developer’s Guide.

Le thème responsive (rwd) de Magento est livré avec le fichier skin/frontend/rwd/default/scss/scaffold-forms.scss qui embarque des styles qui modifient le comportement standard des formulaires en affichant les étiquettes à gauche des champs qui leur sont associés sur les viewports les plus larges (en opposition à un affichage au-dessus des champs). Cet affichage à pour vocation de rendre les formulaires longs (par exemple, l’étape du tunnel d’achat où il faut renseigner ses informations de facturation) moins intimidants pour les utilisateurs.

Cependant, ces styles ne sont pas actifs par défaut parce que le thème responsive a des contraintes de localisation (la longueur des étiquettes peut varier suivant la langue et, ainsi, impacter l’affichage).

Le choix est laissé au développeur de les utiliser ou non. Pour ce faire, déplacer skin/frontend/rwd/default/scss/scaffold-forms.scss vers core/_scaffold-forms.scss et éditer scss/_core.scss pour l’inclure.