[Smarty] Smarty et Javascript

**debie1108** · 02/05/2007, 05h41

Bonjour,

Encore un petit soucis avec Smarty. Pas facile quand on débute !!

Voila ce qu'il se passe. Je suis sur la page de détail d'un produit. J'ai une liste déroulante couleur, et une liste déroulante taille.
A chaque changement de la liste taille, je vérifie que couleur à une valeur et je recharge ma page afin d'aller chercher si ce produit est en stock ou pas.

Le problème c'est que c'est assez long, et très ennuyant pour le client. J'imagine si je devais changer 4 ou 5 fois de valeur pour un produit et qu'a chaque fois je doivent attendre le chargement de la page ! Bref !

L'idée est de remplir un tableau au premier appel de la page grâce à Javascript, un tableau 2d avec en ligne les couleurs et en colonne les tailles. Lors d'un changement, on appelle juste une fonction javascript qui affiche la dispo pour telle ligne et telle colonne.

Bon, je ne suis pas très douée en javascript et en plus, je ne sais pas comment l'intégrer avec smarty...

Voila ce que j'ai fait et qui ne marche pas du tout

Fichier xcp_grid.tpl appelé depuis ma page produit :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
{if $mod eq "amount"}
{literal}
<script type="text/javascript">
 
var optionsArray = [];
var row = 0;
var col = 0;
 
</script>
{/literal}
 
{include file="modules/Product_Options/check_options.tpl"}
{assign var="wla" value="N"}
<br>
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
  <TR>
    <TD>
{***Affichage de la liste déroulante des couleurs***}
{foreach item=zv from=$xcp_grid_color}
 {if $product_color eq ""}
  {assign var="product_color" value=$zv}
 {/if}
 {if $product_color eq $zv}
  {if $xcp_display_grid ne "3" and $xcp_display_grid ne "4"}
 
{literal}
 
<select name="color" size="1"> {/literal}
<OPTION {if $smarty.get.page eq "1"} selected {/if}VALUE="selectColor">Select Color
        {foreach from=$xcp_colorimages item=v}
         <option {if $v.alt eq $product_color and $smarty.get.page ne "1"} selected {/if} value="product.php?productid={$product.productid}&product_color={$v.alt}">{$v.alt}
        {/foreach}
