「買い物かごへ」や「このページのTOPへ」のリンク設定について

Question

お世話になっております、パラボッセの内堀です。

楽天市場の商品ページでは楽天市場の仕様で右下隅に「買い物かごへ」と赤い四角が表示されますが、これはどんなリンク先を指定しているのでしょうか？

当店でも同じようなボタンをPC用販売説明文の中に何個か入れたいと思っています。
これまではPC用商品説明文にアンカーを作ってPC用販売説明文からリンクさせていました。
それだとレイアウトのちがいで買い物かごボタンに直結しないので、
楽天市場のボタンのように移動できたらいいなと思っています。

それと、似たように「このページのTOPへ」というリンクもできたらいいなと思います。
いちいち各商品ページのURLを指定するのではなく、
なにか定数を指定すればどのページでも共通して指定できるのでしょうか？

こちらのページにある画面右の「このページのTOPへ」をまねしたいと思っています。
http://item.rakuten.co.jp/angers2e/139136#05

もしお分かりでしたらご教授いただけますと幸いです。

Accepted Answer

お試しいただいた通り、
商品ページに、 # で始まるページ内リンクを張ると、
image.rakuten.co.jp# にジャンプしてしまいますので、
フルパスを指定していただく形でご対応をお願いします。

なお、各商品ページにある #rakutenLimitedId_cart というアンカーに
ジャンプさせると、ページ右下の「買い物かごへ」ボタンを押した場合と
同じ位置にジャンプすることができます。

その為、以前ご案内したを使う方法で、

買い物かごへ

document.getElementById('jumptop').href = document.referrer.replace(/(#.*)?$/,"#rakutenLimitedId_cart")


という記述をしたHTMLファイルを作成すると、
全商品ページに一括でタグで埋め込むことができますので
お試しください。

Answer

「買い物かごへ」ボタンの動作を確認したところ、
楽天独自のJavaScriptで動作させておりました。

ショップ側では、GOLD以外でJavaScriptを操作することができない為、
ショップ側で同じ動作をするボタンの設置はできません。

ですが、各商品ページには、
キャッチコピーのすぐ上にアンカーが埋め込まれておりますので、
そこまでジャンプするボタンを、各商品ごとに設置することはできます。

アンカー名は、RAC番号の下8桁です。
各商品ごとにRAC番号をお調べいただくか、
実際の商品ページのソースでご確認ください。


例）
http://item.rakuten.co.jp/angers2e/139136 のソースを見ると、
母の日/花/………
の直前に、

が設置されておりますので、
買い物カゴへ
というリンクを設置すれば、買い物かごの近くへジャンプするボタンが設置できます。


また、「このページのTOPへ」ボタンですが、
サンプルでいただいたショップは個別で設定されているようです。
おなじ動作をさせる場合は、GOLDの中にHTMLファイルを作り、

このページのTOPへ

document.getElementById('jumptop').href = document.referrer


という記載を加えて、ショップの中にタグで埋め込むと、
現在のページのトップへ移動させるリンクを作ることができます。

なお、TOPへ移動するボタンでしたら、例えばヘッダーの先頭に

などでアンカーを作っていただければ、
そのアンカーへジャンプするボタンを設置することができると思われますので
お試しいただけますでしょうか。

Answer

早速のご回答ありがとうございます。

RAC番号の下8ケタを指定してリンクを作成したのですが、
どうも商品ページではリンク先URLが "http://image.rakuten.co.jp/#10000395" というように image.　の方に飛ばしてしまってうまく表示できません。

作業しているページは　http://item.rakuten.co.jp/paravoce/src_b/　です。

RMSの商品情報変更のテキストフィールドには
買い物かごへ
と指定しているのですが、商品ページではリンク先が http://image.rakuten.co.jp/#10000395 となります。
http://item.rakuten.co.jp/paravoce/src_b/#10000395 とフルパス指定しないといけないのでしょうか？

Answer

ありがとうございます。

フルパスで、#rakutenLimitedId_cart を指定してできました。

を使う方法はすぐにわからないので改めて考えたいと思います。