Eccube 3x 商品検索のときカテゴリを切り替えたら自動的に検索させる

Question

簡単に言いますと、twigに以下のようなことをやりたいのです

<select onchange="this.form.submit()">
    ...
</select>

Eccube のフロントのほうに、カテゴリとキーワードで検索できるfromがありますが、カテゴリのselect dropdown listが変わったらformをsubmitしたいです。

Block/search_product.twigのソースをみたらこれ```{{ form_widget(form.category_id) }}

そこのselect ボックスをどうすればonchange > form submit　みたいにできますか。
よろしくお願いします。

Answer 1

select ボックスをどうすればonchange > form submit　みたいにできますか。

デモとGithubソースコードを見ながらの回答なので未検証ですが、Block/search_product.twigの一番上あたりに以下を追加するのが一番簡単な方法だと思います。

<script>
    $(function() {
        $('#category_id').on('change', function() {
            // submit
        });
    });
</script>

あとはformをsubmitするだけです。
submitまで書くと丸投げの質問かつEccube, Symfony, Twigとは関係ないJSの世界の話なので、これぐらいはご自身で書いてください。
ご自身でやってみてどうしてもできないのであれば、jQuery等のタグをつけて別途質問を立ててください。
Block/search_product.twig内のSymfonyFormコンポーネントのchangeイベントが拾えるまではサポートいたします。

Comments

[rev_timo]

maverixzさんサポートありがとうございます。
結局目的はproducts/listにアクセスするだけで大丈夫ですので、あまりよくないかもしれませんが、formをsubmitするのをやめまして、onchangeのときこのようにしました```window.location="{{ path('product_list') }}?category_id="+categoryID;```

すみません、質問と内容とタグの付け方がいろいろ変わってしまいまして、
ありがとうございました。

Answer 2

もっと、いいやり方があるかもしれませんが、私の目的は/products/listへアクセスすればOKなので、このようにしました。

search_product.twig

{% block javascript %}
    <script>
        function searchbycategory(categoryID) {
            window.location="{{ path('product_list') }}?category_id="+categoryID;
        }
    </script>
{% endblock %}
省略...
{{ form_widget(form.category_id, {'id': '', 'attr': {'onchange': "javascript:searchbycategory(this.value);"}}) }}
省略...