</select>
 
  {/if}
 
    {*******************************************************}
    {* CAL: We have coded this in an easy to understand    *}
    {*      manner, so a lot of users can modify if needed *}
    {*      Basically, the grid will show a maximum of 24  *}
    {*      sizes, at a maximum of 8 sizes per table.      *}
    {*      Each table will follow the previous.           *}
    {*******************************************************}
    {assign var="xcp_tot_tbl_cols" value=0}
    {foreach item=xv from=$xcp_grid_column}
     {math equation="x+1" x=$xcp_tot_tbl_cols assign="xcp_tot_tbl_cols"}
    {/foreach}
    {assign var="gs1" value=0}
    {assign var="ge1" value=0}
    {assign var="gs2" value=0}
    {assign var="ge2" value=0}
    {assign var="gs3" value=0}
    {assign var="ge3" value=0}
    {if $xcp_tot_tbl_cols ge 0 and $xcp_tot_tbl_cols le 8}
     {assign var="gs1" value=1}
     {assign var="ge1" value=$xcp_tot_tbl_cols}
     {assign var="gs2" value=0}
     {assign var="ge2" value=0}
     {assign var="gs3" value=0}
     {assign var="ge3" value=0}
    {elseif $xcp_tot_tbl_cols eq 9 || $xcp_tot_tbl_cols eq 10}
     {assign var="gs1" value=1}
     {assign var="ge1" value=5}
     {assign var="gs2" value=6}
     {assign var="ge2" value=$xcp_tot_tbl_cols}
     {assign var="gs3" value=0}
     {assign var="ge3" value=0}
    {elseif $xcp_tot_tbl_cols eq "11" || $xcp_tot_tbl_cols eq "12"}
     {assign var="gs1" value=1}
     {assign var="ge1" value=6}
     {assign var="gs2" value=7}
     {assign var="ge2" value=$xcp_tot_tbl_cols}
     {assign var="gs3" value=0}
     {assign var="ge3" value=0}
    {elseif $xcp_tot_tbl_cols eq "13" || $xcp_tot_tbl_cols eq "14"}
     {assign var="gs1" value=1}
     {assign var="ge1" value=7}
     {assign var="gs2" value=8}
     {assign var="ge2" value=$xcp_tot_tbl_cols}
     {assign var="gs3" value=0}
     {assign var="ge3" value=0}
    {elseif $xcp_tot_tbl_cols eq "15" || $xcp_tot_tbl_cols eq "16"}
     {assign var="gs1" value=1}
     {assign var="ge1" value=8}
     {assign var="gs2" value=9}
     {assign var="ge2" value=$xcp_tot_tbl_cols}
     {assign var="gs3" value=0}
     {assign var="ge3" value=0}
    {elseif $xcp_tot_tbl_cols eq "17" || $xcp_tot_tbl_cols eq "18"}
     {assign var="gs1" value=1}
     {assign var="ge1" value=6}
     {assign var="gs2" value=7}
     {assign var="ge2" value=12}
     {assign var="gs3" value=13}
     {assign var="ge3" value=$xcp_tot_tbl_cols}
    {elseif $xcp_tot_tbl_cols eq "19" || $xcp_tot_tbl_cols eq "20"}
     {assign var="gs1" value=1}
     {assign var="ge1" value=7}
     {assign var="gs2" value=8}
     {assign var="ge2" value=16}
     {assign var="gs3" value=17}
     {assign var="ge3" value=$xcp_tot_tbl_cols}
    {elseif $xcp_tot_tbl_cols eq "21" || $xcp_tot_tbl_cols eq "22"}
     {assign var="gs1" value=1}
     {assign var="ge1" value=8}
     {assign var="gs2" value=9}
     {assign var="ge2" value=16}
     {assign var="gs3" value=17}
     {assign var="ge3" value=$xcp_tot_tbl_cols}
    {elseif $xcp_tot_tbl_cols eq "23" || $xcp_tot_tbl_cols eq "24"}
     {assign var="gs1" value=1}
     {assign var="ge1" value=8}
     {assign var="gs2" value=9}
     {assign var="ge2" value=16}
     {assign var="gs3" value=17}
     {assign var="ge3" value=$xcp_tot_tbl_cols}
    {else}
     {assign var="gs1" value=1}
     {assign var="ge1" value=8}
     {assign var="gs2" value=9}
     {assign var="ge2" value=18}
     {assign var="gs3" value=19}
     {assign var="ge3" value=$xcp_tot_tbl_cols}
    {/if}
 
    {**********}
    {* LOOP 1 *}
    {**********}
{assign var="size" value=$smarty.get.size} 
 
 
    {if $ge1 ne 0}
 
       {assign var="xcp_tbl_col" value=0}
{***Affichage de la liste déroulante des tailles*}
{literal}
<select name="size" onclick="check_options()" onchange="if(form.color.selectedIndex == 0) {alert('You must select a color')} else {if(form.size.selectedIndex != 0){location = options[selectedIndex].value}}" size="1"> {/literal}
<OPTION {if $size eq ""} selected {/if}VALUE="selectSize">Select Size
       {foreach item=xv from=$xcp_grid_column}
        {math equation="x+1" x=$xcp_tbl_col assign="xcp_tbl_col"}
        {if $xcp_tbl_col ge $gs1 and $xcp_tbl_col le $ge1}
         <option {if $xv eq $size} selected {/if} value="product.php?productid={$product.productid}&product_color={$product_color}&size={$xv}">{$xv}
         {if $login ne "" and $wla eq "Y" }{/if}
        {/if}
       {/foreach}
     </select>
