Catégorie : RBS Change

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

12/04/2019 / admin

<script change:javascript="head 'modules.form.lib.js.form'"></script>
<script change:javascript="head 'modules.website.lib.js.form-validation'"></script>
<script type="text/javascript" tal:condition="php: count(jQueryConditionalElement) GT 0">
	jQuery(document).ready(function() {
		<tal:block tal:repeat="jQuery jQueryConditionalElement" tal:content="jQuery" />
		// conditionalForm.handleCheckboxBoolean('groupe7026567', '7026573', "true");
	});
</script>
<script type="text/javascript">
	if (form_Validation instanceof Array) {
		form_Validation.push({id: "form_<form_id>_${configuration/getBlockId}", rules: ${form/getValidationRulesJSON}});
	}
</script>

<form method="post" action="#form_<form_id>_anchor" id="form_<form_id>_${configuration/getBlockId}" class="cmxform" enctype="multipart/form-data" novalidate="novalidate">

		<!--
			 NOTE: 
			 La classe '.isNode' se place sur un '.form-group' dont le champ 
			 (booléen ou <select>) est amené à est amené à diriger l'utilisateur vers différentes directions selon l'option choisie.
			 Elle symbolise le point de départ à partir duquel plusieurs chemins vont être possibles dans le formulaire.
		-->

		<!-- input type="text" -->
		<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">
			<div id="field<field_id>" class="">
				<label for="field_<field_id>" class="control-label required"></label>
				<input type="text" class="form-control" name="formParam[f<field_id>]" id="field_<field_id>" value="" />
				<p class="help-block"></p>
			</div>
		</div> -->

		<!-- input type="radio" -->
		<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">
			<p class="">Votre demande concerne:</p>
			<div id="field<field_id>" class="">
				<label class="" id="field_<field_id>_<incrementing_val>">
					<input name="formParam[f<field_id>]" type="radio" value="<incrementing_val>" />
					_label_text_here_
				</label>
			</div>
			<p class="help-block"></p>
		</div> -->

		<!-- input type="file" -->
		<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">
			<div id="field<field_id>" class="">
				<label for="field_<field_id>" class="control-label required"></label>
				<input type="file" class="form-control" name="formParam[f<field_id>]" id="field_<field_id>" value="" />
				<p class="help-block"></p>
			</div>
		</div> -->

		<!-- select -->
		<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">
			<div id="field<field_id>" class="">
				<label for="field_<field_id>" class="control-label required"></label>
				<select class="form-control" name="formParam[recipientGroups]" id="field_<field_id>">
					<option selected="selected" value="<field_id>_default">Sélectionner...</option>
					<option value="<field_id>_<incrementing_val>"></option>
					<option value="<field_id>_<incrementing_val>"></option>
				</select>
				<p class="help-block"></p>
			</div>
		</div> -->

		<!-- textarea -->
		<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">
			<div id="field<field_id>" class="">
				<label for="field_<field_id>" class="control-label required"></label>
				<textarea class="form-control" name="formParam[message]" id="field_<field_id>" cols="50" rows="10" />
				<p class="help-block"></p>
			</div>
		</div> -->

		<!-- Boutons -->
		<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">
			<input type="reset" class="btn btn-plus btn-poubelle" value="Annuler" />
			<input type="submit" class="btn btn-plus btn-commande" name="formParam[submit_<form_id>_<block_id>]" id="submit_<form_id>_<block_id>" value="Envoyer" />
		</div> -->
</form>

jQuery(document).ready(function() {

<tal:block tal:repeat="jQuery jQueryConditionalElement" tal:content="jQuery" />

// conditionalForm.handleCheckboxBoolean('groupe7026567', '7026573', "true");

});

</script>

if (form_Validation instanceof Array) {

form_Validation.push({id: "form_<form_id>_${configuration/getBlockId}", rules: ${form/getValidationRulesJSON}});

}

</script>

<form method="post" action="#form_<form_id>_anchor" id="form_<form_id>_${configuration/getBlockId}" class="cmxform" enctype="multipart/form-data" novalidate="novalidate">

<!--

NOTE:

La classe '.isNode' se place sur un '.form-group' dont le champ

(booléen ou <select>) est amené à est amené à diriger l'utilisateur vers différentes directions selon l'option choisie.

