スマホページのお気に入りボタンについて

Question

いつもお世話になります。
スマホページのお気に入りボタンについての質問です。

スマホページの右側に「上へ」「かごへ」ボタンがついていますが、
この並びにその商品ページの「お気に入りに追加」ボタンが表示されている店舗様があります。

参考店舗様
http://item.rakuten.co.jp/dondon/coolmat-90-140/
http://item.rakuten.co.jp/e-futon-kobo/10000004/

商品ごとにお気に入りに追加urlは違うと思うのですが、
自動で取得できる何かがあるのでしょうか？

どのようなタグを入れると、このように表示されるのでしょうか？

教えていただけると助かりますので、
どうぞよろしくお願いいたします。

Answer

ECマスターズの田中です。

下記返信内容では、
楽天RMSの、禁止タグを入力できるバグを利用しておりますので、
今後、RMSの改修により、使用できなくなる可能性があることを
ご承知おきください。

＞商品ごとにお気に入りに追加urlは違うと思うのですが、
＞自動で取得できる何かがあるのでしょうか？

はい、「itemInqForm」というname属性を持つ、
非表示のタグの中に
「item_id」という名前の入力欄があり、
その中に、お気に入りに追加urlの商品ごとに変わる部分（商品ID）が保存されておりますので、
JavaScriptを利用して値を取得することで、
お気に入りに追加urlを作ることができます。


＞どのようなタグを入れると、このように表示されるのでしょうか？

参考店舗の1店舗目、dondonさんでは
下記のタグを共通説明文に記入することで表示されております。

===== この下の行から ================





===== この上の行まで ================

最初に読み込んでいるsp_rms.cssの中で、
お気に入りボタンに影響するのは下記の部分です。

===== この下の行から ================
#bookmark_btn {
    position: fixed !important;
    bottom: 92px !important;
    right: 8px !important;
    background-color: #cc0000 !important;
    text-align: center !important;
    width: 42px !important;
    height: 42px !important;
    z-index: 900001 !important;
}

#bookmark_btn > a{
    opacity: 1 !important;
    width: 42px !important;
	height: 42px !important;
    padding: 0 !important;
    z-index: 900001 !important;
}

#bookmark_btn > a > img {
    opacity: 1 !important;
    width: 22px !important;
    height: 22px !important;
	position: relative !important;
	top: 10px !important;
	z-index: 900002 !important;
}

#floatingButtons {
	height: 125px !important;
	bottom: 50px !important;
}

#floatingButtons > div.toTopButton {
	top: -13px !important;
}

#floatingButtons .toCartButton {
	bottom: -28px !important;
}
===== この上の行まで ================

imgタグを読み込んだ時に発生する「onerror」イベントを利用して
「」の中に
お気に入りに追加urlのリンクを作成しております。
imgタグの代わりに、
「onerror="」より右から、4行下にある「">」より左の部分を
外部JSに記入し、タグで読み込ませていただいても結構です。

作成したお気に入りボタンを、
「sp_rms.css」内の記述で、上へボタンとかごへボタンの間に
挿入しております。

上へボタンを上に13ピクセル、かごへボタンを下に28ピクセルずらすことで
お気に入りボタン用のスペースを作っておりますが、
新設されたクーポンボタンに被る恐れがありますので、
上へボタンだけをボタン1つ分ずらしていただくことをおすすめします。

Answer

ありがとうございました！

Answer

便乗質問失礼します。

例のサイトでお気に入りのアイコンとして使われているのは

http://www.rakuten.ne.jp/gold/dondon/rms_sp/images/star.svg

になっていますが、.svgは画像ではないのですか。
また、アイコンだけではわかりにくいといけないので「お気に入りへ」などと文字も入れたいと思っています。
その辺りのカスタマイズについてもアドバイス頂けますか？

よろしくお願い致します。

Answer

ECマスターズの田中です。

＞.svgは画像ではないのですか。

SVGは画像ファイルの形式の一つです。
star.svgは、お気に入りボタンの星形部分（白い部分）を表示するためにある、
SVG形式の画像ファイルとなっております。

SVG形式の画像は、曲線で表現されている（ベクタ形式）ため、
拡大縮小しても綺麗に表示できる特徴があります。
詳しい説明は、下記URLの記事をご参照ください。
http://www.atmarkit.co.jp/ait/articles/0802/15/news150.html

今回のお気に入りボタンは、固定サイズで表示され、
拡大縮小されることもありませんので、
白文字・透明背景で、星形と文字が記載された、
GIF形式やPNG形式の画像をご用意いただき、
star.svgの代わりに設置していただくことをオススメします。

Answer

詳しいご説明、ありがとうございます。

文字を入れた画像を用意してカスタマイズしようと思いましたが、画像サイズを変えるとホタンの位置ずれが起きてしまいます。
画像サイズを変えた場合、どこの数字を変えればよいでしょうか。

よろしくお願い致します。

Answer

ECマスターズの田中です。

それでは、上記「sp_rms.css」内で
それぞれ変更が必要な部分を記載しますので、
記載のある行の数字を必要に応じて変更してご利用ください。

===== この下の行から ================
#bookmark_btn {
position: fixed !important;
bottom: 92px !important;
right: 8px !important;
background-color: #cc0000 !important;
text-align: center !important;
width: 42px !important; /* 横幅 */
height: 42px !important; /* 高さ */
z-index: 900001 !important;
}

#bookmark_btn > a{
opacity: 1 !important;
width: 42px !important; /* 横幅 */
height: 42px !important; /* 高さ */
padding: 0 !important;
z-index: 900001 !important;
}

#bookmark_btn > a > img {
opacity: 1 !important;
width: 22px !important; /* 横幅 */
height: 22px !important; /* 高さ */
position: relative !important;
top: 10px !important; /* ボタン上端からの位置 */
z-index: 900002 !important;
}

/*
（中略）
*/

#floatingButtons > div.toTopButton {
top: -13px !important; /* 既存「上へ」ボタンを下に動かす移動量（少なくすると上へ移動） */
}
===== この上の行まで ================
※同じ項目（横幅、高さ）は、同じ数値だけ増減していただくようお願いします。

Answer

田中様、ありがとうございました。

設置できました。