CategoryChange cross commerce

[Change cross commerce] Déclarer une dépendance d’un thème existant dans un nouveau thème.

Dans App/Themes/<plugin>/<module>/Setup/Install.php, dans la classe Install extends \Change\Plugins\ThemeInstallBase :

[Change cross commerce] Troubleshooting – Résolution d’erreurs

La page ne s’affiche pas en front car l’URL comporte des caractères accentués

Si votre URL comporte des caractères accentués (exemple : http://monbeausite.c4.fr/bébé/bébé-fille-0-4.100161.html) et que la page ne s’affiche pas en front, rendez-vous en back-office Administration > SEO. Dans le tableau Configuration des modèles, choisissez le modèle de page posant problème à l’affichage. Dans le champ Modèle d’URL, copiez-collez le modèle d’URL laissé en exemple (Ex: {section.title}/{document.title}.{document.id}.html). Enregistrez les modifications et validez la correction.

En ligne de commande, tapez :

Votre page devrait s’afficher.

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

[Change cross commerce] Rendre disponible des templates Xhtml via le back-office

L’idée est de créer un template spécifique à notre nouveau thème pour afficher le logo du site. Ce template doit être manipulable en back-office via l’interface Réglages > Communs > Thèmes > Choisir son thème > Choisir son template de page > Propriétés générales.

Change4_BO_zone_du_template-xhtml

Méthode développeur front-end (facile) :

Les fichiers qui vont jouer un rôle prépondérant :

App/Themes/Project/[Nom_de_votre_theme]/Assets/Twig/Project_[Nom_de_votre_theme]/Templates/noSidebarPage.json

App/Themes/Project/[Nom_de_votre_theme]/Assets/Twig/Project_[Nom_de_votre_theme]/Templates/noSidebarPage.twig

App/Themes/Project/[Nom_de_votre_theme]/Assets/Twig/Project_[Nom_de_votre_theme]/Blocks/xhtml-header-logo.twig

App/Themes/Project/[Nom_de_votre_theme]/Assets/blocks-templates.json

App/Themes/Project/[Nom_de_votre_theme]/Assets/plugin.json

Toujours vérifier la présence de ce fichier dans votre plugin.

Méthode dépréciée (à utiliser en dernier recours si votre bloc ne s’affiche pas en BO) :

Les fichiers qui vont jouer un rôle prépondérant :

…donc il y en a encore quelques autres, notamment les locales et la vue WYSIWYG back-office qu’il faudra également prendre en compte.

App/Modules/Project/[Nom_de_votre_module]/Blocks/Listeners.php

App/Modules/Project/[Nom_de_votre_module]/Blocks/Update.php

App/Modules/Project/[Nom_de_votre_module]/Setup/Install.php

App/Modules/Project/[Nom_de_votre_module]/plugin.json

Toujours vérifier la présence de ce fichier dans votre plugin.

App/Themes/Project/[Nom_de_votre_theme]/Assets/Twig/Project_[Nom_de_votre_theme]/Templates/noSidebarPage.json

App/Themes/Project/[Nom_de_votre_theme]/Assets/Twig/Project_[Nom_de_votre_theme]/Templates/noSidebarPage.twig

App/Themes/Project/[Nom_de_votre_theme]/Assets/Twig/Project_[Nom_de_votre_theme]/Blocks/xhtml-header-logo.twig

App/Themes/Project/[Nom_de_votre_theme]/Assets/blocks-templates.json

App/Themes/Project/[Nom_de_votre_theme]/Assets/plugin.json

Toujours vérifier la présence de ce fichier dans votre plugin.

© 2020 FrontEndDeveloper

Theme by Anders NorénUp ↑