EC-CUBE3機能カスタマイズ版:ショッピングガイド

この記事の関連ページ

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

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

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

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

① オーナーズストア>プラグイン>プラグイン一覧のショッピングガイドの「設定」をクリックします。
② 「送料について」と「配送について」を入力すると、フロントページに反映されます。HTMLタグの入力も可能です。
001
002
003

EC-CUBE3機能カスタマイズ版:プラグイン導入後のtwigファイル(ブロックの場合)

この記事の関連ページ

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

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

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

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

プラグインのインストール後、twigファイルは下記フォルダに生成されます。
■app/template/default/Block/

最近チェックした商品:checkeditem.twig
手動売り上げランキング商品管理プラグイン:manualranking_product_block.twig
新商品自動表示:newitemauto.twig
定休日管理プラグイン:pg_calendar.twig
ピックアップ商品管理プラグイン:pickup_product_block.twig
おすすめ商品管理プラグイン:recommend_product_block.twig
売上ランキング:sales_ranking.twig
ショッピングガイド:shoppingguideitoben.twig

EC-CUBE3機能カスタマイズ版:プラグインのインストール

この記事の関連ページ

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

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

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

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

(1)オーナーズストア>プラグイン一覧
独自プラグイン→ プラグインのアップロードはこちら
001

続きを読む EC-CUBE3機能カスタマイズ版:プラグインのインストール

EC-CUBE3機能カスタマイズ版:その他のデフォルトEC-CUBEのブロック修正

この記事の関連ページ

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

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

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

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

 (1)カテゴリ category.twig
・#headerに配置しても表示されません。
・ドロワーメニューには反映されません。
・子カテゴリはアコーディオン形式で開きます。
006
(2)新着情報 news.twig

続きを読む EC-CUBE3機能カスタマイズ版:その他のデフォルトEC-CUBEのブロック修正

EC-CUBE3機能カスタマイズ版:ヘッダー部について

この記事の関連ページ

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

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

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

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

005▼テンプレートファイルの場所
■src/Eccube/Resource/template/default/Block/

続きを読む EC-CUBE3機能カスタマイズ版:ヘッダー部について

EC-CUBE3機能カスタマイズ版:Bootstrapアイコンを利用

この記事の関連ページ

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

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

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

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

記述タグ例
——————————–
<span class=”cb glyphicon glyphicon-star”></span>
——————————–
アイコン一覧
http://bootstrap3.cyberlab.info/components/glyphiconsTable.html
004

EC-CUBE3機能カスタマイズ版:スタイルシート(CSS)について

この記事の関連ページ

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

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

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

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

EC-CUBE3のデフォルトCSS style.css default.css はほとんど修正していません。
「default.css」の最後に、独自のCSSを追加しています。
(1)style.cssの変更点
 全体の幅を変更
</div>
<div>/* --------------------------------
Common
-------------------------------- */
.inner {
max-width: 1150px;
}
/* ★全体の幅を変更★ */
.inner {
max-width: 1000px;
}</div>
<div>
 価格表示の変更
</div>
<div>.item_price {
color: #525263;
font-weight: bold;
}
↓【変更】
.item_price {
color: #525263;
font-weight: bold;
}
.item_price {
color: #C00;
font-weight: normal;
}</div>
<div>
 追加
</div>
<div>/* ▼レイアウト変更(スマホ表示の際、メインカラム(#main)が上に表示されるようにする) */
/* レフトカラムにのみブロックあり */
.theme_side_left #side_left {
float: left;
width: 25%;
padding-right: 16px;
}
.theme_side_left #main {
float:right;
width:75%;
}
/* レフトカラムとライトカラムにブロックあり */
.main-left {
float:left;
width:75%;
}
.theme_side_both #side_left {
float: left;
width: 33.3%;
padding-right: 16px;
}
.theme_side_both #main {
float: right;
width:66.6%;
}</div>
<div>
(2)default.cssの最後に独自のCSSを記述
下記の記述以降が独自CSSです。
</div>
<div>/* |||||||||||||||■デザインテンプレートカスタマイズ■||||||||||||||| */</div>
<div>

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