【楽天スマホ】商品ページにオリジナルメニュー

Question

商品ページにドロワーメニューを設置したのですが、うまく反映されません。
スーパーSALEのアイコンと被ってしまいメニューが隠れてしまっているのと、
ドロワーを開いたとき、中身がうまく配置されずスクロールの動きが悪い状態です。
理想はソウルベリーさんのようなスマホドロワーメニューを実装したいです。

ドロワーメニューはこちらを使って組み込みました。
https://www.miso.blog/jquery-drawer/

商品ページにオリジナルメニューをうまく実装するにはどうすればよいでしょうか。

Accepted Answer

ECマスターズの田中です。

ソースをお送りいただき、ありがとうございました。

それでは、まず一度、

https://www.rakuten.ne.jp/gold/ショップURL/ogaria/page_create/css/rakuten.css
に
#fixedBox {
    position: fixed;
    left: 0;
    top: 0;
}
を追記の上、
.drawer-hamburger{
の下にある
top: 0px;
を
top: 20px;
に変更した上で、
再度、設置をお試しいただきますようお願いいたします。

Answer

ECマスターズの田中です。

私にて、お送りいただいた商品ページを確認したところ
ドロワーメニューが導入されている様子は
見当たりませんでした。

動きが悪い原因を調べるには、
実際に導入されている様子を確認させていただく必要がございますので、

既存の商品をコピーしてサーチ非表示にしたダミーの商品ページなどでも結構ですので、
スマートフォン用商品説明文を利用してドロワーメニューを導入していただき、
確認できるURLを「投稿内容について報告する」より
お送りいただきますようお願いいたします。

Answer

お返事ありがとうございます。
「投稿お内容について報告する」より、URLを送らせていただきました。
お手数お掛けしますが、よろしくお願い致します。

Answer

ECマスターズの田中です。

ありがとうございます。
いただいたページを確認いたしましたが、
やはり、Drawer用のJavaScriptソースは見当たりませんでした。

お手数をおかけしますが、
表示でわかる部分がございましたらスクリーンショット、
Drawer用のjsについて、
・スマートフォン用商品説明文の中に記載されているかどうか
・URLもしくはファイル名
など、詳しい情報について、
改めて返信または「投稿内容について報告する」よりお送りいただけますでしょうか。

Answer

再度URLなどを送らせていただきました。
お手数お掛けしますが、よろしくお願い致します。

Answer

ECマスターズの田中です。

URLをお送りいただき、ありがとうございました。

いただいたURLのドロワーメニューの動作を
私のiPhoneにて確認しましたが、
動作自体は特に問題ございませんでした。

他の機種でご覧いただいた際に、
表示/非表示の動作に不自然な点がございました場合は、
ご確認いただいた機種をお知らせください。

その他、私にて気に留まった点として、

indextest.html にて、スタイルシートに
body { margin:0; padding:0; }
を加えていただくと、
固定メニューの左や上の空間を詰めることができます。

さらに、
.drawer-menu { text-align: center; }
を加えていただくと、
ドロワーメニュー内で左詰め表示になっているphone.htmlを
中央揃えで表示させることができます。
ドロワーメニュー内の余白が気になる場合は、
phone.html自体を若干横幅広めに作り直していただくことをオススメします。

以上、修正していただいた上で、
何か気になる点がございましたらご返信ください。

Answer

お返事・解決策ありがとうございます！
メニューの余白についてなのですが、スクロールが2重でかかっているみたいで右側の余白部分が1つのスクロール領域になっているようで詰めることができません。CSSを見ても、どこを変更すればスクロール領域の幅が変えられるかわかりませんでした。
また、商品ページに反映したときにヘッダー店舗ロゴバナーとドロワーメニューが離れてしまいます。
次から次へと申し訳ないのですが、返答の方よろしくお願い致します。

商品ページで使っているCSS
###HR######IMG03bc084b8ca7e2db8b339b787cd88e10f.jpegIMG0######BR###

Answer

ECマスターズの田中です。

細かい調整について、正確にご案内差し上げるには、
どうしても実際に設置されている様子を
確認させていただく必要がございます。

いただいたスクリーンショットの商品ページ含め、
共通説明文にて、スーパーSALE用のバナーを表示されているようですので、
確認用に、いただいたスクリーンショットの状態の商品ページを
ご用意いただくことが難しいようであれば、
イベント向け表示が無くなった後に再度確認させていただけますでしょうか。

実際の様子がないため、基本的な考え方についてお話しますと、
商品画像上に表示用と固定表示用の
メニューアイコンとヘッダーをそれぞれご用意いただく、
つまり、商品画像上に表示用のメニューアイコンと、
固定表示用のヘッダーを追加していただく形で
ご案内差し上げることになるかと思います。

Answer

お返事ありがとうございます。
SALEイベントが終わりの12月12日に再度、
スマホ用商品ページにドロワーナビを反映いたします。
その際にまた動きなどを見ていただけたらと思いますので、
お手数お掛けいたしますがよろしくお願いいたします。

Answer

お世話になっております。
スマホ商品ページにドロワーメニューを導入いたしました。
メニュー内の検索窓で検索しようと文字を入力する際、メニューが閉じてしまう
など動作が歪な部分があります。
アドバイスの方よろしくお願い致します。

商品ページURL
https://item.rakuten.co.jp/tokeiten/dw-5600ne-1/###HR######IMG04cbb0eb4d23c8ffac6b092d29c4e51ba.jpegIMG0######BR###

Answer

ECマスターズの塚本です。

いただいたご質問ですがお調べしまして
担当よりご回答させていただきます。

明日の回答になる可能性がございますが、
回答まで今しばらくお待ちいただければと思います。

Answer

ご回答の方かしこまりました、お手数お掛けしますがよろしくお願いいたします。
現在スマホ商品ページに反映しているドロワーメニューですが、
動きが歪なままお客様の目に触れてしまうので、一旦外してしまっても大丈夫でしょうか？

Answer

ECマスターズの塚本です。

大変お手数おかけしますが一度
外していただくようお願いいたします。

Answer

ECマスターズの田中です。

回答が遅れてしまい、申し訳ありませんでした。
改めて、実際の設置の様子を確認させていただきたいのですが、
ご設置いただいてから対策のご案内までお時間をいただく可能性がございますので、

再度の設置が難しいようであれば、
実際に共通説明文に挿入しようとされたHTMLソースを
「投稿内容について報告する」より
お送りいただきますようお願いいたします。

Answer

お返事ありがとうございます。
HTMLソースを「投稿内容について報告する」へ
送らせていただきました。
よろしくお願い致します。

Answer

お返事ありがとうございます。
教えていただいたコードを入力して再度上げてみると、
ヘッダーとメニューが一緒になりました、ありがとうございます！

ただ、メニュー内にある検索窓が入力しようとするとメニューを閉じてしまいます。
検索窓に文字を入れるたび閉じてしまうのですが、これはCSSをいじれば
直るのでしょうか？

Answer

ECマスターズの村井です。

いただいたご質問は休み明けに担当より回答させていただきますので、
今しばらくお待ちください。

Answer

ECマスターズの田中です。

私のiPhone8のSafariにて動作を確認したのですが、
特に入力しようとしてメニューが閉じる様子は
確認できませんでした。

かとうさんは、どのような環境でご確認いただいているか、
まずはお知らせいただけますでしょうか。
（iPhoneもしくはAndroid、SafariもしくはChrome、など）

Answer

お返事ありがとうございます。
スマホで確認する際はAndroidのChromeで確認しております。

Answer

ECマスターズの田中です。

ありがとうございます。
AndroidのChromeにて、再現できることを確認いたしました。

私にて調査を行ってみたのですが、
プラグインの仕組みと深く関わっている関係から、
閉じる原因を突き止め、対策することができませんでした。
お力添えできず申し訳ありません。

ドロワーメニューを作るプラグインは、Drawerの他にも
http://program-memo.com/archives/401
にて紹介されているように、様々な種類がございますので、
他の種類の導入をお試しいただくことをオススメします。

Answer

お返事ありがとうございます。
他のプラグインも試してみようと思います。
ご回答の方ありがとうございました！