Inclure La Fonction Datepicker Dans Un Template En Fo

Superbegood31 · February 14, 2013

Bonjour à tous,

Je souhaiterais inclure la fonction datepicker dans un de mes template.

Je sais que les librairies jquery sont intégrées à Prestashop, mais je ne sais mas les appelées dans mon template.

Merci à tous ceux qui pourront me venir en aide là-dessus.

Christophe Boix · February 14, 2013

Bonjour,

Dans le ftp, dossier admin, il y a le fichier functions.php, qui va générer le bon script selon la langue avec la function includeDatepicker($id, $time) et bindDatepicker($id, $time)

Sur un TPL, il faudrait utiliser une syntaxe un peu différente :


<link href="{$base_dir}css/jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="{$base_dir}js/jquery/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" src="{$base_dir}js/jquery/datepicker/ui/i18n/ui.datepicker-{$lang_iso}.js"></script>

Et ensuite, il faudrait faire un petit bout de code, où ID_de_linput est à replacer par le bon ID ex :

{literal}
<script type="text/javascript">
$(function() {
$("#ID_de_linput").datepicker({
 prevText:"",
 nextText:"",
 dateFormat:"yy-mm-dd"
});
});
</script>

Superbegood31 · February 14, 2013

Bonjour et merci de m'aider.

Voici ce que j'ai mis dans mon template :

 {elseif (($field.id_customization_field == 20) || ($field.id_customization_field == 25))}
<script type="text/javascript" src="{$base_dir}js/jquery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="{$base_dir}js/jquery/ui/i18n/jquery.ui.datepicker-{$lang_iso}.js"></script>
<input type="text" id="date" size="20" name="textField{$field.id_customization_field}" style="color:#999999" value="{$item}" {if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}> {$item}
{literal}
<script type="text/javascript">
bindDatepicker("date",false);
$(function() {
$("#dateb").datepicker({
 prevText:"",
 nextText:"",
 dateFormat:"dd-mm-yy"
});
});
</script>
{/literal}

Je précise que j'ai modifié les appels jquery avec ceux de ma conf.

Mais cela ne fonctionne pas...

Christophe Boix · February 14, 2013

