Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

本体カスタマイズに画面へのパーツ埋め込み、画面への介入方法の記載を追加 #163

Open
okazy opened this issue Jan 7, 2021 · 1 comment
Open

本体カスタマイズに画面へのパーツ埋め込み、画面への介入方法の記載を追加 #163

okazy opened this issue Jan 7, 2021 · 1 comment
Labels
Customize カスタマイズ向け情報 improvement 改善
Milestone
4.0

Comments

@okazy
Copy link
Contributor

okazy commented Jan 7, 2021 •
edited
Loading

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

フロント画面は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ファイルには何を記述しても構いません。
@okazy okazy added the Customize カスタマイズ向け情報 label Jan 7, 2021
@okazy okazy added this to the 4.0 milestone Jan 7, 2021
@okazy okazy changed the title 本体カスタマイズにフロント画面へのパーツ埋め込み方法の記載を追加 本体カスタマイズに画面へのパーツ埋め込み、画面への介入方法の記載を追加 Jan 7, 2021
@okazy okazy added the improvement 改善 label Feb 24, 2021
@ji-eunsoo
Copy link
Contributor

@okazy
ありがとうございます。

＠皆様
是非PRいただけると嬉しいです。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Customize カスタマイズ向け情報 improvement 改善
Projects
None yet
Milestone
4.0
Development

No branches or pull requests
2 participants
@okazy @ji-eunsoo