Catégorie : RBS Change

[Change 3.6.x] Un modèle pour créer des formulaires spés

form.js

[Change 3.6.x] Surcharger proprement un fichier .class.php

Dans un projet, j’utilise le module Survey qui sert à générer des formulaires d’enquêtes de satisfaction depuis le backoffice de Change 3.6.x.

Les différents champs de formulaire sont générés via un fichier modules/website/lib/helpers/FormHelper.class.php. Ce fichier ne se surcharge pas comme un template de bloc via override/modules/website/lib/helpers/FormHelper.class.php, mais dans le module du projet.

Convention: Pour ce tutoriel, notre projet s’appelle toto. Voici la liste des fichiers à modifier et des commandes à exécuter pour que les modifications prennent effet:

config/aop.xml

modules/toto/lib/aop/FormHelper.class.php

Copier le fichier source modules/website/lib/helpers/FormHelper.class.php et le coller à l’identique dans modules/toto/lib/aop/FormHelper.class.php, puis modifier la 2ème ligne comme suit:

Vous pourrez ensuite modifier comme bon vous semble ce fichier pour les affichages spécifiques à votre projet.

Les commandes à exécuter

  • cconf ou compile-config
  • ua ou update-autoload

[RBS Change 3.6.x] Détecter un choix utilisateur via l’élément HTML Select/Option avec jQuery

Cas du bloc Switchlanguage dans Change 3.6.x

Objectif: au choix de la langue via l’élément <select />, on redirige vers la page traduite.

Côté template, on boucle sur les langues disponibles. On stocke l’URL de la page de destination via l’attribut value de l’élément option.

En jQuery, on détecte un choix d’option via l’élément HTML <select />, on récupère la valeur de l’attribut value (l’URL de la page de destination) et on lance la redirection.

[Change 3.x][Gulp] Ajouter les Sourcemaps dans RBS Change

[12:46 PM] Frank LANG: Quand t’as essayé d’installe gulp-sourcemaps, t’arrivais à avoir un fichier .map ?
[12:49 PM] Frank LANG: En fait j’avais pas encore regardé comment fonctionne le plug-in; je pense savoir d’où vient le problème
[12:50 PM] Frank LANG: on crée un fichier main.css qui est le résultat de tous nos fichiers SASS compilés et processés
[12:50 PM] Frank LANG: et (pour ma part mais j’imagine que tu étais arrivé à ce stade également), j’ai bien un fichier « main.css.map » qui est généré
[12:52 PM] Frank LANG: Sauf que Change prend « main.css » et le compile et le minifie avec d’autres fichiers CSS (skin.css pur ne citer que lui) et nous crée une CSS unique « screen.css » chargée dans la page
[12:52 PM] Frank LANG: Et c’est la raison pour laquelle le plugin sourcemaps ne fonctionne pas
[12:52 PM] Frank LANG: il se réfère à main.css
[12:53 PM] Frank LANG: et c’est « screen.css » qui est chargée en front
[1:06 PM] Frank LANG: Utiliser les sourcemaps dans Change doit être possible moyennant une grosse grosse bidouille

[1:09 PM] Frank LANG: ouais en fait j’ai réussi
[1:10 PM] Frank LANG: mais c’est lourd …
[1:11 PM] Frank LANG: dans Y:\change30\manbow\override\modules\website\templates\PageDynamic-ContentBasis.all.all.php qui est le fichier qui génère l’en-tête de page
[1:11 PM] Frank LANG: je mets un lien absolu vers main.css :
[1:12 PM] Frank LANG:

[1:14 PM] Frank LANG: et dans la gulpfile, je crée une nouvelle tâche ‘sass_sourcemaps’ qui va faire pareil que la tâche ‘sass’ mais qui va générer les fichiers ‘main.css’ et  ’.map’ dans le dossier ‘image’ du thème car c’est le seul qui est accessible depuis le front via une URL relative
[1:14 PM] Frank LANG: Tu accèdes à : http://manbow.vmchange.rbs.fr/media/themes/responsive/main.css
[1:15 PM] Frank LANG: mais pas à : http://manbow.vmchange.rbs.fr/themes/responsive/style/main.css
[1:15 PM] Frank LANG: Avec ça, l’inspecteur d’éléments te remonte le code dans les SCSS
[1:15 PM] Frank LANG: Mais y’a plusieurs soucis :
[1:16 PM] Frank LANG: 1. je charge 2x le fichier ‘main.css’, donc tu auras toujours le code CSS compilé dans l’inspecteur d’éléments. En plus, le code SASS sera toujours déclaré après, car surchargé.
[1:17 PM] Frank LANG: 2. on peut pas laisser le lien relatif dans le fichier d’en-tête en prod; c’est pas propre (mais à la limite, faut pas inclure les sourcemaps en prod non plus; il parait que ça ralentit l’exécution des CSS)
[1:19 PM] Frank LANG: 3. ‘main.css’ ne contient que les styles issus des fichiers SASS. Les sources CSS comme par exemple ‘skin.css’ ne sont pas incluses. Ce n’ets pas si problématique je pense car l’inspecteur d’éléments te permettra de les retrouver au besoin.
[1:20 PM] Frank LANG: Ce qui est bien :
[1:20 PM] Frank LANG: 1. on a les sourcemaps
[1:21 PM] Frank LANG: malgré tout
[1:26 PM] Frank LANG: j’ai pushé le code commenté si jamais tu veux l’activer pour voir
[1:27 PM] Frank LANG: je pense que via Change, il n’y aura pas possibilité d’avoir mieux que ça

[RBS Change] Quelques notes sur l’utilisation de l’extension change:media pour afficher des visuels

Utilisation de l’extension phpTal change:media dans Change pour redimensionner les visuels appelés dans les templates et leur attribuer des classes spé.

Dans les templates de bloc, les visuels peuvent être appelés de la manière suivante :

Il y a 2 paramètres qui vont nous intéresser plus particulièrement :

qui va servir à établir des dimensions hauteur et largeur maximales pour cette image (pour un redimensionnement côté serveur). Ici, « medium » est une clé que tu vas retrouver dans le fichier suivant : /modules/responsive/style/frontoffice.image.all.css.

Cette clé peut tout à fait rsservir ailleurs, dans un autre bloc, pour afficher d’autres visuels qui auraient les mêmes dimensions. Et on peut créer d’autres clés pour s’en servir dans les templates.

Le 2ème paramètre important :

permet d’ajouter des classes à l’élément <img />. Car ça ne se fait pas par l’intermédiaire d’un attribut class="".


[4:02 PM] Frank LANG: ok
[4:02 PM] Frank LANG: on a 15mn pour les dimensions d’image
[4:02 PM] Frank LANG: ouvre le template de la fp
[4:02 PM] Nicolas M: wep
[4:02 PM] Frank LANG: ceclui-ci (pour être sûr) : Y:\change30\manbow\themes\responsive\modules\catalog\templates\Catalog-Block-Declinedproduct-Success.all.all.html
[4:03 PM] Frank LANG: ton visuel principal est là
[4:03 PM] Frank LANG:

[4:03 PM] Frank LANG: (ligne 121)
[4:04 PM] Nicolas M: oui j’avais modifié la partie avec le pic780x761
[4:04 PM] Frank LANG: et c’est surtout cette ligne qui va nous intéresser
[4:04 PM] Nicolas M: mais ça a fait tout planter
[4:04 PM] Frank LANG:

[4:05 PM] Frank LANG: l’attribut « format » fait référence à une classe CSS que tu vas retrouver dans un fichier « frontoffice.image.css » dans modules/manbow/style/
[4:06 PM] Frank LANG: Y:\change30\manbow\modules\manbow\style\frontoffice.image.all.css
[4:06 PM] Frank LANG: si tu cherches la classe « .pic780x761 »
[4:06 PM] Frank LANG: eh bin elle existe pas !!!
[4:06 PM] Frank LANG: mais y’en a déjà plein d’autres
[4:07 PM] Frank LANG: en gros, si on reprend la baliswe dans le template, tu pourrais mettre :
[4:07 PM] Frank LANG:

[4:07 PM] Frank LANG: et dans « Y:\change30\manbow\modules\manbow\style\frontoffice.image.all.css »
[4:07 PM] Frank LANG: il faut ajouter :
[4:08 PM] Frank LANG:

[4:08 PM] Frank LANG: avec la largeur max et la hauteur max autorisées pour le redimensionnement qui va s’opérer côté serveur
Frank LANG·4:10 PM
faut faire un compile-all pour que les modifs soient prises en compte
[4:12 PM] Frank LANG: au passage c’est complètement con de nommer ce type de classes avec des dimensions
[4:12 PM] Frank LANG: autant définir peu de dimensions et avoir de sclasses qui s’appellent small, medium, big, avatar, …

[RBS Change 3.x] Effectuer une boucle tal:repeat qui rapporte l’ensemble des informations contenues dans une fonction

\\change30\alainflou\modules\project\persistentdocument\frame.class.php

\\change30\alainflou\themes\responsive\modules\project\templates\Project-Block-ProductItem-List.all.all.html


Récupérer une propriété contenue dans un objet

Dans Change, chaque module a un dossier persistentdocument/. Ce dossier contient un ou plusieurs fichiers XML listant un ensemble de propriétés contenues dans un objet.

Par exemple, dans /modules/parking/persistentdocument/parking.xml, sont listées toutes les propriétés de l’objet parking :

Si, dans mon template de bloc, je souhaite récupérer l’information de nom de l’objet parking, je procède comme suit :