Étiquette : RBS Change

[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] Afficher ou masquer des éléments du DOM en fonction d’une condition avec PHPTal

Doc officielle de PHPTal

alainflou\modules\responsive\lib\helpers\ResponsiveHelper.php

alainflou\themes\responsive\modules\website\templates\Website-Block-Xhtmltemplate-Customer-suggestion.all.all.html

[RBS Change 3.x] Utiliser var_dump pour récupérer en front l’ensemble des informations qu’un bloc est capable d’afficher

Tout au long de ce tuto, nous allons assumer que nous travaillons sur un bloc nommé Pushoffre appartenant à un module nommé responsive du projet nommé alainflou.

Pour commencer, nous allons localiser le bloc Pushoffre dans alainflou\modules\responsive\lib\blocks\BlockPushoffreAction.class.php. Une fois ouvert dans un éditeur, localiser la ligne $request->setAttribute('pushoffre', $this->getDocumentParameter()); et, juste en-dessous, placer notre var_dump var_dump($this->getDocumentParameter());.

Rendez-vous dans votre navigateur préféré et chargez une page qui contient le bloc Pushoffre. Le var_dump a normalement pour effet d’afficher tout un tas d’informations de ce type :

object(responsive_persistentdocument_pushoffre)#213 (27) { ["m_author":"responsive_persistentdocument_pushoffrebase":private]=> string(8) "wwwadmin" ["m_authorid":"responsive_persistentdocument_pushoffrebase":private]=> int(45063) ["m_creationdate":"responsive_persistentdocument_pushoffrebase":private]=> string(19) "2016-08-16 14:41:47" ["m_modificationdate":"responsive_persistentdocument_pushoffrebase":private]=> string(19) "2016-08-16 14:41:47" ...

Nous allons maintenant tenter d’afficher proprement en front certaines informations contenues dans ce bloc (libellé du bloc, cible d’une image associée à ce bloc, texte de contenu de ce bloc, et URL du lien associé au texte de ce bloc). Les informations affichées via le var_dump qui nous intéressent sont :

  • ["m_label":"responsive_persistentdocument_pushoffreI18n":private]=> string(29) "ezrr dffvds sdgrezgzthrytht r"
  • ["m_media":"responsive_persistentdocument_pushoffrebase":private]=> int(1370814)
  • ["m_text":"responsive_persistentdocument_pushoffreI18n":private]=> string(24) "ez grehggbhn-zrnggngn nn" } }
  • ["m_textLink":"responsive_persistentdocument_pushoffrebase":private]=> string(20) "http://www.google.fr"

Pour ce faire, localiser le template alainflou\modules\responsive\templates\Responsive-Block-Pushoffre-Success.all.all.html.

La manière de réexploiter les données du var_dump dans un tmplate de bloc est la suivante :

  • <h1>${pushoffre/getLabel}</h1>
  • <img class="one-offre-image" change:media="document pushoffre/getMedia; format 'modules.catalog.frontoffice/medium'" />
  • <p class="one-offre-text">${pushoffre/getText}</p>
  • <a class="link" href="${pushoffre/getTextLink}"></a>

Autre façon de récupérer et d’afficher des informations contenues dans une fonction :

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

\\change30\alainflou\modules\responsive\templates\Responsive-Block-MetricBox-Success.all.all.html

[Change 3.x] Comment rajouter un fichier javascript dans un module change ?

Où déclarer le fichier pour qu’il soit chargé ?

Y’a 3 solutions à ma connaissance :

1. modules/mon_module/lib/blocks/mon_BlockAction.class.php

mais pour ça il faudra te tourner vers un dev (qui te dire probablement que c’est un mauvais choix car tu chargeras ton JS comme un bourrin malpropre à chaque fois que le bloc sera utilisé, peu importe le thème)

2. themes/mon_theme/install.xml

dans :

Là, tu peux charger ton JS pour un gabarit de page donné; il sera chargé pour toutes les pages de ton thème qui utilisent ce gabarit

3. dans le template de bloc dans lequel tu souhaites l’appeler (si il n’est utilisé que par ce seul template)

  • modules/mon_module_spé/templates/mon_template.all.all.html
  • ou override/mon_module/templates/mon_template.all.all.html
  • ou themes/mon_theme/modules/mon_module/templates/mon_template.all.all.html

Préfixe head : pour ajouter ton JS au fichier page.js chargé en en-tête de document et qui regroupe et minifie l’ensemble des JS appelés avec ce préfixe dans les templates de blocs présents dans la page.

Préfixe src : pour ajouter ton JS en l’état de ta source et directement dans le code HMTL de ton template. Le JS sera visible à l’endroit où tu le déclares dans le DOM.

C’est selon l’utilisation que tu veux faire de ce JS et ça te laisse également le choix de l’emplacement dans lequel tu veux placer ton fichier JS dans l’arbo (en fonction de l’utilisation qui en sera faite). Essaye d’éviter la solution 1, c’est pas flexible.

Et en fonction de ça, tu peux stocker ton fichier JS dans le dossier :

  • modules/mon_module/lib/js
  • override/modules/mon_module/lib/js
  • themes/mon_theme/js

[RBS Change 3.x] Dans un template de menu, ajouter une classe avec valeur incrémentée sur un élément contenu dans une boucle.

Admettons qu’on souhaite ajouter, dans une boucle, une classe de type color-x (où x correspond à une valeur qui doit s’incrémenter) sur un élément <li> qui se répète en fonction du nombre d’entrées disponibles dans notre menu. Exemple du résultat attendu :

Commencer par repérer la boucle dans laquelle se trouve l’élément qui se répète sur lequel nous souhaitons agir. Dans un menu Change, les boucles sont mises en place à l’aide de la condition tal:repeat. Exemple :

Dans note exemple, il est important de repérer ce qu’on souhaite répéter. Ici, il s’agit de la première information déclarée en arguments dans le tal:repeat à savoir entry.

Ensuite, repérer l’élément sur lequel on souhaite ajouter notre classe de type color-x et ajouter la valeur à incrémenter comme suit :

Note : on retrouve notre information entry au sein de la chaîne de caractère : ${repeat/entry/index}.

[RBS Change] Ajouter un nouveau doctype au projet

1. dans modules/theme/setup, créer un nouveau fichier html5.xml sur la base de init.xml

2. contenu du fichier (pour l’ajout d’un doctype HTML5) :

3. ajouter ceci dans modules/theme/persistentdocument/pagetemplate.class.php :

4. puis sous Putty :