Elle symbolise le point de départ à partir duquel plusieurs chemins vont être possibles dans le formulaire.

-->

<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">

<div id="field<field_id>" class="">

<label for="field_<field_id>" class="control-label required"></label>

<input type="text" class="form-control" name="formParam[f<field_id>]" id="field_<field_id>" value="" />

</div>

</div> -->

<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">

<p class="">Votre demande concerne:</p>

<div id="field<field_id>" class="">

<input name="formParam[f<field_id>]" type="radio" value="<incrementing_val>" />

_label_text_here_

</label>

</div>

</div> -->

<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">

<div id="field<field_id>" class="">

<label for="field_<field_id>" class="control-label required"></label>

<input type="file" class="form-control" name="formParam[f<field_id>]" id="field_<field_id>" value="" />

</div>

</div> -->

<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">

<div id="field<field_id>" class="">

<label for="field_<field_id>" class="control-label required"></label>

<option selected="selected" value="<field_id>_default">Sélectionner...</option>

</select>

</div>

</div> -->

<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">

<div id="field<field_id>" class="">

<label for="field_<field_id>" class="control-label required"></label>

</div>

</div> -->

<!-- <div id="groupe<group_id>" class="form-group <optional>isNode</optional>">

<input type="submit" class="btn btn-plus btn-commande" name="formParam[submit_<form_id>_<block_id>]" id="submit_<form_id>_<block_id>" value="Envoyer" />

</div> -->

</form>

form.js

var conditionalForm =
{
	// hide zone
	clearZone : function(zone, fieldid)
	{
		// remove .inPath class starting from closest .form-group.isNode
		// (aka "clean path")
		jQuery('#groupe'+fieldid+'.form-group.isNode')
			.nextAll()
			.removeClass('inPath')
			.hide();

		// hide selected zone
		jQuery('div#' + zone).each(function()
		{
			// hide sub zone that should be hidden
			jQuery(this).find('li.toHide').each(function()
			{
				jQuery(this).hide('normal');
			});
			jQuery(this).hide('normal');
		});


		// reset text inputs and selects, except radio and checkbox buttons
		jQuery('div#' + zone + ' :input').each(function()
		{
			jQuery(this).not(':radio, :checkbox').val('');
			jQuery(this).removeAttr('checked').removeAttr('selected');
		});
	},
	// manage fields controled by boolean checkbox inputs
	handleCheckboxBoolean : function(zone, fieldid, activationvalue)
	{
		jQuery('div#' + zone).css('display','none');
		jQuery('div#field' + fieldid + ' :checkbox').bind('click change', function()
		{
			if (jQuery(this).is(':checked') && jQuery(this).val() == activationvalue)
			{
				jQuery('div#' + zone).addClass('inPath').show('normal');
			}
			else
			{
				conditionalForm.clearZone(zone, fieldid);
			}
		}).change();
	},
	// manage fields controled by checkbox inputs
	handleCheckbox : function(zone, fieldid, activationvalue)
	{
		jQuery('div#' + zone).css('display','none');
		jQuery('label#' + fieldid + ' :checkbox').bind('click change', function()
		{
			if(jQuery(this).is(':checked'))
			{
				jQuery('div#' + zone).addClass('inPath').show('normal');
			}
			else
			{
				conditionalForm.clearZone(zone, fieldid);
			}
		}).change();
	},
	// manage fields controled by list
	handleList : function(zone, fieldid, activationvalue)
	{
		jQuery('div#' + zone).css('display', 'none');
		jQuery('select#' + fieldid).change(function ()
		{
			jQuery('select#' + fieldid + ' option:selected').each(function()
			{
				if (jQuery(this).val() == activationvalue)
				{
					jQuery('div#' + zone).addClass('inPath').show('normal');
				}
				else
				{
					conditionalForm.clearZone(zone, fieldid);
				}
	        });
		}).change();
	},
	// manage fields controled by radio inputs
	handleRadio : function(zone, fieldid, activationvalue)
	{
		jQuery('div#' + zone).css('display', 'none');
		jQuery('div#field' + fieldid + ' :radio').bind('click change', function()
		{
			if (jQuery(this).is(':checked'))
			{
				if(jQuery(this).val() == activationvalue)
				{
					jQuery('div#' + zone).addClass('inPath').show('normal');
				}
				else
				{
					conditionalForm.clearZone(zone, fieldid);
				}
			}
		}).change();
	}
};