Regardez bien l'id de l'input, il doit correspondre au # avant le .datepicker
<input type="text" id="date" size="2"...
$("#dateb").datepicker({
a remplacer par
$("#date").datepicker({

Superbegood31 · February 14, 2013

Correction faites.

Mais toujours pas de calendrier au clic dans l'input...

Christophe Boix · February 14, 2013

envoyez moi l'url en privé si vous voulez, je regarderai de + pres votre code

Superbegood31 · February 14, 2013

Il s'agit de ma boutique de test, en local...

Petite question : le calendrier devrait apparaître au clic dans l'input ? Il n'y a pas besoin de mettre une icône ?

Christophe Boix · February 14, 2013

En fait selon la version du prestashop, les liens vers le JS vont changer

Voici un exemple ici : http://too-web.fr/pr...ontact-form.php pour un prestashop 1.4.9

et mise à jour du code :

<link href="{$base_dir}css/jquery-ui-1.8.10.custom.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="{$base_dir}js/jquery/jquery-ui-1.8.10.custom.min.js"></script>
<script type="text/javascript" src="{$base_dir}js/jquery/datepicker/ui/i18n/ui.datepicker-{$lang_iso}.js"></script>
<input type="text" id="dateTest" value="">
{literal}
<script type="text/javascript">
$(function() {
jQuery("#dateTest").datepicker({
  prevText:"",
  nextText:"",
  dateFormat:"dd-mm-yy"
});
});
</script>
{/literal}

Edited February 14, 2013 by Christophe Boix (see edit history)

Superbegood31 · February 14, 2013

Ma version est 1.5.0.17

Pensez-vous que cela conviendrai ?

Superbegood31 · February 14, 2013

Voici ce que Firebug indique comme erreur:

TypeError: $.datepicker is undefined
[stopper sur une erreur] 
$.datepicker.regional['fr'] = {

Superbegood31 · February 14, 2013

Voici mon jquery.ui.datepicker-fr.js

/* French initialisation for the jQuery UI date picker plugin. */
/* Written by Keith Wood (kbwood{at}iinet.com.au),
		  Stéphane Nahmani ([email protected]),
		  Stéphane Raimbault <[email protected]> */
jQuery(function($){
$.datepicker.regional['fr'] = {
 closeText: 'Fermer',
 prevText: 'Précédent',
 nextText: 'Suivant',
 currentText: 'Aujourd\'hui',
 monthNames: ['Janvier','Février','Mars','Avril','Mai','Juin',
 'Juillet','Août','Septembre','Octobre','Novembre','Décembre'],
 monthNamesShort: ['Janv.','Févr.','Mars','Avril','Mai','Juin',
 'Juil.','Août','Sept.','Oct.','Nov.','Déc.'],
 dayNames: ['Dimanche','Lundi','Mardi','Mercredi','Jeudi','Vendredi','Samedi'],
 dayNamesShort: ['Dim.','Lun.','Mar.','Mer.','Jeu.','Ven.','Sam.'],
 dayNamesMin: ['D','L','M','M','J','V','S'],
 weekHeader: 'Sem.',
 dateFormat: 'dd/mm/yy',
 firstDay: 1,
 isRTL: false,
 showMonthAfterYear: false,
 yearSuffix: ''};
$.datepicker.setDefaults($.datepicker.regional['fr']);
});

Christophe Boix · February 14, 2013

Pour la 1.5 c'est différent , exemple ici : http://too-web.fr/prestashop151/index.php?controller=contact

<input type="text" id="dateTest" size="20" name="test" style="color:#999999" value=""/> <label for="dateTest"><- Cliquez ici pour ouvrir le calendrier</label>
<br/>
<br/>
<link href="{$base_dir}js/jquery/ui/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" media="all" />
<link href="{$base_dir}js/jquery/ui/themes/base/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="{$base_dir}js/jquery/ui/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="{$base_dir}js/jquery/ui/jquery.ui.datepicker.min.js"></script>
<script type="text/javascript" src="{$base_dir}js/jquery/ui/i18n/jquery.ui.datepicker-fr.js"></script>
<script type="text/javascript">
{literal}$(function() {
 $("#dateTest").datepicker({
  prevText:"",
  nextText:"",
  dateFormat:"yy-mm-dd"});
});{/literal}
</script>

Superbegood31 · February 14, 2013

J'ai vérifié les appels jquery et ils sont bon par rapport à ma conf mais le calendrier n'apparaît toujours pas....

Voici le code de mon template :

 {elseif (($field.id_customization_field == 46))}
<input type="text" id="date" size="7" name="textField{$field.id_customization_field}" style="color:#999999" value=""/>
<link href="{$base_dir}js/jquery/ui/themes/base/jquery.ui.all.css" rel="stylesheet" type="text/css" media="all" />
<link href="{$base_dir}js/jquery/ui/themes/base/jquery.ui.datepicker.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="{$base_dir}js/jquery/ui/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="{$base_dir}js/jquery/ui/jquery.ui.datepicker.min.js"></script>
<script type="text/javascript" src="{$base_dir}js/jquery/ui/i18n/jquery.ui.datepicker-fr.js"></script>
<script type="text/javascript">
{literal}$(function() {
 $("#date").datepicker({
  prevText:"",
  nextText:"",
  dateFormat:"dd-mm-yy"});
});{/literal}
</script>

PS : je précise que ce template me sert pour la personnalisation de produit.

Je l'appel dans product.tpl par :

  {if $field.type == 1}
  <li class="customizationUploadLine{if $field.required} required{/if}">
   <label for ="textField{$customizationField}">{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field} {if !empty($field.name)}{$field.name}{/if}{if $field.required}<sup>*</sup>{/if}</label>
   {include file="$tpl_dir./product_custom.tpl"}
  </li>

En tous cas merci à vous de prendre du temps pour m'aider à solutionner mon problème.

Superbegood31 · February 14, 2013

Voici une erreur reporté par Firebug :

TypeError: $(...).serialScroll is not a function
[stopper sur une erreur] 
...00,step:2,lazy:true,lock:false,force:false,cycle:false});$('#thumbs_list').trigg...

Superbegood31 · February 14, 2013

Un complément d'enquête, voici le code perçu par FF :

/* <![CDATA[ */
$(function(){$("#date").datepicker({prevText:"",nextText:"",dateFormat:"yy-mm-dd"});});/* ]]> */

Et sur votre site d'exemple :

$(function() {
$("#dateTest").datepicker({
prevText:"",
nextText:"",
dateFormat:"yy-mm-dd"});
});

Christophe Boix · February 14, 2013

de rien,

si vous affichez la source, combien avez-vous de champ input avec un id="date" ? Il n'en faut qu'un, si vous en avez plusieurs il faudra rajouter un petit compteur à coté de date

concernant l'erreur serialscroll, à mon avis il y a un conflit entre le date picker et le script du serialscroll, ou alors videz le cache navigateur peut etre

j'ai mis mon code sur une fiche produit : http://too-web.fr/prestashop151/index.php?id_product=1&controller=product et ça fonctionne aussi

par contre, il vaut mieux éviter de mettre les lignes de script et css dans la boucle {foreach}, mettez les tout en haut du fichier product.tpl , et mettez l'input là où vous voulez.

Superbegood31 · February 14, 2013

Je n'ai qu'un seul id="date".

Je vide le cache systématiquement entre toutes manipulations.

J'utilise un autre template pour les personnalisations.

Je suis jaloux que cela fonctionne bien chez vous...

Superbegood31 · February 14, 2013

Pouvez-vous ajouter une personnalisation "date" à un produit, pour voir si votre calendrier apparaît.

Christophe Boix · February 14, 2013

Voilà : http://too-web.fr/pr...troller=product

{foreach from=$customizationFields item='field' name='customizationFields'}
   {if $field.type == 1}
   <li class="customizationUploadLine{if $field.required} required{/if}">
       <label for ="textField{$customizationField}">{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field} {if !empty($field.name)}{$field.name}{/if}{if $field.required}<sup>*</sup>{/if}</label>
       <!--
       <textarea type="text" name="textField{$field.id_customization_field}" id="textField{$customizationField}" rows="1" cols="40" class="customization_block_input" />{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}</textarea>
       -->
       <input type="text" name="textField{$field.id_customization_field}" id="textField{$customizationField}" value="{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}" />

   </li>

   <script type="text/javascript">
   var monChamp='textField{$customizationField}';
   {literal}$(function() {
           $("#"+monChamp).datepicker({
               prevText:"",
               nextText:"",
               dateFormat:"yy-mm-dd"});
       });{/literal}
   </script>
   {counter}
   {/if}
{/foreach}

Superbegood31 · February 14, 2013

J'ai fait comme indiqué :

- J'ai mis les appels js et css tout en en haut du fichier product.tpl

- Le code de mon template custom

{assign var='mmam_predec' value=','|explode:",Choix N°1,Choix N°2,Choix N°3,Choix texte libre"}
{assign var='mmam_attente' value=','|explode:",Choix N°1,Choix N°2,Choix N°3,Choix texte libre"}
{assign var='mmam_repondeur' value=','|explode:",Choix N°1,Choix N°2,Choix texte libre"}
{assign var='mmam_operateur' value=','|explode:",Orange,Sfr,Bouygues,Free Mobile"}
{if (($field.id_customization_field == 17) || ($field.id_customization_field == 22) || ($field.id_customization_field == 39))}
<select id="operateur" style="width:129px" style="color:#999999" onblur="this.style.color = '#999999';" onfocus="this.style.color = '#000000';" name="textField{$field.id_customization_field}">
   {foreach from=$mmam_operateur item='item'}
	  <option value="{$item}" {if isset($textFields.$key)}{if $textFields.$key == {$item[spam-filter]selected="selected"{/if}{/if}>{$item}</option>
   {/foreach}
 </select>
<img align="center" title="Orange" alt="Orange" src="http://www.switchboard.fr/themes/default/img/icon/orange.png">
<img align="center" title="SFR" alt="SFR" src="http://www.switchboard.fr/themes/default/img/icon/sfr.png">
<img align="center" title="Bouygues TELECOM"" alt="Bouygues TELECOM" src="http://www.switchboard.fr/themes/default/img/icon/bouygues.png">
<img align="center" title="Free Mobile" alt="Free Mobile" src="http://www.switchboard.fr/themes/default/img/icon/free.png">
<br/>
{elseif (($field.id_customization_field == 18) || ($field.id_customization_field == 23) || ($field.id_customization_field == 40))}
 <input type="text" id="tel" name="textField{$field.id_customization_field}" maxlength="10" style="color:#999999" value="ex : 0612345678" onblur="if(this.value=='')this.value='ex : 0612345678';this.style.color = '#999999'; " onfocus="if(this.value=='ex : 0612345678')this.value='';this.style.color = '#000000';" onChange="verif_form_tel('tel')"{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}> {$item}
 <br/><span style="color:red; font-size:12px; position:middle; font-weight:bold" id='tel_error'></span>
 {elseif (($field.id_customization_field == 19) || ($field.id_customization_field == 24) || ($field.id_customization_field == 41))}
 <input type="text" id="code" name="textField{$field.id_customization_field}" maxlength="4" style="color:#999999" value="ex : 0000" onblur="if(this.value=='')this.value='ex : 0000';this.style.color = '#999999';" onfocus="if(this.value=='ex : 0000')this.value='';this.style.color = '#000000';" onChange="verif_form_code('code')"{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}> {$item}
  <br/><span style="color:red; font-size:12px; position:middle; font-weight:bold" id='code_error'></span>
 {elseif (($field.id_customization_field == 46))}
<input type="text" class="datepicker" id="textField{$customizationField}" size="7" name="textField{$field.id_customization_field}" style="color:#999999" value="{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}" />
<br/>
<br/>
    <script type="text/javascript">
    var monChamp='textField{$customizationField}';
    {literal}$(function() {
    $("#"+monChamp).datepicker({
    prevText:"",
    nextText:"",
    dateFormat:"dd-mm-yy"});
    });{/literal}
    </script>
 {elseif (($field.id_customization_field == 21) || ($field.id_customization_field == 26))}
  <input type="text" name="textField{$field.id_customization_field}" style="color:#999999" onblur="this.style.color = '#999999';" onfocus="this.style.color = '#000000';" value="{$item}" {if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}> {$item}
 {elseif $field.id_customization_field == 45}
 <input type="radio" name="textField{$field.id_customization_field}" value="Choix 1" {if isset($textFields.$key)}{if $textFields.$key == "Choix 1"}checked="checked"{/if}{else}checked="checked"{/if}"> Choix 1  
 <input type="radio" name="textField{$field.id_customization_field}" value="Choix 2" {if isset($textFields.$key)}{if $textFields.$key == "Choix 2"}checked="checked"{/if}{/if}"> Choix 2  
 <input type="radio" name="textField{$field.id_customization_field}" value="Texte libre" {if isset($textFields.$key)}{if $textFields.$key == "Texte libre"}checked="checked"{/if}{/if}> Texte libre
 {elseif (($field.id_customization_field == 5) || ($field.id_customization_field == 7) || ($field.id_customization_field == 11))}
 <select id="predec" name="textField{$field.id_customization_field}" onblur="this.style.color = '#999999';" onfocus="this.style.color = '#000000';" onChange="affiche_text('predec',this)">
   {foreach from=$mmam_predec item='item'}
	  <option value="{$item}" {if isset($textFields.$key)}{if $textFields.$key == {$item[spam-filter]selected="selected"{/if}{/if}>{$item}</option>
   {/foreach}
 </select><br/><span style="color:green; font-size:10px; font-weight:bold" id='predec_libre'></span>
{elseif (($field.id_customization_field == 6) || ($field.id_customization_field == 9) || ($field.id_customization_field == 12))}
 <select id="attente" name="textField{$field.id_customization_field}" onblur="this.style.color = '#999999';" onfocus="this.style.color = '#000000';" onChange="affiche_text('attente',this)">
   {foreach from=$mmam_attente item='item'}
	  <option value="{$item}" {if isset($textFields.$key)}{if $textFields.$key == {$item[spam-filter]selected="selected"{/if}{/if}>{$item}</option>
   {/foreach}
 </select><br/><span style="color:green; font-size:10px; font-weight:bold" id='attente_libre'></span>
{elseif (($field.id_customization_field == 8) || ($field.id_customization_field == 10) || ($field.id_customization_field == 13))}
 <select id="repondeur" name="textField{$field.id_customization_field}" onblur="this.style.color = '#999999';" onfocus="this.style.color = '#000000';" onChange="affiche_text('repondeur',this)">
   {foreach from=$mmam_repondeur item='item'}
	  <option value="{$item}" {if isset($textFields.$key)}{if $textFields.$key == {$item[spam-filter]selected="selected"{/if}{/if}>{$item}</option>
   {/foreach}
 </select><br/><span style="color:green; font-size:10px; font-weight:bold" id='repondeur_libre'></span>
 {else}
 <textarea type="text" name="textField{$field.id_customization_field}" id="textField{$customizationField}" rows="1" cols="40" class="customization_block_input" />{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}</textarea>
{/if}

- La partie de mon product.tpl qui appel mon template custom

 {foreach from=$customizationFields item='field' name='customizationFields'}
  {if $field.type == 1}
  <li class="customizationUploadLine{if $field.required} required{/if}">
   <label for ="textField{$customizationField}">{assign var='key' value='textFields_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field} {if !empty($field.name)}{$field.name}{/if}{if $field.required}<sup>*</sup>{/if}</label>
   {include file="$tpl_dir./product_custom.tpl"}
  </li>
  {counter}
  {/if}
 {/foreach}

Je ne comprends pas pourquoi cela ne fonctionne pas.

Peut-être est-ce du à ma config (CCC, compression du code JS...

Christophe Boix · February 14, 2013

désactivez provisoirement la compression css/js pour voir

Superbegood31 · February 14, 2013

J'ai essayé mais sans effet sur mon problème...

Superbegood31 · February 14, 2013

Pouvez-vous remplacer dans product.tpl

   <textarea type="text" name="textField{$field.id_customization_field}" id="textField{$customizationField}" rows="1" cols="40" class="customization_block_input" />{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}</textarea>

Par :

{include file="$tpl_dir./product_custom.tpl"}

Et ajouter le fichier product_custom.tpl à otre boutique de test

{assign var='mmam_predec' value=','|explode:",Choix N°1,Choix N°2,Choix N°3,Choix texte libre"}
{assign var='mmam_attente' value=','|explode:",Choix N°1,Choix N°2,Choix N°3,Choix texte libre"}
{assign var='mmam_repondeur' value=','|explode:",Choix N°1,Choix N°2,Choix texte libre"}
{assign var='mmam_operateur' value=','|explode:",Orange,Sfr,Bouygues,Free Mobile"}
{if (($field.id_customization_field == 17) || ($field.id_customization_field == 22) || ($field.id_customization_field == 39))}
<select id="operateur" style="width:129px" style="color:#999999" onblur="this.style.color = '#999999';" onfocus="this.style.color = '#000000';" name="textField{$field.id_customization_field}">
   {foreach from=$mmam_operateur item='item'}
	  <option value="{$item}" {if isset($textFields.$key)}{if $textFields.$key == {$item[spam-filter]selected="selected"{/if}{/if}>{$item}</option>
   {/foreach}
 </select>
<img align="center" title="Orange" alt="Orange" src="http://www.switchboard.fr/themes/default/img/icon/orange.png">
<img align="center" title="SFR" alt="SFR" src="http://www.switchboard.fr/themes/default/img/icon/sfr.png">
<img align="center" title="Bouygues TELECOM"" alt="Bouygues TELECOM" src="http://www.switchboard.fr/themes/default/img/icon/bouygues.png">
<img align="center" title="Free Mobile" alt="Free Mobile" src="http://www.switchboard.fr/themes/default/img/icon/free.png">
<br/>
{elseif (($field.id_customization_field == 18) || ($field.id_customization_field == 23) || ($field.id_customization_field == 40))}
 <input type="text" id="tel" name="textField{$field.id_customization_field}" maxlength="10" style="color:#999999" value="ex : 0612345678" onblur="if(this.value=='')this.value='ex : 0612345678';this.style.color = '#999999'; " onfocus="if(this.value=='ex : 0612345678')this.value='';this.style.color = '#000000';" onChange="verif_form_tel('tel')"{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}> {$item}
 <br/><span style="color:red; font-size:12px; position:middle; font-weight:bold" id='tel_error'></span>
 {elseif (($field.id_customization_field == 19) || ($field.id_customization_field == 24) || ($field.id_customization_field == 41))}
 <input type="text" id="code" name="textField{$field.id_customization_field}" maxlength="4" style="color:#999999" value="ex : 0000" onblur="if(this.value=='')this.value='ex : 0000';this.style.color = '#999999';" onfocus="if(this.value=='ex : 0000')this.value='';this.style.color = '#000000';" onChange="verif_form_code('code')"{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}> {$item}
  <br/><span style="color:red; font-size:12px; position:middle; font-weight:bold" id='code_error'></span>
 {elseif (($field.id_customization_field == 46))}
<input type="text" class="datepicker" id="date_commande" size="7" name="textField{$field.id_customization_field}" style="color:#999999" value="{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}" />
<br/>
<br/>
 {elseif (($field.id_customization_field == 21) || ($field.id_customization_field == 26))}
  <input type="text" name="textField{$field.id_customization_field}" style="color:#999999" onblur="this.style.color = '#999999';" onfocus="this.style.color = '#000000';" value="{$item}" {if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}> {$item}
 {elseif $field.id_customization_field == 45}
 <input type="radio" name="textField{$field.id_customization_field}" value="Choix 1" {if isset($textFields.$key)}{if $textFields.$key == "Choix 1"}checked="checked"{/if}{else}checked="checked"{/if}"> Choix 1  
 <input type="radio" name="textField{$field.id_customization_field}" value="Choix 2" {if isset($textFields.$key)}{if $textFields.$key == "Choix 2"}checked="checked"{/if}{/if}"> Choix 2  
 <input type="radio" name="textField{$field.id_customization_field}" value="Texte libre" {if isset($textFields.$key)}{if $textFields.$key == "Texte libre"}checked="checked"{/if}{/if}> Texte libre
 {elseif (($field.id_customization_field == 5) || ($field.id_customization_field == 7) || ($field.id_customization_field == 11))}
 <select id="predec" name="textField{$field.id_customization_field}" onblur="this.style.color = '#999999';" onfocus="this.style.color = '#000000';" onChange="affiche_text('predec',this)">
   {foreach from=$mmam_predec item='item'}
	  <option value="{$item}" {if isset($textFields.$key)}{if $textFields.$key == {$item[spam-filter]selected="selected"{/if}{/if}>{$item}</option>
   {/foreach}
 </select><br/><span style="color:green; font-size:10px; font-weight:bold" id='predec_libre'></span>
{elseif (($field.id_customization_field == 6) || ($field.id_customization_field == 9) || ($field.id_customization_field == 12))}
 <select id="attente" name="textField{$field.id_customization_field}" onblur="this.style.color = '#999999';" onfocus="this.style.color = '#000000';" onChange="affiche_text('attente',this)">
   {foreach from=$mmam_attente item='item'}
	  <option value="{$item}" {if isset($textFields.$key)}{if $textFields.$key == {$item[spam-filter]selected="selected"{/if}{/if}>{$item}</option>
   {/foreach}
 </select><br/><span style="color:green; font-size:10px; font-weight:bold" id='attente_libre'></span>
{elseif (($field.id_customization_field == 8) || ($field.id_customization_field == 10) || ($field.id_customization_field == 13))}
 <select id="repondeur" name="textField{$field.id_customization_field}" onblur="this.style.color = '#999999';" onfocus="this.style.color = '#000000';" onChange="affiche_text('repondeur',this)">
   {foreach from=$mmam_repondeur item='item'}
	  <option value="{$item}" {if isset($textFields.$key)}{if $textFields.$key == {$item[spam-filter]selected="selected"{/if}{/if}>{$item}</option>
   {/foreach}
 </select><br/><span style="color:green; font-size:10px; font-weight:bold" id='repondeur_libre'></span>
 {else}
 <textarea type="text" name="textField{$field.id_customization_field}" id="textField{$customizationField}" rows="1" cols="40" class="customization_block_input" />{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}</textarea>
{/if}

J'ai également ajouter des petits codes dans product.js :

function affiche_text(nomSelect,elem) {
 //predec
 if (nomSelect=="predec") {
   if (elem.value==["Choix texte libre"]) {
	  $("#predec_libre").html("Important: Veuillez nous indiquer votre texte à l'&eacutetape 3 du processus de commande.");
   } else {
	  $("#predec_libre").html("");
   }
 }
 //attente
 if (nomSelect=="attente") {
   if (elem.value==["Choix texte libre"]) {
	  $("#attente_libre").html("Important: Veuillez nous indiquer votre texte à l'&eacutetape 3 du processus de commande.");
   } else {
	  $("#attente_libre").html("");
   }
 }
 //repondeur
 if (nomSelect=="repondeur") {
   if (elem.value==["Choix texte libre"]) {
	  $("#repondeur_libre").html("Important: Veuillez nous indiquer votre texte à l'&eacutetape 3 du processus de commande.");
   } else {
	  $("#repondeur_libre").html("");
   }
 }
}
// Vérif de téléphone mobile
function verif_form_tel(id) {
   temp = $("#"+id).val();
   var reg = new RegExp('^(06|07)[0-9]{8}$', 'i');
   if (reg.test(temp)==false) {
 $("#"+id).val("");
 $("#"+id+"_error").html("'"+temp+"' n'est pas valide ! Veuillez saisir votre num&eacutero sous la forme 0612345607")
   } else {
 $("#"+id+"_error").html("");
   }
}
// Vérif de code de messagerie mobile
function verif_form_code(id) {
   temp = $("#"+id).val();
   var reg = new RegExp('^[0-9]{4}$', 'i');
   if (reg.test(temp)==false) {
 $("#"+id).val("");
 $("#"+id+"_error").html("'"+temp+"' n'est pas valide ! Veuillez saisir votre code sous la forme 0000")
   } else {
 $("#"+id+"_error").html("");
   }
}

Tout est en dur mais pour le moment cela me convient.

Merci encore de votre patience et percévérence.

Superbegood31 · February 14, 2013

Je vois que dans votre balise <head> vous avez :

<script src="/prestashop151/js/jquery/jquery-1.7.2.min.js" type="text/javascript">

Hors moi je ne l'ai pas, peut-être cela vient de là.

Où dois je le mettre, dans le header.tpl ?

Christophe Boix · February 14, 2013

modifications effectuées, ça marche tjrs

oui , a moins que vous ayez déjà un jquer lancé ?

Christophe Boix · February 14, 2013

Aussi,

à la fin de product_custom.tpl, remplacer le textarea par un input :

 <!--
 <textarea type="text" name="textField{$field.id_customization_field}" id="textField{$customizationField}" rows="1" cols="40" class="customization_block_input" />{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}</textarea>
 -->

<input type="text" name="textField{$field.id_customization_field}" id="textField{$customizationField}" value="{if isset($textFields.$key)}{$textFields.$key|stripslashes}{/if}" />

Superbegood31 · February 15, 2013

Bonjour,

oui , a moins que vous ayez déjà un jquer lancé ?

Comment puis-je savoir ?

Pour info, j'ai mis l'input à la place du textarea mais cela n'a pas d'effet...Toujours pas de calendrier....

Christophe Boix · February 15, 2013

je voulais dire, si vous avez déjà une ligne de jquery-min dans le <head> , ça pourrait faire un conflit

exemple de conflit :

<head>
<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery/jquery-1.7.2.min.js"></script>
</head>

Superbegood31 · February 15, 2013

Je n'ai pas de conflit...

Je m’aperçois également que la fonction thixbox ne fonctionne plus...

Christophe Boix · February 15, 2013

envoyez moi la source de votre page svp (control+u sous firefox), ici ou en privé si vous préférez

Superbegood31 · February 15, 2013

Je restaure ma boutique de dev avec celle en prod.

Et je vous joint la source en mp.

Encore merci pour votre aide.

Superbegood31 · February 15, 2013

MP envoyé avec la source

Superbegood31 · February 15, 2013

Vous pouvez arrêtez de vous prendre la tête cela a fonctionné !

A mon avis il s'agissait d'un module exotique !

Je finis de tester et je le mets en place sur la boutique en prod (url de ma signature).

Je vous tiens au courant et encore un grand merci !!!

Superbegood31 · February 15, 2013

Voici l'url

Cela fait quand même mieux avec ce petit calendrier...

Encore merci pour votre aide !!!

Superbegood31 · February 15, 2013

Petite question si je peux me permettre :

Toujours du côté de la personnalisation de produit, je compte ajouter un champ fichier et je souhaiterai que ce champs n'apparaisse que si une valeur précise est sélectionnée dans les déclinaisons.

Merci d'avance.

Christophe Boix · February 15, 2013

ah ok je viens de finir d'éplucher la source, tant mieux si ça fonctionne

Dans le select de chaque déclinaison, il ya un petit script sur le onchange, il faudrait rajouter une fonction en + :


<select ... onchange="findCombination();getProductAttribute();$('#wrapResetImages').show('slow');checkPersonnalisation(this.value);">

puis faire écrire une fonction dans une balise script ou dans product.js, voici un exemple :

function checkPersonnalisation(variable){
 if(variable=="toto"){
   $('#ladiv').show();
 }else{   
   $('#ladiv').hide();
 }
}

Superbegood31 · February 15, 2013

Voici je que j'ai dans mon select :

    <select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="attribute_select" onchange="findCombination();getProductAttribute();{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">

Le "toto" doit être la valeur exacte de la valeur du select ?

Le "#ladiv" doit être par exemple idTab10 ?

Merci pour vos lumières

Christophe Boix · February 15, 2013

oui c'est ça pour toto et #ladiv

mais il faudra faire évoluer ce script, et par exemple afficher l'onglet si il est masqué et le faire cliquer l'onglet si celui-ci n'est pas cliqué

Superbegood31 · February 15, 2013

En fait ce n'est pas l'onglet personnalisation que je souhaite masqué mais juste le champs et ses informations en lui même.

Superbegood31 · February 15, 2013

Voici ce que j'ai mis dans product.js :

// Cache upload fichier
function checkPersonnalisation(id_attribute){
 if(id_attribute=="63"){
   $('#attributes select').hide();
 }
}

Et dans le select de product.tpl :

    <select name="{$groupName}" id="group_{$id_attribute_group|intval}" class="attribute_select" onchange="findCombination();getProductAttribute();checkPersonnalisation(this.value);{if $colors|@count > 0}$('#wrapResetImages').show('slow');{/if}">

Mais cela me fait planter la page ...

Christophe Boix · February 15, 2013

la fonction est-elle dans un $(document).ready(function(){ ?

Si oui, il faut la sortir pour la mettre soit à la fin du fichier product.js, soit au début

Superbegood31 · February 15, 2013

j'ai mis la fonction checkPersonnalisation tout à la fin de product.js

Christophe Boix · February 15, 2013

puis-je avoir l'url de la page svp? dur de savoir d'où ça vient sans voir le code

Superbegood31 · February 15, 2013

Lorsque je veux faire une modification, je travaille sur un site en local. Donc pas possible de vous transmettre l'url. Désolé.

Quels sources avez-vous besoin ?

Superbegood31 · February 15, 2013

J'arrive à ne pas afficher la div "champ fichier" avec un simple if mais pas à la faire apparaître lorsque l'on modifie la déclinaison...

Christophe Boix · February 16, 2013

vous pouvez publier sur votre site comme vous l'aviez fait ?

ou alors montrez moi le script avec la div champ de fichier

Superbegood31 · February 16, 2013

Bonjour,

Voici la div en question de product.tpl :

<div class="customizableProductsFile">
 <h3>{l s='Pictures'}</h3>
 <ul id="uploadable_files" class="clearfix">
  {counter start=0 assign='customizationField'}
  {foreach from=$customizationFields item='field' name='customizationFields'}
   {if $field.type == 0}
    <li class="customizationUploadLine{if $field.required} required{/if}">{assign var='key' value='pictures_'|cat:$product->id|cat:'_'|cat:$field.id_customization_field}
	 {if isset($pictures.$key)}
	 <div class="customizationUploadBrowse">
	  <img src="{$pic_dir}{$pictures.$key}_small" alt="" />
	  <a href="{$link->getProductDeletePictureLink($product, $field.id_customization_field)}" title="{l s='Delete'}" >
	   <img src="{$img_dir}icon/delete.gif" alt="{l s='Delete'}" class="customization_delete_icon" width="11" height="13" />
	  </a>
	 </div>
	 {/if}
	 <div class="customizationUploadBrowse">
	  <label class="customizationUploadBrowseDescription">{if !empty($field.name)}{$field.name}{else}{l s='Please select an image file from your hard drive'}{/if}{if $field.required}<sup>*</sup>{/if}</label>
	  <input type="file" name="file{$field.id_customization_field}" id="img{$customizationField}" class="customization_block_input {if isset($pictures.$key)}filled{/if}" />
	  {if $product->uploadable_files}<br /><span style="color:#999999; margin-left:195px">{l s='Allowed file formats are: GIF, JPG, PNG'}</span>{/if}
	 </div>
    </li>
    {counter}
   {/if}
  {/foreach}
 </ul>
   </div>

Christophe Boix · February 16, 2013

J'arrive à ne pas afficher la div "champ fichier" avec un simple if mais pas à la faire apparaître lorsque l'on modifie la déclinaison...

De quelle manière arrivez-vous à ne pas afficher la div ? Est-ce un script en javascript/jquery, ou un {if} avec smarty ?

Superbegood31 · February 16, 2013

Le if n'a rien donné de correct.

Voici où j'en suis :

ID "cache" de la div

<div id="cache" class="customizableProductsFile">

Fonction javascript

// Cache upload fichier
function checkPersonnalisation(attribute){
 if(attribute=="A ne pas fournir"){
   $('#cache').hide();
 }
 else{  
   $('#cache').show();
 }
}

Résultats :

- la div apparait lorsqu'on clique sur la liste déroulante de déclinaisons

- mais ne disparait pas lorsqu'on sélectionne l'aitre valeur (il y en à 2)

Pour faire court, la liste déroulante a comme valeur oui et non (par exemple).

J'aimerai que si la valeur oui est sélectionnée alors la div "cache" apparraisse sinon pas de div "cache".

Superbegood31 · February 16, 2013

J'ai fini pour trouver la solution, la voici :

dans mon product.js

// Cache upload fichier
function checkPersonnalisation(nomSelect,elem){
if (nomSelect=="group_6")
 if (elem.value==["62"]) {
   $('#cache').hide();
 }
 else if (nomSelect=="group_6")
 if (elem.value==["63"]) {
   $('#cache').show();
 }
 else{  
   $('#cache').show();
 }
}

Et dans mon select

checkPersonnalisation('group_6',this)

Un grand merci !!!

Christophe Boix · February 17, 2013

Bonjour, ok super

Inclure La Fonction Datepicker Dans Un Template En Fo

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment