EC-CUBE:商品詳細ページのサブ情報レイアウトを変更

jQueryのパネルスライダーでコンパクトにまとめる。

(1) jquery.panel.sliderフォルダを■html/jsに追加
jquery.panel.sliderフォルダの中身
coda-slider.1.1.1.pack.js coda-slider.css jquery-easing.1.2.pack.js(jsフォルダに初めから入っているjquery.easing.1.3.jsを利用するので、こちらは不使用) jquery-easing-compatibility.1.2.pack.js

(2) ■data/Smarty/templates/default/site_frame.tplに下記を追加

 <!--▼jquery.easing.1.3.jsは、パネルスライダーで利用-->
 <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.easing.1.3.js"></script>

<!--パネルスライダー-->
 <!--{assign var=detail value="`$smarty.const.ROOT_URLPATH`products/detail.php"}-->
 <!--{if $smarty.server.PHP_SELF==$detail}-->
 <link media="screen" rel="stylesheet" href="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.panel.slider/coda-slider.css" />
 <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.panel.slider/jquery-easing-compatibility.1.2.pack.js"></script>
 <script type="text/javascript" src="<!--{$smarty.const.ROOT_URLPATH}-->js/jquery.panel.slider/coda-slider.1.1.1.pack.js"></script>
 <!--▲jquery.easing.1.3.js利用-->
 <!--{/if}-->

(3) ■data/Smarty/templates/default/products/detail.tpl
 上部にスクリプトを追加

 <!-- パネルスライダー -->
 <script type="text/javascript">
 jQuery(window).bind("load", function() {
 jQuery("div#slider1").codaSlider()
 // jQuery("div#slider2").codaSlider()
 // etc, etc. Beware of cross-linking difficulties if using multiple sliders on one page.
 });
 </script>

 からまでを以下に書き換える

★2012.5.2修正





【理由】サブ画像を登録しないと、サブ情報が表示されないため。(サブ画像を登録しないサブ情報も有り得るので)
しかし、条件分岐文を設定しておかないと、サブ情報を登録しない場合、余計なスペースが表示されてしまう。そこで、サブ情報を登録する場合は、詳細-サブタイトル(1)を必須とする。
詳細-サブタイトル(1)が必須であることを知らせるために、下記ファイルの417行目あたり、

サブ情報

のすぐ下、詳細-サブタイトル・・・の箇所を変更する。
■data/Smarty/templates/admin/products/product.tpl ------------------------------------ 詳細-サブタイトル() サブ情報入力時 必須 ------------------------------------

<!--▼サブコメント-->

<!--{if $arrProduct.sub_title1}-->

<div class="slider-wrap">

<div id="slider1" class="csw">

<div class="panelContainer">

<!--{section name=cnt loop=$smarty.const.PRODUCTSUB_MAX}-->

<!--{assign var=key value="sub_title`$smarty.section.cnt.index+1`"}-->

<!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->

<!--{if $arrProduct[$key] != ""}-->

<div class="panel sub_area clearfix" title="<!--{$arrProduct[$key]|h}-->">

<div class="wrapper">

<h3><!--★サブタイトル★--><!--{$arrProduct[$key]|h}--></h3>

<!--{assign var=ckey value="sub_comment`$smarty.section.cnt.index+1`"}-->

<!--▼サブ画像-->

<!--{assign var=key value="sub_image`$smarty.section.cnt.index+1`"}-->

<!--{assign var=lkey value="sub_large_image`$smarty.section.cnt.index+1`"}-->

<!--{if $arrProduct[$key]|strlen >= 1}-->

<div class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></div>

<div class="subphotoimg">

<!--{if $arrProduct[$lkey]|strlen >= 1}-->

<a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" class="cbox">

<!--{/if}-->

<img src="<!--{$arrFile[$key].filepath}-->" alt="<!--{$arrProduct.name|h}-->" width="<!--{$arrFile[$key].width}-->" height="<!--{$arrFile[$key].height}-->" />

<!--{if $arrProduct[$lkey]|strlen >= 1}--></a><br />

<span class="mini">

<a href="<!--{$smarty.const.IMAGE_SAVE_URLPATH}--><!--{$arrProduct[$lkey]|h}-->" class="cbox">

画像を拡大する</a>

</span>

<!--{/if}-->

</div>

<!--{else}-->

<p class="subtext"><!--★サブテキスト★--><!--{$arrProduct[$ckey]|nl2br_html}--></p>

<!--{/if}-->

<!--▲サブ画像-->

</div>

</div>

<!--{/if}-->

<!--{/section}-->

</div>

</div>

</div>

<br />

<!--{else}-->

<!--{/if}-->

<!--▲サブコメント-->

(4) ■html/user_data/packages/default/css/contents.css
▼商品詳細のレイアウトの箇所

 #detailarea,
 .sub_area {
 margin-bottom: 20px;
 width: 100%;
 }

↓

#detailarea {
 margin-bottom: 20px;
 width: 100%;
 }
 .sub_area {
 width: 100%;
 }
 .slider-wrap {
 margin-bottom:20px;
 }

▼/* 2カラム用 */と/* 3カラム用 */の箇所

 /* 2カラム用 */
 #two_maincolumn_left div#detailphotobloc ,
 #two_maincolumn_right div#detailphotobloc {
 float: left;
 width: 37%;
 }
 #two_maincolumn_left #detailrightbloc ,
 #two_maincolumn_right #detailrightbloc {
 float: right;
 width: 63%;
 }
 #two_maincolumn_left div.subtext,
 #two_maincolumn_right div.subtext {
 margin-bottom: 20px;
 float: left;
 width: 71%; /*パネルスライダー用に変更 73%→71% */
 }
 #two_maincolumn_left p.subtext,
 #two_maincolumn_right p.subtext {
 margin-bottom: 20px;
 }
 #two_maincolumn_left div.subphotoimg ,
 #two_maincolumn_right div.subphotoimg {
 float: right;
 width: 25%;
 text-align: right;
 padding-right:20px; /*パネルスライダー用に追加*/
 }

/* 3カラム用 */
 #three_maincolumn div#detailphotobloc {
 float: left;
 width: 49%;
 }
 #three_maincolumn #detailrightbloc {
 float: right;
 width: 50%;
 }
 #three_maincolumn div.subtext {
 margin-bottom: 20px;
 float: left;
 width: 60%; /*パネルスライダー用に変更 63%→38% */
 }
 #three_maincolumn p.subtext {
 margin-bottom: 20px;
 }
 #three_maincolumn div.subphotoimg {
 float: right;
 width: 35%;
 text-align: right;
 padding-right:10px; /*パネルスライダー用に追加*/
 }

/* ★★★パネルスライダーのCSS設定は、js/jquery.panel.slider/coda-slider.css */

(5)■html/js/
jsフォルダにローディング用のGIF画像「ajax-loader.gif」を置く。

2カラムで表示すると以下の通り