楽天のスマホページはタグの制限があるので裏技などを使って頑張る訳なんですが限界が・・・
そもそもアイフォンでは通常のHTMLでもアイフレーム（iframe）のイレギュラー表示に苦労するのに裏技でアイフレーム（iframe）を使って大丈夫なのかと思っていた。
そんな時、お手伝いしているお店が楽天RMSのスマホトップは限界なのでゴールドでページを作るということ。レスポンシブでPCと共通ページも考えたんですが現在のPCページは残し、新たにスマホページをつくることに。
楽天市場では、2018年7月25日より、RMSでスマートフォントップページのリダイレクト設定ができるようになりました。あせってヤフーショッピングに追随したんですかね。
以前からPCページをゴールドで作ったページにリダイレクトさせる機能はありました、今回はそれにスマホも加わりました。
重要なことは「旧R-Storefront」とはリダイレクト方法が違う事。ここを理解していないとお客様が迷子になってしまいます。
振り分けを確認する
パソコンリダイレクト設定
https://www.rakuten.co.jp/●●●●●/
↓
https://www.rakuten.ne.jp/gold/●●●●●/
スマートフォンリダイレクト設定
https://www.rakuten.co.jp/●●●●●/index_smart.html
↓
※●●●●●は店舗ID
つまりゴールドで作ったPCページからゴールドで作ったスマホページには直接誘導が無いということです。
新規でお店を立ち上げる訳ではないので、ゴールドページを「お気に入り」に入れてもらっているお客さんのことを考えないといけませんので「このサイトにはスマートフォン用のサイトがあります」などの、javascriptの再設定が必要になります。
以前は裏技で「トップ説明文(1)」に下記のようなものを使いやっていたと思います。
|
1 |
<meta http-equiv="refresh" ="" content="0;URL=http://www.rakuten.ne.jp/gold/ショップID/スマホページURL/"> |
スマホページの確認には「?force-site=ipn」が便利
PCでページを制作しているとページ確認でいちいちスマホを見るのは面倒、また、ちょっとスマホページを確認したい、そんな時に便利なのが「?force-site=ipn」。
商品ページ、カテゴリーページなどならPCでページを開いて「/」の後に「?force-site=ipn」を追加するとPCからでもスマホページが表示される、ネットで見つけた情報なんですが便利。
スマホTOPの正規は
https://www.rakuten.co.jp/お店のID/?force-site=ipn でも表示されます。
※Yahoo!ショッピングでは末尾に「?device=sp」を付けるとPCでスマホページが確認できます。
スマホから強制的にPCページを見せたい場合は「?force-site=pc」
楽天RMSからスマートフォンリダイレクト設定を行った場合、スマホページからPCを見せたい場合は「?force-site=pc」を追加します。
https://www.rakuten.co.jp/●●●●●/
↓
ではPCトップに行ってくれません、PCトップへのリンクは下記にするとPCページに行ってくれます。
https://www.rakuten.co.jp/●●●●●/?force-site=pc
※Yahoo!ショッピングでは末尾に「?device=pc」。
＜余談＞Bootstrap4だけどLuxbarを使ってみる
CSSだけでハンバーガーメニューが作れるLuxbar、Bootstrap4にはNavbarがあるんですが、そのまま使うといかにも「Bootstrap」となってしまうので今回はBootstrapのNavbarはやめました。
基本はこんな感じからはじめます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
<!doctype html> <html lang="ja"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <!-- Luxbar CSS --> <link rel="stylesheet" href="https://cdn.rawgit.com/balzss/luxbar/ae5835e2/build/luxbar.min.css"> <title>Bootstrap4＋Luxbar</title> </head> <body> <!-- コンテンツ --> <header id="luxbar" class="luxbar-static"> <input type="checkbox" class="luxbar-checkbox" id="luxbar-checkbox"/> <div class="luxbar-menu luxbar-menu-right luxbar-menu-material-cyan"> <ul class="luxbar-navigation"> <li class="luxbar-header"> <a href="#" class="luxbar-brand">ブランド名</a> <label class="luxbar-hamburger luxbar-hamburger-spin" id="luxbar-hamburger" for="luxbar-checkbox"> <span></span> </label> </li> <li class="luxbar-item"><a href="#">Item 1</a></li> <li class="luxbar-item"><a href="#">Item 2</a></li> <li class="luxbar-item"><a href="#">Item 3</a></li> <li class="luxbar-item"><a href="#">Item 4</a></li> </ul> </div> </header> <!-- /コンテンツ --> <!-- jquery --> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <!-- Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> </body> </html> |
コメント