楽天スマホページの商品検索窓の見せ方について

Question

楽天スマホページの商品検索窓の見せ方について、
下記のお店のように、ページを下にスワイプしたときだけ検索窓を出現させる方法を教えていただきたいです。
http://item.rakuten.co.jp/e-goods/c/0000000446/

現在私のお店でも、上記サイトのようなフローティングのヘッダーがすでにあり、
その下に検索窓を表示させたり隠したりしたいです。

Answer

ECマスターズの田中です。

既存のフローティングヘッダー含め、
楽天RMSの、禁止タグを入力できるバグを利用する方法ですので、
今後、RMSの改修により、使用できなくなる可能性があります。

jQueryにより画面のスクロールを検知し、
スクロール後の画面位置がスクロール前より
下なら表示、上なら非表示にする、
という処理を行うよう設定することで
実現することが可能です。

最初に、下記内容で外部JSファイルを作成し、
楽天GOLD内に保存してください。

===== この下の行から ================
jQuery(function($){

var _now = 0;
var _flgs = true;
var _target = ""; //表示・隠す部分のセレクター

$(window).scroll(function () {
  
    var _scr = $(window).scrollTop();
      if (!_flgs) {
        if (_scr < _now) {
          $(_target).show();
          _flgs = true;
        }
      } else {
        if (_scr > _now) {
          $(_target).hide();
          _flgs = false;
        }
      }
    _now = _scr;
  });

});
===== この上の行まで ================

「表示・隠す部分のセレクター」の部分ですが、
スタイルシートを適用させる時と同じ書式で、
検索窓の部分を特定できる文字列を指定してください。

たとえば、検索窓の部分が
 と  で
囲まれている場合は、
var _target = "#searchform";
という具合になります。

楽天GOLD内への保存ができましたら、
下記HTMLタグを共通説明文に挿入することで、
検索窓を表示させたり隠したりする設定ができます。

===== この下の行から ================

===== この上の行まで ================

Answer

ご回答ありがとうございます。
いつも助かります。

補足でお聞きしたいのですが、検索のフォーム部分のHTMLは楽天GOLDに置くのでしょうか。
すでにあるフローティングヘッダは、楽天GOLD内にありまして、インラインフレームをRMS共通説明文に書いて表示しております。
検索のフォーム部分をすでにあるフローティングのヘッダに続けて記載する形なのか、
RMS側に書いて、すでにあるフローティングヘッダの下にくるように新たなフローティングを設定するのでしょうか？

それからJSのコードをDWに貼りますと、下記の行にシンタックスエラーがでてしまいますが問題ないでしょうか。
_now = _scr;

スマホサイトもフローティングも初めて作っているため、色々分からない状態です。
おかしな質問になっていたら申しわけありません。
どうぞよろしくお願いします。

Answer

ECマスターズの田中です。

＞検索のフォーム部分をすでにあるフローティングのヘッダに続けて記載する形なのか、
＞RMS側に書いて、すでにあるフローティングヘッダの下にくるように新たなフローティングを設定するのでしょうか？
どちらでも結構です。
前者であれば、別途表示用HTMLファイルを作成し、既存ののすぐ下に新しくタグを設置する、
後者であれば、仰るとおり、新たなフローティングを設定する形です。
いずれの場合も、新たに作成した部分を指定できるセレクターを、
「表示・隠す部分のセレクター」としてご設定ください。

＞それからJSのコードをDWに貼りますと、下記の行にシンタックスエラーがでてしまいますが問題ないでしょうか。
＞_now = _scr;
はい、文法としては問題ありません。
参考までに、どのようなエラーが表示されたかお知らせいただけますでしょうか。

もし、実際にご設置いただいてうまく動作しない場合は、
確認させていただきますので、
うまく動作しない状態を確認できるよう残していただきますようお願いいたします。

Answer

私のフローティングの作りがおかしいのか、うまく設置できません。
ｊｓ以前に検索フォームをフローティングに表示することができずにいます。
RMS側にフォームを書く場合禁止タグの回避方法も教えていただけますか。

また、JSのエラー画面も添付いたします。
ファイルを作る(保存)時点でエラーがでてしまいます。

これで分からなければ、問い合わせより実際のソースをお送りして見ていただくことはできますでしょうか？

Answer

ECマスターズの田中です。

＞RMS側にフォームを書く場合禁止タグの回避方法も教えていただけますか。
禁止タグチェックを回避するには、
回避させたいタグの名前の後ろに「 =""」を挿入してください。
対応する終了タグがある場合は、終了タグにも挿入してください。
例） → 

＞また、JSのエラー画面も添付いたします。
＞ファイルを作る(保存)時点でエラーがでてしまいます。
大変失礼いたしました。
改めてソース全体を確認したところ、
_now = _scr;
の1行上にある } が1つ余計に入っておりましたので、
削除していただけますでしょうか。
それで無事保存できるようになるはずですので、ご確認をお願いします。
併せて、以前ご案内したソースも修正させていただきましたので、
ご了承のほどお願いいたします。

Answer

希望通りの表示ができました！
本当に助かりました。
ご丁寧にありがとうございます。

Answer

表示はうまくいったのですが、商品検索ができなくなってしまいました。
何を検索しても検索結果が＝＝＝になってしまいます。

上記質問の「別途表示用HTMLファイルを作成し、既存ののすぐ下に新しくタグを設置する」
の方法で作りました。

よろしくお願いします。

Answer

ECマスターズの田中です。

検索窓が埋め込まれているHTMLファイルが、
EUC以外の文字コードで作成されている可能性が高いです。

楽天の検索は、文字コードがEUCのデータを送信しない場合、
日本語が入力されると文字化けして使えなくなりますので、
文字コードをEUCに変換して保存をお願いいたします。

文字コードを変換できるソフトをお持ちでない場合は、
下記「Mery」のような、フリーソフトのテキストエディタをご利用ください。
http://forest.watch.impress.co.jp/library/software/mery/

タグにaccept-chaset属性を加える方法もありますが、
InternetExplorerには対応しておりません。
詳しくは、こちらのページをご参照下さい。
http://www.webbibo.com/blog/htmlcss/accept-charset.html

Answer

文字コードを修正したら直りました。
初歩的なミスですみません。
ありがとうございました。