source: branches/comu-ver2/data/Smarty/templates/default/list.tpl @ 18277

Revision 18277, 17.1 KB checked in by Seasoft, 15 years ago (diff)
  • 商品規格プルダウンに品切れを表示
  • 商品規格プルダウンの選択によって、関連項目を動的に更新

関連URL:  http://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=3463&forum=10

  • 商品一覧と商品詳細のテンプレートをコードレベルで出来るだけ揃えた
  • 不要な処理を削除
  • Property svn:eol-style set to LF
  • Property svn:mime-type set to text/x-smarty-template; charset=UTF-8
Line 
1<!--{*
2 * This file is part of EC-CUBE
3 *
4 * Copyright(c) 2000-2007 LOCKON CO.,LTD. All Rights Reserved.
5 *
6 * http://www.lockon.co.jp/
7 *
8 * This program is free software; you can redistribute it and/or
9 * modify it under the terms of the GNU General Public License
10 * as published by the Free Software Foundation; either version 2
11 * of the License, or (at your option) any later version.
12 *
13 * This program is distributed in the hope that it will be useful,
14 * but WITHOUT ANY WARRANTY; without even the implied warranty of
15 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
16 * GNU General Public License for more details.
17 *
18 * You should have received a copy of the GNU General Public License
19 * along with this program; if not, write to the Free Software
20 * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA  02111-1307, USA.
21 *}-->
22<script type="text/javascript">//<![CDATA[
23// 規格2に選択肢を割り当てる。
24function fnSetClassCategories(form, classcat_id2_selected) {
25    sele1 = form.classcategory_id1;
26    sele2 = form.classcategory_id2;
27    product_id = form.product_id.value;
28
29    if (sele1) {
30        if (sele2) {
31            // 規格2の選択肢をクリア
32            count = sele2.options.length;
33            for(i = count; i >= 0; i--) {
34                sele2.options[i] = null;
35            }
36           
37            // 規格2に選択肢を割り当てる
38            classcats = productsClassCategories[product_id][sele1.value];
39            i = 0;
40            for (var classcat_id2_key in classcats) {
41                sele2.options[i] = new Option(classcats[classcat_id2_key].name, classcat_id2_key);
42                if (classcat_id2_key == classcat_id2_selected) {
43                    sele2.options[i].selected = true;
44                }
45                i++;
46            }
47        }
48        fnCheckStock(form);
49    }
50}
51// 並び順を変更
52function fnChangeOrderby(orderby) {
53    fnSetVal('orderby', orderby);
54    fnSetVal('pageno', 1);
55    fnSubmit();
56}
57// 表示件数を変更
58function fnChangeDispNumber(dispNumber) {
59    fnSetVal('disp_number', dispNumber);
60    fnSetVal('pageno', 1);
61    fnSubmit();
62}
63// カゴに入れる
64function fnInCart(productForm) {
65    var product_id = productForm["product_id"].value;
66    fnChangeAction("?#product" + product_id);
67    if (productForm["classcategory_id1"]) {
68        fnSetVal("classcategory_id1", productForm["classcategory_id1"].value);
69    }
70    if (productForm["classcategory_id2"]) {
71        fnSetVal("classcategory_id2", productForm["classcategory_id2"].value);
72    }
73    fnSetVal("quantity", productForm["quantity"].value);
74    fnSetVal("product_id", productForm["product_id"].value);
75    fnSubmit();
76}
77function fnCheckStock(form) {
78    product_id = form.product_id.value;
79    classcat_id1 = form.classcategory_id1.value;
80    classcat_id2 = form.classcategory_id2 ? form.classcategory_id2.value : 0;
81    classcat2 = productsClassCategories[product_id][classcat_id1][classcat_id2];
82   
83    // 在庫(品切れ)
84    eleDefault = document.getElementById('cartbtn_default_' + product_id);
85    eleDynamic = document.getElementById('cartbtn_dynamic_' + product_id);
86    if (
87           classcat2
88        && classcat2.stock_find === false
89    ) {
90        eleDefault.style.display = 'none';
91        eleDynamic.innerHTML = '申し訳ございませんが、只今品切れ中です。';
92    } else {
93        eleDefault.style.display = '';
94        eleDynamic.innerHTML = '';
95    }
96   
97    // 販売価格
98    eleDefault = document.getElementById('price02_default_' + product_id);
99    eleDynamic = document.getElementById('price02_dynamic_' + product_id);
100    if (
101           classcat2
102        && typeof classcat2.price02 != 'undefined'
103        && String(classcat2.price02).length >= 1
104    ) {
105        eleDefault.style.display = 'none';
106        eleDynamic.innerHTML = classcat2.price02;
107    } else {
108        eleDefault.style.display = '';
109        eleDynamic.innerHTML = '';
110    }
111}
112//]]>
113</script>
114
115<!--▼CONTENTS-->
116<div id="undercolumn" class="product product_list">
117    <form name="form1" id="form1" method="get" action="?">
118        <input type="hidden" name="mode" value="<!--{$mode|escape}-->" />
119        <!--{* ▼検索条件 *}-->
120        <input type="hidden" name="category_id" value="<!--{$arrSearchData.category_id|escape}-->" />
121        <input type="hidden" name="maker_id" value="<!--{$arrSearchData.maker_id|escape}-->" />
122        <input type="hidden" name="name" value="<!--{$arrSearchData.name|escape}-->" />
123        <!--{* ▲検索条件 *}-->
124        <!--{* ▼ページナビ関連 *}-->
125        <input type="hidden" name="orderby" value="<!--{$orderby|escape}-->" />
126        <input type="hidden" name="disp_number" value="<!--{$disp_number|escape}-->" />
127        <input type="hidden" name="pageno" value="<!--{$tpl_pageno|escape}-->" />
128        <!--{* ▲ページナビ関連 *}-->
129        <!--{* ▼注文関連 *}-->
130        <input type="hidden" name="product_id" value="" />
131        <input type="hidden" name="classcategory_id1" value="" />
132        <input type="hidden" name="classcategory_id2" value="" />
133        <input type="hidden" name="quantity" value="" />
134        <!--{* ▲注文関連 *}-->
135        <input type="hidden" name="rnd" value="<!--{$tpl_rnd|escape}-->" />
136    </form>
137   
138    <!--★タイトル★-->
139    <h2 class="title"><!--{$tpl_subtitle|escape}--></h2>
140   
141    <!--▼検索条件-->
142    <!--{if $tpl_subtitle == "検索結果"}-->
143        <ul class="pagecondarea">
144            <li><strong>商品カテゴリ：</strong><!--{$arrSearch.category|escape}--></li>
145        <!--{if $arrSearch.maker|strlen >= 1}--><li><strong>メーカー：</strong><!--{$arrSearch.maker|escape}--></li><!--{/if}-->
146            <li><strong>商品名：</strong><!--{$arrSearch.name|escape}--></li>
147        </ul>
148    <!--{/if}-->
149    <!--▲検索条件-->
150
151    <!--▼ページナビ(上部)-->
152    <form name="page_navi_top" id="page_navi_top" action="?">
153        <!--{if $tpl_linemax > 0}-->
154            <ul class="pagenumberarea">
155                <li class="left"><span class="pagenumber"><!--{$tpl_linemax}--></span>件の商品がございます。</li>
156                <li class="center"><!--{$tpl_strnavi}--></li>
157                <li class="right">
158                    <!--{if $orderby != 'price'}-->
159                        <a href="javascript:fnChangeOrderby('price');">価格順</a>
160                    <!--{else}-->
161                        <strong>価格順</strong>
162                    <!--{/if}-->&nbsp;
163                    <!--{if $orderby != "date"}-->
164                            <a href="javascript:fnChangeOrderby('date');">新着順</a>
165                    <!--{else}-->
166                        <strong>新着順</strong>
167                    <!--{/if}-->
168                    表示件数
169                    <select name="disp_number" onchange="javascript:fnChangeDispNumber(this.value);">
170                        <!--{foreach from=$arrPRODUCTLISTMAX item="dispnum" key="num"}-->
171                            <!--{if $num == $disp_number}-->
172                            <option value="<!--{$num}-->" selected="selected" ><!--{$dispnum}--></option>
173                            <!--{else}-->
174                            <option value="<!--{$num}-->" ><!--{$dispnum}--></option>
175                            <!--{/if}-->
176                        <!--{/foreach}-->
177                    </select>
178                </li>
179            </ul>
180        <!--{else}-->
181            <!--{include file="frontparts/search_zero.tpl"}-->
182        <!--{/if}-->
183    </form>
184    <!--▲ページナビ(上部)-->
185
186    <!--{foreach from=$arrProducts item=arrProduct}-->
187        <!--{assign var=id value=$arrProduct.product_id}-->
188        <!--{assign var=arrErr value=$arrProduct.arrErr}-->
189        <!--▼商品-->
190        <div class="listarea">
191        <a name="product<!--{$id|escape}-->" />
192            <div class="listphoto">
193                <!--★画像★-->
194            <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProduct.product_id}-->" class="over"><!--商品写真--><img src="<!--{$smarty.const.IMAGE_SAVE_URL|sfTrimURL}-->/<!--{$arrProduct.main_list_image|sfNoImageMainList|escape}-->" alt="<!--{$arrProduct.name|escape}-->" class="picture" /></a>
195            </div>
196           
197            <div class="listrightblock">
198                <!--▼商品ステータス-->
199                <!--{if count($arrProduct.product_flag) > 0}-->
200                    <ul class="status_icon">
201                        <!--{section name=flg loop=$arrProduct.product_flag|count_characters}-->
202                            <!--{if $arrProduct.product_flag[flg] == "1"}-->
203                                <li>
204                                    <!--{assign var=key value="`$smarty.section.flg.iteration`"}-->
205                                    <img src="<!--{$TPL_DIR}--><!--{$arrSTATUS_IMAGE[$key]}-->" width="65" height="17" alt="<!--{$arrSTATUS[$key]}-->"/>
206                                </li>
207                            <!--{/if}-->
208                        <!--{/section}-->
209                    </ul>
210                <!--{/if}-->
211                <!--▲商品ステータス-->
212               
213                <!--★商品名★-->
214                <h3>
215                    <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProduct.product_id}-->" name="product<!--{$arrProduct.product_id}-->"><!--{$arrProduct.name|escape}--></a>
216                </h3>
217               
218                <!--★コメント★-->
219                <p class="listcomment"><!--{$arrProduct.main_list_comment|escape|nl2br}--></p>
220               
221                <p>
222                    <span class="pricebox sale_price">
223                        <!--{$smarty.const.SALE_PRICE_TITLE}--><span class="mini">(税込)</span>：
224                        <span class="price">
225                            <span id="price02_default_<!--{$id}-->">
226                                <!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
227                                    <!--{$arrProduct.price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
228                                <!--{else}-->
229                                    <!--{$arrProduct.price02_min|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->～<!--{$arrProduct.price02_max|sfPreTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
230                                <!--{/if}-->
231                            </span><span id="price02_dynamic_<!--{$id}-->"></span>
232                            円</span>
233                    </span>
234                   
235                    <!--★詳細ボタン★-->
236                    <span class="btnbox">
237                    <!--{assign var=name value="detail`$id`"}-->
238                    <a href="<!--{$smarty.const.DETAIL_P_HTML}--><!--{$arrProduct.product_id}-->" onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_detail_on.gif','<!--{$name}-->');" onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_detail.gif','<!--{$name}-->');">
239                        <img src="<!--{$TPL_DIR}-->img/products/b_detail.gif" width="115" height="25" alt="詳しくはこちら" name="<!--{$name}-->" id="<!--{$name}-->" /></a>
240                    </span>
241                </p>
242
243                <!--▼買い物かご-->
244                <form name="product_form<!--{$id|escape}-->" action="?" onsubmit="return false;">
245                    <input type="hidden" name="product_id" value="<!--{$id|escape}-->" />
246                    <div class="in_cart">
247                        <!--{if $tpl_stock_find[$id]}-->
248                            <dl>
249                                <!--{if $tpl_classcat_find1[$id]}-->
250                                    <!--▼規格1-->
251                                    <dt><!--{$tpl_class_name1[$id]|escape}-->：</dt>
252                                    <dd>
253                                        <select name="classcategory_id1"
254                                            style="<!--{$arrErr.classcategory_id1|sfGetErrorColor}-->"
255                                            onchange="fnSetClassCategories(this.form);"
256                                        >
257                                            <!--{html_options options=$arrClassCat1[$id] selected=$arrProduct.classcategory_id1}-->
258                                        </select>
259                                        <!--{if $arrErr.classcategory_id1 != ""}-->
260                                            <br /><span class="attention">※ <!--{$tpl_class_name1[$id]}-->を入力して下さい。</span>
261                                        <!--{/if}-->
262                                    </dd>
263                                    <!--▲規格1-->
264                                <!--{/if}-->
265                                <!--{if $tpl_classcat_find2[$id]}-->
266                                    <!--▼規格2-->
267                                    <dt><!--{$tpl_class_name2[$id]|escape}-->：</dt>
268                                    <dd>
269                                        <select name="classcategory_id2"
270                                            style="<!--{$arrErr.classcategory_id2|sfGetErrorColor}-->"
271                                            onchange="fnCheckStock(this.form);"
272                                        >
273                                        </select>
274                                        <!--{if $arrErr.classcategory_id2 != ""}-->
275                                            <br /><span class="attention">※ <!--{$tpl_class_name2[$id]}-->を入力して下さい。</span>
276                                        <!--{/if}-->
277                                    </dd>
278                                    <!--▲規格2-->
279                                <!--{/if}-->
280
281                                <dt>数量：</dt>
282                                <dd>
283                                    <input type="text" name="quantity" class="box54" value="<!--{$arrProduct.quantity|default:1|escape}-->" maxlength="<!--{$smarty.const.INT_LEN}-->" style="<!--{$arrErr.quantity|sfGetErrorColor}-->" />
284                                    <!--{if $arrErr.quantity != ""}-->
285                                        <br /><span class="attention"><!--{$arrErr.quantity}--></span>
286                                    <!--{/if}-->
287                                </dd>
288                            </dl>
289                            <div class="cartbtn">
290                                <!--★カゴに入れる★-->
291                                <div id="cartbtn_default_<!--{$id}-->">
292                                    <input
293                                        type="image"
294                                        id="cart<!--{$id}-->"
295                                        src="<!--{$TPL_DIR}-->img/products/b_cartin.gif"
296                                        alt="カゴに入れる"
297                                        onclick="fnInCart(this.form); return false;"
298                                        onmouseover="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin_on.gif', this);"
299                                        onmouseout="chgImg('<!--{$TPL_DIR}-->img/products/b_cartin.gif', this);"
300                                    />
301                                </div>
302                                <div class="attention" id="cartbtn_dynamic_<!--{$id}-->"></div>
303                            </div>
304                        <!--{else}-->
305                            <div class="cartbtn attention">申し訳ございませんが、只今品切れ中です。</div>
306                        <!--{/if}-->
307                    </div>
308                </form>
309                <!--▲買い物かご-->
310               
311            </div>
312        </div>
313        <!--▲商品-->
314    <!--{/foreach}-->
315
316    <!--▼ページナビ(下部)-->
317    <form name="page_navi_bottom" id="page_navi_bottom" action="?">
318        <!--{if $tpl_linemax > 0}-->
319            <ul class="pagenumberarea">
320                <li class="left"><span class="pagenumber"><!--{$tpl_linemax}--></span>件の商品がございます。</li>
321                <li class="center"><!--{$tpl_strnavi}--></li>
322                <li class="right">
323                    <!--{if $orderby != 'price'}-->
324                        <a href="javascript:fnChangeOrderby('price');">価格順</a>
325                    <!--{else}-->
326                        <strong>価格順</strong>
327                    <!--{/if}-->&nbsp;
328                    <!--{if $orderby != "date"}-->
329                        <a href="javascript:fnChangeOrderby('date');">新着順</a>
330                    <!--{else}-->
331                        <strong>新着順</strong>
332                    <!--{/if}-->
333                     表示件数
334                    <select name="disp_number" onchange="javascript:fnChangeDispNumber(this.value);">
335                    <!--{foreach from=$arrPRODUCTLISTMAX item="dispnum" key="num"}-->
336                    <!--{if $num == $disp_number}-->
337                    <option value="<!--{$num}-->" selected="selected" ><!--{$dispnum}--></option>
338                    <!--{else}-->
339                    <option value="<!--{$num}-->" ><!--{$dispnum}--></option>
340                    <!--{/if}-->
341                <!--{/foreach}-->
342                    </select>
343                </li>
344            </ul>
345        <!--{/if}-->
346    </form>
347    <!--▲ページナビ(下部)-->
348</div>
349<!--▲CONTENTS-->
Note: See TracBrowser for help on using the repository browser.