モーダルウィンドウでクーポン獲得と同時にお気に入り登録される方法

Question

先日ECCからモーダルウィンドウを設置してクーポンを配る モーダルウィンドウをクリックした際に自動でお気に入り登録されるという事をしているショップさんを紹介されました。https://item.rakuten.co.jp/seedcoms/100035-new1-rp/(他社のページを載せるのはNGなどのルールがありましたらすぐに消しますので教えてください)この方法を教えて頂けますでしょうか。恥ずかしながら私は、普通のモーダルもPCでしか設置する事ができません。先日こちらの過去の質問を見てスマホに設置しようとしましたが上手く反映されませんでした。CSS、HTMLの知識はほぼほぼありません。分かりやすく教えて頂けますと助かります・・・よろしくお願いいたします。

Answer

ECマスターズの田中です。いただいた商品ページに表示されるモーダルウィンドウの仕組みを確認したところ、リンク先を指定する<a>タグにて、２箇所に開く先のURLを指定することで実現しておりましたが、その指定を行うために、バナー表示部分を楽天GOLD内のページとして作成していただく必要がございます。全てをご説明差し上げようとすると非常に長くなってしまいますので、もし、YYさんにて実際にご設置いただいたモーダルウィンドウがございましたら、ウィンドウが確認できるページのURLを、返信もしくは「投稿内容について報告する」よりお知らせいただけますでしょうか。私にて構造を確認の上、機能を追加する方法をご案内させていただきます。また、楽天GOLDに新しくページを作成する方法はご存知でしょうか。以上、ご教示いただきますようお願いします。

Answer

田中様お世話になります。よろしくお願いいたします。>実際にご設置いただいたモーダルウィンドウがございましたら、>ウィンドウが確認できるページのURLとりあえず、設置してみました！(普段はイベント時にたまに使うくらいです。)https://item.rakuten.co.jp/***/72/>楽天GOLDに新しくページを作成する方法はご存知でしょうかイベント時に特設ページを作って楽天ゴールド(Ribrary)にアップし、そのURLへ誘導するという施策は行っていますが、そういった事でしょうか？？このような感じで作っています。https://www.rakuten.ne.jp/gold/***/KikakuPsisaku/201903SS.htmlこの事以外はあまりよく分かっていません。(クオリティが低く恥ずかしいので店舗URLの部分を隠しております。)

Answer

ECマスターズの田中です。> とりあえず、設置してみました！ご対応ありがとうございます。確認できましたので、一旦撤去をお願いします。また、楽天GOLDについてもお知らせいただき、ありがとうございます。内容をまとめてご返信いたしますので、今しばらくお待ちくださいませ。

Answer

田中様ご確認ありがとうございます。ご連絡お待ちしております。よろしくお願いします。

Answer

ECマスターズの田中です。まずは、バナーとして表示するHTMLファイルを楽天GOLDにご用意ください。例としていただいた店舗ではhttps//www.rakuten.ne.jp/gold/SHOP-URL/sp/modal/poppc.html上記HTMLファイルを利用して表示しておりますので、まずは、上記HTMLをダウンロードして、YYさんがHTML編集に使われているアプリにて開いてください。その際、タグの直前にあると、タグの直前にあるは、楽天によって自動で挿入されるタグなので、削除をお願いします。次に、ソース内に上記のような書式となっておりますので、それぞれ、"で囲まれたURLを、YYさんのショップ用のURLに書き換えをお願いします。以上の作業が終わりましたら、楽天GOLDにアップロードの上、HTMLファイルのURLを直接開いてクリックしていただき、ご希望どおり動作するか、ご確認いただきますようお願いします。不明な点がございましたらご返信をお願いします。なお、https://www.rakuten.ne.jp/gold/***/modalwindow/modal201904.css上記cssファイルの文字コードが楽天市場のものと異なるため、モーダルウィンドウの×ボタンが文字化けを起こしております。上記ファイルの先頭に@charset "Shift_JIS";とご記載いただき、CSSファイルの正しい文字コードを指定して、文字化けを解消していただきますようお願いします。

Answer

田中様ありがとうございます。>以上の作業が終わりましたら、楽天GOLDにアップロードの上、>HTMLファイルのURLを直接開いてクリックしていただき、>ご希望どおり動作するか、ご確認いただきますようお願いします。ここまで完璧にできました。わかりやすく教えて頂きありがとうございます！ここから先はどのようにしてページに反映させていけば良いのでしょうか？可能であれば、PC・スマホ両方に載せたいと思っています。よろしくお願いします。>モーダルウィンドウの×ボタンが文字化けを起こしております。ここもとても気になっていました！ありがとうございます。

Answer

ECマスターズの塚本です。いただいたご質問ですがご確認のうえ担当より週明けご連絡をさせていただきます。お時間いただきますが今しばらくお待ちくださいませ。

Answer

ECマスターズの田中です。まずは、PCに掲載する方法からご案内させていただきます。モーダルウィンドウを設置するためのHTMLソースに含まれる※アップロードしたHTMLファイルのURLは、実際のURLに差し替えてご利用ください。iframeタグを利用することで、ページ内に別のページを埋め込むことができます。https://techacademy.jp/magazine/5839上記のように修正していただいた上で、PC上で動作することをご確認いただきますようお願いします。無事動作をご確認いただけましたら、スマートフォン上の問題を確認させていただきます。動作しない状態で構いませんので、商品ページに設置の上、URLをお知らせいただきますようお願いします。（既存商品ページをコピーしてサーチ非表示に設定した、ダミーの商品ページでも結構です）

