source: branches/version-2_11-dev/data/Smarty/templates/sphone/products/detail.tpl @ 21050

Revision 21050, 18.8 KB checked in by 468, 13 years ago (diff)

#1413 スマートフォン版テンプレートファイル変更（HTML5対応）
  • Property svn:eol-style set to LF
  • Property svn:keywords set to Id
  • 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-2011 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" src="<!--{$smarty.const.ROOT_URLPATH}-->js/products.js"></script>
23<script src="<!--{$TPL_URLPATH}-->js/jquery.flickslide.js"></script>
24<script type="text/javascript">//<![CDATA[
25// 規格2に選択肢を割り当てる。
26function fnSetClassCategories(form, classcat_id2_selected) {
27    var $form = $(form);
28    var product_id = $form.find('input[name=product_id]').val();
29    var $sele1 = $form.find('select[name=classcategory_id1]');
30    var $sele2 = $form.find('select[name=classcategory_id2]');
31    setClassCategories($form, product_id, $sele1, $sele2, classcat_id2_selected);
32}
33$(function(){
34    $('#detailphotoblock ul li').flickSlide({target:'#detailphotoblock>ul', duration:5000});
35    $('#whobought_area ul li').flickSlide({target:'#whobought_area>ul', duration:5000});
36    //サブエリアとお勧めエリアを非表示にする（初期値）
37    $("#sub_area").hide();
38    $("#whobought_area").hide();
39});
40//サブエリアの表示/非表示
41var speed = 1000; //表示アニメのスピード（ミリ秒）
42var stateSub = 1;
43function fnSubToggle(areaEl, imgEl) {
44    areaEl.toggle(speed);
45    if (stateSub == 0) {
46        $(imgEl).attr("src", "<!--{$TPL_URLPATH}-->img/common/btn_plus.png");
47        stateSub = 1;
48    } else {
49        $(imgEl).attr("src", "<!--{$TPL_URLPATH}-->img/common/btn_minus.png");
50        stateSub = 0
51    }
52}
53//お勧めエリアの表示/非表示
54var statewhobought = 1;
55function fnWhoboughtToggle(areaEl, imgEl) {
56    areaEl.toggle(speed);
57    if (statewhobought == 0) {
58        $(imgEl).attr("src", "<!--{$TPL_URLPATH}-->img/common/btn_plus.png");
59        statewhobought = 1;
60    } else {
61        $(imgEl).attr("src", "<!--{$TPL_URLPATH}-->img/common/btn_minus.png");
62        statewhobought = 0
63    }
64}
65//]]>
66</script>
67
68<!--▼CONTENTS-->
69<section id="product_detail">
70
71<!--★タイトル★-->
72<h2 class="title"><!--{$tpl_subtitle|h}--></h2>
73<!--★画像★-->
74<div id="detailphotoblock" class="mainImageInit">
75    <ul>
76        <!--{assign var=key value="main_image"}-->
77        <li id="mainImage0">
78        <!--{if $arrProduct.main_large_image|strlen >= 1}-->
79            <a rel="lightbox" data-ajax="false" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->">
80                <img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" alt="<!--{$arrProduct.name|h}-->" width="200" height="200" /></a>
81        <!--{else}-->
82            <img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" alt="<!--{$arrProduct.name|h}-->" width="200" height="200" />
83        <!--{/if}-->
84        </li>
85        <!--★サブ画像★-->
86        <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
87        <!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
88        <!--{if $arrProduct[$key] != ""}-->
89            <!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}-->
90            <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
91            <li id="mainImage<!--{$smarty.section.cnt.index+1}-->">
92              <a rel="lightbox" data-ajax="false" href="<!--{$arrFile[$key].filepath}-->">
93              <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="200" height="200" /></a>
94              </li>
95        <!--{/if}-->
96        <!--{/section}-->
97    </ul>
98</div>
99
100<section id="detailarea">
101
102<!--★詳細メインコメント★-->
103<p class="main_comment"><!--{$arrProduct.main_comment|nl2br_html}--></p>
104
105<div id="detailrightblock">
106    <!--▼商品ステータス-->
107    <!--{assign var=ps value=$productStatus[$smarty.get.product_id]}-->
108    <!--{if count($ps) > 0}-->
109        <ul class="status_icon">
110        <!--{foreach from=$ps item=status}-->
111            <li><!--{$arrSTATUS[$status]}--></li>
112        <!--{/foreach}-->
113        </ul>
114    <!--{/if}-->
115    <!--▲商品ステータス-->
116
117    <div class="product_detail">
118
119        <!--★ダウンロード販売★-->
120        <!--{if $arrProduct.down == 2}-->
121            <div><font color="red">本商品はダウンロード販売となります。<br /> 購入後はMYページの購入履歴からダウンロード可能です。</font></div><br />
122        <!--{/if}-->
123                   
124        <!--★商品名★-->
125        <h3 class="product_name"><!--{$arrProduct.name|h}--></h3>
126
127        <p class="product_code"><span class="mini">商品コード：</span>
128
129        <span id="product_code_default">
130        <!--{if $arrProduct.product_code_min == $arrProduct.product_code_max}-->
131            <!--{$arrProduct.product_code_min|h}-->
132        <!--{else}-->
133            <!--{$arrProduct.product_code_min|h}-->～<!--{$arrProduct.product_code_max|h}-->
134        <!--{/if}-->
135        </span><span id="product_code_dynamic"></span></p>
136
137        <!--★関連カテゴリ★-->
138        <p class="relative_cat"><span class="mini">関連カテゴリ：</span>
139        <!--{section name=r loop=$arrRelativeCat}-->
140            <!--{section name=s loop=$arrRelativeCat[r]}-->
141            <a rel="external" href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$arrRelativeCat[r][s].category_id}-->"><!--{$arrRelativeCat[r][s].category_name}--></a>
142            <!--{if !$smarty.section.s.last}--><!--{$smarty.const.SEPA_CATNAVI}--><!--{/if}-->
143            <!--{/section}--><br />
144        <!--{/section}-->
145        </p>
146
147        <!--★通常価格★-->
148        <!--{if $arrProduct.price01_max > 0}-->
149        <p class="normal_price">
150        <span class="mini"><!--{$smarty.const.NORMAL_PRICE_TITLE}-->(税込)：</span>
151        <span class="price">
152        <span id="price01_default">
153               <!--{if $arrProduct.price01_min == $arrProduct.price01_max}-->
154               <!--{$arrProduct.price01_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
155                 <!--{else}-->
156                   <!--{$arrProduct.price01_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->～<!--{$arrProduct.price01_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
157                    <!--{/if}-->
158        </span><span id="price01_dynamic"></span>円</span></p>
159        <!--{/if}-->
160
161        <!--★販売価格★-->
162        <p class="sale_price"><span class="mini"><!--{$smarty.const.SALE_PRICE_TITLE}-->(税込)：</span>
163        <span class="price"><span id="price02_default">
164                <!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
165                 <!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
166                   <!--{else}-->
167                     <!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->～<!--{$arrProduct.price02_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
168                       <!--{/if}-->
169        </span><span id="price02_dynamic"></span>円</span></p>
170
171
172        <!--★ポイント★-->
173        <!--{if $smarty.const.USE_POINT !== false}-->
174            <p class="sale_price"><span class="mini">ポイント：</span><span id="point_default">
175                   <!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
176                     <!--{$arrProduct.price02_min|sfPrePoint:$arrProduct.point_rate:$smarty.const.POINT_RULE:$arrProduct.product_id|number_format}-->
177                       <!--{else}-->
178                        <!--{if $arrProduct.price02_min|sfPrePoint:$arrProduct.point_rate:$smarty.const.POINT_RULE:$arrProduct.product_id == $arrProduct.price02_max|sfPrePoint:$arrProduct.point_rate:$smarty.const.POINT_RULE:$arrProduct.product_id}-->
179                          <!--{$arrProduct.price02_min|sfPrePoint:$arrProduct.point_rate:$smarty.const.POINT_RULE:$arrProduct.product_id|number_format}-->
180                            <!--{else}-->
181                              <!--{$arrProduct.price02_min|sfPrePoint:$arrProduct.point_rate:$smarty.const.POINT_RULE:$arrProduct.product_id|number_format}-->～<!--{$arrProduct.price02_max|sfPrePoint:$arrProduct.point_rate:$smarty.const.POINT_RULE:$arrProduct.product_id|number_format}-->
182                                <!--{/if}-->
183                                  <!--{/if}-->
184            </span><span id="point_dynamic">Pt</span></p>
185        <!--{/if}-->
186
187        <!--▼メーカーURL-->
188        <!--{if $arrProduct.comment1|strlen >= 1}-->
189        <p class="sale_price"><span class="mini">メーカーURL：</span><span>
190            <a rel="external" href="<!--{$arrProduct.comment1|h}-->">
191                <!--{$arrProduct.comment1|h}--></a>
192        </span></p>
193        <!--{/if}-->
194        <!--▲メーカーURL-->
195     </div>
196
197    <form name="form1" id="form1" method="post" action="<!--{$smarty.const.ROOT_URLPATH}-->products/detail.php">
198        <input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
199        <input type="hidden" name="mode" value="cart" />
200        <input type="hidden" name="product_id" value="<!--{$tpl_product_id}-->" />
201        <input type="hidden" name="product_class_id" value="<!--{$tpl_product_class_id}-->" id="product_class_id" />
202        <input type="hidden" name="favorite_product_id" value="" />
203       
204        <!--▼買い物かご-->
205        <!--{if $tpl_stock_find}-->
206   
207            <!--{if $tpl_classcat_find1}-->
208                <div class="cart_area">
209                     <dl>
210                        <!--▼規格1-->
211                        <dt><!--{$tpl_class_name1|h}--></dt>
212                        <dd>
213                        <select name="classcategory_id1"
214                            style="<!--{$arrErr.classcategory_id1|sfGetErrorColor}-->"
215                            onchange="fnSetClassCategories(this.form);"
216                            class="data-role-none">
217                            <!--{html_options options=$arrClassCat1 selected=$arrForm.classcategory_id1.value}-->
218                        </select>
219                        <!--{if $arrErr.classcategory_id1 != ""}-->
220                            <br /><span class="attention">※ <!--{$tpl_class_name1}-->を入力して下さい。</span>
221                        <!--{/if}-->
222                        </dd>
223                        <!--▲規格1-->
224            <!--{/if}-->
225
226            <!--{if $tpl_classcat_find2}-->
227                        <!--▼規格2-->
228                        <dt><!--{$tpl_class_name2|h}--></dt>
229                        <dd>
230                        <select name="classcategory_id2"
231                            style="<!--{$arrErr.classcategory_id2|sfGetErrorColor}-->"
232                            onchange="fnCheckStock(this.form);"
233                            class="data-role-none">
234                        </select>
235                        <!--{if $arrErr.classcategory_id2 != ""}-->
236                            <br /><span class="attention">※ <!--{$tpl_class_name2}-->を入力して下さい。</span>
237                        <!--{/if}-->
238                        </dd>
239                        <!--▲規格2-->
240                     </dl>
241                  </div>
242            <!--{/if}-->
243               
244            <div class="cartin_btn">
245                <dl class="">
246                    <dt>数量</dt>
247                    <dd>
248                        <input type="number" name="quantity" class="quantitybox" value="<!--{$arrForm.quantity.value|default:1|h}-->" maxlength="<!--{$smarty.const.INT_LEN}-->" style="<!--{$arrErr.quantity|sfGetErrorColor}-->" />
249                        <!--{if $arrErr.quantity != ""}-->
250                            <br /><span class="attention"><!--{$arrErr.quantity}--></span>
251                        <!--{/if}-->
252                    </dd>
253                </dl>
254        <!--{else}-->
255            <div class="cartin_btn">
256        <!--{/if}-->
257
258        <!--★カートに入れる★-->
259        <!--{if $tpl_stock_find}-->
260            <a rel="external" href="javascript:void(document.form1.submit());" class="btn cartbtn_default">カートに入れる</a>
261        <!--{else}-->
262            <div class="attention">申し訳ございませんが、只今品切れ中です。</div>
263        <!--{/if}-->
264        </div>
265        <!--▲買い物かご-->
266
267        <!--{if $tpl_login}-->
268            <!--{if !$is_favorite}-->
269                <div class="btn_favorite">
270                    <p><a rel="external" href="javascript:void(0);" onclick="fnAddFavoriteSphone(<!--{$arrProduct.product_id|h}-->); return false;" class="btn_sub">お気に入りに追加</a></p>
271                </div>
272            <!--{else}-->
273                <div class="btn_favorite">
274                    <p class="btn_sub">お気に入り登録済</p>
275                </div>
276            <!--{/if}-->
277        <!--{/if}-->
278
279    </form>
280</div>
281</section>
282<!--詳細ここまで-->
283
284<!--▼サブエリアここから-->
285<!--{if $arrProduct[$key] != ""}-->
286  <div class="title_box_sub clearfix">
287    <h2>商品情報</h2>
288     <!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->
289      <span class="b_expand"><img src="<!--{$TPL_URLPATH}-->img/common/btn_plus.png" onClick="fnSubToggle($('#sub_area'), this);"></span>
290       </div>
291    <div id="sub_area">
292        <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
293            <!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
294            <!--▼サブ情報-->
295           <div class="subarea clearfix">
296            <!--★サブタイトル★-->
297            <h3><!--{$arrProduct[$key]|h}--></h3>
298
299            <!--★サブ画像★-->
300            <!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}-->
301            <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
302            <!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->
303            <!--{if $arrProduct[$key]|strlen >= 1}-->
304                <p class="subphotoimg">
305                <!--{if $arrProduct[$lkey]|strlen >= 1}-->
306                    <a rel="external" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" target="_blank">
307                    <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="80" height="80" />
308                    </a>
309                <!--{else}-->
310                    <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="80" height="80" />
311                <!--{/if}-->
312                </p>
313            <!--{/if}-->
314            <!--★サブテキスト★-->
315            <p class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></p>
316            </div>
317        <!--{/section}-->
318    </div>
319<!--{/if}-->
320<!--サブエリアここまで-->
321
322
323<!--▼その他おすすめ商品-->
324<!--{if $arrRecommend}-->
325<div class="title_box_sub clearfix">
326  <h2>その他のオススメ商品</h2>
327     <span class="b_expand"><img src="<!--{$TPL_URLPATH}-->img/common/btn_plus.png" onClick="fnWhoboughtToggle($('#whobought_area'), this);"></span>
328      </div>
329 
330  <div id="whobought_area" class="mainImageInit">
331
332    <ul>
333    <!--{section name=cnt loop=$arrRecommend}-->
334        <!--{if ($smarty.section.cnt.index % 2) == 0}-->
335        <!--{if $arrRecommend[cnt].product_id}-->
336        <!-- 左列 -->
337   
338          <li id="mainImage0"><a rel="external" href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrRecommend[cnt].product_id|u}-->">
339          <a href="#">
340          <img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrRecommend[cnt].main_list_image|sfNoImageMainList|h}-->&amp;width=65&amp;height=65" width="80" height="80" alt="<!--{$arrRecommend[cnt].name|h}-->" /></a>
341             <!--{assign var=price02_min value=`$arrRecommend[cnt].price02_min`}-->
342             <!--{assign var=price02_max value=`$arrRecommend[cnt].price02_max`}-->
343             <h3><a rel="external" href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrRecommend[cnt].product_id|u}-->"><!--{$arrRecommend[cnt].name|h}--></a></h3>
344              <p class="sale_price"><span class="price">
345              <!--{if $price02_min == $price02_max}-->
346                   <!--{$price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
347              <!--{else}-->
348                   <!--{$price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->～<!--{$price02_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
349              <!--{/if}-->
350               円</span></p>
351          </a></li>
352               
353         <!-- 左列 -->
354         <!--{/if}-->
355         <!--{/if}-->
356
357         <!--{if ($smarty.section.cnt.index % 2) != 0}-->
358         <!--{if $arrRecommend[cnt].product_id}-->
359         <!-- 右列 -->
360               
361         <li id="mainImage0"><a rel="external" href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrRecommend[cnt].product_id|u}-->">
362          <a href="#">
363          <img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrRecommend[cnt].main_list_image|sfNoImageMainList|h}-->&amp;width=65&amp;height=65" width="80" height="80" alt="<!--{$arrRecommend[cnt].name|h}-->" /></a>
364             <h3><a rel="external" href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrRecommend[cnt].product_id|u}-->"><!--{$arrRecommend[cnt].name|h}--></a></h3>
365              <p class="sale_price"><span class="price">
366              <!--{if $price02_min == $price02_max}-->
367                <!--{$price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
368              <!--{else}-->
369                <!--{$price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->～<!--{$price02_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
370              <!--{/if}-->
371              </span></p>
372                </a></li>
373               
374          <!-- 右列 -->
375          <!--{/if}-->
376          <!--{/if}-->
377    <!--{/section}-->
378               
379    </ul>
380</div>
381<!--{/if}-->
382
383<!--▲その他おすすめ商品-->
384
385<p><a href="javascript:void(0);" class="btn_more" data-rel="back">商品一覧に戻る</a></p>
386
387</section>
388<!--▲CONTENTS-->
Note: See TracBrowser for help on using the repository browser.