var CAPTCHA =
{
	reload : function(input, url)
	{
		input.setAttribute('src', this.buildCaptchaImageURL(url))
	},
	buildCaptchaImageURL : function(url)
	{
		return url.replace(new RegExp('amp;', 'g'), '') + '&rnd=' + Math.random();
	}
};

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

var conditionalForm =

{

// hide zone

clearZone : function(zone, fieldid)

{

// remove .inPath class starting from closest .form-group.isNode

// (aka "clean path")

jQuery('#groupe'+fieldid+'.form-group.isNode')

.nextAll()

.removeClass('inPath')

.hide();

// hide selected zone

jQuery('div#' + zone).each(function()

{

// hide sub zone that should be hidden

jQuery(this).find('li.toHide').each(function()

{

jQuery(this).hide('normal');

});

jQuery(this).hide('normal');

});

// reset text inputs and selects, except radio and checkbox buttons

jQuery('div#' + zone + ' :input').each(function()

{

jQuery(this).not(':radio, :checkbox').val('');

jQuery(this).removeAttr('checked').removeAttr('selected');

});

// manage fields controled by boolean checkbox inputs

handleCheckboxBoolean : function(zone, fieldid, activationvalue)

{

jQuery('div#' + zone).css('display','none');

jQuery('div#field' + fieldid + ' :checkbox').bind('click change', function()

{

if (jQuery(this).is(':checked') && jQuery(this).val() == activationvalue)

{

jQuery('div#' + zone).addClass('inPath').show('normal');

}

else

{

conditionalForm.clearZone(zone, fieldid);

}

}).change();

// manage fields controled by checkbox inputs

handleCheckbox : function(zone, fieldid, activationvalue)

{

jQuery('div#' + zone).css('display','none');

jQuery('label#' + fieldid + ' :checkbox').bind('click change', function()

{

if(jQuery(this).is(':checked'))

{

jQuery('div#' + zone).addClass('inPath').show('normal');

}

else

{

conditionalForm.clearZone(zone, fieldid);

}

}).change();

// manage fields controled by list

handleList : function(zone, fieldid, activationvalue)

{

jQuery('div#' + zone).css('display', 'none');

jQuery('select#' + fieldid).change(function ()

{

jQuery('select#' + fieldid + ' option:selected').each(function()

{

if (jQuery(this).val() == activationvalue)

{

jQuery('div#' + zone).addClass('inPath').show('normal');

}

else

{

conditionalForm.clearZone(zone, fieldid);

}

});

}).change();

// manage fields controled by radio inputs

handleRadio : function(zone, fieldid, activationvalue)

{

jQuery('div#' + zone).css('display', 'none');

jQuery('div#field' + fieldid + ' :radio').bind('click change', function()

{

if (jQuery(this).is(':checked'))

{

if(jQuery(this).val() == activationvalue)

{

jQuery('div#' + zone).addClass('inPath').show('normal');

}

else

{

conditionalForm.clearZone(zone, fieldid);

}

}).change();

}

};

var CAPTCHA =

{

reload : function(input, url)

{

input.setAttribute('src', this.buildCaptchaImageURL(url))

buildCaptchaImageURL : function(url)

{

return url.replace(new RegExp('amp;', 'g'), '') + '&rnd=' + Math.random();

}

};

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

22/06/2017 / admin

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

<?xml version="1.0" encoding="UTF-8"?>
<aop>
  <replace pointcut="website_FormHelper" class="toto_FormHelper" />
</aop>

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

<aop>

</aop>

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:

<?php
class toto_FormHelper extends website_FormHelper
{

<?php

class toto_FormHelper extends website_FormHelper

{

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

12/05/2017 / admin

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.

<div class="mobile-switchlanguage-block" tal:condition="switchArray">
  <select name="switchlanguage" id="mobileSwitchlanguage" class="unstyled">
    <tal:block tal:condition="not:lang/url" tal:define="lang currentLangInfos">
      <option>${lang/label}</option>
    </tal:block>
    <tal:block tal:repeat="lang otherLangsInfos">
      <option tal:condition="lang/url" tal:attributes="value lang/url;title lang/title">${lang/label}</option>
    </tal:block>
  </select>
</div>

<tal:block tal:condition="not:lang/url" tal:define="lang currentLangInfos">

<option>${lang/label}</option>

</tal:block>

<tal:block tal:repeat="lang otherLangsInfos">

<option tal:condition="lang/url" tal:attributes="value lang/url;title lang/title">${lang/label}</option>

</tal:block>

</select>

</div>

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.

jQuery(document).ready(function(){
  jQuery('#mobileSwitchlanguage').on('change', function(){
    var getTargetPageURL = jQuery(this).val();
    window.location.href = getTargetPageURL;
  });
});

jQuery(document).ready(function(){

jQuery('#mobileSwitchlanguage').on('change', function(){

var getTargetPageURL = jQuery(this).val();

window.location.href = getTargetPageURL;

});

Protégé : [Gulp-flow Change 3.6.x] Exploiter une ressource vendor dans un thème

03/05/2017 / admin

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

23/11/2016 / admin

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

<link rel="stylesheet" href="/media/themes/responsive/main.css" type="text/css" media="screen" />

1	<link rel="stylesheet" href="/media/themes/responsive/main.css" type="text/css" media="screen" />

[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

var gulp = require('gulp');
    sass = require('gulp-sass');
    imagemin = require('gulp-imagemin');
    cache = require('gulp-cache');
    flatten = require('gulp-flatten');
    iconfont = require('gulp-iconfont');
    consolidate = require('gulp-consolidate');
	sourcemaps = require('gulp-sourcemaps');
	postcss = require('gulp-postcss');
	autoprefixer = require('autoprefixer')({
		browsers: ['last 5 versions'],
		cascade: false
	});
    runTimestamp = Math.round(Date.now()/1000);


gulp.task('sass', function(){
  return gulp.src('src/sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('style'))
});

// gulp.task('sass_sourcemaps', function(){
//   return gulp.src('src/sass/**/*.scss')
//     .pipe(sourcemaps.init())
//     .pipe(sass().on('error', sass.logError))
//     .pipe(sourcemaps.write('.'))
//     .pipe(gulp.dest('image'))
// });

gulp.task('css', function(){
  return gulp.src('src/style/*.css')
    .pipe(cache(flatten()))
	.pipe(postcss([autoprefixer]))
	.pipe(sourcemaps.write('maps'))
    .pipe(gulp.dest('style'))
});

// Watch style tasks only with 'gulp style'
gulp.task('style', ['sass', 'css'], function(){
  gulp.watch('src/sass/**/*.scss', ['sass']);
  gulp.watch('src/style/*.css', ['css']);
});

// style tasks w/Sourcemaps
// gulp.task('style', ['sass', 'sass_sourcemaps', 'css'], function(){
//   gulp.watch('src/sass/**/*.scss', ['sass']);
//   gulp.watch('src/style/*.css', ['css']);
// });

var gulp = require('gulp');

sass = require('gulp-sass');

imagemin = require('gulp-imagemin');

cache = require('gulp-cache');

flatten = require('gulp-flatten');

iconfont = require('gulp-iconfont');

consolidate = require('gulp-consolidate');

sourcemaps = require('gulp-sourcemaps');

postcss = require('gulp-postcss');

autoprefixer = require('autoprefixer')({

browsers: ['last 5 versions'],

cascade: false

});

runTimestamp = Math.round(Date.now()/1000);

gulp.task('sass', function(){

return gulp.src('src/sass/**/*.scss')

.pipe(sass().on('error', sass.logError))

.pipe(gulp.dest('style'))

});

// gulp.task('sass_sourcemaps', function(){

// return gulp.src('src/sass/**/*.scss')

// .pipe(sourcemaps.init())

// .pipe(sass().on('error', sass.logError))

// .pipe(sourcemaps.write('.'))

// .pipe(gulp.dest('image'))

// });

gulp.task('css', function(){

return gulp.src('src/style/*.css')

.pipe(cache(flatten()))

.pipe(postcss([autoprefixer]))

.pipe(sourcemaps.write('maps'))

.pipe(gulp.dest('style'))

});

// Watch style tasks only with 'gulp style'

gulp.task('style', ['sass', 'css'], function(){

gulp.watch('src/sass/**/*.scss', ['sass']);

gulp.watch('src/style/*.css', ['css']);

});

// style tasks w/Sourcemaps

// gulp.task('style', ['sass', 'sass_sourcemaps', 'css'], function(){

// gulp.watch('src/sass/**/*.scss', ['sass']);

// gulp.watch('src/style/*.css', ['css']);

// });

Protégé : [Change 3.x] Bonnes pratiques pour le développement à partir du thème naked-12-cols (branche responsive-modern) #2

09/11/2016 / admin

Protégé : [Change 3.x] Bonnes pratiques pour le développement à partir du thème naked-12-cols (branche responsive-modern)

08/11/2016 / admin

Protégé : [Change 3.x] Quelques notes sur le module Skin (habillage)

08/11/2016 / admin

[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] Effectuer une boucle tal:repeat qui rapporte l’ensemble des informations contenues dans une fonction

31/08/2016 / admin

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

/**
 * @return string[]
 */
public function getPublishedDeclinationColorsCode($shapetype = null, $shop = null)
{
    return project_FrameService::getInstance()->getPublishedDeclinationColorsCode($this, $shapetype, $shop);
}

/**

* @return string[]

public function getPublishedDeclinationColorsCode($shapetype = null, $shop = null)

{

return project_FrameService::getInstance()->getPublishedDeclinationColorsCode($this, $shapetype, $shop);

}

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

<p>${php: var_dump(product.getDeclinedproduct().getPublishedDeclinationColorsCode())}</p>

1	<p>${php: var_dump(product.getDeclinedproduct().getPublishedDeclinationColorsCode())}</p>

<ul class="product-declination-colors">
    <tal:block tal:repeat="colorID product/getDeclinedproduct/getPublishedDeclinationColorsCode">
        <li>
            <i class="icon color-${colorID}" />
        </li>
    </tal:block>
</ul>

<tal:block tal:repeat="colorID product/getDeclinedproduct/getPublishedDeclinationColorsCode">

<li>

</li>

</tal:block>

</ul>

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 :

<?xml version="1.0" encoding="utf-8"?>
<document xmlns="http://www.rbs.fr/schema/change-document/1.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.rbs.fr/schema/change-document/1.0 http://www.rbschange.fr/static/schema/change-document/3.5.xsd" model-version="3.5" has-url="false" use-rewrite-url="false">
  <properties>
    <add name="code" type="String" min-occurs="1"/>
    <add name="nom" type="String"/>
    <add name="picto" type="modules_media/media"/>
    <add name="libelle" type="String" localized="true"/>
    <add name="ferme" type="Boolean"/>
    <add name="message" type="String" localized="true" db-size="100"/>
    <add name="devise" type="modules_list/item" min-occurs="0" max-occurs="1" from-list="modules_parking/devise"/>
    <add name="pourcentagevert" type="Integer" min-occurs="1" default-value="20"/>
    <add name="pourcentageorange" type="Integer" min-occurs="1" default-value="80"/>
    <add name="duree" type="Integer">
      <constraints>min:-1</constraints>
    </add>
    <add name="handicape" type="Integer"/>
    <add name="occupation" type="Integer"/>
    <add name="maximum" type="Integer"/>
    <add name="mode" type="Integer"/>
    <add name="libre" type="Integer"/>
    <add name="etat" type="Integer"/>
    <add name="display" type="Integer" default-value="0" from-list="modules_parking/parkingdisplay" localized="true"/>
  </properties>
  <statuses default="PUBLICATED"/>
  <serializedproperties>
	</serializedproperties>
</document>

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

</add>

</properties>

</serializedproperties>

</document>

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

<tal:block tal:repeat="parking parkings">
  <p>${parking/getNom}</p>
</tal:block>

<tal:block tal:repeat="parking parkings">

<p>${parking/getNom}</p>

</tal:block>

Articles récents

Catégories

Archives

Méta

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

config/aop.xml

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

Les commandes à exécuter

[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

Protégé : [Gulp-flow Change 3.6.x] Exploiter une ressource vendor dans un thème

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

Protégé : [Change 3.x] Bonnes pratiques pour le développement à partir du thème naked-12-cols (branche responsive-modern) #2

Protégé : [Change 3.x] Bonnes pratiques pour le développement à partir du thème naked-12-cols (branche responsive-modern)

Protégé : [Change 3.x] Quelques notes sur le module Skin (habillage)

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

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

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