Mois : mars 2015

[CSS] Un champ de formulaire fluide et un bouton alignés qui prennent systématiquement 100% de la largeur de leur conteneur

Solution moderne avec la propriété CSS box-sizing :

Solution obsolète :

Source : Input field and submit button on the same line, full width.

[Change cross commerce] Surcharger un template issu d’un module standard dans un thème personnalisé

Attention : doc en cours de rédaction …

Surcharger le template qui affiche la liste de produits

Arborescence standard : où trouve-t’on les templates standards ?

Deux types de fichiers concernés : les directives Angular JS et les blocs

Arborescence d’un thème personnalisé : où consigner nos surcharges des templates standards ?

blocks-templates.json : déclarer l’existence d’une surcharge de template pour la rendre exploitable en backoffice.

Le fichier json permet également de passer un certain nombre de paramètres.

admin.json : créer une locale pour identifier votre nouveau template en backoffice.

Nomenclature

La surcharge d’un template se trouvant nativement dans le répertoire Plugins/Modules/[nom_du_vendor]/[nom_du_module]/Assets/Twig/Blocks/ se fera obligatoirement dans le répertoire App/Themes/[nom_du_vendor]/[nom_de_votre_plugin]/Assets/Twig/[nom_du_vendor]_[nom_de_votre_plugin]/Blocks/.

Ainsi, pour notre exemple de liste produits, le template product-list.twig se trouvant nativement dans le répertoire Plugins/Modules/Rbs/Catalog/Assets/Twig/Blocks/ se fera obligatoirement dans le répertoire App/Themes/Project/[nom_de_votre_plugin]/Assets/Twig/Project_[nom_de_votre_plugin]/Blocks/.

Attention : l’unique emplacement censé regrouper les surcharges de l’ensemble des templates des répertoires Twig/Blocks/ de tous les modules de Change Cross Commerce pouvant se retrouver rapidement saturé de fichiers, il est conseillé pour optimiser la lisibilité de préfixer les libellés de vos fichiers surchargés.

Ainsi, la surcharge du fichier standard product-list.twig pourrait se nommer rbs-catalog-product-list.twig pour [nom_du_vendor]-[nom_du_plugin]-[nom_du_template_standard].twig.

Utilisation de {% extends %} : rbs-catalog-product-list.twig

Utilisation de {% use %} : product-list-directives.twig

rbs-order-order-detail.twig

On n’utilise ni {% extends %}, ni {% use %} dans ce cas là :

Remarque : Les surcharges de fichiers issus des répertoires Blocks/ peuvent contenir des directives Angular issues des fichiers [libellé]-directives.twig. Ceci évite de surcharger un fichier supplémentaire.

[Change cross commerce] Exploiter de manière sélective les ressources CSS du core dans un thème personnalisé

Attention : doc en cours de rédaction …

Si vous souhaitez conserver dans votre thème personnalisé l’affichage homogène et minimaliste fondé sur le framework Bootstrap et l’ensemble de petites fonctionnalités (modals, zoom produit) liées au core de Change Cross Commerce, il est nécessaire de ré-exploiter certaines feuilles de style présentes dans le thème Rbs_Base.

Change Cross Commerce, bien qu’embarquant un nombre assez conséquent de dépendances CSS (le framework Bootstrap est éclaté en autant de feuilles LESS que de composants et plug-ins qui le constituent), est pensé de manière à pouvoir écraser uniquement les composants qui demanderaient une ré-écriture et à exploiter les versions core pour tout le reste.

Arborescence standard : où trouve-t’on les feuilles de style ?

Le thème par défaut de Change Cross Commerce embarque (selon moi) deux types de feuilles de styles :

  1. les composants natifs Bootstrap accessibles à tous depuis la page Customize and Download du site officiel,
  2. les fichiers ajoutés par l’équipe en charge du développement du produit pour des fonctionnalités non couvertes par Bootstrap (redimensionnement des médias, helpers, quelques fixes, …).

Arborescence d’un thème personnalisé : où consigner les feuilles de styles, les surcharges et les ré-écritures ?

assets.json : déclarer les dépendances JS, CSS et les locales de traduction de votre thème.

Pour l’inclusion de start.less :

Surcharger ou écraser ?

Nous avons vu plus haut que le thème par défaut de Change Cross Commerce embarquait deux types de feuilles de styles. Avec le recul que j’ai actuellement sur le développement avec la solution, j’ai fait le choix :

  • d’écraser les composants natifs Bootstrap que je souhaitais modifier.

    Dans le cadre d’une surcharge, il faudrait d’abord ré-écrire des styles reset pour annuler la portée du code standard sur l’affichage pour, ensuite seulement, poser son code spécifique.
    Ici, on copie/colle et on modifie directement le code du composant natif à sa convenance.

    (Si on maîtrise un minimum la logique d’articulation Bootstrap) on évite une certaine lourdeur, on gagne en temps de maintenance et on conserve la flexibilité du framework. Une mise à jour mineure du core Bootstrap ne rendra pas la migration des fichiers natifs partiellement ré-écrits plus ardue car ils demeurent, pour la plupart, très légers. Et une mise à jour majeure du core Bootstrap (passage à une version supérieure) forcerait de toute manière le développeur à un travail de migration plus approfondi.

  • de surcharger les fichiers ajoutés par l’équipe en charge du développement du produit pour des fonctionnalités non couvertes par Bootstrap.

    On importe d’abord le fichier standard, puis sa surcharge contenant uniquement les propriétés redéfinies. La nature des déclarations CSS contenues dans ces fichiers et leur impact sur l’affichage front fait qu’aucun exercice d’écriture de code reset ne serait de toute manière nécessaire.

