EC-CUBE 開発コミュニティ

質問 > フロント機能 > スマホ画面ヘッダー部にも、PC画面ヘッダー部と同様の検索窓を設けたい

フロント機能

投稿者	スレッド
takeo	投稿日時: 2017/8/11 17:01 対応状況: 解決済
半人前登録日: 2015/1/12 居住地: 投稿: 18	スマホ画面ヘッダー部にも、PC画面ヘッダー部と同様の検索窓を設けたい [EC-CUBE] 3.0.15 スマホ画面の検索窓はデフォルトでは、右サイドの#drawerにありますが、そうではなくて、スマホ画面ヘッダー部にも、PC画面ヘッダー部と同様の検索窓を設けたいと思っております。 search_product.twigを <div class="header_bottom_area"> <div id="search" class="search"> <form method="get" id="searchform" action="{{ path('product_list') }}"> <div class="drawer_block pc search_inner"> {{ form_widget(form.category_id) }} <div class="input_search clearfix"> {{ form_widget(form.name, {'attr': { 'placeholder' : "商品名、キーワードを入力" }} ) }} <button type="submit" class="bt_search"><svg class="cb cb-search"><use xlink:href="#cb-search" /></svg></button> </div> </div> <div class="drawer_block sp search_inner"> {{ form_widget(form.category_id) }} <div class="input_search clearfix"> {{ form_widget(form.name, {'attr': { 'placeholder' : "商品名、キーワードを入力" }} ) }} <button type="submit" class="bt_search"><svg class="cb cb-search"><use xlink:href="#cb-search" /></svg></button> </div> </div> <div class="extra-form"> {% for f in form.getIterator %} {% if f.vars.name matches '[^plg*]' %} {{ form_label(f) }} {{ form_widget(f) }} {{ form_errors(f) }} {% endif %} {% endfor %} </div> </form> </div> </div> のようにし、 <div class="drawer_block pc> と <div class="drawer_block sp> で、検索窓の大きさをCSSで、PC画面の時と、スマホ画面の時で変えてやりたいのですが、 PC画面での検索窓は表示されているのですが、スマホ画面での検索窓が表示されず（form.category_id　の部分も出て来ず）、困っております。 Style.css は、 `.search .drawer_block.pc input[type="search"] { width: 370px; } .search .drawer_block.sp input[type="search"] { width: 270px; }` ぐらいしか追加記述していないので、cssの問題では無く、 search_product.twig　の記述を間違えているのかと思っておりますが、判らず、どのようにしたら良いのか、ご教授頂きたくお願いいたします。

tao_s	投稿日時: 2017/8/13 20:58 対応状況: −−−
仙人登録日: 2008/8/20 居住地: 東京投稿: 799	Re: スマホ画面ヘッダー部にも、PC画面ヘッダー部と同様の検索窓を設けたい実際のサイトとCSS等を確認してみないとわかりませんが、HTMLとしては出力されていて、画面領域外に出てしまっていて見えていない、ということは無いでしょうか？ chromeのdeveloper toolsとかで見てみてください ---------------- EC-CUBEカスタマイズ相談してください。緊急のEC-CUBEの障害対応 EC-CUBEカスタマイズブログ

umebius	投稿日時: 2017/8/14 7:44 対応状況: −−−
神登録日: 2016/7/22 居住地: 投稿: 2085	Re: スマホ画面ヘッダー部にも、PC画面ヘッダー部と同様の検索窓を設けたい質問者様のおっしゃる通りCSSの問題ではなく、Symfonyの問題です。 {{ form_widget(form.category_id) }} や {{ form_widget(form.name, {'attr': { 'placeholder' : "商品名、キーワードを入力" }} ) }}はページ内で一度しか実行できず、２回目は表示されないことが原因です。そもそもHTMLとして出力されません。１度しか出力されないので、javascriptで動的にCSSを変更するなどして対応してやる必要があります。あるいはコントローラでFormを複数生成するかですね。 ---------------- EC-CUBEカスタマイズ・高速化・脆弱性対策・SEO ご相談ください。 2系・3系から4系へのバージョンアップ実績豊富

