バージョン選択

フォーラム

メニュー

オンライン状況

68 人のユーザが現在オンラインです。 (66 人のユーザが フォーラム を参照しています。)
登録ユーザ: 0
ゲスト: 68
もっと...

PR

デザインテンプレート EC-CUBE3.0版が登場!
広告掲載について

サイト内検索

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

フロント機能

新規スレッドを追加する

スレッド表示 | 新しいものから 前のトピック | 次のトピック | 下へ
投稿者 スレッド
takeo
投稿日時: 2017/8/11 17:01
対応状況: 解決済
半人前
登録日: 2015/1/12
居住地:
投稿: 15
スマホ画面ヘッダー部にも、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
居住地: 東京
投稿: 651
Re: スマホ画面ヘッダー部にも、PC画面ヘッダー部と同様の検索窓を設けたい
実際のサイトとCSS等を確認してみないとわかりませんが、HTMLとしては出力されていて、画面領域外に出てしまっていて見えていない、ということは無いでしょうか?
chromeのdeveloper toolsとかで見てみてください


----------------
EC-CUBEカスタマイズ相談してください。
緊急のEC-CUBEの障害対応
EC-CUBE開発ブログ

umebius
投稿日時: 2017/8/14 7:44
対応状況: −−−
仙人
登録日: 2016/7/22
居住地: Tokyo
投稿: 712
Re: スマホ画面ヘッダー部にも、PC画面ヘッダー部と同様の検索窓を設けたい
質問者様のおっしゃる通りCSSの問題ではなく、Symfonyの問題です。


{{ form_widget(form.category_id) }}

{{ form_widget(form.name, {'attr': { 'placeholder' : "商品名、キーワードを入力" }} ) }}は
ページ内で一度しか実行できず、2回目は表示されないことが原因です。そもそもHTMLとして出力されません。


1度しか出力されないので、javascriptで動的にCSSを変更するなどして対応してやる必要があります。あるいはコントローラでFormを複数生成するかですね。


----------------
//////////////////////////////
(株)U-Mebius EC-CUBE3 カスタマイズ・高速化 ・バグ修正
EC-CUBE関連技術者の採用もお問い合わせください。


takeo
投稿日時: 2017/8/15 15:38
対応状況: −−−
半人前
登録日: 2015/1/12
居住地:
投稿: 15
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については省略をさせて頂きます。
スレッド表示 | 新しいものから 前のトピック | 次のトピック | トップ

 



ログイン


EC-CUBEペイメント

クレジットカード情報の非保持化対応

統計情報

総メンバー数は19,752名です
総投稿数は82,452件です

投稿数ランキング

1
seasoft
7331
2
AMUAMU
2712
3
nanasess
1632
4
yuh
1388
5
red
1064
6
fukap
907
7
shutta
827
8 ramrun 789
9
tsuji
784
10
umebius
712
11
tao_s
651
12 sumida 638
13
homan
633
14
468
630
15 karin 609
16 DELIGHT 571
17
patapata
502
18
flealog
483
19 tonton 436
20
ecbg
387


ネットショップの壺

EC-CUBEガイドブック
Copyright© LOCKON CO.,LTD. All Rights Reserved.