start.less : le point de départ pour vos imports de feuilles de styles

Il existe deux manières d’importer des dépendances CSS dans Change Cross Commerce :

  1. Renseigner le fichier assets.json.

    Avantages/Inconvénients : vous pouvez appeler de manière sélective vos dépendances en fonction des différents gabarits de pages qu’embarque votre thème. Si vous avez beaucoup de feuilles de styles, la lisibilité de votre code en prendra un coup…

  2. Créer un fichier start.less

    Avantages/Inconvénients : les imports de feuilles de styles se font pour l’ensemble des gabarits de pages. Cette méthode se révèle moins sélective à moins de créer et d’appeler dans un fichier start-[libellé_de_mon_template].less différent pour chaque gabarit de page.

Exemple d’un fichier surchargé : image-formats.less

On ne ré-écrit que les lignes qu’on souhaite changer pour les besoins de son thème Custom :

bootstrap.less : le point de départ pour vos ré-écritures de composants Bootstrap

On appelle les composants qui ne nécessitent pas d’écrasement depuis le thème Base et les ré-écritures depuis le thème Custom :

variables.less : le point de départ pour définir l’aspect général des éléments de frontoffice.

Ce fichier définit un nombre important de variables garantes de l’homogénéité d’affichage des éléments typographiques, des éléments de formulaire et des divers composants Bootstrap (grille et mediaqueries, menus, fil d’ariane, pagination, modal, …). Il constitue les fondements de l’affichage de toute interface embarquant le framework Bootstrap et, donc, par extension de tout thème Change Cross Commerce.

  • Exploitez-le au maximum pour préserver un agencement et un affichage homogène des contenus dans vos pages.
  • Prenez bien connaissance des variables existantes avant de déclarer des doublons ou de redéfinir à-la-sauvage des déclarations CSS supplémentaires qui concerneraient l’aspect de composants embarqués.

[Change cross commerce] Formats prédéfinis des visuels

Les formats des visuels sont prédéfinis dans les fichiers suivants :

  • ../App/Config/project.autogen.json pour les chemins d’accès sur le serveur
  • ../Plugins/Themes/Rbs/Base/Assets/less/image-formats.less pour les formats d’image

A savoir : il faut obligatoirement modifier les deux fichiers pour que les redimensionnements prennent effet !

Exemple : dans ../App/Config/project.autogen.json, la valeur 192x200 de "listItem" correspond à une partie de l’url qui pointe vers le média redimensionné côté serveur (http://kidiliz.c4.fr/Imagestorage/images/192/200/54feacac3e147_hph3c.jpg).

Dans ../Plugins/Themes/Rbs/Base/Assets/less/image-formats.less :

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

[Change cross commerce] Quelques commande et astuces shell

Documentation officielle : https://github.com/RBSChange/Change/wiki.

Obtenir l’ensemble des commandes Change disponibles via le shell :

Initialiser la structure d’un plugin (module ou thème) :

Source : Developing a plugin for RBS Change 4.

Change4_plugin_structure

Afficher des prix en front

Ré-indexer le catalogue en tenant compte des produits publiables :

Effacer les cookies de session du site (sous Firefox > Webdeveloper Toolbar > Cookies > Effacer les cookies de session de ce site).

[Bootstrap] Changer l’aspect du pictogramme Caret (instructions LESS dans notre exemple)

caret-less

[Bootstrap] Changer l’aspect (couleurs de fond, de texte et de bordure) d’un bouton dropdown lorsqu’on clique sur tout autre élément dans la page.

Les Buttons dropdowns dans la doc officielle de Bootstrap : http://getbootstrap.com/components/#btn-dropdowns.

Structure HTML; notez bien les emplacements des classes .open et .dropdown-toggle :

Problème :

pbm-btn-dropdown

Le navigateur ne tient pas compte de mes surcharges CSS. Ce sont les styles standards de .btn-default qui prennent le pas sur la ré-écriture.

Remarque : le code ci-dessous utilise le caractère & comme alias de la classe .btn-default. Il s’agit d’une version LESS des styles Bootstrap.

Solution :

Le code CSS fourni avec Bootstrap est erroné : en regard du markup HTML énoncé plus haut, la classe .open n’existe pas dans la chaîne .open > .dropdown-toggle& (ou .open > .dropdown-toggle.btn-default). Le chemin correct serait &.dropdown-toggle.