takeo	投稿日時: 2017/8/15 15:38 対応状況: −−−
半人前登録日: 2015/1/12 居住地: 投稿: 18	Re: スマホ画面ヘッダー部にも、PC画面ヘッダー部と同様の検索窓を設けたいありがとうございます！早速、 https://xoops.ec-cube.net/modules/newbb/viewtopic.php?topic_id=18377&forum=14&post_id=79278 こちらを参考にさせて頂き、スマホ画面用のFromを生成し、対応いたしました。 src/Eccube/Form/Type/SearchProductBlockType.phpに name_sp と category_id_sp を追加。 `$builder->add('category_id_sp', 'entity', array( 'class' => 'Eccube\Entity\Category', 'property' => 'NameWithLevel', 'choices' => $Categories, 'empty_value' => '全ての商品', 'empty_data' => null, 'required' => false, 'label' => '商品カテゴリから選ぶ', )); $builder->add('name_sp', 'search', array( 'required' => false, 'label' => '商品名を入力', 'empty_data' => null, 'attr' => array( 'maxlength' => 50, ), ));` src/Eccube/Form/Type/SearchProductType.phpにname_sp と category_id_sp を追加。 `$builder->add('category_id_sp', 'entity', array( 'class' => 'Eccube\Entity\Category', 'property' => 'NameWithLevel', 'choices' => $Categories, 'empty_value' => '全ての商品', 'empty_data' => null, 'required' => false, 'label' => '商品カテゴリから選ぶ', )); $builder->add('name_sp', 'search', array( 'required' => false, 'label' => '商品名を入力', 'empty_data' => null, 'attr' => array( 'maxlength' => 50, ), ));` src/Eccube/Repository/ProductRepository.phpのgetQueryBuilderBySearchData()に下記を追加。 // category_sp $categoryJoin = false; if (!empty($searchData['category_id_sp']) && $searchData['category_id_sp']) { $Categories = $searchData['category_id_sp']->getSelfAndDescendants(); if ($Categories) { $qb ->innerJoin('p.ProductCategories', 'pct') ->innerJoin('pct.Category', 'c') ->andWhere($qb->expr()->in('pct.Category', ':Categories')) ->setParameter('Categories', $Categories); $categoryJoin = true; } } // name_sp if (isset($searchData['name_sp']) && Str::isNotBlank($searchData['name_sp'])) { $keywords = preg_split('/[\s　]+/u', $searchData['name_sp'], -1, PREG_SPLIT_NO_EMPTY); foreach ($keywords as $index => $keyword) { $key = sprintf('keyword%s', $index); $qb ->andWhere(sprintf('NORMALIZE(p.name) LIKE NORMALIZE(:%s) OR NORMALIZE(p.search_word) LIKE NORMALIZE(:%s)', $key, $key)) ->setParameter($key, '%' . $keyword . '%'); } } src/Eccube/Resource/template/default/Block/search_product.twig　を両対応にさせる。 <div class="header_bottom_area"> <div id="search" class="search"> <form method="get" id="searchform" action="{{ path('product_list') }}"> <div class="drawer_block pc search_inner"> {{ form_widget(form.category_id) }} <div class="input_search clearfix"> {{ form_widget(form.name, {'attr': { 'placeholder' : "商品名、キーワードを入力" }} ) }} <button type="submit" class="bt_search"><svg class="cb cb-search"><use xlink:href="#cb-search" /></svg></button> </div> </div> <div class="drawer_block sp search_inner"> <div class="input_search clearfix"> {{ form_widget(form.category_id_sp) }} {{ form_widget(form.name_sp, {'attr': { 'placeholder' : "商品名、キーワードを入力" }} ) }} <button type="submit" class="bt_search"><svg class="cb cb-search"><use xlink:href="#cb-search" /></svg></button> </div> </div> <div class="extra-form"> {% for f in form.getIterator %} {% if f.vars.name matches '[^plg*]' %} {{ form_label(f) }} {{ form_widget(f) }} {{ form_errors(f) }} {% endif %} {% endfor %} </div> </form> </div> </div> 以上で出来ました！ ※なお、cssについては省略をさせて頂きます。