今回はECサイトでオンラインショップを作成したいと思います。簡単にオンラインショップが出来ると言うことでチャレンジ。
とりあえずやったことを記載していこうと思います。
環境
OS/ミドルウェア | バージョン |
---|---|
CentOS | 7.2.1511 |
Apache | 2.4.6 |
PHP | 7.0.22 |
MySQL | 5.7.17 |
EC-CUBE | 3.0.15 |
ページ内リンク
索引 |
---|
EC-CUBE用のDB作成 |
EC-CUBEのインストール |
初期設定 |
ロゴのデフォルト文字変更 |
ロゴの店名変更 |
親カテゴリー追加 |
子カテゴリー追加 |
子カテゴリー並び順変更 |
カテゴリの一括登録 |
商品の一括登録 |
新着商品部分の作成 |
新着情報部分の作成 |
ギャラリー部分の作成 |
フッター部分の変更 |
ログイン部分の作成 |
カゴの中部分の作成 |
ロゴ部分の作成 |
商品検索部分の作成 |
EC-CUBE用のDB作成
サーバにEC-CUBE用のデータベースを作成します。サーバによってデータベースの作成方法は異なります。
作成したデータベース名、データベースにアクセスするためのユーザ名とパスワードが後の作業で必要になりますのでメモしておきます。
EC-CUBEのインストール
EC-CUBE 開発ドキュメントの手順通りにします。私の場合は、「Webインストーラーを利用したインストール方法」でやりました。
EC-CUBE 開発ドキュメントはコチラ → インストール方法
EC-CUBEのインストーラーが実行される
EC-CUBEのインストーラーが実行されたら参考 コチラ → ネットショップ構築システムEC-CUBE Version3をインストールする
※権限チェックが行われたら、NGになります。なので、所有者とグループの変更。
1 |
$ sudo chown -R apache:操作を行なうユーザ名 ec-cube |
後は手順通りにやればOKです。無事にインストール出来たらログインして管理画面とサイトをみてみましょう。
初期設定
サイトを参考 → EC-CUBE3を導入したらやっておきたい初期設定まとめ
ショップマスター
地図設定
まずは、「緯度」「経度」を調べます。URLにアクセス → Googleマップで緯度・経度を求める
検索フォームに入力し、[検索]をクリック。「緯度」「経度」が表示されます。コピーします。
管理画面に移動し、設定 → 基本情報設定 → ショップマスター
地図設定の「緯度」「経度」にペーストします。
Google Maps APIキー取得方法
サイトを参考 → 【2018年度版】Google Maps の APIキー を簡単に取得する
サイトの手順に沿って実行していきます。
APIキーの使い方
サイトを参考 → EC-CUBE「当サイトについて」などで、GoogleMapが表示されない。(管理画面では緯度・経度が登録されている)
私の場合は、「2 EC-CUBE3系」の設定です。
地図が表示されるか確認
サイトを表示します。フッターにある「当サイトについて」をクリック。
当サイトについての覧に地図が表示されました。
ロゴのデフォルト文字変更
ファイルの修正
管理画面 > コンテンツ管理 > ブロック管理 > ロゴ
[編集]をクリック
[変更前]
1 2 3 4 |
<div class="header_logo_area"> <p class="copy">くらしを楽しむライフスタイルグッズ</p> <h1 class="header_logo"><a href="{{ url('homepage') }}">{{ BaseInfo.shop_name }}</a></h1> </div> |
[変更後]
1 2 3 4 |
<div class="header_logo_area"> <p class="copy">食事を楽しむライフスタイルプレゼント</p> <h1 class="header_logo"><a href="{{ url('homepage') }}">{{ BaseInfo.shop_name }}</a></h1> </div> |
キャッシュのクリア
管理画面 > コンテンツ管理 > キャッシュ管理
[キャッシュ削除]をクリック
変更後の確認
「shift」を押しながらリロードして、確認。
[変更前]
[変更後]
ロゴの店名変更
店名の変更
管理画面 > 設定 > 基本情報設定 > ショップマスター
店名に入力し、[登録]をクリック
変更後の確認
リロードして、確認。
[変更前]
[変更後]
親カテゴリー追加
カテゴリの追加
管理画面 > 商品管理 > カテゴリ登録
カテゴリを追加したい物をフォームに入力し、[カテゴリ作成]をクリック
カテゴリが追加されます。
変更後の確認
リロードして、確認。
[変更前]
[変更後]
子カテゴリー追加
カテゴリの追加
管理画面 > 商品管理 > カテゴリ登録
カテゴリをクリック。今回は生キャラメル
カテゴリを追加したい物をフォームに入力し、[カテゴリ作成]をクリック
カテゴリが追加されます。
変更後の確認
リロードして、確認。
[変更前]
[変更後]
子カテゴリー並び順変更
カテゴリの並び順変更
管理画面 > 商品管理 > カテゴリ登録
並び順を変更したいカテゴリにマウスを持っていきます。
カーソルの形が十字架みたいに変更されるので、左クリックしたまま移動したいとこに持っていきます。
そうすると移動が出来ます。
変更後の確認
リロードして、確認。
[変更前]
[変更後]
カテゴリの一括登録
参考URL → カテゴリCSV登録
商品の一括登録
参考URL → 商品CSV登録
新着商品部分の作成
新規ブロックを追加する
参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法
管理画面 >コンテンツ管理 >ブロック管理
最下部の【新規入力】より新規ブロックを追加します。
[ブロック名]
1 |
新着商品(オリジナル) |
[ファイル名]
1 |
new_product_original |
[ブロックデータ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 |
<div id="contents_top"> <div id="item_list"> <h2 class="title">Featured</h2> <div class="row"> <div class="col-sm-4 col-xs-12"> <div class="pickup_item"> <a href="#"> <div class="featured_item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img03.jpg"></div> <dl> <dt class="item_name text-warning">お気に入りのエスプレッソタイム</dt> <dd class="item_comment">コーヒータイムを上質な時間にしてくれる、口当たりのよさとデザイン性を兼ね備えたエスプレッソカップを集めました・・・</dd> <dd class="more_link text-warning">read more</dd> </dl> </a> </div> </div> <div class="col-sm-4 col-xs-12"> <div class="pickup_item"> <a href="#"> <div class="featured_item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img04.jpg"></div> <dl> <dt class="item_name text-warning">アウトドアにおすすめのアイテム</dt> <dd class="item_comment">カジュアルすぎない感じがちょうどよい、大人のためのアウトドアマガジンから、バイヤーおすすめのアイテムをセレクト・・・</dd> <dd class="more_link text-warning">read more</dd> </dl> </a> </div> </div> <div class="col-sm-4 col-xs-12"> <div class="pickup_item"> <a href="#"> <div class="featured_item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img05.jpg"></div> <dl> <dt class="item_name text-warning">フランス製のデッドストック</dt> <dd class="item_comment">60~70年代のフランス製のデッドストックの器を集めました。絶妙な色合いと、独特の優しい風合いをお楽しみいただけ・・・</dd> <dd class="more_link text-warning">read more</dd> </dl> </a> </div> </div> </div> </div> <div id="item_list"> <h2 class="title">New Arrival</h2> <ul class="row no-padding"> <li class="col-sm-3 col-xs-6"> <div class="pickup_item"> <a href="/products/detail/4"> <div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/pic04.jpg"></div> <dl> <dt class="item_name">マカロン</dt> <dd class="item_price">¥ 7,560</dd> </dl> </a> </div> </li><li class="col-sm-3 col-xs-6"> <div class="pickup_item"> <a href="/products/detail/16"> <div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/pic05.jpg"></div> <dl> <dt class="item_name">マカロン</dt> <dd class="item_price">¥ 1,620</dd> </dl> </a> </div> </li><li class="col-sm-3 col-xs-6"> <div class="pickup_item"> <a href="/products/detail/15"> <div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/pic06.jpg"></div> <dl> <dt class="item_name">フィナンシェ</dt> <dd class="item_price">¥ 1,728</dd> </dl> </a> </div> </li><li class="col-sm-3 col-xs-6"> <div class="pickup_item"> <a href="/products/detail/14"> <div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/pic07.jpg"></div> <dl> <dt class="item_name">チョコレート</dt> <dd class="item_price">¥ 1,728</dd> </dl> </a> </div> </li> </ul> <ul class="row no-padding"> <li class="col-sm-3 col-xs-6"> <div class="pickup_item"> <a href="/products/detail/13"> <div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/pic08.jpg"></div> <dl> <dt class="item_name">ロールケーキ</dt> <dd class="item_price">¥ 1,728</dd> </dl> </a> </div> </li><li class="col-sm-3 col-xs-6"> <div class="pickup_item"> <a href="/products/detail/12"> <div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/pic09.jpg"></div> <dl> <dt class="item_name">チョコレート</dt> <dd class="item_price">¥ 1,836</dd> </dl> </a> </div> </li><li class="col-sm-3 col-xs-6"> <div class="pickup_item"> <a href="/products/detail/11"> <div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/pic10.jpg"></div> <dl> <dt class="item_name">マカロン</dt> <dd class="item_price">¥ 1,836</dd> </dl> </a> </div> </li><li class="col-sm-3 col-xs-6"> <div class="pickup_item"> <a href="/products/detail/10"> <div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/pic11.jpg"></div> <dl> <dt class="item_name">マカロンマカロンマカロンマカロンマカロン</dt> <dd class="item_price">¥ 1,836</dd> </dl> </a> </div> </li> </ul> <div class="btn_circleArrow"> <a href="./products/list">商品一覧</a> </div> </div><!-- /item_list --> </div><!-- /contents_top --> |
ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。
新着商品(オリジナル)が追加されました。
データベースのロジックフラッグを変更する
ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。
テーブル名「dtb_block」「new_product_original」の「deletable_flg」を「1」から「0」へ変更します。
スタイルの変更
style.cssのファイルに下記を追記して下さい。
対象ファイル:/html/template/default/css/style.css
[ファイルの中身]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
/* -------------------------------- 新着商品 -------------------------------- */ #topicpath li:after { content: " > "; margin: 0 5px; } ol#list_header_menu { background-color: #f5f5f5; padding: 10px; border-bottom: none; } ol#list_header_menu li { letter-spacing: 0.07em; } ol#list_header_menu li a { color: #333; } ol#list_header_menu li a:hover { text-decoration: underline; } .item_comment { color: #333; font-size: 90%; } #item_list { margin-bottom: 60px; text-align: center; } #item_list .item_name { text-align: center; } #item_list .item_price { text-align: center; color: #333; font-size: 120%; font-style: italic; } #item_list .item_photo { margin: 0 auto; height: 200px; width: 200px; overflow: hidden; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; } #item_list .item_photo img { min-width: 150%; width: auto; height: auto; min-height: 100%; margin-left: -25%; margin-top: 0; } #item_list dl { margin-top: 30px; margin-bottom: 30px; } @media only screen and (max-width:980px){ #item_list .item_photo { height: 180px; width: 180px; } } @media only screen and (max-width:800px){ #item_list .item_photo { height: 150px; width: 150px; } } @media only screen and (max-width:768px){ #item_list .item_photo { height: 150px; width: 150px; } #item_list .item_photo img { width: 230px; max-width: 200%; } } /* title ---------------------------------------------- */ .text-center { text-align: center; } .title{ margin-bottom: 40px; font-size: 32px; font-weight: 700; font-family: 'Montserrat', sans-serif; text-align: center; color: #333; } .title { padding-bottom: .5em; border-bottom: 1px solid #333; } /* Button ---------------------------------------------- */ #item_list ul li { margin-bottom: 30px; } .btn_circleArrow { text-align: center; } .btn_circleArrow a { position: relative; display: inline-block; margin: 0 auto; padding: 5px 40px; color: #fff; background-color: #E98E8E; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; border: solid 1px #E98E8E; font-size: 16px; font-size: 1.6rem; letter-spacing: 0.15em; text-align: center; } |
レイアウトの編集
管理画面 > コンテンツ管理 > ページ管理
ページ一覧にあるTOPページの「…」をクリック
ページ一覧にあるTOPページの「レイアウト編集」をクリック
新着商品と新着商品(オリジナル)を入れ替えます。
プレビューで確認し、OKならば[登録]をクリック。
キャッシュのクリア
管理画面 > コンテンツ管理 > キャッシュ管理
[キャッシュ削除]をクリック
変更後の確認
「shift」を押しながらリロードして、確認。
[変更前]
[変更後]
新着情報部分の作成
新規ブロックを追加する
参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法
管理画面 >コンテンツ管理 >ブロック管理
最下部の【新規入力】より新規ブロックを追加します。
[ブロック名]
1 |
新着情報(オリジナル) |
[ファイル名]
1 |
news_original |
[ブロックデータ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
{# This file is part of EC-CUBE Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved. http://www.lockon.co.jp/ This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. #} <script type="text/javascript"> $(function(){ $(".newslist").each(function(){ var listLenght = $(this).find("dl").length; if(listLenght>5){ $(this).find("dl:gt(4)").each(function(){$(this).hide();}); $(this).append('<a id="news_readmore">» もっと見る</a>'); var dispNum = 5; $(this).find("#news_readmore").click(function(){ dispNum +=5; $(this).parent().find("dl:lt("+dispNum+")").show(400); if (dispNum>=listLenght) { $(this).hide(); } }) } }); }); </script> <div class="col-sm-6 col-xs-12"> <div class="col-sm-12 col-xs-12 news_contents"> <div id="news_area_original"> <h2 class="title">News & Topics</h2> <div class="accordion"> <div class="newslist"> {% for News in NewsList %} <dl> <dt> <span class="date">{{ News.date|date("Y/m/d") }}</span> <span class="news_title"> {{ News.title }} </span> {% if News.comment or News.url %} <span class="angle-circle"><svg class="cb cb-angle-down"><use xlink:href="#cb-angle-down" /></svg></span> {% endif %} </dt> {% if News.comment or News.url %} <dd>{{ News.comment|raw|nl2br}} {% if News.url %}<br> <a href="{{ News.url }}" {% if News.link_method == '1' %}target="_blank"{% endif %}> 詳しくはこちら </a>{% endif %} </dd> {% endif %} </dl> {% endfor %} </div> </div> </div> </div> </div> |
ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。
後で写真を追加
新着商品(オリジナル)が追加されました。
後で写真を追加
データベースのロジックフラッグを変更する
ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。
テーブル名「dtb_block」「news_original」の「logic_flg」を「0」から「1」「deletable_flg」を「1」から「0」へ変更します。
後で写真を追加
ECCUBE3構成ファイルよりコントローラーを登録
続いて追加した「メインメニューブロック」のコントローラーを登録します。
対象ファイル:/src/Eccube/ControllerProvider/FrontControllerProvider.php
FrontControllerProvider.phpに「//block」が定義されている箇所があるので以下の一文をブロック定義部の最下部に追加します。
1 2 3 4 5 6 7 8 |
// block $c->match('/block/category', '\Eccube\Controller\Block\CategoryController::index')->bind('block_category'); $c->match('/block/cart', '\Eccube\Controller\Block\CartController::index')->bind('block_cart'); $c->match('/block/search_product', '\Eccube\Controller\Block\SearchProductController::index')->bind('block_search_product'); $c->match('/block/news', '\Eccube\Controller\Block\NewsController::index')->bind('block_news'); $c->match('/block/login', '\Eccube\Controller\Block\LoginController::index')->bind('block_login'); // 追加 $c->match('/block/news_original', '\Eccube\Controller\Block\NewsOriginalController::index')->bind('block_news_original'); |
ECCUBE3構成ファイルよりコントローラーを作成
コントローラーの登録ができたら続いてコントローラの作成を行います。今回は既存の新着情報メニューをコピーして新しいメニューを作るので以下のファイルをそのままコピーして「NewsOriginalController.php」リネームします。
/src/Eccube/Controller/Block/NewsController.php
リネームしたファイルの内容をリネームしたものに変更。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<?php /* * This file is part of EC-CUBE * * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved. * * http://www.lockon.co.jp/ * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License * as published by the Free Software Foundation; either version 2 * of the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. */ namespace Eccube\Controller\Block; use Eccube\Application; class NewsController { public function index(Application $app) { $NewsList = $app['orm.em']->getRepository('\Eccube\Entity\News') ->findBy( array(), array('rank' => 'DESC') ); return $app->render('Block/news.twig', array( 'NewsList' => $NewsList, )); } } |
↓に変更
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<?php /* * This file is part of EC-CUBE * * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved. * * http://www.lockon.co.jp/ * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License * as published by the Free Software Foundation; either version 2 * of the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. */ namespace Eccube\Controller\Block; use Eccube\Application; class NewsOriginalController { public function index(Application $app) { $NewsList = $app['orm.em']->getRepository('\Eccube\Entity\News') ->findBy( array(), array('rank' => 'DESC') ); return $app->render('Block/news_original.twig', array( 'NewsList' => $NewsList, )); } } |
スタイルの変更
style.cssのファイルに下記を追記して下さい。
対象ファイル:/html/template/default/css/style.css
[ファイルの中身]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* -------------------------------- 新着情報 -------------------------------- */ .news_contents { padding: 0 16px 0 0; } #news_area_original { margin-bottom: 60px; background: transparent; } #news_area_original h2.title { margin-bottom: 0; } |
レイアウトの編集
管理画面 > コンテンツ管理 > ページ管理
ページ一覧にあるTOPページの「…」をクリック
ページ一覧にあるTOPページの「レイアウト編集」をクリック
新着情報と新着情報(オリジナル)を入れ替えます。
後で写真を追加
プレビューで確認し、OKならば[登録]をクリック。
後で写真を追加
キャッシュのクリア
管理画面 > コンテンツ管理 > キャッシュ管理
[キャッシュ削除]をクリック
変更後の確認
「shift」を押しながらリロードして、確認。
[変更前]
[変更後]
後で写真を追加
ギャラリー部分の作成
新規ブロックを追加する
参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法
管理画面 >コンテンツ管理 >ブロック管理
最下部の【新規入力】より新規ブロックを追加します。
[ブロック名]
1 |
ギャラリー(オリジナル) |
[ファイル名]
1 |
garally_original |
[ブロックデータ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
{# This file is part of EC-CUBE Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved. http://www.lockon.co.jp/ This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. #} <div class="item_gallery_original col-sm-6 col-xs-12"> <h2 class="title">Gallery</h2> <ul class="row"> <li class="col-sm-3 col-xs-4"><a href="/products/detail/4" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img10.jpg"></a></li> <li class="col-sm-3 col-xs-4"><a href="/products/detail/5" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img11.jpg"></a></li> <li class="col-sm-3 col-xs-4"><a href="/products/detail/6" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img12.jpg"></a></li> <li class="col-sm-3 col-xs-4"><a href="/products/detail/7" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img13.jpg"></a></li> <li class="col-sm-3 col-xs-4"><a href="/products/detail/8" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img14.jpg"></a></li> <li class="col-sm-3 col-xs-4"><a href="/products/detail/9" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img15.jpg"></a></li> <li class="col-sm-3 col-xs-4"><a href="/products/detail/10" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img16.jpg"></a></li> <li class="col-sm-3 col-xs-4"><a href="/products/detail/11" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img17.jpg"></a></li> <li class="col-sm-3 col-xs-4"><a href="/products/detail/12" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img18.jpg"></a></li> <li class="col-sm-3 col-xs-4"><a href="/products/detail/13" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img19.jpg"></a></li> <li class="col-sm-3 col-xs-4"><a href="/products/detail/14" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img20.jpg"></a></li> <li class="col-sm-3 col-xs-4"><a href="/products/detail/15" class="item_photo"><img src="{{ app.config.front_urlpath }}/img/top/img21.jpg"></a></li> </ul> <!-- フリーエリア --> <div class="txt_bnr"> {%- if BaseInfo.delivery_free_amount -%} <strong>{{ BaseInfo.delivery_free_amount|number_format }}円以上の購入で配送料無料</strong><br>一部地域は除く {%- else -%} <strong>0円以上の購入で配送料無料</strong><br>一部地域は除く {%- endif -%} </div> <div class="text-right sns_link"> <!-- Facebook --> <a href="" target="_blank"><i class="fa fa-facebook-square" aria-hidden="true"></i></a> <!-- Twitter --> <a href="" target="_blank"><i class="fa fa-twitter-square" aria-hidden="true"></i></a> <!-- Instagram --> <a href="" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a> </div> </div> |
ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。
後で写真を追加
新着商品(オリジナル)が追加されました。
後で写真を追加
データベースのロジックフラッグを変更する
ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。
テーブル名「dtb_block」「new_product_original」の「deletable_flg」を「1」から「0」へ変更します。
後で写真を追加
スタイルの変更
style.cssのファイルに下記を追記して下さい。
対象ファイル:/html/template/default/css/style.css
[ファイルの中身]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* -------------------------------- ギャラリー -------------------------------- */ .item_gallery_original { clear: none; } .front_page #contents .row { padding-bottom: 24px; } .row { margin-left: -16px; margin-right: -16px; } .text-right { text-align: right; } .text-right.sns_link a { font-size: 36px; margin-left: 10px; color: rgb(233, 142, 142); } |
FontAwesomeを導入
対象ファイル:/src/Eccube/Resource/template/default/default_frame.twig
45〜50行目付近
[ファイルの中身]
1 2 3 4 5 6 |
<link rel="icon" href="{{ app.config.front_urlpath }}/img/common/favicon.ico"> <link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/style.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}"> <link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/slick.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}"> <link rel="stylesheet" href="{{ app.config.front_urlpath }}/css/default.css?v={{ constant('Eccube\\Common\\Constant::VERSION') }}"> // 追加 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> |
レイアウトの編集
管理画面 > コンテンツ管理 > ページ管理
ページ一覧にあるTOPページの「…」をクリック
ページ一覧にあるTOPページの「レイアウト編集」をクリック
ギャラリーとギャラリー(オリジナル)を入れ替えます。
後で写真を追加
プレビューで確認し、OKならば[登録]をクリック。
後で写真を追加
キャッシュのクリア
管理画面 > コンテンツ管理 > キャッシュ管理
[キャッシュ削除]をクリック
変更後の確認
「shift」を押しながらリロードして、確認。
[変更前]
後で写真を追加
[変更後]
後で写真を追加
フッター部分の変更
ロゴの作成
下記URLからオリジナルのロゴを作成。
私の場合は作成したロゴを、下記に格納
ディレクトリ:/html/template/default/img/top/
ファイル名:logo.png
新規ブロックを追加する
参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法
管理画面 >コンテンツ管理 >ブロック管理
最下部の【新規入力】より新規ブロックを追加します。
[ブロック名]
1 |
フッター(オリジナル) |
[ファイル名]
1 |
footer_original |
[ブロックデータ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
{# This file is part of EC-CUBE Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved. http://www.lockon.co.jp/ This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. #} <div class="container-fluid inner"> <ul> <li><a href="{{ url('help_about') }}">当サイトについて</a></li> <li><a href="{{ url('help_privacy') }}">プライバシーポリシー</a></li> <li><a href="{{ url('help_tradelaw') }}">特定商取引法に基づく表記</a></li> <li><a href="{{ url('contact') }}">お問い合わせ</a></li> </ul> <div class="footer_logo_area"> <p class="logo"><a href="{{ url('homepage') }}"><img src="{{ app.config.front_urlpath }}/img/top/logo.png"></a></p> <p class="copyright"> <small>copyright (c) {{ BaseInfo.shop_name }} all rights reserved.</small> </p> </div> </div> |
ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。
後で写真を追加
フッター(オリジナル)が追加されました。
後で写真を追加
データベースのロジックフラッグを変更する
ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。
テーブル名「dtb_block」「footer_original」の「deletable_flg」を「1」から「0」へ変更します。
後で写真を追加
スタイルの変更
style.cssのファイルに下記を追記して下さい。
対象ファイル:/html/template/default/css/style.css
[ファイルの中身]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
/* -------------------------------- フッター -------------------------------- */ #footer { background: #333; } #footer a { color: #fff; } #footer ul li a { color: #fff; } p.copyright { color: #fff; } |
キャッシュのクリア
管理画面 > コンテンツ管理 > キャッシュ管理
[キャッシュ削除]をクリック
変更後の確認
「shift」を押しながらリロードして、確認。
[変更前]
後で写真を追加
[変更後]
後で写真を追加
ログイン部分の作成
新規ブロックを追加する
参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法
管理画面 >コンテンツ管理 >ブロック管理
最下部の【新規入力】より新規ブロックを追加します。
[ブロック名]
1 |
ログイン(オリジナル) |
[ファイル名]
1 |
login_original |
[ブロックデータ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
{# This file is part of EC-CUBE Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved. http://www.lockon.co.jp/ This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. #} {% if is_granted('ROLE_USER') %} <div id="member" class="member drawer_block pc"> <div class="inner"> <div class="description">食事を楽しむライフスタイルプレゼント</div> <ul class="member_link"> <li> <a href="{{ url('mypage') }}"> <svg class="cb cb-user-circle"><use xlink:href="#cb-user-circle" /></svg>マイページ </a> </li> {% if BaseInfo.option_favorite_product == 1 %} <li><a href="{{ url('mypage_favorite') }}"><svg class="cb cb-heart-circle"><use xlink:href="#cb-heart-circle"></use></svg>お気に入り</a></li> {% endif %} <li> <a href="{{ url('logout') }}"> <svg class="cb cb-lock-circle"><use xlink:href="#cb-lock-circle" /></svg>ログアウト </a> </li> </ul> </div> </div> {% else %} <div id="member" class="member drawer_block pc"> <div class="inner"> <div class="description">食事を楽しむライフスタイルプレゼント</div> <ul class="member_link"> <li> <a href="{{ url('entry') }}"> <svg class="cb cb-user-circle"><use xlink:href="#cb-user-circle" /></svg>新規会員登録 </a> </li> {% if BaseInfo.option_favorite_product == 1 %} <li><a href="{{ url('mypage_favorite') }}"><svg class="cb cb-heart-circle"><use xlink:href="#cb-heart-circle"></use></svg>お気に入り</a></li> {% endif %} <li> <a href="{{ url('mypage_login') }}"> <svg class="cb cb-lock-circle"><use xlink:href="#cb-lock-circle" /></svg>ログイン </a> </li> </ul> </div> </div> {% endif %} |
ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。
後で写真を追加
ログイン(オリジナル)が追加されました。
後で写真を追加
データベースのロジックフラッグを変更する
ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。
テーブル名「dtb_block」「login_original」の「logic_flg」を「0」から「1」「deletable_flg」を「1」から「0」へ変更します。
後で写真を追加
ECCUBE3構成ファイルよりコントローラーを登録
続いて追加した「メインメニューブロック」のコントローラーを登録します。
対象ファイル:/src/Eccube/ControllerProvider/FrontControllerProvider.php
FrontControllerProvider.phpに「//block」が定義されている箇所があるので以下の一文をブロック定義部の最下部に追加します。
1 2 3 4 5 6 7 8 9 |
// block $c->match('/block/category', '\Eccube\Controller\Block\CategoryController::index')->bind('block_category'); $c->match('/block/cart', '\Eccube\Controller\Block\CartController::index')->bind('block_cart'); $c->match('/block/search_product', '\Eccube\Controller\Block\SearchProductController::index')->bind('block_search_product'); $c->match('/block/news', '\Eccube\Controller\Block\NewsController::index')->bind('block_news'); $c->match('/block/login', '\Eccube\Controller\Block\LoginController::index')->bind('block_login'); $c->match('/block/news_original', '\Eccube\Controller\Block\NewsOriginalController::index')->bind('block_news_original'); // 追加 $c->match('/block/login_original', '\Eccube\Controller\Block\LoginOriginalController::index')->bind('block_login_original'); |
ECCUBE3構成ファイルよりコントローラーを作成
コントローラーの登録ができたら続いてコントローラの作成を行います。今回は既存の新着情報メニューをコピーして新しいメニューを作るので以下のファイルをそのままコピーして「LoginOriginalController.php」リネームします。
/src/Eccube/Controller/Block/LoginController.php
リネームしたファイルの内容をリネームしたものに変更。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php /* * This file is part of EC-CUBE * * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved. * * http://www.lockon.co.jp/ * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License * as published by the Free Software Foundation; either version 2 * of the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. */ namespace Eccube\Controller\Block; use Eccube\Application; use Symfony\Component\HttpFoundation\Request; class LoginController { public function index(Application $app, Request $request) { return $app->render('Block/login.twig'); } } |
↓に変更
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<?php /* * This file is part of EC-CUBE * * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved. * * http://www.lockon.co.jp/ * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License * as published by the Free Software Foundation; either version 2 * of the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. */ namespace Eccube\Controller\Block; use Eccube\Application; use Symfony\Component\HttpFoundation\Request; class LoginOriginalController { public function index(Application $app, Request $request) { return $app->render('Block/login_original.twig'); } } |
スタイルの変更
style.cssのファイルに下記を追記して下さい。
対象ファイル:/html/template/default/css/style.css
[ファイルの中身]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
/* -------------------------------- ログイン -------------------------------- */ #header { padding: 0; } #header .container-fluid.inner { max-width: 100%; padding: 0; } #header .inner { position: relative; margin: 0 auto; } #header .header_logo_area { float: none; margin-right: 0; padding-top: 45px; padding-bottom: 32px; } .description { color: #fff; font-size: 14px; float: left; height: 54px; line-height: 54px; } .drawer.sp .description { display: none; } #member { float: none; text-align: right; width: 100%; background-color: #333; clear: both; } #member a { color: #fff; } |
レイアウトの編集
管理画面 > コンテンツ管理 > ページ管理
ページ一覧にあるTOPページの「…」をクリック
ページ一覧にあるTOPページの「レイアウト編集」をクリック
ログインとログイン(オリジナル)を入れ替えます。
後で写真を追加
プレビューで確認し、OKならば[登録]をクリック。
後で写真を追加
キャッシュのクリア
管理画面 > コンテンツ管理 > キャッシュ管理
[キャッシュ削除]をクリック
変更後の確認
「shift」を押しながらリロードして、確認。
[変更前]
後で写真を追加
[変更後]
後で写真を追加
カゴの中部分の作成
新規ブロックを追加する
参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法
管理画面 >コンテンツ管理 >ブロック管理
最下部の【新規入力】より新規ブロックを追加します。
[ブロック名]
1 |
カゴの中(オリジナル) |
[ファイル名]
1 |
cart_original |
[ブロックデータ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
{# This file is part of EC-CUBE Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved. http://www.lockon.co.jp/ This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. #} <div id="cart_area" class="inner"> <p class="clearfix cart-trigger"><a href="#cart"> <svg class="cb cb-shopping-cart"> <use xlink:href="#cb-shopping-cart"/> </svg> <span class="badge">{{ Cart.total_quantity }}</span> <svg class="cb cb-close"> <use xlink:href="#cb-close"/> </svg> </a> <span class="cart_price pc">合計 <span class="price">{{ Cart.total_price|price }}</span></span></p> <div id="cart" class="cart"> <div class="inner"> {% for error in app.session.flashbag.get('eccube.front.cart.error') %} <div class="message"> <p class="errormsg bg-danger"> <svg class="cb cb-warning"><use xlink:href="#cb-warning" /></svg>{{ error|trans|nl2br }} </p> </div> {% endfor %} {% for CartItem in Cart.CartItems %} {% set ProductClass = CartItem.Object %} {% set Product = ProductClass.Product %} <div class="item_box clearfix"> <div class="item_photo"><img src="{{ app.config.image_save_urlpath }}/{{ Product.MainListImage|no_image_product }}" alt="{{ Product.name }}"></div> <dl class="item_detail"> <dt class="item_name">{{ Product.name }}</dt> <dd class="item_pattern small"> {%- if ProductClass.ClassCategory1 -%} {{ ProductClass.ClassCategory1.ClassName }}:{{ ProductClass.ClassCategory1 }} {%- if ProductClass.ClassCategory2 -%} <br>{{ ProductClass.ClassCategory2.ClassName }}:{{ ProductClass.ClassCategory2 }} {%- endif -%} {%- endif -%} </dd> <dd class="item_price">{{ CartItem.price|price }}<span class="small">税込</span></dd> <dd class="item_quantity form-group form-inline">数量:{{ CartItem.quantity }}</dd> </dl> </div><!--/item_box--> <p class="cart_price sp">合計 <span class="price">{{ Cart.total_price|price }}</span></p> {% endfor %} {% if Cart.CartItems|length > 0 %} <div class="btn_area"> <ul> <li> <a href="{{ url('cart') }}" class="btn btn-primary">カートへ進む</a> </li> <li> <button type="button" class="btn btn-default btn-sm cart-trigger">キャンセル</button> </li> </ul> </div> {% else %} <div class="btn_area"> <div class="message"> <p class="errormsg bg-danger" style="margin-bottom: 20px;"> 現在カート内に<br>商品はございません。 </p> </div> </div> {% endif %} </div> </div> </div> |
ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。
後で写真を追加
カゴの中(オリジナル)が追加されました。
後で写真を追加
データベースのロジックフラッグを変更する
ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。
テーブル名「dtb_block」「cart_original」の「logic_flg」を「0」から「1」「deletable_flg」を「1」から「0」へ変更します。
後で写真を追加
ECCUBE3構成ファイルよりコントローラーを登録
続いて追加した「メインメニューブロック」のコントローラーを登録します。
対象ファイル:/src/Eccube/ControllerProvider/FrontControllerProvider.php
FrontControllerProvider.phpに「//block」が定義されている箇所があるので以下の一文をブロック定義部の最下部に追加します。
1 2 3 4 5 6 7 8 9 |
// block $c->match('/block/category', '\Eccube\Controller\Block\CategoryController::index')->bind('block_category'); $c->match('/block/cart', '\Eccube\Controller\Block\CartController::index')->bind('block_cart'); $c->match('/block/search_product', '\Eccube\Controller\Block\SearchProductController::index')->bind('block_search_product'); $c->match('/block/news', '\Eccube\Controller\Block\NewsController::index')->bind('block_news'); $c->match('/block/login', '\Eccube\Controller\Block\LoginController::index')->bind('block_login'); $c->match('/block/news_original', '\Eccube\Controller\Block\NewsOriginalController::index')->bind('block_news_original'); $c->match('/block/login_original', '\Eccube\Controller\Block\LoginOriginalController::index')->bind('block_login_original'); $c->match('/block/cart_original', '\Eccube\Controller\Block\CartOriginalController::index')->bind('block_cart_original'); |
ECCUBE3構成ファイルよりコントローラーを作成
コントローラーの登録ができたら続いてコントローラの作成を行います。今回は既存の新着情報メニューをコピーして新しいメニューを作るので以下のファイルをそのままコピーして「CartOriginalController.php」リネームします。
/src/Eccube/Controller/Block/CartController.php
リネームしたファイルの内容をリネームしたものに変更。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?php /* * This file is part of EC-CUBE * * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved. * * http://www.lockon.co.jp/ * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License * as published by the Free Software Foundation; either version 2 * of the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. */ namespace Eccube\Controller\Block; use Eccube\Application; class CartController { public function index(Application $app) { /** @var $Cart \Eccube\Entity\Cart */ $Cart = $app['eccube.service.cart']->getCartObj(); return $app->render('Block/cart.twig', array( 'Cart' => $Cart, )); } } |
↓に変更
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?php /* * This file is part of EC-CUBE * * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved. * * http://www.lockon.co.jp/ * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License * as published by the Free Software Foundation; either version 2 * of the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. */ namespace Eccube\Controller\Block; use Eccube\Application; class CartOriginalController { public function index(Application $app) { /** @var $Cart \Eccube\Entity\Cart */ $Cart = $app['eccube.service.cart']->getCartObj(); return $app->render('Block/cart_original.twig', array( 'Cart' => $Cart, )); } } |
スタイルの変更
style.cssのファイルに下記を追記して下さい。
対象ファイル:/html/template/default/css/style.css
[ファイルの中身]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* -------------------------------- カゴの中 -------------------------------- */ #header #cart_area { position: relative; top: 58px; right: 0; margin: 0 auto; width: auto; } #cart_area p { border-top: none; border-left: none; border-right: none; border-bottom: solid 2px #d9d9d9; } .badge { background-color: #E98E8E; } |
レイアウトの編集
管理画面 > コンテンツ管理 > ページ管理
ページ一覧にあるTOPページの「…」をクリック
ページ一覧にあるTOPページの「レイアウト編集」をクリック
カゴの中とカゴの中(オリジナル)を入れ替えます。
後で写真を追加
プレビューで確認し、OKならば[登録]をクリック。
後で写真を追加
キャッシュのクリア
管理画面 > コンテンツ管理 > キャッシュ管理
[キャッシュ削除]をクリック
変更後の確認
「shift」を押しながらリロードして、確認。
[変更前]
後で写真を追加
[変更後]
後で写真を追加
ロゴ部分の作成
ロゴの作成
下記URLからオリジナルのロゴを作成。
私の場合は作成したロゴを、下記に格納
ディレクトリ:/html/template/default/img/top/
ファイル名:logo.png
新規ブロックを追加する
参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法
管理画面 >コンテンツ管理 >ブロック管理
最下部の【新規入力】より新規ブロックを追加します。
[ブロック名]
1 |
ロゴ(オリジナル) |
[ファイル名]
1 |
logo_original |
[ブロックデータ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
{# This file is part of EC-CUBE Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved. http://www.lockon.co.jp/ This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. #} <div class="header_logo_area"> <h1 class="header_logo text-center"><a href="{{ url('homepage') }}"><img src="{{ app.config.front_urlpath }}/img/top/logo.png"></a></h1> </div> |
ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。
後で写真を追加
新着商品(オリジナル)が追加されました。
後で写真を追加
データベースのロジックフラッグを変更する
ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。
テーブル名「dtb_block」「new_product_original」の「deletable_flg」を「1」から「0」へ変更します。
後で写真を追加
スタイルの変更
style.cssのファイルに下記を追記して下さい。
対象ファイル:/html/template/default/css/style.css
[ファイルの中身]
1 2 3 4 5 6 7 |
/* -------------------------------- ロゴ -------------------------------- */ .text-center { text-align: center; } |
レイアウトの編集
管理画面 > コンテンツ管理 > ページ管理
ページ一覧にあるTOPページの「…」をクリック
ページ一覧にあるTOPページの「レイアウト編集」をクリック
カゴの中とカゴの中(オリジナル)を入れ替えます。
後で写真を追加
プレビューで確認し、OKならば[登録]をクリック。
後で写真を追加
キャッシュのクリア
管理画面 > コンテンツ管理 > キャッシュ管理
[キャッシュ削除]をクリック
変更後の確認
「shift」を押しながらリロードして、確認。
[変更前]
後で写真を追加
[変更後]
後で写真を追加
カテゴリ部分の作成
新規ブロックを追加する
参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法
管理画面 >コンテンツ管理 >ブロック管理
最下部の【新規入力】より新規ブロックを追加します。
[ブロック名]
1 |
カテゴリ(オリジナル) |
[ファイル名]
1 |
category_original |
[ブロックデータ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
{# This file is part of EC-CUBE Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved. http://www.lockon.co.jp/ This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. #} {% macro tree(Category) %} <li> <a href="{{ url('product_list') }}?category_id={{ Category.id }}"> {{ Category.name }} </a> {% if Category.children|length > 0 %} <ul> {% for ChildCategory in Category.children %} {{ _self.tree(ChildCategory) }} {% endfor %} </ul> {% endif %} </li> {% endmacro %} <nav id="category" class="drawer_block pc inner"> <ul class="category-nav"> {% for Category in Categories %} {{ _self.tree(Category) }} {% endfor %} </ul> <!-- category-nav --> </nav> |
ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。
後で写真を追加
新着商品(オリジナル)が追加されました。
後で写真を追加
データベースのロジックフラッグを変更する
ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。
テーブル名「dtb_block」「news_original」の「logic_flg」を「0」から「1」「deletable_flg」を「1」から「0」へ変更します。
後で写真を追加
ECCUBE3構成ファイルよりコントローラーを登録
続いて追加した「メインメニューブロック」のコントローラーを登録します。
対象ファイル:/src/Eccube/ControllerProvider/FrontControllerProvider.php
FrontControllerProvider.phpに「//block」が定義されている箇所があるので以下の一文をブロック定義部の最下部に追加します。
1 2 3 4 5 6 7 8 9 10 |
// block $c->match('/block/category', '\Eccube\Controller\Block\CategoryController::index')->bind('block_category'); $c->match('/block/cart', '\Eccube\Controller\Block\CartController::index')->bind('block_cart'); $c->match('/block/search_product', '\Eccube\Controller\Block\SearchProductController::index')->bind('block_search_product'); $c->match('/block/news', '\Eccube\Controller\Block\NewsController::index')->bind('block_news'); $c->match('/block/login', '\Eccube\Controller\Block\LoginController::index')->bind('block_login'); $c->match('/block/news_original', '\Eccube\Controller\Block\NewsOriginalController::index')->bind('block_news_original'); $c->match('/block/login_original', '\Eccube\Controller\Block\LoginOriginalController::index')->bind('block_login_original'); $c->match('/block/cart_original', '\Eccube\Controller\Block\CartOriginalController::index')->bind('block_cart_original'); $c->match('/block/category_original', '\Eccube\Controller\Block\CategoryOriginalController::index')->bind('block_category_original'); |
ECCUBE3構成ファイルよりコントローラーを作成
コントローラーの登録ができたら続いてコントローラの作成を行います。今回は既存の新着情報メニューをコピーして新しいメニューを作るので以下のファイルをそのままコピーして「CategoryOriginalController.php」リネームします。
/src/Eccube/Controller/Block/CategoryController.php
リネームしたファイルの内容をリネームしたものに変更。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?php /* * This file is part of EC-CUBE * * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved. * * http://www.lockon.co.jp/ * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License * as published by the Free Software Foundation; either version 2 * of the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. */ namespace Eccube\Controller\Block; use Eccube\Application; class CategoryController { public function index(Application $app) { $Categories = $app['eccube.repository.category']->getList(); return $app->render('Block/category.twig', array( 'Categories' => $Categories )); } } |
↓に変更
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<?php /* * This file is part of EC-CUBE * * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved. * * http://www.lockon.co.jp/ * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License * as published by the Free Software Foundation; either version 2 * of the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. */ namespace Eccube\Controller\Block; use Eccube\Application; class CategoryOriginalController { public function index(Application $app) { $Categories = $app['eccube.repository.category']->getList(); return $app->render('Block/category_original.twig', array( 'Categories' => $Categories )); } } |
スタイルの変更
style.cssのファイルに下記を追記して下さい。
対象ファイル:/html/template/default/css/style.css
[ファイルの中身]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
/* -------------------------------- カテゴリ -------------------------------- */ #header #category { padding: 0; } #header .category-nav { border-top: none; border-bottom: none; float: left; text-align: left; } @media only screen and (max-width:1170px){ #header .category-nav li a { margin: 0 20px 0 0; } } #header .category-nav li a { display: block; border-bottom: solid 3px #ccc; margin: 0 40px 0 0; font-size: 18px; padding: 0; } #header .category-nav li a:hover { background-color: transparent; border-color: #333; } #header .category-nav li ul li a { margin: 0; font-size: 90%; border-bottom: solid 1px #ccc; } |
レイアウトの編集
管理画面 > コンテンツ管理 > ページ管理
ページ一覧にあるTOPページの「…」をクリック
ページ一覧にあるTOPページの「レイアウト編集」をクリック
カゴの中とカゴの中(オリジナル)を入れ替えます。
後で写真を追加
プレビューで確認し、OKならば[登録]をクリック。
後で写真を追加
キャッシュのクリア
管理画面 > コンテンツ管理 > キャッシュ管理
[キャッシュ削除]をクリック
変更後の確認
「shift」を押しながらリロードして、確認。
[変更前]
後で写真を追加
[変更後]
後で写真を追加
商品検索部分の作成
新規ブロックを追加する
参考URL:ECCUBE3サイドブロックに独自メニューを設置する方法
管理画面 >コンテンツ管理 >ブロック管理
最下部の【新規入力】より新規ブロックを追加します。
[ブロック名]
1 |
商品検索(オリジナル) |
[ファイル名]
1 |
search_product_original |
[ブロックデータ]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
{# This file is part of EC-CUBE Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved. http://www.lockon.co.jp/ This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation; either version 2 of the License, or (at your option) any later version. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. #} <div class="drawer_block pc header_bottom_area inner"> <div id="search" class="search clearfix"> <form method="get" id="searchform" action="{{ path('product_list') }}"> <div class="search_inner"> {{ form_widget(form.category_id) }} <div class="input_search clearfix"> {{ form_widget(form.name, {'attr': { 'placeholder' : "キーワードを入力" }} ) }} <button type="submit" class="bt_search"><svg class="cb cb-search"><use xlink:href="#cb-search" /></svg></button> </div> </div> <div class="extra-form"> {% for f in form.getIterator %} {% if f.vars.name matches '[^plg*]' %} {{ form_label(f) }} {{ form_widget(f) }} {{ form_errors(f) }} {% endif %} {% endfor %} </div> </form> </div> </div> |
ブロック名、ファイル名、ブロックデータを入力し[登録ボタン]をクリック。
後で写真を追加
新着商品(オリジナル)が追加されました。
後で写真を追加
データベースのロジックフラッグを変更する
ブロックを新規追加しただけでは実際にはまだ表示はされません。表示させるためには追加したブロックのロジックフラッグをデータベースで直接編集する必要があります。
テーブル名「dtb_block」「news_original」の「logic_flg」を「0」から「1」「deletable_flg」を「1」から「0」へ変更します。
後で写真を追加
ECCUBE3構成ファイルよりコントローラーを登録
続いて追加した「メインメニューブロック」のコントローラーを登録します。
対象ファイル:/src/Eccube/ControllerProvider/FrontControllerProvider.php
FrontControllerProvider.phpに「//block」が定義されている箇所があるので以下の一文をブロック定義部の最下部に追加します。
1 2 3 4 5 6 7 8 9 10 11 12 |
// block $c->match('/block/category', '\Eccube\Controller\Block\CategoryController::index')->bind('block_category'); $c->match('/block/cart', '\Eccube\Controller\Block\CartController::index')->bind('block_cart'); $c->match('/block/search_product', '\Eccube\Controller\Block\SearchProductController::index')->bind('block_search_product'); $c->match('/block/news', '\Eccube\Controller\Block\NewsController::index')->bind('block_news'); $c->match('/block/login', '\Eccube\Controller\Block\LoginController::index')->bind('block_login'); $c->match('/block/news_original', '\Eccube\Controller\Block\NewsOriginalController::index')->bind('block_news_original'); $c->match('/block/login_original', '\Eccube\Controller\Block\LoginOriginalController::index')->bind('block_login_original'); $c->match('/block/cart_original', '\Eccube\Controller\Block\CartOriginalController::index')->bind('block_cart_original'); $c->match('/block/category_original', '\Eccube\Controller\Block\CategoryOriginalController::index')->bind('block_category_original'); // 追加 $c->match('/block/search_product_original', '\Eccube\Controller\Block\SearchProductOriginalController::index')->bind('block_search_product_original'); |
ECCUBE3構成ファイルよりコントローラーを作成
コントローラーの登録ができたら続いてコントローラの作成を行います。今回は既存の新着情報メニューをコピーして新しいメニューを作るので以下のファイルをそのままコピーして「search_productOriginalController.php」リネームします。
/src/Eccube/Controller/Block/search_productController.php
リネームしたファイルの内容をリネームしたものに変更。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<?php /* * This file is part of EC-CUBE * * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved. * * http://www.lockon.co.jp/ * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License * as published by the Free Software Foundation; either version 2 * of the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. */ namespace Eccube\Controller\Block; use Eccube\Application; use Eccube\Event\EccubeEvents; use Eccube\Event\EventArgs; use Symfony\Component\HttpFoundation\Request; class SearchProductController { public function index(Application $app, Request $request) { /** @var $form \Symfony\Component\Form\Form */ $builder = $app['form.factory'] ->createNamedBuilder('', 'search_product_block') ->setMethod('GET'); $event = new EventArgs( array( 'builder' => $builder, ), $request ); $app['eccube.event.dispatcher']->dispatch(EccubeEvents::FRONT_BLOCK_SEARCH_PRODUCT_INDEX_INITIALIZE, $event); /** @var $request \Symfony\Component\HttpFoundation\Request */ $request = $app['request_stack']->getMasterRequest(); $form = $builder->getForm(); $form->handleRequest($request); return $app->render('Block/search_product.twig', array( 'form' => $form->createView(), )); } } |
↓に変更
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
<?php /* * This file is part of EC-CUBE * * Copyright(c) 2000-2015 LOCKON CO.,LTD. All Rights Reserved. * * http://www.lockon.co.jp/ * * This program is free software; you can redistribute it and/or * modify it under the terms of the GNU General Public License * as published by the Free Software Foundation; either version 2 * of the License, or (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program; if not, write to the Free Software * Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA. */ namespace Eccube\Controller\Block; use Eccube\Application; use Eccube\Event\EccubeEvents; use Eccube\Event\EventArgs; use Symfony\Component\HttpFoundation\Request; class SearchProductOriginalController { public function index(Application $app, Request $request) { /** @var $form \Symfony\Component\Form\Form */ $builder = $app['form.factory'] ->createNamedBuilder('', 'search_product_block') ->setMethod('GET'); $event = new EventArgs( array( 'builder' => $builder, ), $request ); $app['eccube.event.dispatcher']->dispatch(EccubeEvents::FRONT_BLOCK_SEARCH_PRODUCT_INDEX_INITIALIZE, $event); /** @var $request \Symfony\Component\HttpFoundation\Request */ $request = $app['request_stack']->getMasterRequest(); $form = $builder->getForm(); $form->handleRequest($request); return $app->render('Block/search_product_original.twig', array( 'form' => $form->createView(), )); } } |
スタイルの変更
style.cssのファイルに下記を追記して下さい。
対象ファイル:/html/template/default/css/style.css
[ファイルの中身]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 |
/* -------------------------------- 商品検索 -------------------------------- */ #header .header_bottom_area { clear: none; padding-top: 0; } #header .inner { position: relative; margin: 0 auto; } #search { display: inline-block; float: right; margin-right: 0; padding: 0; width: 375px; background: none; } #header #searchform select, #header #searchform input { float: left; font-size: 14px; color: #c2c2c2; } #search select { max-width: 150px; } .search select { height: 50px; border: 1px solid #dfdfdf; border-radius: 0!important; } #header .search .input_search { width: 220px; } @media only screen and (max-width:800px){ #header .category-nav li a { margin: 0 10px 0 0; } } @media only screen and (min-width: 768px) { #search select { max-width: 180px; } } @media only screen and (max-width:768px){ select#category_id { idth: auto; } .header_logo_area .header_logo { padding-bottom: 20px; } h1.header_logo img { max-width: 120px; } #header #cart_area { position: absolute; width: 100%; top: 0; } #cart_area p.cart-trigger { border-bottom: none; } #search { float: none; margin: 0 15px; padding: 0; width: auto; } } |
レイアウトの編集
管理画面 > コンテンツ管理 > ページ管理
ページ一覧にあるTOPページの「…」をクリック
ページ一覧にあるTOPページの「レイアウト編集」をクリック
カゴの中とカゴの中(オリジナル)を入れ替えます。
後で写真を追加
プレビューで確認し、OKならば[登録]をクリック。
後で写真を追加
キャッシュのクリア
管理画面 > コンテンツ管理 > キャッシュ管理
[キャッシュ削除]をクリック
変更後の確認
「shift」を押しながらリロードして、確認。
[変更前]
後で写真を追加
[変更後]
後で写真を追加