EC-CUBE3機能カスタマイズ版:配置カラムの上からの表示順

この記事の関連ページ

■EC-CUBE3機能カスタマイズ版
インストールと同時にデザインとカスタマイズ機能が実装されるのでサイト構築作業を大幅に短縮できます。

■デモサイト
インストール後、このようなサイトが立ち上がります。

■EC-CUBE3機能カスタマイズ版の機能内容
各機能についてこのページで解説しています。

■EC-CUBE3インストールガイド

サイドカラムより先にメインカラムを読み込むレイアウトになっています。
メインカラム→左カラム→右カラムの順で構成されています。
管理画面の「ページ管理」で各カラムにブロックを配置したとき、PC画面では管理画面と同様のカラム配置で表示されますが、スマホ画面ではメインカラムが一番上に表示されます。
(デフォルトのEC-CUBEでは、左カラムが一番上に表示されます)

続きを読む EC-CUBE3機能カスタマイズ版:配置カラムの上からの表示順

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