スマホ商品ページのドロワーメニューについて

Question

こんにちは。お世話になります。スマホ商品ページにハンバーガを押して、メニューが表示されるようにしています。

RMSにハンバーガーメニューを持ったHTMLファイル
r-smartphone_originalmenu.html
を登録し、それをiFrameで商品画像の上に表示ました。

ハンバーガーをタップすると、左からドロワーメニューが出ます。
index.htmlと同じ挙動です。

ただ、スマホページの場合、iFrameに入っているため、おそらくその底辺より下は、フレームの枠の中に潜り込んでいるようで、メニューの下まで全部見ることができません。

このドロワーメニューをスマホのフリック商品画像の上に出すことはできますでしょうか？
https://www.rakuten.ne.jp/gold/off-price/

CSSは
iFrame内のr-smartphone_originalmenu.htmlを制御するstyle2.CSS
iFrameのサイズ、画像を下にずらしているr-smartphoneheader.css
が関連しています。

【RMS】


	
	
		
	
	

【r-smartphone_originalmenu.html】
オーバーレイ部分が
メニュー本体は
　　　　　　　　
			　　　
以下が中身のソース
となっています。

もともとindex.htmlを加工したのがr-smartphone_originalmenu.htmlで、CSSがとても複雑で、どこをさわればよいのかわからない状況です。
現状の画像と目標の店舗さんの画像を添付いたします。どちらも、商品ページです。

どうぞよろしくお願い申し上げます。###HR######IMG085895da64b653baaf0381312be348ae9.pngIMG0### ###IMG1ece68647256654491ea05342562d7d62.pngIMG1###

Answer

ECマスターズの田中です。

iframeの中は、あくまでも定められた枠の中に
異なるページを埋め込んでいる状態であり、
その中の一部だけを元ページの上に表示させる、
ということはできません。

ドロワーメニューを実現するためには、
メニューの内容と、
メニューを出し入れする仕組みを
商品ページ自体にご設置いただく必要がございます。

最低でも、メニューの内容について
元のページから切り出して、
商品ページに改めてご設置いただく必要がございます。
また、ご設置いただいた後、
RMSの改修により、使用できなくなる可能性がございますことを
予めお含みおきください。

上記を踏まえた上で、設置をご希望の場合は、
試験的に設置するための商品ページを、
既存のページをコピーしてサーチ非表示・在庫0に設定する、
などの方法でご用意いただき、
URLをお知らせいただきますようお願いいたします。

さらに可能であれば、
メニューとして設置される内容を、上記商品ページの
スマートフォン用商品説明文の中にご用意いただきますようお願いします。
文字数制限が厳しい場合は、一部だけでも結構です。

と

で囲んでいただくことで、
メニューが表示されている状態でご設置いただくことができます。

Answer

田中様、お世話になっております。
ご多忙の折、ご返信ありがとうございます。

ご指示頂いた件、取り組んだのち、またお知らせさせていただきます。
どうぞよろしくお願い申し上げます。

Answer

お世話になっております。

https://item.rakuten.co.jp/off-price/sp-page-test/

を作成し、そこSP説明文にメニューのサンプルを設定いたしました。
既存のメニューは禁止タグがシンプルなテキストメニュです。


バッグ
以下略


ご確認のほどよろしくお願いします。

Answer

ECマスターズの田中です。

作成いただき、ありがとうございます。
まずは、sp-page-test のスマートフォン用商品説明文にて、
ドロワーメニューの仕組みが動作するように
ご設定いただきますようお願いします。

ドロワーメニューの仕組みは数多くございますが、
https://haniwaman.com/css-modal-drawer/
上記ページで紹介されている仕組みが、
シンプルで、詳しい説明もあって使いやすいかと思います。

「とりあえず完成品を〜」の部分で完成形が紹介されておりますが、
HTMLはすべて禁止タグになりますので、
タグ名の後ろに「 =""」を追記していただき、
CSSは全体を  と  で囲んだ上で
説明文へご記載いただきますようお願いします。

「ここがドロワーとして出てくる部分です。」
を、現在仮設置しているメニューの内容を
差し替えていただきますようお願いします。

文字数制限に引っかかる場合は、
外部CSS・JSファイルを駆使して回避する必要がございます。
更新ができない場合はお知らせください。

このページでドロワーメニューが無事動作するようになりましたら、
iframeの中身からドロワーメニューの開閉を操作する仕組みを
導入していく、という流れとなります。

Answer

こんばんは。ご教授ありがとうございます。
また、参考になるURLのお知らせをありがとうございます。
少し、作業に時間がかかりそうなので、
「このページでドロワーメニューが無事動作するようになりましたら」までやってみます。