EC-CUBE3デザインテンプレート解説:ブロックについて(4)商品検索

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

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

■app/template/[テンプレートコード]/Block/search_product.twig
[HOT検索キーワード]の記述

<div class="word_search">
<span class="hot">HOT検索キーワード:</span>
{# ▼ #}
{% set name = 'ディナー' %}
<a href="{{ url('product_list') }}?category_id=&name={{ name }}">{{ name }}</a>
{# ▼ #}
{% set name = 'フォーク' %}
<a href="{{ url('product_list') }}?category_id=&name={{ name }}">{{ name }}</a>
{# ▼ #}
{% set name = 'パーコレーター' %}
<a href="{{ url('product_list') }}?category_id=&name={{ name }}">{{ name }}</a>
{# ▼ #}
{% set name = '' %}
<a href="{{ url('product_list') }}?category_id=&name={{ name }}">{{ name }}</a>
{# ▼ #}
{% set name = '' %}
<a href="{{ url('product_list') }}?category_id=&name={{ name }}">{{ name }}</a>
</div>

 商品に合わせて「ディナー」等のキーワードを変更してください。
 追加する場合は、set name = ”にキーワードを入力してください。

EC-CUBE3デザインテンプレート解説:ブロックについて(3)ヘッダー上部のメニュー:cart.twig(カゴの中)に記述

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

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

■app/template/[テンプレートコード]/Block/cart.twig
22行目付近

<!--▼ヘッダーメニュー-->
<div id="header_menu_area">
<ul class="header_menu_link">
<li>
<a href="{{ url('help_about') }}">
<span class="cb glyphicon glyphicon-star"></span>
当サイトについて
</a>
</li>
<li>
<a href="{{ url('help_privacy') }}">
<span class="cb glyphicon glyphicon-user"></span>
プライバシーポリシー
</a>
</li>
<li>
<a href="{{ url('help_tradelaw') }}">
<span class="cb glyphicon glyphicon-list
-alt"></span>特定商取引法表記
</a>
</li>
<li>
<a href="{{ url('contact') }}">
<span class="cb glyphicon glyphicon-pencil"></span>
お問い合わせ
</a>
</li>
</ul>
</div>

アイコンは、Bootstrapを利用しています。
■html/[テンプレートコード]/fonts

▼記述タグ

<span class="cb glyphicon glyphicon-star"></span>

http://glyphicons.bootstrapcheatsheets.com/
ここにアクセスし、アイコンの下にあるCopyをクリックするとタグをコピーできます。
Copy → </>HTML Tag

005

EC-CUBE3デザインテンプレート解説:ブロックについて(2)グローバルメニュー:プルダウンの作り方

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

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

▼1階層(バナーに表示されるリスト)のみ

<li>
<a href="{{ url('*****') }}">■■■</a>
</li>

▼2階層あり

<li>
<a href="{{ url('*****') }}">■■■</a>
<ul>
<li>
<a href="{{ url('*****') }}">●●●</a>
</li>
</ul>
</li>

▼3階層あり

<li>
<a href="{{ url('*****') }}">■■■</a>
<ul>
<li>
<a href="{{ url('*****') }}">●●●</a>
<ul>
<li><a href="{{ url('*****') }}">◆◆◆</a></li>
</ul>
</li>
</ul>
</li>

EC-CUBE3デザインテンプレート解説:ブロックについて(1)グローバルメニューのカテゴリ表示

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

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

【カテゴリ数が多くグローバルメニューのレイアウトが崩れてしまう時の対応】

① グローバルメニューでは非表示にし、ドロワーメニューでは表示する

001

002

■app/template/[テンプレートコード]/Block/login.twig
23行目付近、classに[sp]を追加

{% macro tree(Category) %}
<li class="category_list sp">

② グローバルメニュー、ドロワーメニューで非表示にする場合は、コードを削除する。(2箇所)
42行目付近、61行目付近、

{% for Category in Categories %}
{{ _self.tree(Category) }}
{% endfor %}

③ カテゴリを手動で入力する

<li>
<a href="{{ url('product_list') }}?category_id=2">インテリア</a>
</li>

EC-CUBE3デザインテンプレート解説:本デザインテンプレートを適用: サイドカラムにブロックを配置したときのレイアウト

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

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

(1)TOPページの画像スライド部分は、「#contents_top」に読み込ませているので、サイドカラム・メインカラムよりも上に表示されます。

016

(2)サイドカラムより先にメインカラムを読み込んでいるので、スマホで見たとき、メインカラムが常に上に表示されます。
表示順は、「メインカラム」「#side_left」「#side_right」の順です。

017

 

EC-CUBE3デザインテンプレート解説: EC-CUBE3のデフォルト: サイドカラムにブロックを配置したときのレイアウト

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

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

(1)EC-CUBE3のデフォルト状態で「#side_left」にブロックを配置します。

013

(2)フロントページでは下図のように表示されます。

014

(3)スマホで見たとき、「#side_left」のブロックがメインカラムのコンテンツよりも上に表示されます。

015

EC-CUBE3デザインテンプレート解説:スタイルシートの変更

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

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

EC-CUBE3のデフォルトCSS style.css default.css はほとんど修正していません。
「default.css」の最後に、独自のCSSを追加しています。
(1)style.cssの変更点
① 全体の幅を変更

/* --------------------------------
Common
-------------------------------- */
.inner {
max-width: 1150px;
}
/* ★全体の幅を変更★ */
.inner {
max-width: 1000px;
}

② 価格表示の変更

.item_price {
color: #525263;
font-weight: bold;
}
↓【変更】
.item_price {
color: #525263;
font-weight: bold;
}
.item_price {
color: #C00;
font-weight: normal;
}

③ 追加

/* ▼レイアウト変更(スマホ表示の際、メインカラム(#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%;
}

(2)default.cssの最後に独自のCSSを記述
下記の記述以降が独自CSSです。

/* |||||||||||||||■デザインテンプレートカスタマイズ■||||||||||||||| */

EC-CUBE3デザインテンプレート解説:Body背景やヘッダー背景を簡単に変更

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

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

019

詳細については下記をご覧ください。
http://www.kaiplus.com/user_data/design_ec3.php

EC-CUBE3デザインテンプレート解説:TOPページの画像スライド(画像カルーセル)

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

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

018

スライドの動作パターンを21種類の中から選択することができます。
詳細については下記をご覧ください。
http://www.kaiplus.com/user_data/ec3top_slider.php

EC-CUBE3デザインテンプレート解説:プラグインのインストール

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

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

(1)オーナーズストア>プラグイン>プラグイン一覧の「独自プラグイン」で、ダウンロード商品に同梱されているプラグインをアップロードします。

006

(2)プラグインをすべてアップロードした状態

007

(3)コンテンツ管理>ページ管理>TOPページ>レイアウト編集(プラグイン有効直後)

008

(4)各ブロックを配置します。
おすすめ商品ブロックの全ページチェックは外してます。

009

(5)TOPページ

010

① おすすめ商品:管理画面で登録すると反映されます。
② 売上ランキング:商品が購入されると反映されます。
③ 最近チェックした商品:商品詳細ページを閲覧すると反映されます。
④ ショッピングガイド:基本情報設定>特定商取引法で登録した内容が反映されます。
「送料について」と「配送について」は、「ショッピングガイド」プラグインの「設定」が反映されます。

(6)コンテンツ管理>ページ管理>商品一覧ページ>レイアウト編集
「#side_left」にカテゴリブロック等を配置します。

011

(7)商品一覧ページ

012