</td><td>
{*** recherche de la disponibilité***}
      {foreach item=yv from=$xcp_grid_row}
       {if $yv eq "size"}{else}{$yv}{/if}
        {assign var="xcp_tbl_col" value=0}
        {foreach item=xv from=$xcp_grid_column}
         {math equation="x+1" x=$xcp_tbl_col assign="xcp_tbl_col"}
         {if $xcp_tbl_col ge $gs1 and $xcp_tbl_col le $ge1}
        {*** Pour chaque taille de chaque couleur j'appelle ce fichier***}
{include file="modules/Product_Options/xcp_grid_status.tpl"}{/if}
 
         <script type="text/javascript">
     {**incrémentation de l'index colonne*}
             col=col+1;
 
         </script>
        {/foreach}
          <script type="text/javascript">
        {***incrémetation de l'index ligne***}
              row=row+1;
 
          </script>
      {/foreach}
 
    {/if}
</td>
 
{literal}
<script type="text/javascript">
{***Test d'affichage***}
alert("tableau : "+optionsArray [0][0]);
 
</script>
{/literal}
{/if}
{/foreach}
 
  </TR>

Fichier xcp_grid_status.tpl :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
 
<script type="text/javascript">
 
 
          {if $xcp_grid.$zv.$yv.$xv.exception eq 1}
           <b>optionsArray [row][col] = "Unavailable";</b>
          {elseif $product.limited_stock eq "Y" and $xcp_grid.$zv.$yv.$xv.avail gt 0}
           <b>optionsArray [row][col] = "Limited Stock";</b> 
 
          {elseif $product.temp_unavail eq "Y" and $xcp_grid.$zv.$yv.$xv.avail le 0}
            <b>optionsArray [row][col][{$xcp_grid_column}] = "Temporarily Unavailable";</b> 
          {elseif $xcp_grid.$zv.$yv.$xv.product_temp_unavail eq "Y" and $xcp_grid.$zv.$yv.$xv.avail le 0}
          <b>optionsArray [row][col] = "Temporarily Unavailable";</b> 
          {elseif $xcp_grid.$zv.$yv.$xv.avail le $product.low_avail_limit and $xcp_grid.$zv.$yv.$xv.avail gt 0}
           <b>optionsArray [row][col] = "Low Stock";</b> 
 
          {elseif $xcp_grid.$zv.$yv.$xv.avail gt 0}
	     optionsArray [row][col] = "In Stock";</b> 
          {elseif $xcp_grid.$zv.$yv.$xv.weeks eq 1}
          <b>optionsArray [row][col] = "On Order <br>(Stock due in 1 week)";
          {elseif $xcp_grid.$zv.$yv.$xv.weeks eq 2}
           <b>optionsArray [row][col]= "On Order <br>(Stock due in 2 weeks)";
          {elseif $xcp_grid.$zv.$yv.$xv.weeks eq 3}
           <b>optionsArray [row][col] = "On Order <br>(Stock due in 3 weeks)";
          {elseif $xcp_grid.$zv.$yv.$xv.weeks eq 4}
           <b>optionsArray [row][col] = "On Order <br>(Stock due in 4 weeks)";
          {elseif $xcp_grid.$zv.$yv.$xv.weeks eq 5}
           <b>optionsArray [row][col] = "On Order <br>(Stock due in 5 weeks)";
          {elseif $xcp_grid.$zv.$yv.$xv.weeks eq 6}
          <b>optionsArray [row][col] = "On Order <br>(Stock due in 6 weeks)";
          {elseif $xcp_grid.$zv.$yv.$xv.weeks eq 7}
           <b>optionsArray [row][col] = "On Order <br>(Stock due in 7 weeks)";
          {elseif $xcp_grid.$zv.$yv.$xv.weeks eq 8}
           <b>optionsArray [row][col] = "On Order <br>(Stock due in 8 weeks)";
          {elseif $xcp_grid.$zv.$yv.$xv.weeks gt 8}
          <b>optionsArray [row][col] = "On Order <br>(Stock due in 9 or more weeks)";
          {elseif $product.temp_unavail ne "Y" and $xcp_grid.$zv.$yv.$xv.avail le 0 and $product.restock_days gt 0}
           <b>optionsArray [row][col]= "Order Now<br> (Dispatched within {$product.restock_days} days)";
          {else}
          <b>optionsArray [row][col] = "Out of Stock";</b>
          {/if}
 
</script>

Ce qui me génère la page suivante : (code source)

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
<script type="text/javascript">
 
var optionsArray = [];
var row = 0;
var col = 0;
 
</script>
<TABLE border="0" cellpadding="0" cellspacing="0" width="100%">
  <TR>
    <TD>
 
<select name="color" size="1"> 
<OPTION VALUE="selectColor">Select Color
                 <option  selected  value="product.php?productid=49&product_color=Lagoon">Lagoon
                 <option  value="product.php?productid=49&product_color=Wineberry">Wineberry
                 <option  value="product.php?productid=49&product_color=Steel">Steel
                 <option  value="product.php?productid=49&product_color=Spice">Spice
        </select>
 
 
<select name="size" onclick="check_options()" onchange="if(form.color.selectedIndex == 0) {alert('You must select a color')} else {if(form.size.selectedIndex != 0){location = options[selectedIndex].value}}" size="1"> 
<OPTION VALUE="selectSize">Select Size
 
                 <option  selected  value="product.php?productid=49&product_color=Lagoon&size=XS">XS
 
                 <option  value="product.php?productid=49&product_color=Lagoon&size=S">S
 
                 <option  value="product.php?productid=49&product_color=Lagoon&size=M">M
 
                 <option  value="product.php?productid=49&product_color=Lagoon&size=L">L
 
                 <option  value="product.php?productid=49&product_color=Lagoon&size=XL">XL
 
                 <option  value="product.php?productid=49&product_color=Lagoon&size=XXL">XXL
                             </select>
 
</td><td>
 
<script type="text/javascript">
 
                     <b>optionsArray [row][col]= "Order Now<br> (Dispatched within 7 days)";
 
</script>           
         <script type="text/javascript">
 
             col=col+1;
 
         </script>
 
 
 
<script type="text/javascript">
 
etc...

On dirait que le code javascript n'est pas interprété (affichage de <b>optionsArray [row][col]= "Order Now<br> (Dispatched within 7 days)"; au lieu de l'assignation....)

Pouvez-vous m'aider ?
Merci d'avance,
Deb

**debie1108** · 02/05/2007, 09h08

Re-Bonjour,

J'ai un peu avanacer dans mes investigations et j'arrive a gérer les variables row et col. Au liue de javascript, je les gère en smarty.

Mais il reste toujours ce problème. Le code javascript ne semble pas être interprété...

Voila le code source de la page :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<script type="text/javascript">
<!--
                     optionsArray [0][0] = "Low Stock"; 

          -->
</script>           
                              
                  
          
<script type="text/javascript">
<!--
          	     optionsArray [0][1] = "In Stock";
          -->
</script>           
                              
                  
          
<script type="text/javascript">
<!--
          	     optionsArray [0][2] = "In Stock";
          -->
</script>           
                              
                  
          
<script type="text/javascript">
<!--
          	     optionsArray [0][3] = "In Stock";
          -->
</script>           
                              
                  
          
<script type="text/javascript">
<!--
          	     optionsArray [0][4] = "In Stock";
          -->
</script>           
                              
                  
          
<script type="text/javascript">
<!--
          	     optionsArray [0][5] = "In Stock";
          -->
</script>           
                                         
    </td>


<script type="text/javascript">
<!--
alert("tableau : "+optionsArray [0][0]);
-->
</script>

Quand je veut l'afficher, il me dit que : optionsArray[0] has no properties....
Please Help !

Merci,
Deb

**eric.pommereau** · 02/05/2007, 17h08

Bonjour debbie

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

optionsArray [0][0] = "Low Stock";

L'espace entre la varaible (optionsArray) et les indices ([0][0]) est normal ?

**eric.pommereau** · 02/05/2007, 17h21

Re ...

J'ai vérifié mon histoire d'espaces ... c'est pas ça ...

En revanche il faut pour chaque dimension de ton tableau déclarer un Array()... un petit exemple qui marche:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--
	var option_value = Array();
   option_value [0] = Array();
   option_value [0][0] = "cdfmlk";
 
//-->
</script>
 
</head>
<body>
	<script language="JavaScript" type="text/javascript">
   <!--
		alert(option_value[0][0]);   
		// Affiche 'cdfmlk'
   //-->
   </script>
 
 
</body>
</html>

En espérant que ce soit ça !!

@++

**debie1108** · 03/05/2007, 02h39

Oui c'était bien ca !

Merci beaucoup !

Deb

[Smarty] Smarty et Javascript

Bibliothèques et frameworks PHP

Vue hybride

Discussions similaires

Partager

Partager