バージョン選択

フォーラム

メニュー

オンライン状況

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

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ペイメント

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

統計情報

総メンバー数は20,151名です
総投稿数は83,267件です

投稿数ランキング

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


ネットショップの壺

EC-CUBEインテグレートパートナー

Copyright© LOCKON CO.,LTD. All Rights Reserved.