TOP ページ - EC-CUBEカスタマイズダウンロード

TOP ページ
下記の機能については、次ページ
をご覧ください。
（1）トップページスライド画像
（2）商品カテゴリーメニュー
（3）ご利用ガイド
（4）おすすめ商品スライド表示
（5）新着情報
２カラム表示
デザインを 2 カラムに変更しても、表示方法は変
わりません。
カラムの変更によって自動的に変更されるので、
特別な操作は必要ありません。
（1）トップページスライド画像
①　画像の保存先
■ html/user_data/packages/ テンプレートフォルダ /img/banner
メイン画像とサムネイル画像は別々に用意します。
メイン画像：272px × 578px　サムネイル画像：70px × 70px
②　ソースファイル
■ data/Smarty/templates/ テンプレートフォルダ /index.tpl
<!-- ★リンクの記述【同一ウィンドウで開く】
<img src="<!--{$TPL_URLPATH}-->img/banner/ ○○○ .jpg" onclick="location.href=' リンク先 URL'"
style="cursor:pointer;" />-->
<!-- ★リンクの記述【別ウィンドウで開く】
<img src="<!--{$TPL_URLPATH}-->img/banner/ ○○○ .png" onclick="window.open(' リンク先 URL')"
style="cursor:pointer;" />-->
<!-- ★メイン画像とサムネイル画像が対応するように記述する。-->
<div id="images">
<!-- メイン画像 272px × 578px-->
<img src="<!--{$TPL_URLPATH}-->img/banner/main_001.png" onclick="location.href='<!-{$smarty.const.P_DETAIL_URLPATH}-->1'" style="cursor:pointer;" />
<img src="<!--{$TPL_URLPATH}-->img/banner/main_002.png" onclick="window.open('<!-{$smarty.const.P_DETAIL_URLPATH}-->2')" style="cursor:pointer;" />
・
・
</div>
<div id="thumbs">
<!-- サムネイル画像 70px × 70px-->
<img src="<!--{$TPL_URLPATH}-->img/banner/thumbnail_001.png" />
<img src="<!--{$TPL_URLPATH}-->img/banner/thumbnail_002.png" />
・
・
</div>
・　リンク先 URL は、
「http:// ～」の記述方法でも構いません。
onclick="location.href='http:// ○○○ .com/products/detail.php?product_id=8'" style="cursor:pointer;"
・　画像を 7 枚以上登録すると、サムネイル画像がスライドを始めます。
それよりも少ない枚数でスライドさせたいときは、スクリプトの数値を変更します。（index.tpl に説明あり）
（2）商品カテゴリーメニュー
①　親カテゴリーをクリックすると、子カテゴリーが展開されます。
②　別の親カテゴリーをクリックすると、展開していた子カテゴリーが閉じます。
③　ページが遷移しても、展開した状態を保持します。
④　親カテゴリの右側の矢印をクリックすると、カテゴリ内の商品がすべて表示されます。
⑤　メニューを開閉させるためには、子カテゴリーが存在しなければいけません。
EC-CUBE のデフォルト状態に戻すことも可能です。
①　data/Smarty/templates/ テンプレートフォルダ /frontparts/bloc　を開きます。
②　category.tpl を適当な名前に変更します。
category.tpl → category-333.tpl
③　category-off.tpl の名前を変更します。
category-off.tpl → category.tpl
④　管理画面の、デザイン管理＞ PC ＞ブロック設定で、
「カテゴリ」の「編集」をクリックし、そのまま「登録する」をクリックします。
（3）ご利用ガイド
管理画面の、デザイン管理＞ PC ＞レイアウト設定で、
「利用ガイド」ブロックをヘッダー部に配置すると、下
図のように表示されます。
（4）おすすめ商品
管理画面の、コンテンツ管理＞おすすめ商品管理で、下記商品
数を登録すると、スライドを始めます。
2 カラム：6 個以上　3 カラム：5 個以上
スライド表示では、商品コメントを登録しても表示されません。
左図のような表示も可能です。
①　data/Smarty/templates/ テンプレートフォルダ /
frontparts/bloc　を開きます。
②　recommend.tpl を適当な名前に変更します。
recommend.tpl → recommend-333.tpl
③　recommend-off.tpl の名前を変更します。
recommend-off.tpl → recommend.tpl
④　管理画面の、デザイン管理＞ PC ＞ブロック設定で、
「おすすめ商品」の「編集」をクリックし、そのまま「登録する」
をクリックします。
（5）新着情報
管理画面の、デザイン管理＞ PC ＞レイアウト設定で、
「新着情報」ブロックをサイドカラムに配置すると、右図のよう
に表示されます。
商品一覧ページ
「商品説明 / 表示 / 非表示」をクリックすると、管理画面で登録した一覧メインコメントが表示されます。
もう一度クリックすると、閉じます。
下記方法で、上記の機能を利用しないこともできます。
①　data/Smarty/templates/ テンプレートフォルダ /products　を開きます。
②　list.tpl を適当な名前に変更します。
list.tpl → list-333.tpl
③　list-off.tpl の名前を変更します。
list-off.tpl → list.tpl
④　管理画面の、デザイン管理＞ PC ＞レイアウト設定で、
「商品一覧ページ 」のページ詳細の「編集」をクリックし、そのまま「登録する」をクリックします。
商品詳細ページ
商品登録で「サブ情報」を登録すると、メイン画像の下にサブ
情報で登録した画像が表示され、カーソルをのせると、メイン
画像がサブ画像に入れ替わります。
「詳細 - サブ拡大画像」が登録されていない場合は、「詳細 - サ
ブ画像」を表示しますが、サイズが引き延ばされて表示される
ことになるので画質が落ちます。
できるだけ、
「詳細 - サブ拡大画像」を登録するようにした方
がいいでしょう。
パンくずリスト
EC-CUBE サイトにある「パンくずリスト」プラグインをインストールして、パンくずリストを表示させることができます。
ダウンロードしたプラグインをそのままインストールした場合、CSS 等で調整が必要になります。
本サイトのデザイン用にカスタマイズしたプラグインを添付しましたので、こちらをご利用ください。
パンくずリストプラグインへのカスタマイズ
（1）CSS を調整
（2）リストに使われている矢印画像の変更
（3）このプラグインは、商品一覧・詳細ページに配置したときのみ正常に表示されるようになっています。
（商品カテゴリーを対
象としている）
よって、他のページに配置しても表示されないようにしてあります。
ブロックは、トップカラムに配置してください。
商品一覧ページ
商品詳細ページ