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

Revision 21085, 17.9 KB checked in by 468, 13 years ago (diff)

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