EC-CUBE4:スマホの閲覧時にサイドカラムを表示する

カスタマイズご希望の方はこちら

カスタマイズ内容

・サイドカラムはEC-CUBEデフォルトでは非表示になりますが、カスタマイズ版ではメインカラムの下に表示されます。
・表示順は上から、中央カラム→右カラム→左カラム となります。

PC画面

001

 スマホ画面

002
カスタマイズご希望の方はこちら

EC-CUBE4:ヘッダーデザイン・グローバルメニュー・カテゴリブロック

カスタマイズご希望の方はこちら

カスタマイズ内容

・ファイルの入れ換えにより、3パターンのヘッダーデザインから、好みのデザイン適用することができます。
・管理画面で、3パターンのグローバルニューから、好みのデザインを適用することができます。
・「カテゴリナビ(PC)」ブロックは、サイドカラムに配置することが出来ます。ヘッダーカラムに配置しても表示されません。
・管理画面で「カテゴリブロックの展開」を「有効」にすると、子カテゴリーが展開されて表示されます。
・「カテゴリナビ(PC)」ブロックと同じ機能を持つ「グローバルメニュー」は、logo.twigで読み込んでいます。
・ロゴを画像で作成して上書きして下さい。
■html/template/default/assets/img/common/logo.png

ヘッダーデザインの3パターン

カスタマイズ版のインストール時は、「No.2ヘッダーデザイン」で構築されます。

No.1 ヘッダーデザイン

001

No.2 ヘッダーデザイン

002

No.3 ヘッダーデザイン

003

管理画面で、グローバルニュー(3パターン)を選択

1、2、3 のいずれかを入力します。

004

 

グローバルメニューの3パターン

1

005

2

006

3

007

「カテゴリナビ(PC)」をサイドカラムに配置

008

管理画面で「カテゴリブロックの展開」を「有効」にすると、子カテゴリーが展開

009

010

 

 


 

【ヘッダーデザインの変更手順】

011

(1)twigファイルを入れ換える。
—————————————
■src/Eccube/Resource/template/default/Block/cart.twig
■src/Eccube/Resource/template/default/Block/category_nav_pc.twig
■src/Eccube/Resource/template/default/Block/header.twig
■src/Eccube/Resource/template/default/Block/login.twig
■src/Eccube/Resource/template/default/Block/logo.twig
■src/Eccube/Resource/template/default/Block/search_product.twig
—————————————

(2)function.jsを入れ換える。
—————————————
■html/template/default/assets/js/function.js
—————————————

(3)style.cssの以下の箇所を書き換える。

■html/template/default/assets/css/style.css
/* ========== ▼No.1 ヘッダーレイアウト ここから ==========*/





/* ========== ▲No.1 ヘッダーレイアウト ここまで ==========*/

(4)コンテンツ管理>キャッシュ削除 を行ってください。

(5)変更が反映されない場合は、ブラウザのキャッシュを削除してください。

 


【グローバルメニューの各カテゴリーを「全商品」として一つにまとめる方法】

(1)/Block/globalmenuA.twig

012

① 24行目付近を下記のように変更すると、一つにまとめることができます。

<ul class="ec-itemNav__nav">
{% for Category in Categories %}
<li>
{{ tree(Category) }}
</li>
{% endfor %}
</ul>

↓【変更】

<ul class="ec-itemNav__nav">
<li>
<a href="#">全商品</a>
<ul>
{% for Category in Categories %}
<li>
{{ tree(Category) }}
</li>
{% endfor %}
</ul>
</li>
</ul>

② 図のように配置したときの記述

<ul class="ec-itemNav__nav">
<li>
<a href="#">全商品</a>
<ul>
{% for Category in Categories %}
<li>
{{ tree(Category) }}
</li>
{% endfor %}
</ul>
</li>
<li>
<a href="#">メニュー1</a>
<ul>
<li>
<a href="#">メニュー2</a>
</li>
<li>
<a href="#">メニュー2</a>
</li>
<li>
<a href="#">メニュー2</a>
<ul>
<li>
<a href="#">メニュー3</a>
</li>
<li>
<a href="#">メニュー3</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>

(2)/Block/globalmenuB.twig

013

① 24行目付近を下記のように変更すると、一つにまとめることができます。

<ul class="global">
{% for Category in Categories %}
<li>
{{ tree(Category) }}
</li>
{% endfor %}
</ul>

↓【変更】

<ul class="global">
<li>
<a href="#">全商品</a>
<ul>
{% for Category in Categories %}
<li>
{{ tree(Category) }}
</li>
{% endfor %}
</ul>
</li>
</ul>

② 図のように配置したときの記述

<ul class="global">
<li>
<a href="#">全商品</a>
<ul>
{% for Category in Categories %}
<li>
{{ tree(Category) }}
</li>
{% endfor %}
</ul>
</li>
<li>
<a href="#">メニュー1</a>
<ul>
<li>
<a href="#">メニュー2</a>
</li>
<li>
<a href="#">メニュー2</a>
</li>
<li>
<a href="#">メニュー2</a>
<ul>
<li>
<a href="#">メニュー3</a>
</li>
<li>
<a href="#">メニュー3</a>
</li>
</ul>
</li>
</ul>
</li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
<li><a href="#">メニュー</a></li>
</ul>

(3)/Block/globalmenuC.twig

カテゴリーは、すでに「全商品」にまとめられています。

メガメニューの下記の数に応じて、縦列に並びます。
————————————–
<div class=”item”>~</div>
————————————–
これが、3つあるので3列に並んでいます。
1つ増やすと、4列で等間隔に並びます。
5つにすると、5列で等間隔に並びます。
あるいは、
<div class=”item”>にこだわらず、
自由に記述し、CSSでレイアウトを整えることもできます。
カスタマイズご希望の方はこちら

EC-CUBE4:「支払い方法」の詳細を購入手続きと注文メールに表示する

カスタマイズご希望の方はこちら

カスタマイズ内容

・管理画面「支払い方法設定」画面で、「サイト表示」と「メール表示」を入力します。
・「ご注文手続き」画面の支払い方法の下に、「サイト表示」内容が反映されます。
・「メール表示」はメールに反映されます。

支払い方法設定で「サイト表示」用と「メール表示」用を登録

001

「ご注文手続き」画面

002

メールに反映

003
カスタマイズご希望の方はこちら