Étiquette : RBS Change

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

08/09/2016 / admin

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 :

<img change:media="document product/getDefaultVisual; format 'modules.responsive.frontoffice/medium'; class 'image img-responsive'" />

1	<img change:media="document product/getDefaultVisual; format 'modules.responsive.frontoffice/medium'; class 'image img-responsive'" />

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

format 'modules.responsive.frontoffice/medium';

1	format 'modules.responsive.frontoffice/medium';

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.

    .medium{
    	max-width: 360px;
    	max-height: 230px;	
    }

.medium{

max-width: 360px;

max-height: 230px;

}

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 :

    class 'image img-responsive'

1	class 'image img-responsive'

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:

    								<div class="product-big" tal:attributes="id mainVisualBlockDOMId; style style">
    									<tal:block tal:condition="baseconfiguration/getActivatezoom">
    										<img change:media="document imageMini; format 'modules.manbow.frontoffice/pic780x761'; zoom 'true'; alt declinedproduct/getLabel"/>
    									</tal:block>
    									<tal:block tal:condition="not: baseconfiguration/getActivatezoom">
    										<img change:media="document imageMini; format 'modules.manbow.frontoffice/pic780x761'; alt declinedproduct/getLabel"/>				
    									</tal:block>
    								</div>

<tal:block tal:condition="baseconfiguration/getActivatezoom">

</tal:block>

<tal:block tal:condition="not: baseconfiguration/getActivatezoom">

</tal:block>

</div>

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

<img change:media="document imageMini; format 'modules.manbow.frontoffice/pic780x761'; zoom 'true'; alt declinedproduct/getLabel"/>

1	<img change:media="document imageMini; format 'modules.manbow.frontoffice/pic780x761'; zoom 'true'; alt declinedproduct/getLabel"/>

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

<img change:media="document imageMini; format 'modules.manbow.frontoffice/tototititutu'; zoom 'true'; alt declinedproduct/getLabel"/>

1	<img change:media="document imageMini; format 'modules.manbow.frontoffice/tototititutu'; zoom 'true'; alt declinedproduct/getLabel"/>

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

.tototititutu {
    	max-width: 410px;
    	max-height: 360px;
    }

.tototititutu {

max-width: 410px;

max-height: 360px;

}

