Salut à tous,
Un nouvel exemple de formulaire (celui de deco-in, pas encore en ligne), il contient plus de variables
Voici le code du chunk: catalogueDeco
<form action="[~[*id*]~]" name="tvExplorer" id="tvExplorer" method="get">
<fieldset>
[+tve.keywordsSearch:label->Mots-clés+]
</fieldset>
<fieldset >
[+tve.parentElt:type->select:start->4:depth->3:blankLabel->-:label->Choisissez une rubrique+]
</fieldset>
<fieldset >
[+tve.ObjetPrix:#RANGE{tvtype->dropdown:elements->@CHUNK intervalPrix:filter->4:label->Votre budget (prix max.)}+]
</fieldset>
<div class="tab-pane" id="decoPane">
<script type="text/javascript">tpResources = new WebFXTabPane( document.getElementById( "decoPane" ) );</script>
<div class="tab-page" id="tvStyle">
<h5 class="tab">Styles</h5>
<script type="text/javascript">tpResources.addTabPage( document.getElementById( "tvStyle" ) );</script>
<fieldset>
[+tve.ObjetStyle:label->Quel(s) style(s) ?:filter->9:size->8+]
</fieldset>
</div>
<div class="tab-page" id="tvColoris">
<h5 class="tab">Coloris</h5>
<script type="text/javascript">tpResources.addTabPage( document.getElementById( "tvColoris" ) );</script>
<fieldset>
[+tve.ObjetColoris:label->Quel(s) coloris ?:filter->9:size->8+]
</fieldset>
</div>
<div class="tab-page" id="tvMatiere">
<h5 class="tab">Matières</h5>
<script type="text/javascript">tpResources.addTabPage( document.getElementById( "tvMatiere" ) );</script>
<fieldset>
[+tve.ObjetMateriau:label->Quelle(s) matière(s) ?:filter->9:size->8+]
</fieldset>
</div>
<div class="tab-page" id="tvPieces">
<h5 class="tab">Pièces</h5>
<script type="text/javascript">tpResources.addTabPage( document.getElementById( "tvPieces" ) );</script>
<fieldset class="test" >
[+tve.ObjetPiece:label->Quelle(s) pièce(s) ?:filter->9:size->8+]
</fieldset>
</div>
<div class="tab-page" id="tvCadeau">
<h5 class="tab">Cadeaux</h5>
<script type="text/javascript">tpResources.addTabPage( document.getElementById( "tvCadeau" ) );</script>
<fieldset>
[+tve.ObjetCadeau:label->Idée(s) cadeau pour ?:filter->9:size->8+]
</fieldset>
</div>
</div><!-- tvManagerPane -->
<fieldset>
<input type="submit" id="tve_search" name="tve_search" value="Chercher" />
</fieldset>
</form>
Je vais pas expliquer tous les tags mais au moins celui employant la méthode RANGE.
Objectifs:
Au depart la tv(ObjetPrix) est de type number.
On souhaite offrir au visiteur la possibilité de choisir parmi une liste de valeur le prix max qu’il souhaite dépenser.
Comment faire:
on va invoquer la methode RANGE de tvExplorer.
[+tve.ObjetPrix:#RANGE{tvtype->dropdown:elements->@CHUNK intervalPrix:filter->4:label->Votre budget (prix max.)}+]
Prenons chaque partie du tag:
- tve.ObjetPrix => on ajoute à la liste de critere la tv ObjetPrix
Sur cette tv on applique la methode #RANGE (qui permet de definir des intervalles de valeur, pour cet exemple on crée un seul objet supplémentaire pour définir les valeurs de l’intervalle)
- #RANGE{tvtype->dropdown:elements->@CHUNK intervalPrix:filter->4:label->Votre budget (prix max.)}
Pour en créer une deuxieme separer les parametres de chaque borne avec ||:
#RANGE{tvtype->dropdown:elements->@CHUNK intervalPrix:filter->4:label->Votre budget (prix max.)||tvtype->dropdown:elements->@CHUNK intervalPrix:filter->4:label->Votre budget (prix max.)}
Les propriétés de RANGE
- tvtype->dropdown
La TV ObjetPrix est enregistré dans la base avec un type number.
On force donc le rendu pour transformer la TV en dropdown (ou plutot on attribue à la borne le type dropdown).
- elements->@CHUNK intervalPrix
Dans la base la TV ne contient pas d’options (du fait de son type number) on va donc les créer avec la propriété "elements"
Ici on va aller chercher les valeurs dans un CHUNK (les bindings => EVAL ou SELECT sont supportées)
Le contenu du chunk intervalPrix dans notre exemple
Moins de 15€==15||Moins de 50€==50||Moins de 80€==80||Pas de limite==9999
- filter->4
Le filtre à appliquer est 4 (supprime de la liste de résultats les objets dont le prix est > à la valeur recherchée)
- label->Votre budget (prix max.)
Se comprend sans explications.
:-)
☆ A M B ☆