Answer

田中様ありがとうございます。PC上に設置できました！ありがとうございます。商品ページ(PC用販売説明文)に設置しようとすると「認められていないタグが～～」とエラーがでるのでヘッダー部分に設置しています。一部の商品ページに載せる事はできないのでしょうか？これを載せています。

スマホは全ての編集画面で同様のエラーがでます。(スマホ用商品説明文、スマホ用デザイン設定メニュー内のトップページ設定、商品ページ設定、カテゴリーページ設定)どうすれば良いのでしょうか？

Answer

ECマスターズの田中です。無事、PCにご設置いただけて何よりです。整った位置に表示させるためにはさらに見た目の調整が必要となります。最初に、いただいたソースに含まれるheight="387" を height="300" にご変更いただき、modal-okiniiri.htmlを表示させる部分の高さを調整してください。次に、https://www.rakuten.ne.jp/gold/***/modalwindow/modalwindow2019.cssに含まれるwidth: 240px; /*画像の横幅*/をwidth: 350px; /*画像の横幅*/に、margin: -217px 0 0 -120px; /*画像の高さと幅の半分 marginをマイナス */をmargin: -150px 0 0 -175px; /*画像の高さと幅の半分 marginをマイナス */に、それぞれご変更いただき、表示位置の調整を行っていただきますようお願いします。> 一部の商品ページに載せる事はできないのでしょうか？（19/4/10 内容を修正）input, label, link といった、ヘッダー・フッター・レフトナビ、もしくは共通説明文（大）でしか記入できないタグが含まれているため、たとえば、ヘッダー・フッター・レフトナビをご利用いただく場合、モーダルウィンドウの無い通常のヘッダー・フッター・レフトナビと、それをコピーしてモーダルウィンドウを設置したヘッダー・フッター・レフトナビをそれぞれご用意いただき、表示させたい商品にのみ、後者のヘッダー・フッター・レフトナビを使うよう設定する、という方法で、出し分けを行っていただきますようお願いします。> スマホは全ての編集画面で同様のエラーがでます。> (スマホ用商品説明文、スマホ用デザイン設定メニュー内のトップページ設定、商品ページ設定、カテゴリーページ設定)> どうすれば良いのでしょうか？※RMSの、禁止タグを入力できるバグを利用する方法ですので、　今後、RMSの改修により、使用できなくなる可能性があります。いただいたソースのに、つまり、タグ名の後ろに「 =""」（半角スペース含む）を追記していただくことで各項目に挿入していただくことができますので、お試しいただきますようお願いします。なお、店舗内カテゴリ個別の「スマートフォン用カテゴリ説明文」だけはどうしてもエラーが発生してしまい、挿入していただくことができないことを予めお含みおきください。（カテゴリページ共通説明文には挿入可能です）

Answer

田中様>表示位置の調整を行っていただきますようお願いします。キレイに表示されるようになりました！ありがとうございます。>全商品ページ共通で表示していただく必要がございます。了解しました。スマホ用商品ページ共通説明文に

このソースを入力しました。がうまく反映されません。モーダルウィンドウとして画面に表示されず、商品ページの一番下の方に画像がでてきます。どうすればよいでしょうか？

Answer

ECマスターズの田中です。> モーダルウィンドウとして画面に表示されず、> 商品ページの一番下の方に画像がでてきます。> どうすればよいでしょうか？私のiPhone8にてスマートフォン用商品ページを確認したところ、モーダルウィンドウが問題なく表示されました。キャッシュ（過去に読み込んだページのデータ）を表示している可能性がございますので、プライベートブラウズにて、再度ご確認をお願いします。http://menulist.mb.softbank.jp/feature_20180919/なお、PC用商品ページに対する出し分けですが、ヘッダー・フッター・レフトナビもしくは共通説明文（大）の設定を複数用意し、一部商品にのみモーダルウィンドウの付いた設定をご利用いただくことで出し分けを実現することができることがわかりました。誤った内容をご案内してしまい、大変申し訳ありませんでした。改めて出し分けを行われる場合は、モーダルウィンドウの有無で複数設定を作っていただくことでご対応いただきますようお願いいたします。先の返信内容も、修正を行わせていただきました。不明な点がございましたらご返信ください、何卒よろしくお願いいたします。

Answer

田中様>私のiPhone8にてスマートフォン用商品ページを確認したところ、>モーダルウィンドウが問題なく表示されました。今確認したところ、問題なく表示されました！ありがとうございます。>改めて出し分けを行われる場合は、>モーダルウィンドウの有無で複数設定を作っていただくことで>ご対応いただきますようお願いいたします。分かりました。ご丁寧にありがとうございます。ECマスターズ加入して数年経ちますが、全然こちらのフォーラムを使用しておりませんでした。もっとはやく活用しておけば・・・と思うくらい素晴らしい会社、システムですね！これからもお世話になります。ありがとうございました！！

モーダルウィンドウでクーポン獲得と同時にお気に入り登録される方法

カテゴリーから探す