[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

19/08/2016 / admin

Doc officielle de PHPTal

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

<?php

/**
 * Date: 08/08/16
 * Time: 15:14
 */
class ResponsiveHelper
{
    public static function isOrderActive()
    {
        $isActive = Framework::getConfigurationValue('modules/responsive/isOrderActive');
        return (int) filter_var($isActive, FILTER_VALIDATE_BOOLEAN);
    }

    public static function isTryOnActive()
    {
        $isActive = Framework::getConfigurationValue('modules/responsive/isTryOnActive');
        return (int) filter_var($isActive, FILTER_VALIDATE_BOOLEAN);
    }

    public static function isAppointmentActive()
    {
        $isActive = Framework::getConfigurationValue('modules/responsive/isAppointmentActive');
        return (int) filter_var($isActive, FILTER_VALIDATE_BOOLEAN);
    }
}

<?php

/**

* Date: 08/08/16

* Time: 15:14

class ResponsiveHelper

{

public static function isOrderActive()

{

$isActive = Framework::getConfigurationValue('modules/responsive/isOrderActive');

return (int) filter_var($isActive, FILTER_VALIDATE_BOOLEAN);

}

public static function isTryOnActive()

{

$isActive = Framework::getConfigurationValue('modules/responsive/isTryOnActive');

return (int) filter_var($isActive, FILTER_VALIDATE_BOOLEAN);

}

public static function isAppointmentActive()

{

$isActive = Framework::getConfigurationValue('modules/responsive/isAppointmentActive');

return (int) filter_var($isActive, FILTER_VALIDATE_BOOLEAN);

}

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

<div class="customer-suggestion">
	<div class="container">
		<div class="row">
			<h2 class="heading-three">${trans:m.responsive.fo.customer-suggestion-title,ucf}</h2>
			<div class="customer-suggestion-row">
				<tal:block tal:condition="php: ResponsiveHelper::isTryOnActive()">
					<div class="customer-suggestion-column">
						${trans:m.responsive.fo.customer-suggestion-try-virtual-mode,ucf}
					</div>		
				</tal:block>

				<div class="customer-suggestion-column">
					${trans:m.responsive.fo.customer-suggestion-share,ucf}
				</div>

				<tal:block tal:condition="php: ResponsiveHelper::isAppointmentActive()">
					<div class="customer-suggestion-column">
						${trans:m.responsive.fo.customer-suggestion-wishlist,ucf}
					</div>		
				</tal:block>
			</div>
		</div>
	</div>
</div>

<h2 class="heading-three">${trans:m.responsive.fo.customer-suggestion-title,ucf}</h2>

<tal:block tal:condition="php: ResponsiveHelper::isTryOnActive()">

${trans:m.responsive.fo.customer-suggestion-try-virtual-mode,ucf}

</div>

</tal:block>

${trans:m.responsive.fo.customer-suggestion-share,ucf}

</div>

<tal:block tal:condition="php: ResponsiveHelper::isAppointmentActive()">

${trans:m.responsive.fo.customer-suggestion-wishlist,ucf}

</div>

</tal:block>

</div>

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

19/08/2016 / admin

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());.

<?php
/**
 * responsive_BlockPushoffreAction
 * @package modules.responsive.lib.blocks
 */
class responsive_BlockPushoffreAction extends website_BlockAction
{
	/**
	 * @param f_mvc_Request $request
	 * @param f_mvc_Response $response
	 * @return String
	 */
	public function execute($request, $response)
	{
		if ($this->isInBackofficeEdition())
		{
			return website_BlockView::NONE;
		}

        $request->setAttribute('pushoffre', $this->getDocumentParameter());
		// var_dump($this->getDocumentParameter());
		return website_BlockView::SUCCESS;
	}
}

<?php

/**

* responsive_BlockPushoffreAction

* @package modules.responsive.lib.blocks

class responsive_BlockPushoffreAction extends website_BlockAction

{

/**

* @param f_mvc_Request $request

* @param f_mvc_Response $response

* @return String

public function execute($request, $response)

{

if ($this->isInBackofficeEdition())

{

return website_BlockView::NONE;

}

$request->setAttribute('pushoffre', $this->getDocumentParameter());

// var_dump($this->getDocumentParameter());

return website_BlockView::SUCCESS;

}

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.

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

<p class="one-offre-text">${pushoffre/getText}</p>

</a>

</div>

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

	/**
	 * @param Integer $index
	 * @return String|NULL
	 */
	public function getFramephysicalpropertyValueByIndex($index)
	{
		$data = $this->getFramephysicalproperty();
		if (f_util_ArrayUtils::isNotEmpty($data))
		{
			return $data[0][$index];
		}
		return null;
	}

/**

* @param Integer $index

* @return String|NULL

public function getFramephysicalpropertyValueByIndex($index)

{

$data = $this->getFramephysicalproperty();

if (f_util_ArrayUtils::isNotEmpty($data))

{

return $data[0][$index];

}

return null;

}

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

${php: print_r(product.getFormattedFramephysicalproperty())}
<p>1 CALIBRE (longeur d'un verre) -> ${php: product.getFramephysicalpropertyValueByIndex(1)}</p>
<br/>
<p>2 NEZ (longueur du pont) -> ${php: product.getFramephysicalpropertyValueByIndex(2)}</p>
<br/>
<p>3 longueur de face -> ${php: product.getFramephysicalpropertyValueByIndex(3)}</p>
<br/>
<p>8 longeur des branches -> ${php: product.getFramephysicalpropertyValueByIndex(8)}</p>

${php: print_r(product.getFormattedFramephysicalproperty())}

<p>1 CALIBRE (longeur d'un verre) -> ${php: product.getFramephysicalpropertyValueByIndex(1)}</p>

<br/>

<p>2 NEZ (longueur du pont) -> ${php: product.getFramephysicalpropertyValueByIndex(2)}</p>

<br/>

<p>3 longueur de face -> ${php: product.getFramephysicalpropertyValueByIndex(3)}</p>

<br/>

<p>8 longeur des branches -> ${php: product.getFramephysicalpropertyValueByIndex(8)}</p>

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

03/03/2016 / admin

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 :

<pagetemplate byCodename="responsive/tplNosidebar" doctype="HTML-5"
  js="themes.mon_theme.js.mon_js"

1 2	<pagetemplate byCodename="responsive/tplNosidebar" doctype="HTML-5" js="themes.mon_theme.js.mon_js"

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.

<script change:javascript="head 'modules.mon_module.lib.js.mon_js'"></script>

1	<script change:javascript="head 'modules.mon_module.lib.js.mon_js'"></script>

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.

<script change:javascript="src 'modules.mon_module.lib.js.mon_js'"></script>

1	<script change:javascript="src 'modules.mon_module.lib.js.mon_js'"></script>

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.

16/12/2015 / admin

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 :

<ul class="level1">
  <li class="color-0">
  <li class="color-1">
  <li class="color-2">
  <li class="color-3">
  <li class="color-4">
  <li class="color-5">
</ul>

</ul>

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 :

    <ul tal:condition="parent/hasChildren" class="level${parent/getChildrenLevel}">
        <tal:block tal:repeat="entry parent/getChildren">

1 2	<ul tal:condition="parent/hasChildren" class="level${parent/getChildrenLevel}"> <tal:block tal:repeat="entry parent/getChildren">

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 :

<li class="color-${repeat/entry/index}">

1	<li class="color-${repeat/entry/index}">

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

22/10/2014 / admin

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) :

<?xml version="1.0" encoding="UTF-8"?>
<script>
	<binding fileName="modules/list/persistentdocument/import/list_binding.xml" />
	<binding fileName="modules/theme/persistentdocument/import/theme_binding.xml" />
		
	<systemfolder module="list" relatedmodule="theme">
		<staticlist byListid="modules_theme/doctype" label="Doctype des pages">
				<staticitem label="HTML 5" value="HTML-5"/>
		</staticlist>
	</systemfolder>
</script>

<?xml version="1.0" encoding="UTF-8"?>

</staticlist>

</systemfolder>

</script>

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

	/**
	 * @return string
	 */
	public function getDocTypeDeclaration()
	{
		if ($this->getDoctype() == 'HTML-5')
		{
			return '<!DOCTYPE html>';
		}
		elseif ($this->getDoctype() == 'XHMTL-1.0-Transitional')
		{
			return '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';
		}
		return '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">';
	}

/**

* @return string

public function getDocTypeDeclaration()

{

if ($this->getDoctype() == 'HTML-5')

{

return '<!DOCTYPE html>';

}

elseif ($this->getDoctype() == 'XHMTL-1.0-Transitional')

{

return '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">';

}

return '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">';

}

4. puis sous Putty :

$ change.php (ou autre alias de la commande change) import-data theme html5.xml

1	$ change.php (ou autre alias de la commande change) import-data theme html5.xml

Articles récents

Catégories

Archives

Méta

Étiquette : RBS Change

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

[RBS Change 3.x] Afficher ou masquer des éléments du DOM en fonction d’une condition avec PHPTal

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

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

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

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

2. themes/mon_theme/install.xml

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

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

[RBS Change] Ajouter un nouveau doctype au projet