EC-CUBE3デザインテンプレート解説:商品詳細ページ(2)関連商品

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

 slick.min.jsを利用し、カルーセルを適用しています。

003

 登録商品数を9個に変更しています。
■app/Plugin/RelatedProduct/Event.php
153行目付近

$loop = 5 - count($RelatedProducts);
↓【変更】
$loop = 9 - count($RelatedProducts);

■app/Plugin/RelatedProduct/Resource/template/Admin/modal.twig
16行目付近

for (var i = 0; i < 5; i++) {
↓【変更】
for (var i = 0; i < 9; i++) {

 ”関連商品”の文言を変更する場合は、下記ファイルを編集します。
■app/Plugin/RelatedProduct/Resource/template/Front/related_product.twig

EC-CUBE3デザインテンプレート解説:商品詳細ページ(1)商品画像

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

 商品画像をクリックすると、登録時の画像(長辺640px)がモーダルウィンドウで表示されます。

004

 サムネイル画像が4つ以上になると、スライド(カルーセル)するようになります。

サイズの異なる画像を登録した場合、表示領域の高さは一番高い画像の高さになります。

001

同じサイズの画像を登録すると、見た目がよいでしょう。

002

EC-CUBE3デザインテンプレート解説:ブロックについて(14)定休日管理プラグイン

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

■app/template/[テンプレートコード]/Block/pg_calendar.twig
休日は赤丸で表示されるように修正しています。

014

EC-CUBE3デザインテンプレート解説:ブロックについて(13)最近チェックした商品

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

■app/template/[テンプレートコード]/Block/checkeditem.twig
slick.min.jsを利用し、カルーセルを適用しています。
プラグイン一覧の「設定」で「保存日数」「表示個数」「履歴削除ボタン」が設定できます。

013

EC-CUBE3デザインテンプレート解説:ブロックについて(12)売上ランキング

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

■app/template/[テンプレートコード]/Block/sales_ranking.twig
slick.min.jsを利用し、カルーセルを適用しています。
プラグイン一覧の「設定」で「集計期間」と「表示個数」が設定できます。

012

EC-CUBE3デザインテンプレート解説:ブロックについて(11)おすすめ商品

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

■app/template/[テンプレートコード]/Block/recommend_product_block.twig
slick.min.jsを利用し、カルーセルを適用しています。

010

EC-CUBE3デザインテンプレート解説:ブロックについて(10)ショッピングガイド

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

■app/template/[テンプレートコード]/Block/shoppingguideitoben.twig
 オーナーズストア>プラグイン>プラグイン一覧のショッピングガイドの「設定」をクリックします。
 「送料について」と「配送について」を入力すると、フロントページに反映されます。HTMLタグの入力も可能です。

003

004

EC-CUBE3デザインテンプレート解説:ブロックについて(9)ギャラリー

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

■app/template/[テンプレートコード]/Block/garally.twig
slick.min.jsを利用し、カルーセルを適用しています。

009

EC-CUBE3デザインテンプレート解説:ブロックについて(8)フリーエリア

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

■app/template/[テンプレートコード]/Block/free.twig
classのカラム設定を削除し、news.twigと横並びの設定になっているのを解除しています。

col-sm-3

007

008

EC-CUBE3デザインテンプレート解説:ブロックについて(7)新着情報

本解説は下記ページのデザインテンプレートダウンロード商品の解説です。
http://www.kaiplus.com/products/list.php?category_id=50

デザインテンプレート適用後のサイトデザイン
http://kaiplus.com/eccube3/1605a/

■app/template/[テンプレートコード]/Block/news.twig
classのカラム設定を削除し、free.twigと横並びの設定になっているのを解除しています。

col-sm-9