スマホ商品ページの独自ヘッダーについて

Question

お世話になります。表題の件ですが、スマホ商品ページで以下のサイト様のように独自ヘッダーからドロワーメニューを出したいのですが、どうしてもうまくいきません。参考サイト：LUIRE様 https://item.rakuten.co.jp/luire/pept11/ 最初、【ヘッダーだけを< ="">を使用し、スマホ用共通パーツ設定に書く→横から出てくるドロワーメニューをiframeにし、チェックボックスで動かす】ということを試みました。 ”スクロールして、途中から独自ヘッダーが出る→画面上部に固定する”まではできました。しかし、チェックボックスからができません。参考サイトを見ると、ヘッダーになるものドロワーメニュー　中身のsp_headerだけが上にあり、あとのは一番下、side_navi_outerは左に待機になっています。そこで疑問が、 ①そもそもヘッダー直打ち、ドロワーメニューiframeのやり方でチェックボックスON-OFFの挙動は実装できるのか？ ②参考サイトは< ="">の形跡もない＆同一ページに書かれている気がしたので、ヘッダーフッターレフトナビを使用しているのかな？？と考えたのですが、それは可能なのか？ということです。 ②も試みてみたのですが・・・検証ツールをうまく見れていないようです。JSだとしたら知識が足りず。参考サイトのような動きをするにはどのように行ったら良いのかアドバイスをいただけないでしょうか。

Answer

ECマスターズの伊藤です。

> ①そもそもヘッダー直打ち、ドロワーメニューiframeのやり方でチェックボックスON-OFFの挙動は実装できるのか？

現状、チェックボックスをクリックすることで
iframeを表示する、という動作は可能です。

仕組みとしては、
チェックボックスをクリックしたら、
iframeを表示する、という方法になるのですが、
チェックしてもiframeが表示されないのであれば、
CSSのセレクタ(+ や ~)がうまく
設定できていない

CSS 子孫/子/隣接/一般兄弟セレクタのサンプル
https://itsakura.com/css-selector-combination

もしくは、iframeの高さが、
設定されていないのではないかと思われます。


> ②参考サイトは< ="">の形跡もない＆同一ページに書かれている気がしたので、ヘッダーフッターレフトナビを使用しているのかな？？と考えたのですが、それは可能なのか？
ということです。

参考サイトは、JSを使用して、コードの読み込みを行っているようです。

ヘッダー部分で読み込みを行っているJS
https://www.rakuten.ne.jp/gold/luire/sp/navi/header.js

内容をすべてJSに記述頂いているので、
=""などのバグ回避をご利用いただかなくても、
ソースを記述することができております。

複雑そうに見えますが

jQuery(function(){	jQuery('body').append('【HTML】');});

の【HTML】の箇所に、HTMLを
記述することで、直前に、HTMLを
読み込むことができるようになります。


なお、先日のサポートニュースにて、

【R-Storefront】スマートフォンページリニューアルと注意点のご案内
HTMLタグの利用制限について
https://mainmenu.rms.rakuten.co.jp/?act=supportnews&news_id=7004

上記案内がございました通り、
今後、１，２ともにご利用いただけなくなる可能性がございます。

上記を踏まえまして、実装されるかどうか
ご検討くださいませ。

Answer

ありがとうございます。

①の方法で実行しようとしておりますが、どうもチェックボックスそのものがうまく機能していないようです。（チェックさえ入れられればほかの準備はできていると思います）

というのも、
チェックボックスが0ｘ0になってしまうのです。
何かとても基本的なことを見落としているのでしょうか・・
ＣＳＳで外枠だけつけて確認したところ、ただチェックボックスに移動するだけ。



離れたところにを用意し、


          
            
            
            
          


で行おうとしてるのですが間違っていますでしょうか。
https://item.rakuten.co.jp/ｘｘｘ/culina-m-5sets/
(外枠のheaderが商品説明欄に残ってる状態ですが)


アドバイス等頂けますと幸いです。
（cssファイルは試行錯誤しすぎて今ぐちゃぐちゃで見にくくなっております）

Answer

ECマスターズの塚本です。

いただきましたご質問ですが確認しまして
担当より明日回答させていただく予定です。

お時間いただきますが今しばらくお待ちくださいませ。

Answer

お世話になります。
色々試行錯誤しまして、できました！
最初に書いたチェックボックスが効かないのはどうやら禁止タグ回避のスペースがおかしかったようです。

①の方法で実装できましたのでご報告です。
ありがとうございました。

Answer

ECマスターズの伊藤です。

無事ご解決いただけたようでよかったです。
またご不明な点がございましたら
ご相談くださいませ。