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

Revision 21267, 18.8 KB checked in by Seasoft, 9 years ago (diff)

#1495 (画像ファイルを整理)

  • 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 src="<!--{$smarty.const.ROOT_URLPATH}-->js/products.js"></script>
23<script src="<!--{$TPL_URLPATH}-->js/jquery.facebox/facebox.js"></script>
24<script>//<![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, 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//サブエリアの表示/非表示
46var speed = 500;
47var stateSub = 0;
48function 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//お勧めエリアの表示/非表示
59var statewhobought = 0;
60function fnWhoboughtToggle(areaEl, imgEl) {
61    areaEl.slideToggle(speed);
62    if (statewhobought == 0) {
63        $(imgEl).attr("src", "<!--{$TPL_URLPATH}-->img/button/btn_plus.png");
64        statewhobought = 1;
65    } else {
66        $(imgEl).attr("src", "<!--{$TPL_URLPATH}-->img/button/btn_minus.png");
67        statewhobought = 0
68    }
69}
70//]]>
71</script>
72
73<!--▼CONTENTS-->
74<section id="product_detail">
75
76<!--★タイトル★-->
77<h2 class="title"><!--{$tpl_subtitle|h}--></h2>
78<!--★画像★-->
79
80<div id="detailphotoblock" class="mainImageInit">
81    <ul>
82        <!--{assign var=key value="main_image"}-->
83        <li id="mainImage0">
84
85        <!--{* 画像の縦横倍率を算出 *}-->
86        <!--{assign var=detail_image_size value=200}-->
87        <!--{assign var=main_image_factor value=`$arrFile[$key].width/$detail_image_size`}-->
88        <!--{if $arrProduct.main_large_image|strlen >= 1}-->
89            <a rel="external" class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct.main_large_image|h}-->" target="_blank">
90                <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>
91        <!--{else}-->
92            <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}-->" />
93        <!--{/if}-->
94        </li>
95        <!--★サブ画像★-->
96        <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
97        <!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}-->
98        <!--{assign var=sub_image_factor value=`$arrFile[$key].width/$detail_image_size`}-->
99        <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
100        <!--{if $arrFile[$key].filepath != ""}-->
101            <li id="mainImage<!--{$smarty.section.cnt.index+1}-->">
102            <!--{if $arrProduct[$lkey] != ""}-->
103              <a rel="external" class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" target="_blank">
104              <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>
105            <!--{else}-->
106              <img src="<!--{$arrFile[$key].filepath|h}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$key].width/$sub_image_factor}-->" height="<!--{$arrFile[$key].height/$sub_image_factor}-->" />
107            <!--{/if}-->
108            </li>
109        <!--{/if}-->
110        <!--{/section}-->
111    </ul>
112</div>
113
114<section id="detailarea">
115
116<!--★詳細メインコメント★-->
117<p class="main_comment"><!--{$arrProduct.main_comment|nl2br_html}--></p>
118
119<form name="form1" id="form1" method="post" action="<!--{$smarty.const.ROOT_URLPATH}-->products/detail.php">
120<div id="detailrightblock">
121    <!--▼商品ステータス-->
122    <!--{assign var=ps value=$productStatus[$smarty.get.product_id]}-->
123    <!--{if count($ps) > 0}-->
124        <ul class="status_icon">
125        <!--{foreach from=$ps item=status}-->
126            <li><!--{$arrSTATUS[$status]}--></li>
127        <!--{/foreach}-->
128        </ul>
129    <!--{/if}-->
130    <!--▲商品ステータス-->
131
132    <div class="product_detail">
133
134        <!--★商品名★-->
135        <h3 class="product_name"><!--{$arrProduct.name|h}--></h3>
136
137        <p class="product_code"><span class="mini">商品コード:</span>
138
139        <span id="product_code_default">
140        <!--{if $arrProduct.product_code_min == $arrProduct.product_code_max}-->
141            <!--{$arrProduct.product_code_min|h}-->
142        <!--{else}-->
143            <!--{$arrProduct.product_code_min|h}-->~<!--{$arrProduct.product_code_max|h}-->
144        <!--{/if}-->
145        </span><span id="product_code_dynamic"></span></p>
146
147        <!--★関連カテゴリ★-->
148        <p class="relative_cat"><span class="mini">関連カテゴリ:</span>
149        <!--{section name=r loop=$arrRelativeCat}-->
150            <!--{section name=s loop=$arrRelativeCat[r]}-->
151            <a rel="external" href="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php?category_id=<!--{$arrRelativeCat[r][s].category_id}-->"><!--{$arrRelativeCat[r][s].category_name}--></a>
152            <!--{if !$smarty.section.s.last}--><!--{$smarty.const.SEPA_CATNAVI}--><!--{/if}-->
153            <!--{/section}--><br />
154        <!--{/section}-->
155        </p>
156
157        <!--★通常価格★-->
158        <!--{if $arrProduct.price01_max > 0}-->
159        <p class="normal_price">
160        <span class="mini"><!--{$smarty.const.NORMAL_PRICE_TITLE}-->(税込):</span>
161        <span id="price01_default">
162               <!--{if $arrProduct.price01_min == $arrProduct.price01_max}-->
163               <!--{$arrProduct.price01_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
164                 <!--{else}-->
165                   <!--{$arrProduct.price01_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->~<!--{$arrProduct.price01_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
166                    <!--{/if}--></span>
167        <span id="price01_dynamic"></span>円</p>
168        <!--{/if}-->
169
170        <!--★販売価格★-->
171        <p class="sale_price"><span class="mini"><!--{$smarty.const.SALE_PRICE_TITLE}-->(税込):</span>
172        <span class="price"><span id="price02_default">
173                <!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
174                 <!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
175                   <!--{else}-->
176                     <!--{$arrProduct.price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->~<!--{$arrProduct.price02_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
177                       <!--{/if}-->
178        </span><span id="price02_dynamic"></span>円</span></p>
179
180
181        <!--★ポイント★-->
182        <!--{if $smarty.const.USE_POINT !== false}-->
183            <p class="sale_price"><span class="mini">ポイント:</span><span id="point_default">
184                   <!--{if $arrProduct.price02_min == $arrProduct.price02_max}-->
185                     <!--{$arrProduct.price02_min|sfPrePoint:$arrProduct.point_rate:$smarty.const.POINT_RULE:$arrProduct.product_id|number_format}-->
186                       <!--{else}-->
187                        <!--{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}-->
188                          <!--{$arrProduct.price02_min|sfPrePoint:$arrProduct.point_rate:$smarty.const.POINT_RULE:$arrProduct.product_id|number_format}-->
189                            <!--{else}-->
190                              <!--{$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}-->
191                                <!--{/if}-->
192                                  <!--{/if}-->
193            </span><span id="point_dynamic"></span>Pt</p>
194        <!--{/if}-->
195
196        <!--▼メーカーURL-->
197        <!--{if $arrProduct.comment1|strlen >= 1}-->
198        <p class="sale_price"><span class="mini">メーカーURL:</span><span>
199            <a rel="external" href="<!--{$arrProduct.comment1|h}-->" target="_blank">
200                <!--{$arrProduct.comment1|h}--></a>
201        </span></p>
202        <!--{/if}-->
203        <!--▲メーカーURL-->
204     </div>
205
206        <input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
207        <input type="hidden" name="mode" value="cart" />
208        <input type="hidden" name="product_id" value="<!--{$tpl_product_id}-->" />
209        <input type="hidden" name="product_class_id" value="<!--{$tpl_product_class_id}-->" id="product_class_id" />
210        <input type="hidden" name="favorite_product_id" value="" />
211       
212        <!--▼買い物かご-->
213        <!--{if $tpl_stock_find}-->
214   
215            <!--{if $tpl_classcat_find1}-->
216                <div class="cart_area">
217                     <dl>
218                        <!--▼規格1-->
219                        <dt><!--{$tpl_class_name1|h}--></dt>
220                        <dd>
221                        <select name="classcategory_id1"
222                            style="<!--{$arrErr.classcategory_id1|sfGetErrorColor}-->"
223                            class="data-role-none">
224                            <!--{html_options options=$arrClassCat1 selected=$arrForm.classcategory_id1.value}-->
225                        </select>
226                        <!--{if $arrErr.classcategory_id1 != ""}-->
227                            <br /><span class="attention">※ <!--{$tpl_class_name1}-->を入力して下さい。</span>
228                        <!--{/if}-->
229                        </dd>
230                        <!--▲規格1-->
231            <!--{/if}-->
232
233            <!--{if $tpl_classcat_find2}-->
234                        <!--▼規格2-->
235                        <dt><!--{$tpl_class_name2|h}--></dt>
236                        <dd>
237                        <select name="classcategory_id2"
238                            style="<!--{$arrErr.classcategory_id2|sfGetErrorColor}-->"
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}-->" max="<!--{$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            <div id="cartbtn_default">
267                <a rel="external" href="javascript:void(document.form1.submit());" class="btn cartbtn_default">カートに入れる</a>
268            </div>
269            <div class="attention" id="cartbtn_dynamic"></div>
270        <!--{else}-->
271            <div class="attention">申し訳ございませんが、只今品切れ中です。</div>
272        <!--{/if}-->
273        </div>
274        <!--▲買い物かご-->
275
276        <!--{if $tpl_login}-->
277            <!--{if !$is_favorite}-->
278                <div class="btn_favorite">
279                    <p><a rel="external" href="javascript:void(0);" onclick="fnAddFavoriteSphone(<!--{$arrProduct.product_id|h}-->); return false;" class="btn_sub">お気に入りに追加</a></p>
280                </div>
281            <!--{else}-->
282                <div class="btn_favorite">
283                    <p>お気に入り登録済み</p>
284                </div>
285            <!--{/if}-->
286        <!--{/if}-->
287
288    </form>
289</div>
290</section>
291<!--詳細ここまで-->
292
293<!--▼サブエリアここから-->
294<!--{if $arrProduct.sub_title1 != ""}-->
295  <div class="title_box_sub clearfix">
296    <h2>商品情報</h2>
297     <!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->
298      <span class="b_expand"><img src="<!--{$TPL_URLPATH}-->img/button/btn_minus.png" onclick="fnSubToggle($('#sub_area'), this);" alt=""></span>
299       </div>
300    <div id="sub_area">
301        <!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->
302            <!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->
303            <!--{if $arrProduct[$key] != ""}-->
304            <!--▼サブ情報-->
305           <div class="subarea clearfix">
306            <!--★サブタイトル★-->
307            <h3><!--{$arrProduct[$key]|h}--></h3>
308
309            <!--★サブ画像★-->
310            <!--{assign var=sub_image_size value=80}-->
311            <!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}-->
312            <!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->
313            <!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->
314            <!--{assign var=sub_image_factor value=`$arrFile[$key].width/$sub_image_size`}-->
315            <!--{if $arrProduct[$key]|strlen >= 1}-->
316                <p class="subphotoimg">
317                <!--{if $arrProduct[$lkey]|strlen >= 1}-->
318                    <a rel="external" class="expansion" href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" target="_blank">
319                    <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$key].width/$sub_image_factor}-->" height="<!--{$arrFile[$key].height/$sub_image_factor}-->" />
320                    </a>
321                <!--{else}-->
322                    <img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$key].width/$sub_image_factor}-->" height="<!--{$arrFile[$key].height/$sub_image_factor}-->" />
323                <!--{/if}-->
324                </p>
325            <!--{/if}-->
326            <!--★サブテキスト★-->
327            <p class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></p>
328            </div>
329            <!--{/if}-->
330        <!--{/section}-->
331    </div>
332<!--{/if}-->
333<!--サブエリアここまで-->
334
335
336<!--▼その他おすすめ商品-->
337<!--{if $arrRecommend}-->
338<div class="title_box_sub clearfix">
339  <h2>その他のオススメ商品</h2>
340     <span class="b_expand"><img src="<!--{$TPL_URLPATH}-->img/button/btn_minus.png" onclick="fnWhoboughtToggle($('#whobought_area'), this);" alt=""></span>
341      </div>
342 
343  <div id="whobought_area" class="mainImageInit">
344
345    <ul>
346    <!--{section name=cnt loop=$arrRecommend}-->
347        <!--{if $arrRecommend[cnt].product_id}-->
348          <li id="mainImage1<!--{$smarty.section.cnt.index}-->">
349          <img src="<!--{$smarty.const.ROOT_URLPATH}-->resize_image.php?image=<!--{$arrRecommend[cnt].main_list_image|sfNoImageMainList|h}-->&amp;width=65&amp;height=65" alt="<!--{$arrRecommend[cnt].name|h}-->" />
350             <!--{assign var=price02_min value=`$arrRecommend[cnt].price02_min`}-->
351             <!--{assign var=price02_max value=`$arrRecommend[cnt].price02_max`}-->
352             <h3><a rel="external" href="<!--{$smarty.const.P_DETAIL_URLPATH}--><!--{$arrRecommend[cnt].product_id|u}-->"><!--{$arrRecommend[cnt].name|h}--></a></h3>
353              <p class="sale_price"><span class="price">
354              <!--{if $price02_min == $price02_max}-->
355                   <!--{$price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
356              <!--{else}-->
357                   <!--{$price02_min|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->~<!--{$price02_max|sfCalcIncTax:$arrSiteInfo.tax:$arrSiteInfo.tax_rule|number_format}-->
358              <!--{/if}-->
359               円</span></p>
360          </li>
361        <!--{/if}-->
362    <!--{/section}-->
363               
364    </ul>
365</div>
366<!--{/if}-->
367
368<!--▲その他おすすめ商品-->
369<div class="btn_area">
370<p><a href="javascript:void(0);" class="btn_more" data-rel="back">商品一覧に戻る</a></p>
371</div>
372</section>
373<!--▼検索バー -->
374<section id="search_area">
375<form method="get" action="<!--{$smarty.const.ROOT_URLPATH}-->products/list.php">
376<input type="hidden" name="<!--{$smarty.const.TRANSACTION_ID_NAME}-->" value="<!--{$transactionid}-->" />
377<input type="hidden" name="mode" value="search" />
378<input type="search" name="name" id="search" value="" placeholder="キーワードを入力" class="searchbox" >
379</form>
380</section>
381<!--▲検索バー -->
382<!--▲CONTENTS-->
Note: See TracBrowser for help on using the repository browser.