メモ > 技術 > CMS: ECCube > カスタマイズ: ブロックの追加
カスタマイズ: ブロックの追加
静的なブロックの追加は、管理画面からの操作で行える。
ただし、各環境に反映するためにはマイグレーションが必要。
ブロックの利用 - < for EC-CUBE 4.0 Developers />
https://doc4.ec-cube.net/design_block
EC-CUBE4で新しくブロックを追加する方法 | ホムペディア
https://homupedia.com/eccube4-create-blocks.html
【EC-CUBE4】新着商品ブロックの商品一覧を動的に取得する方法 - あずみ.net
https://a-zumi.net/eccube4-dynamic-new-item-block/
■ブロックの追加例
以下は実際の案件でブロックを追加したときのコード。
html\app\template\default\Block\left_column.twig
{#
トップページや下層ページの左カラムに表示するコンテンツ
#}
<div class="column_side">
<dl class="column_side_cate">
<dt>商品カテゴリ</dt>
{% set Categories = repository('Eccube\\Entity\\Category').getList() %}
{% set RecommendCategories = (eccube_recommend_category_id|split(',')) %}
{% for Category in Categories %}
<dd><a href="{{ url('product_list') }}?category_id={{ Category.id }}"><img src="{{ asset('assets/img/common/category/' ~ Category.id ~'.jpg', 'user_data') }}" alt="">{{ Category.name }}{% if Category.id in RecommendCategories %}<em>オススメ</em>{% endif %}</a></dd>
{% endfor %}
</dl>
<!-- <ul class="column_side_bnr">
<li><a href="{{ url('product_list') }}?category_id=1"><img src="{{ asset('assets/img/common/banner/1.png', 'user_data') }}" alt=""></a></li>
<li><a href="{{ url('product_list') }}?category_id=2"><img src="{{ asset('assets/img/common/banner/2.png', 'user_data') }}" alt=""></a></li>
</ul> -->
<!-- <ul class="column_side_nav">
<li><a href="#">よくあるご質問</a></li>
<li><a href="#">各種ダウンロード</a></li>
<li><a href="{{ url('help_tradelaw') }}">特定商取引法に基づく表記</a></li>
<li><a href="{{ url('help_privacy') }}">個人情報保護方針</a></li>
</ul> -->
</div>
<!-- /column_side -->
上記テンプレートは、各テンプレートから以下のように呼び出す想定。
{{ include('Block/left_column.twig') }}
ただし、ただテンプレートを追加しただけだと管理画面の「コンテンツ管理 → ブロック管理」には表示されない。(管理画面から編集できない。)
ここに表示させたい場合、以下のようにマイグレーションを作成する。
html\app\DoctrineMigrations\Version20210604041526.php
<?php declare(strict_types=1);
namespace DoctrineMigrations;
use Doctrine\DBAL\Schema\Schema;
use Doctrine\Migrations\AbstractMigration;
/**
* Auto-generated Migration: Please modify to your needs!
*/
final class Version20210604041526 extends AbstractMigration
{
public function up(Schema $schema) : void
{
// this up() migration is auto-generated, please modify it to your needs
// dtb_block にレコード追加
$this->addSql("INSERT INTO dtb_block
(device_type_id,block_name, file_name, use_controller,deletable,create_date,update_date,discriminator_type) VALUES
(10, '左カラム(カテゴリ、バナー)','left_column',0, 1, NOW(), NOW(), 'block');");
}
public function down(Schema $schema) : void
{
// this down() migration is auto-generated, please modify it to your needs
}
}
■トップページの例
トップページのコントローラーには、何も処理が書かれていない。
src/Eccube/Controller/TopController.php
以下のブロック管理により、商品一覧などを配置している。
EC-CUBE4 管理・運用マニュアル |【公式】EC-CUBE
https://www.ec-cube.net/manual/ec-cube4/content/block.php
ブロックの利用 - < for EC-CUBE 4 Developers />
https://doc4.ec-cube.net/design_block
EC-CUBE4で新しくブロックを追加する方法 | Designup
https://designup.jp/eccube4-create-blocks.html
ブロック内で商品情報などを取得するには、twigテンプレート内でrepository関数を使えばいい。
テンプレート内での関数追加は、「Twigヘルパー関数」の方法が参考になりそう。
【EC-CUBE4】管理画面から商品一覧ブロックをつくる/税抜き・税込み価格の表示 #eccube4 - Qiita
https://qiita.com/JunjiUmemoto/items/79e36225222f822f7271
EC-CUBE4のrepository関数の使い方 #EC-CUBE4 - Qiita
https://qiita.com/chihiro-adachi/items/1e7cb15f9b80567dca56
■動的ブロック
より複雑な処理を行いたい場合、動的ブロックを作れば「コントローラー付きのブロック」を作成できる。
動的ブロックとは?作り方を解説【EC-CUBE4カスタマイズ】 | 東京のホームページ制作 / WEB制作会社 BRISK
https://b-risk.jp/blog/2021/07/ECCUBE4_block/
【開発コミュニティの人気Tipsをご紹介?】コントローラ付きのブロックを追加してみよう - ネットショップの壺
https://tsubo.ec-cube.net/2017/04/26/6449