doc4.ec-cube.net
doc4.ec-cube.net copied to clipboard
Published
20 hours ago •
EC-CUBE
EC-CUBE
本体カスタマイズに画面へのパーツ埋め込み、画面への介入方法の記載を追加
フロント画面へのパーツ埋め込み
フロント画面はtwigにtagを埋め込むカスタマイズ方法を推奨します。
/Resource/template/ 配下にテンプレートファイルを作成します。
<h1>Hello, {{ name }}!</h1>
twigファイルに以下のように記載することで作成したテンプレートが呼び出せます。
{{ include('@プラグインコード/xxx.twig', ignore_missing=true) }}
twig内で変数を使用する場合は、TemplateEventで渡します。
class Event implements EventSubscriberInterface
{
public static function getSubscribedEvents()
{
return [
'xxx.twig' => 'onXxxTwig',
];
}
public function onXxxTwig(TemplateEvent $event)
{
$event->setParameter('name', '球部太郎');
}
}
本サンプルプラグインではトークン型クレジットカード決済とコンビニ決済の入力フォームと確認フォームのタグを手動で埋め込む必要があります。
管理画面のページ管理からテンプレートファイルの適当な箇所に以下のタグを追加してください。
- 商品購入ページ
{{ include('@SamplePayment/credit.twig', ignore_missing=true) }}
{{ include('@SamplePayment/cvs.twig', ignore_missing=true) }}
- 商品購入/ご注文確認ページ
{{ include('@SamplePayment/credit_confirm.twig', ignore_missing=true) }}
{{ include('@SamplePayment/cvs_confirm.twig', ignore_missing=true) }}
画面への介入について
EC-CUBE3.0系では画面の拡張をする場合、直接Twigファイルを書き換えたりしていましたが、 EC-CUBE4からはTemplateEventに新たな関数を用意し、それを利用することでJavaScriptを使って簡単に制御することが可能となります。
- TemplateEvent抜粋
/**
* アセットを追加する
*
* ここで追加したコードは, <head></head>内に出力される
* javascriptの読み込みやcssの読み込みに利用する.
*
* @param $asset
* @param bool $include twigファイルとしてincludeするかどうか
*
* @return $this
*/
public function addAsset($asset, $include = true)
{
$this->assets[$asset] = $include;
$this->setParameter('plugin_assets', $this->assets);
return $this;
}
/**
* スニペットを追加する.
*
* ここで追加したコードは, </body>タグ直前に出力される
*
* @param $snippet
* @param bool $include twigファイルとしてincludeするかどうか
*
* @return $this
*/
public function addSnippet($snippet, $include = true)
{
$this->snippets[$snippet] = $include;
$this->setParameter('plugin_snippets', $this->snippets);
return $this;
}
このプラグインを利用する方法は以下の通りです。例として商品一覧に対して列を追加する方法となります。
- AdminSampleEvent を作成
<?php
namespace Plugin\AdminSample;
use Eccube\Event\TemplateEvent;
use Symfony\Component\EventDispatcher\EventSubscriberInterface;
class AdminSampleEvent implements EventSubscriberInterface
{
/**
* @return array
*/
public static function getSubscribedEvents()
{
return [
'@admin/Product/index.twig' => 'productList',
];
}
public function productList(TemplateEvent $event)
{
$twig = '@AdminSample/product_list.twig';
$event->addSnippet($twig);
}
}
というEventクラスを作成し、
app/Plugin/AdminSample/Resource/template/product_list.twig というファイルを作成後、
{% for p in pagination %}
<div class="p{{ loop.index }}" data-status="{{ p.Status.id }}">{{ p.name }}</div>
{% endfor %}
<script>
$(function() {
$('table tr').each(function(i) {
if (i != 0) {
$elem = $('.p' + i);
if ($elem.data('status') == '2') {
$(this).addClass('table-secondary');
}
$('td:eq(4)', this).after('<td class="align-middle">' + $elem.text() + '</td>');
$('td:eq(5)', this).after('<td class="align-middle"><button type="button" class="btn btn-light" data-hoge="' + i + '">ボタン' + i + '</button></td>');
$elem.remove();
} else {
$('th:eq(4)', this).after('<th class="border-top-0 pt-2 pb-2">名称</th>');
$('th:eq(5)', this).after('<th class="border-top-0 pt-2 pb-2">ボタン</th>');
}
});
$(document).on('click', '.btn-light', function() {
alert($(this).data('hoge'));
})
});
</script>
と記述することで簡単に画面要素の介入が可能となります。product_list.twigファイルには何を記述しても構いません。
