### フロント画面へのパーツ埋め込み

フロント画面はtwigにtagを埋め込むカスタマイズ方法を推奨します。

`/Resource/template/` 配下にテンプレートファイルを作成します。

```twig

Hello, {{ name }}!

```

twigファイルに以下のように記載することで作成したテンプレートが呼び出せます。

```twig
{{ include('@プラグインコード/xxx.twig', ignore_missing=true) }}
```

twig内で変数を使用する場合は、TemplateEventで渡します。

```php
class Event implements EventSubscriberInterface
{
public static function getSubscribedEvents()
{
return [
'xxx.twig' => 'onXxxTwig',
];
}

public function onXxxTwig(TemplateEvent $event)
{
$event->setParameter('name', '球部太郎');
}
}
```

本サンプルプラグインではトークン型クレジットカード決済とコンビニ決済の入力フォームと確認フォームのタグを手動で埋め込む必要があります。

管理画面のページ管理からテンプレートファイルの適当な箇所に以下のタグを追加してください。

- 商品購入ページ
```twig
{{ include('@SamplePayment/credit.twig', ignore_missing=true) }}
{{ include('@SamplePayment/cvs.twig', ignore_missing=true) }}
```
- 商品購入/ご注文確認ページ
```twig
{{ 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抜粋
```php
/**
* アセットを追加する
*
* ここで追加したコードは, 内に出力される
* 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;
}

/**
* スニペットを追加する.
*
* ここで追加したコードは, タグ直前に出力される
*
* @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
'productList',
];
}

public function productList(TemplateEvent $event)
{
$twig = '@AdminSample/product_list.twig';
$event->addSnippet($twig);
}
}
```

というEventクラスを作成し、

`app/Plugin/AdminSample/Resource/template/product_list.twig` というファイルを作成後、

```php
{% for p in pagination %}

{% endfor %}

$(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'));
})
});

```

と記述することで簡単に画面要素の介入が可能となります。`product_list.twig`ファイルには何を記述しても構いません。