ポップアップバナーをクリックすると、「クーポン取得」と「お気に入り登録」が同時にできる方法

Question

以下のページでポップアップが表示されますが、これをクリックすると「クーポン取得」と「お気に入り登録」が同時に行われます。

https://item.rakuten.co.jp/seedcoms/10004355-1000/?s-id=bk_pc_item_list_name_c

どのようなソースを記述すればよろしいでしょうか。

また、一般的なバナーをクリックすると「クーポン取得」と「お気に入り登録」が同時に行えるようにもしたいと考えています。###HR######IMG001cac339b85aca3214e51a08fe306e60.jpegIMG0###

Answer

ECマスターズの田中です。

いただいた商品ページの場合、
デザインレシピに記載のあるタグの代わりに、
https://www.rakuten.ne.jp/gold/seedcoms/sp/modal/poppc.html
上記ページをタグで埋め込んでおります。

poppc.htmlの中で

という形式でリンクを張ることで、
クーポン取得とお気に入り登録を同時に作動させておりますので、
同様の仕組みを作ることで、同じ動作を実現できます。

ポップアップ以外のバナーも、
同様にタグで埋め込むことで実現できます。

各URLの作り方がわからない、iframeに埋め込むページの作り方がわからないなど、
不明な点がございましたらご返信ください。

Answer

勉強不足で申し訳ございません。
各URLの作り方、iframeに埋め込むページの作り方等がわかりません。

恐れ入りますが、上記方法を含め、手順をご教授いただけますと助かります。

Answer

こんにちは、便乗させてください。

poppc.htmlの中身、拝見しました。
この仕組みの場合は、お気に入り登録する商品は指定してありますがアクセスした商品ページ毎にお気に入り登録することは可能でしょうか？

いわゆる、“iid=id_item”で。

商品個別クーポンでの利用だといいですが、店舗全体に対するクーポンで利用できるといいな♪

Answer

ECマスターズの伊藤です。

きなこさん

> 各URLの作り方、iframeに埋め込むページの作り方等がわかりません。
> 
> 恐れ入りますが、上記方法を含め、手順をご教授いただけますと助かります。

iframeのページの作成は
下記の手順にてご対応いただけます。

(1)下記HTMLを、メモ帳などに貼り付け

==== 以下を貼り付け ====









==== 以上を貼り付け ====


(2)お好きな名称半角英字.html(例：sample.html)としていただき
文字コードで EUC-JP を指定して保存してください。
※sample.html.txt　のように、最後に.txtがつかないよう、ご注意ください。


(3)(2)をGOLDにアップロード


(4)デザインレシピ

ポップアップバナーを表示させる方法
https://club.ec-masters.net/index.php?design_popup_bunner

の画像部分を、下記の通りに変更し、
指定の箇所に貼り付けてください。


※widthは幅、heightは高さとなりますので、
表示される内容に合わせて、修正をしてください。

「(3)のURL」については

URLについて知る
https://club.ec-masters.net/index.php?design_page10

楽天GOLDやYahoo!のトリプルを利用する
https://club.ec-masters.net/index.php?design_page9

をご参照ください。


なお、メモ帳ではEUC-JPが選択できませんので
編集の際には

Mery
https://forest.watch.impress.co.jp/library/software/mery/

などの、テキストエディタをご利用頂ますよう
お願いいたします。

Answer

ECマスターズの伊藤です。

shinoshinoさん

> この仕組みの場合は、お気に入り登録する商品は指定してありますがアクセスした商品ページ毎にお気に入り登録することは可能でしょうか？
> 
> いわゆる、“iid=id_item”で。

PC版では、JavaScriptを使用することができず
お気に入りをのURLを自動的に生成することができません。

そのため、お気に入りのURLを
直接記述していただく必要がございます。

Answer

お忙しい中、ご対応いただきまして、ありがとうございます。

早速、試してみたいと思います。

Answer

ECマスターズの伊藤です。

> 1、お気に入り登録用のURLはどうやって作りますか
> https://club.ec-masters.net/index.php?design_page10 こちらを読みましたが、わからないです。

お気に入り登録用のURLは下記の通りとなります。

https://my.bookmark.rakuten.co.jp/?func=reg&shop_bid=ショップID&itype=1&svid=101&iid=商品ID
※ショップIDの部分は、ショップ内検索のURLに含まれる６桁の数字、
　または、商品編集画面でご確認いただけるRAC番号の上６桁にご変更ください。
※商品IDは、RAC番号の下８桁をご利用ください。


> 2、文字コードで EUC-JP を指定する方法はわからないです。

Mery
https://forest.watch.impress.co.jp/library/software/mery/

はダウンロードいただきましたでしょうか。
新規保存、もしくは名前をつけて保存　の際に
エンコード　と選択できる箇所がございますので
EUC-JPを選択してください。


> 画像部分を変更するというのは 変更前： 変更後： 
> このような感じですか

変更前： 
変更後： 

に変更をお願いいたします。

Answer

伊藤さん、回答ありがとうございます。

一通りやって、最後「ヘッダー・フッター・レフトナビ」にソースを貼り付けましたが、
「HTMLタグの記述に誤りがあります」というエラーが出てしまいました。

考えられる原因は何かありますか。
ややこしい質問で申し訳ございませんが、よろしくお願い致します。

ソースは以下になります。










p{
margin:0 auto;}
input#modal {
display: none;
}
input#modal + label {
width: 100%;
height: 120%;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2147483646;
background: rgba(0, 0, 0, 0.5);
cursor: pointer;
}
input#modal + label div {
background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
border: medium none;
position: fixed;
width: 300px; /*画像の横幅*/
height:330px; /*画像の縦幅*/
bottom: 0;
left: 0;
margin: 15% auto;
position: fixed;
right: 0;
top: 0;
}
input#modal + label div::before {
content: "× Close";
position: absolute;
bottom: -25%;
right: 50%;
margin: 0 -60px 0 0;
font-size: 3em;
font-weight: bold;
color: #ffffff;
}
input#modal:checked + label {
display: none;
}
input#modal + label img{
width:300px; /*画像の横幅*/
height:330px; /*画像の縦幅*/
}

Answer

すみません、原因は分かりました。



こちらのソースは【=""】の記述がいらないみたいです。削除したら普通に登録できました。

Answer

何度も申し訳ございません。

新たな質問ですが、お気に入り登録完了した後に登録完了を知らせるページから飛んだ前の商品ページに自動的に戻る方法はありますか

Answer

ECマスターズの伊藤です。

> こちらのソースは【=""】の記述がいらないみたいです。削除したら普通に登録できました。

ご案内が異なっており、申し訳ございませんでした。
ご解決頂いたとのご報告、ありがとうございました。

> 新たな質問ですが、お気に入り登録完了した後に登録完了を知らせるページから飛んだ前の商品ページに自動的に戻る方法はありますか

楽天側にて用意されているページは
編集することができないため、
お気に入りから元のページに
戻ることはできなくなっております。

もし、他の店舗様など
実際に設置されているページが御座いましたら
確認をさせていただきたいと思いますので
URLをご連絡くださいませ。