【EC-CUBE4】管理画面にプルダウンを作成してみた

EC-CUBEバージョン:4.0.3
自分向け技術メモ

#twigでプルダウンリストの作り方が分からなかったので作ってみた

• 一つ目、管理画面のCSV出力項目のプルダウンをパクってみた
  

• 二つ目、会員画面トップページのヘッダーカテゴリのプルダウンをパクってみた
  

会員画面トップページはindex.twig内でincludeしてblock.twigをextendしてる。初見殺しでわかりづらい。

Customize\Controller\Admin\Developer\PulldownController.php

<?php

/*
 * This file is part of EC-CUBE
 *
 * Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.
 *
 * http://www.ec-cube.co.jp/
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

namespace Customize\Controller\Admin\Developer;

use Eccube\Controller\AbstractController;
use Eccube\Entity\Master\CsvType;
use Eccube\Event\EccubeEvents;
use Eccube\Event\EventArgs;
use Eccube\Form\Type\SearchProductBlockType;
use Eccube\Repository\CsvRepository;
use Eccube\Repository\Master\CsvTypeRepository;
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Template;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\RequestStack;
use Symfony\Component\Routing\Annotation\Route;
use Symfony\Component\Validator\Constraints as Assert;

class PulldownController extends AbstractController
{
    /**
     * @var RequestStack
     */
    protected $requestStack;

    /**
     * @var CsvRepository
     */
    protected $csvRepository;

    /**
     * @var CsvTypeRepository
     */
    protected $csvTypeRepository;

    /**
     * CsvController constructor.
     */
    public function __construct(
        CsvRepository $csvRepository,
        CsvTypeRepository $csvTypeRepository,
        RequestStack $requestStack
        ) {
        $this->csvRepository = $csvRepository;
        $this->csvTypeRepository = $csvTypeRepository;
        $this->requestStack = $requestStack;
    }

    /**
     * @Route("/%eccube_admin_route%/developer/command_list",
     *    requirements={"id" = "\d+"},
     *    defaults={"id" = CsvType::CSV_TYPE_ORDER},
     *    name="admin_command_list")
     * @Template("@admin/developer/pulldown.twig")
     */
    public function index(Request $request, CsvType $CsvType)
    {
        // 一つ目、管理画面のCSV出力項目のプルダウンをパクってみた
        $builder = $this->createFormBuilder();

        $builder->add(
            'csv_type',
            \Eccube\Form\Type\Master\CsvType::class,
            [
                'label' => 'admin.setting.shop.csv.csv_columns',
                'required' => true,
                'constraints' => [
                    new Assert\NotBlank(),
                ],
                'data' => $CsvType,
            ]
        );

        $event = new EventArgs(
            [
                'builder' => $builder,
            ],
            $request
        );
        $this->eventDispatcher->dispatch(EccubeEvents::ADMIN_SETTING_SHOP_CSV_INDEX_INITIALIZE, $event);

        $form = $builder->getForm();

        // 二つ目、会員画面トップページのヘッダーカテゴリのプルダウンをパクってみた
        $builder = $this->formFactory
            ->createNamedBuilder('', SearchProductBlockType::class)
            ->setMethod('GET');

        $event = new EventArgs(
            [
                'builder' => $builder,
            ],
            $request
        );

        $this->eventDispatcher->dispatch(EccubeEvents::FRONT_BLOCK_SEARCH_PRODUCT_INDEX_INITIALIZE, $event);

        $request = $this->requestStack->getMasterRequest();

        $form1 = $builder->getForm();
        $form1->handleRequest($request);

        return [
            'form' => $form->createView(),
            'form1' => $form1->createView(),
        ];
    }
}

developer/pulldown.twig

{#
This file is part of EC-CUBE

Copyright(c) EC-CUBE CO.,LTD. All Rights Reserved.

http://www.ec-cube.co.jp/

For the full copyright and license information, please view the LICENSE
file that was distributed with this source code.
#}
{% extends '@admin/default_frame.twig' %}

{# eccube_nav.yamlにメニューを追加しておく #}
{% set menus = ['developer', 'pulldown'] %}

{# {% form_theme form 'Form/form_div_layout.twig' %} #}

{% form_theme form1 '@admin/Form/bootstrap_4_horizontal_layout.html.twig' %}

{% block title %}{{ 'admin.command_list'|trans }}{% endblock %}
{% block sub_title %}{{ 'admin.developer_menu'|trans }}{% endblock %}

{% block javascript %}
    <script>
        $(function() {
            // プルダウンリストを選択したらidを取得
            $('#pulldown').on('change', function() {
                var id = $(this).val();
                var href = '{{ url('admin_command_list') }}';
                location.href = href;
                return false;
            });
        });
    </script>
{% endblock javascript %}

{% block main %}
<div class="c-contentsArea__cols">
    <div class="c-contentsArea__primaryCol">
        <div class="c-primaryCol">
            <div class="card rounded border-0 mb-4">
                <div class="card-header">
                    <div class="row">
                        <div class="px-1 d-inline-block mb-2 text-center">
                            <span></span>
                        </div>
                    </div>
                </div>

                <div class="card-body">
                    <div class="row">
                        <div class="px-1 d-inline-block text-center">
                            <span>一つ目、管理画面のCSV出力項目のプルダウンをパクってみた</span>
                        </div>
                    </div>
                    <div class="row mb-4 justify-content-between">
                        <div class="col-6">
                            {{ form_widget(form.csv_type, {'id': 'pulldown'}) }}
                        </div>
                    </div>
                    <div class="row">
                        <div class="px-1 d-inline-block text-center">
                            <span>二つ目、会員画面トップページのヘッダーカテゴリのプルダウンをパクってみた</span>
                        </div>
                    </div>
                    <div class="ec-headerSearch">
                        <form method="get" class="searchform" action="{{ path('product_list') }}">
                            <div class="ec-headerSearch__category">
                                <div class="ec-select ec-select_search">
                                    {{ form_widget(form1.category_id, {'id': null, 'attr': {'class': 'category_id'}}) }}
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div> 
</div> 
{% endblock %}

#その他メモ