[Smarty] Smarty et Javascript
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:
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:
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:
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
