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

Revision 23058, 23.6 KB checked in by pineray, 7 years ago (diff)

#2341 EC-CUBE独自のJSをまとめる
使用されていないスタイルを定義するcss.jsを削除.

  • 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-2013 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
23<script src="<!--{$TPL_URLPATH}-->js/jquery.facebox/facebox.js"></script>
24<script>//<![CDATA[
25    // 規格2に選択肢を割り当てる。
26    function 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, parentArea:'#detailphotoblock', height: 200});
35        $('#whobought_area ul li').flickSlide({target:'#whobought_area>ul', duration:5000, parentArea:'#whobought_area', height: 80});
36
37        //お勧め商品のリンクを張り直し(フリックスライドによるエレメント生成後)
38        $('#whobought_area li').biggerlink();
39        //商品画像の拡大
40        $('a.expansion').facebox({
41            loadingImage : '<!--{$TPL_URLPATH}-->js/jquery.facebox/loading.gif',
42            closeImage   : '<!--{$TPL_URLPATH}-->js/jquery.facebox/closelabel.png'
43        });
44    });
45    //サブエリアの表示/非表示
46    var speed = 500;
47    var stateSub = 0;
48    function fnSubToggle(areaEl, imgEl) {
49        areaEl.slideToggle(speed);
50        if (stateSub == 0) {
51            $(imgEl).attr("src", "<!--{$TPL_URLPATH}-->img/button/btn_plus.png");
52            stateSub = 1;
53        } else {
54            $(imgEl).attr("src", "<!--{$TPL_URLPATH}-->img/button/btn_minus.png");
55            stateSub = 0
56        }
57    }
58    //この商品に対するお客様の声エリアの表示/非表示
59    var stateReview = 0;
60    function fnReviewToggle(areaEl, imgEl) {
61        areaEl.slideToggle(speed);
62        if (stateReview == 0) {
63            $(imgEl).attr("src", "<!--{$TPL_URLPATH}-->img/button/btn_plus.png");
64            stateReview = 1;
65        } else {
66            $(imgEl).attr("src", "<!--{$TPL_URLPATH}-->img/button/btn_minus.png");
67            stateReview = 0
68        }
69    }
70    //お勧めエリアの表示/非表示
71    var statewhobought = 0;
72    function fnWhoboughtToggle(areaEl, imgEl) {
73        areaEl.slideToggle(speed);
74        if (statewhobought == 0) {
75            $(imgEl).attr("src", "<!--{$TPL_URLPATH}-->img/button/btn_plus.png");
76            statewhobought = 1;
77        } else {
78            $(imgEl).attr("src", "<!--{$TPL_URLPATH}-->img/button/btn_minus.png");
79            statewhobought = 0
80        }
81    }
82//]]></script>
83
84<section id="product_detail">
85
86    <!--★タイトル★-->
87    <h2 class="title"><!--{$tpl_subtitle|h}--></h2>
88    <!--★画像★-->
89
90    <div id="detailphotoblock" class="mainImageInit">
91        <ul>
92            <!--{assign var=key value="main_image"}-->
93            <li id="mainImage0">
94
95            <!--{* 画像の縦横倍率を算出 *}-->
96            <!--{assign var=detail_image_size value=200}-->
97            <!--{assign var=main_image_factor value=`$arrFile[$key].width/$detail_image_size`}-->
98            <!--{if $arrProduct.main_large_image|strlen >= 1}-->
99                <a rel="external" class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" target="_blank">
100                    <img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_image|h}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile.main_image.width/$main_image_factor}-->" height="<!--{$arrFile.main_image.height/$main_image_factor}-->" /></a>
101            <!--{else}-->
102                <img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_image|h}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile.main_image.width/$main_image_factor}-->" height="<!--{$arrFile.main_image.height/$main_image_factor}-->" />
103            <!--{/if}-->
104            </li>
105            <!--★サブ画像★-->
106            <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
107            <!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}-->
108            <!--{assign var=sub_image_factor value=`$arrFile[$key].width/$detail_image_size`}-->
109            <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
110            <!--{if $arrFile[$key].filepath != ""}-->
111                <li id="mainImage<!--{$smarty.section.cnt.index+1}-->">
112                <!--{if $arrProduct[$lkey] != ""}-->
113                    <a rel="external" class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" target="_blank">
114                    <img src="<!--{$arrFile[$key].filepath|h}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$key].width/$sub_image_factor}-->" height="<!--{$arrFile[$key].height/$sub_image_factor}-->" /></a>
115                <!--{else}-->
116                    <img src="<!--{$arrFile[$key].filepath|h}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$key].width/$sub_image_factor}-->" height="<!--{$arrFile[$key].height/$sub_image_factor}-->" />
117                <!--{/if}-->
118                </li>
119            <!--{/if}-->
120            <!--{/section}-->
121        </ul>
122    </div>
123
124    <section id="detailarea">
125
126        <!--★詳細メインコメント★-->
127        <p class="main_comment"><!--{$arrProduct.main_comment|nl2br_html}--></p>
128
129        <form name="form1" id="form1" method="post" action="<!--{$smarty.const.ROOT_URLPATH}-->products/detail.php">
130            <div id="detailrightblock">
131                <!--▼商品ステータス-->
132                <!--{assign var=ps value=$productStatus[$tpl_product_id]}-->
133                <!--{if count($ps) > 0}-->
134                    <ul class="status_icon">
135                    <!--{foreach from=$ps item=status}-->
136                        <li><!--{$arrSTATUS[$status]}--></li>
137                    <!--{/foreach}-->
138                    </ul>
139                <!--{/if}-->
140                <!--▲商品ステータス-->
141
142                <div class="product_detail">
143
144                    <!--★商品名★-->
145                    <h3 class="product_name"><!--{$arrProduct.name|h}--></h3>
146
147                    <p class="product_code">
148                        <span class="mini">商品コード:</span>
149
150                        <span id="product_code_default">
151                            <!--{if $arrProduct.product_code_min == $arrProduct.product_code_max}-->
152                                <!--{$arrProduct.product_code_min|h}-->
153                            <!--{else}-->
154                                <!--{$arrProduct.product_code_min|h}-->~<!--{$arrProduct.product_code_max|h}-->
155                            <!--{/if}-->
156                        </span><span id="product_code_dynamic"></span>
157                    </p>
158
159                    <!--★関連カテゴリ★-->
160                    <p class="relative_cat"><span class="mini">関連カテゴリ:</span>
161                        <!--{section name=r loop=$arrRelativeCat}-->
162                            <!--{section name=s loop=$arrRelativeCat[r]}-->
163                                <a rel="external" href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$arrRelativeCat[r][s].category_id}-->"><!--{$arrRelativeCat[r][s].category_name}--></a>
164                                <!--{if !$smarty.section.s.last}--><!--{$smarty.const.SEPA_CATNAVI}--><!--{/if}-->
165                            <!--{/section}--><br />
166                        <!--{/section}-->
167                    </p>
168
169                    <!--★通常価格★-->
170                    <!--{if $arrProduct.price01_max_inctax > 0}-->
171                        <p class="normal_price">
172                            <span class="mini"><!--{$smarty.const.NORMAL_PRICE_TITLE}-->(税込):</span>
173                            <span id="price01_default">
174                                <!--{if $arrProduct.price01_min_inctax == $arrProduct.price01_max_inctax}-->
175                                    <!--{$arrProduct.price01_min_inctax|number_format}-->
176                                <!--{else}-->
177                                    <!--{$arrProduct.price01_min_inctax|number_format}-->~<!--{$arrProduct.price01_max_inctax|number_format}-->
178                                <!--{/if}--></span>
179                            <span id="price01_dynamic"></span>円
180                        </p>
181                    <!--{/if}-->
182
183                    <!--★販売価格★-->
184                    <p class="sale_price">
185                        <span class="mini"><!--{$smarty.const.SALE_PRICE_TITLE}-->(税込):</span>
186                        <span class="price"><span id="price02_default">
187                            <!--{if $arrProduct.price02_min_inctax == $arrProduct.price02_max_inctax}-->
188                                <!--{$arrProduct.price02_min_inctax|number_format}-->
189                            <!--{else}-->
190                                <!--{$arrProduct.price02_min_inctax|number_format}-->~<!--{$arrProduct.price02_max_inctax|number_format}-->
191                            <!--{/if}-->
192                        </span><span id="price02_dynamic"></span>円</span>
193                    </p>
194
195                    <!--★ポイント★-->
196                    <!--{if $smarty.const.USE_POINT !== false}-->
197                        <p class="sale_price"><span class="mini">ポイント:</span><span id="point_default">
198                            <!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
199                                <!--{$arrProduct.price02_min|sfPrePoint:$arrProduct.point_rate:$smarty.const.POINT_RULE:$arrProduct.product_id|number_format}-->
200                            <!--{else}-->
201                                <!--{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}-->
202                                    <!--{$arrProduct.price02_min|sfPrePoint:$arrProduct.point_rate:$smarty.const.POINT_RULE:$arrProduct.product_id|number_format}-->
203                                <!--{else}-->
204                                    <!--{$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}-->
205                                <!--{/if}-->
206                            <!--{/if}-->
207                            </span><span id="point_dynamic"></span>Pt
208                        </p>
209                    <!--{/if}-->
210
211                    <!--▼メーカー-->
212                    <!--{if $arrProduct.maker_name|strlen >= 1}-->
213                        <p class="maker">
214                            <span class="mini">メーカー:</span><span>
215                                <!--{$arrProduct.maker_name|h}-->
216                            </span>
217                        </p>
218                    <!--{/if}-->
219                    <!--▲メーカー-->
220
221                    <!--▼メーカーURL-->
222                    <!--{if $arrProduct.comment1|strlen >= 1}-->
223                        <p class="sale_price">
224                            <span class="mini">メーカーURL:</span><span>
225                                <a rel="external" href="<!--{$arrProduct.comment1|h}-->" target="_blank">
226                                    <!--{$arrProduct.comment1|h}--></a>
227                            </span>
228                        </p>
229                    <!--{/if}-->
230                    <!--▲メーカーURL-->
231                </div><!-- /.product_detail -->
232
233                <input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
234                <input type="hidden" name="mode" value="cart" />
235                <input type="hidden" name="product_id" value="<!--{$tpl_product_id}-->" />
236                <input type="hidden" name="product_class_id" value="<!--{$tpl_product_class_id}-->" id="product_class_id" />
237                <input type="hidden" name="favorite_product_id" value="" />
238
239                <!--▼買い物かご-->
240                <!--{if $tpl_stock_find}-->
241
242                    <!--{if $tpl_classcat_find1}-->
243                        <div class="cart_area">
244                            <dl>
245                                <!--▼規格1-->
246                                <dt><!--{$tpl_class_name1|h}--></dt>
247                                <dd>
248                                    <select name="classcategory_id1"
249                                        style="<!--{$arrErr.classcategory_id1|sfGetErrorColor}-->"
250                                        class="data-role-none">
251                                        <!--{html_options options=$arrClassCat1 selected=$arrForm.classcategory_id1.value}-->
252                                    </select>
253                                    <!--{if $arrErr.classcategory_id1 != ""}-->
254                                        <br /><span class="attention">※ <!--{$tpl_class_name1}-->を入力して下さい。</span>
255                                    <!--{/if}-->
256                                </dd>
257                                <!--▲規格1-->
258
259                                <!--{if $tpl_classcat_find2}-->
260                                    <!--▼規格2-->
261                                    <dt><!--{$tpl_class_name2|h}--></dt>
262                                    <dd>
263                                        <select name="classcategory_id2"
264                                            style="<!--{$arrErr.classcategory_id2|sfGetErrorColor}-->"
265                                            class="data-role-none">
266                                        </select>
267                                        <!--{if $arrErr.classcategory_id2 != ""}-->
268                                            <br /><span class="attention">※ <!--{$tpl_class_name2}-->を入力して下さい。</span>
269                                        <!--{/if}-->
270                                    </dd>
271                                    <!--▲規格2-->
272                                <!--{/if}-->
273                            </dl>
274                        </div>
275                    <!--{/if}-->
276
277                    <div class="cartin_btn">
278                        <dl>
279                            <dt>数量</dt>
280                            <dd>
281                                <input type="number" name="quantity" class="quantitybox" value="<!--{$arrForm.quantity.value|default:1|h}-->" max="<!--{9|str_repeat:$smarty.const.INT_LEN}-->" style="<!--{$arrErr.quantity|sfGetErrorColor}-->" />
282                                <!--{if $arrErr.quantity != ""}-->
283                                    <br /><span class="attention"><!--{$arrErr.quantity}--></span>
284                                <!--{/if}-->
285                            </dd>
286                        </dl>
287
288                        <!--★カートに入れる★-->
289                        <div id="cartbtn_default">
290                            <a rel="external" href="javascript:void(document.form1.submit());" class="btn cartbtn_default">カートに入れる</a>
291                        </div>
292                        <div class="attention" id="cartbtn_dynamic"></div>
293                    </div>
294                <!--{else}-->
295                    <div class="cartin_btn">
296                        <div class="attention">申し訳ございませんが、只今品切れ中です。</div>
297                    </div>
298                <!--{/if}-->
299                <!--▲買い物かご-->
300
301                <!--{if $tpl_login}-->
302                    <!--{if !$is_favorite}-->
303                        <div class="btn_favorite">
304                            <p><a rel="external" href="javascript:void(0);" onclick="fnAddFavoriteSphone(<!--{$arrProduct.product_id|h}-->); return false;" class="btn_sub">お気に入りに追加</a></p>
305                        </div>
306                    <!--{else}-->
307                        <div class="btn_favorite">
308                            <p>お気に入り登録済み</p>
309                        </div>
310                    <!--{/if}-->
311                <!--{/if}-->
312            </div>
313        </form>
314    </section>
315    <!--詳細ここまで-->
316
317    <!--▼サブエリアここから-->
318    <!--{if $arrProduct.sub_title1 != ""}-->
319        <div class="title_box_sub clearfix">
320            <h2>商品情報</h2>
321            <!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->
322            <span class="b_expand"><img src="<!--{$TPL_URLPATH}-->img/button/btn_minus.png" onclick="fnSubToggle($('#sub_area'), this);" alt=""></span>
323        </div>
324        <div id="sub_area">
325            <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
326                <!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
327                <!--{if $arrProduct[$key] != ""}-->
328                    <!--▼サブ情報-->
329                    <div class="subarea clearfix">
330                        <!--★サブタイトル★-->
331                        <h3><!--{$arrProduct[$key]|h}--></h3>
332
333                        <!--★サブ画像★-->
334                        <!--{assign var=sub_image_size value=80}-->
335                        <!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}-->
336                        <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
337                        <!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->
338                        <!--{assign var=sub_image_factor value=`$arrFile[$key].width/$sub_image_size`}-->
339                        <!--{if $arrProduct[$key]|strlen >= 1}-->
340                            <p class="subphotoimg">
341                                <!--{if $arrProduct[$lkey]|strlen >= 1}-->
342                                    <a rel="external" class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" target="_blank">
343                                        <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$key].width/$sub_image_factor}-->" height="<!--{$arrFile[$key].height/$sub_image_factor}-->" />
344                                    </a>
345                                <!--{else}-->
346                                    <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$key].width/$sub_image_factor}-->" height="<!--{$arrFile[$key].height/$sub_image_factor}-->" />
347                                <!--{/if}-->
348                            </p>
349                        <!--{/if}-->
350                        <!--★サブテキスト★-->
351                        <p class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></p>
352                    </div>
353                <!--{/if}-->
354            <!--{/section}-->
355        </div>
356    <!--{/if}-->
357    <!--サブエリアここまで-->
358
359    <!--この商品に対するお客様の声-->
360    <div class="title_box_sub clearfix">
361        <h2>この商品に対するお客様の声</h2>
362            <span class="b_expand"><img src="<!--{$TPL_URLPATH}-->img/button/btn_minus.png" onclick="fnReviewToggle($('#review_bloc_area'), this);" alt=""></span>
363        </div>
364
365        <div id="review_bloc_area">
366            <div class="review_bloc clearfix">
367            <p>この商品に対するご感想をぜひお寄せください。</p>
368            <div class="review_btn">
369                <!--{if count($arrReview) < $smarty.const.REVIEW_REGIST_MAX}-->
370                    <!--★新規コメントを書き込む★-->
371                    <a href="./review.php?product_id=<!--{$arrProduct.product_id}-->" target="_blank" class="btn_sub">新規コメントを書き込む</a>
372                <!--{/if}-->
373            </div>
374            </div>
375
376            <!--{if count($arrReview) > 0}-->
377            <ul>
378                <!--{section name=cnt loop=$arrReview}-->
379                    <li>
380                        <p class="voicetitle"><!--{$arrReview[cnt].title|h}--></p>
381                        <p class="voicedate"><!--{$arrReview[cnt].create_date|sfDispDBDate:false}--> 投稿者:<!--{if $arrReview[cnt].reviewer_url}--><a href="<!--{$arrReview[cnt].reviewer_url}-->" target="_blank"><!--{$arrReview[cnt].reviewer_name|h}--></a><!--{else}--><!--{$arrReview[cnt].reviewer_name|h}--><!--{/if}--><br />おすすめレベル:<span class="recommend_level"><!--{assign var=level value=$arrReview[cnt].recommend_level}--><!--{$arrRECOMMEND[$level]|h}--></span></p>
382                        <p class="voicecomment"><!--{$arrReview[cnt].comment|h|nl2br}--></p>
383                    </li>
384                <!--{/section}-->
385            </ul>
386            <!--{/if}-->
387        </div>
388
389    <!--お客様の声ここまで-->
390
391
392    <!--▼その他おすすめ商品-->
393    <!--{if $arrRecommend}-->
394        <div class="title_box_sub clearfix">
395            <h2>その他のオススメ商品</h2>
396            <span class="b_expand"><img src="<!--{$TPL_URLPATH}-->img/button/btn_minus.png" onclick="fnWhoboughtToggle($('#whobought_area'), this);" alt=""></span>
397        </div>
398
399        <div id="whobought_area" class="mainImageInit">
400            <ul>
401                <!--{section name=cnt loop=$arrRecommend}-->
402                    <!--{if $arrRecommend[cnt].product_id}-->
403                        <li id="mainImage1<!--{$smarty.section.cnt.index}-->">
404                            <img src="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrRecommend[cnt].main_list_image|sfNoImageMainList|h}-->" style="max-width: 65px;max-height: 65;" alt="!--{$arrRecommend[cnt].name|h}-->" />
405                            <!--{assign var=price02_min value=`$arrRecommend[cnt].price02_min_inctax`}-->
406                            <!--{assign var=price02_max value=`$arrRecommend[cnt].price02_max_inctax`}-->
407                            <h3><a rel="external" href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrRecommend[cnt].product_id|u}-->"><!--{$arrRecommend[cnt].name|h}--></a></h3>
408                            <p class="sale_price"><span class="price">
409                                <!--{if $price02_min == $price02_max}-->
410                                    <!--{$price02_min|number_format}-->
411                                <!--{else}-->
412                                    <!--{$price02_min|number_format}-->~<!--{$price02_max|number_format}-->
413                                <!--{/if}-->
414                                円</span>
415                            </p>
416                        </li>
417                    <!--{/if}-->
418                <!--{/section}-->
419            </ul>
420        </div>
421    <!--{/if}-->
422    <!--▲その他おすすめ商品-->
423
424    <div class="btn_area">
425        <p><a href="javascript:void(0);" class="btn_more" data-rel="back">戻る</a></p>
426    </div>
427</section>
428
429<!--{include file= 'frontparts/search_area.tpl'}-->
430
Note: See TracBrowser for help on using the repository browser.