楽天のスマホ商品ページにオリジナルのお気に入りボタンを設置する

楽天のスマホ商品ページにはデフォルトで商品のお気に入りボタンが設置されています。

商品をお気に入りに登録してもらうことで商品の割引、ポイントアップ情報などが通知されるため、購入機会を増やすことができます。

それではお気に入りボタンを好きなところに設置するにはどうすれがいいのか？

本記事ではオリジナルのお気に入りボタンを作成し、例として買い物かごの隣に設置する方法を解説します。

本記事で実装するお気に入りボタンには楽天GOLDの契約が必要です。

追記：現在は楽天独自のお気に入りボタンが実装されたため店舗オリジナルのお気に入りボタンは不要になりました。CSSやJSは別のことの参考になりますのでご興味があれば目を通してください。

この記事の目次

お気に入りボタンの実装イメージ
実装するお気に入りボタンのメリット
お気に入りボタンを実装する
デモ
さあ、お気に入りボタンを実装しよう

お気に入りボタンの実装イメージ

本記事で実装するお気に入りボタンの完成イメージです。

実装するお気に入りボタンのメリット

全商品対応

オリジナルのお気に入りボタンはjQueryで実装します。

JSファイルを読み込むだけで全商品ページに反映されます。

フローティングボタン

フローティングボタンである買い物かごボタンの横にお気に入りボタンを設置します。

画面下に固定されるため、常に画面に表示することができます。

SNSでシェアするボタン

お気に入りボタンの隣に「SNSでシェアするボタン」も設置します。

お気に入りボタンを実装する

お気に入りボタンの画像を作成する

お気に入りボタン
SNSでシェアするボタン

2つのボタンのオリジナル画像を作成し、R-Cabinetまたは楽天GOLDにアップロードします。

例）お気に入りボタンとSNSでシェアするボタン

お気に入りボタン

SNSでシェアボタン

jQuery

楽天で既にjQueryが読み込まれているため、新たにjQuery本体ファイルを読み込ませる必要はありません。

jQueryは下のような構成で記述しています。

商品番号を取得
商品のお気に入りボタンを生成
SNSのシェアボタンを生成
フローティング用カートボタンコンテナに、お気に入りボタンとSNSのシェアボタンの2点を追加
<body>タグにお気に入りボタン実装用のクラス名を追加

お気に入りボタンを正しく動作させるためには店舗IDが必要です。

<aタグ>に自店舗の店舗IDを記述してください

<a href="https://my.bookmark.rakuten.co.jp/?func=reg&shop_bid=店舗id&itype=1&svid=110&iid=' + item_id + '"></a>

店舗IDを確認する方法は楽天の店舗idを確認する方法まとめをご覧ください。

楽天の店舗idを確認する方法まとめ

CSS

アップロードしたお気に入りボタンとSNSでシェアするボタンの画像を背景画像に指定してください。

楽天GOLDにアップロード

前述したJSファイルとCSSファイルを自店舗の楽天GOLDにアップロードします。

RMSに記述

楽天GOLDにアップロードしたファイルをRMSのHTML編集画面に記述します。

HTML編集画面までのルート

RMSトップ＞デザイン設定（スマートフォン）＞スマホ商品ページ

スマホ商品ページにおける<scriptタグ>、<linkタグ>の記述方法は楽天スマホページでjavascriptを使う裏技をご覧ください。

楽天スマホページでjavascriptを使う裏技

デモ

楽天のスマホページを模したデモです。

See the Pen 【楽天市場】スマホページでオリジナルのお気に入りボタンを設置する by ざきひー (@zakihiii) on CodePen.0

さあ、お気に入りボタンを実装しよう

JSとCSSファイルを読み込むだけでデモのようなお気に入りボタンを表示することが可能です。

商品ページごとに記述する必要がないため、手軽に実装できます。

それでは、オリジナルのお気に入りボタンを設置して商品の購入機会を増やしましょう！