ページ内リンク付き案内文を追加する【楽天スマホ商品ページカスタマイズ】

2019年6月26日2019年7月8日

以前、楽天スマホ商品ページの画像下に案内文を追加するカスタマイズをご紹介しました。

前提として、楽天のスマホ商品ページの価格など買い物カゴ部分が説明文より上にきたことで、説明文があることお客さんがに気づかないことが考えられるので、「商品の詳しい説明はページ下部にあります」などと出すためのものだったのですが。

CSSだけで済むように疑似要素でやってたんですけど、疑似要素だとリンクがつけられなかったんですよね。

で、どうせならタップしたら商品説明まで飛ぶようページ内リンクにしておこうと。

1. 実装イメージ
2. 実装手順
3. まとめ：楽天スマホ商品ページにページ内リンク付き案内文を追加

実装イメージ

実装イメージはこんな感じ。

タップすると商品説明文の部分までジャンプするようページ内リンクを組んであります。

テキスト部分だけでなく、枠のなかどこをタップしてもOK。

ちなみに、例によって実装例の画像もサンワサプライさんが実際に実装したのではなく、私が勝手に仮想的に組み込んでみただけ。

なぜサンワサプライさんかって？好きだからだよみなまで言わすな恥ずかしい。

ちなみに画像に映ってる商品は下記のもの。便利そう。

[商品価格に関しましては、リンクが作成された時点と現時点で情報が変更されている場合がございます。]

テレビ・ディスプレイ上部用収納台（モニター用小物置・収納トレー・リモコン設置・幅…
価格：2980円（税込、送料無料)(2019/6/26時点)

楽天で購入

なお、ページ内リンクなしでテキストを出すだけなら以前の記事のものを使った方が実装もカスタムも簡単です。別にページ内リンク不要で案内文だけいい、って方は下記リンクよりどうぞ。

スマホ商品ページ画像下に案内文を追加する【楽天カスタマイズ】

今回は楽天スマホ商品ページの画像下に案内文を追加するカスタマイズです。「商品詳細は下の方でご覧 ...

https://ec-tsushin.com/rsp_upon_productname/

実装手順

画像付きでも解説しますが、先に大雑把な手順を書き出すと下記のイメージ。

コピペでJavascriptファイルを作成
同じくコピペでCSSファイルを作成
両ファイルをGOLD上にアップロード
楽天RMS上に読み込みコードをコピペ

これだけ。コピペするコードなどは下記をご覧ください。

コピペでJavaScriptファイルを作成

// JavaScript Document
// ver002
var linkText = '商品詳細はページ後半にございます。<br>こちらをタップで移動します。'; // 表示テキスト
var appendHtml = '<div id="appendhtml">'+ linkText +'</div>';

setTimeout(function(){
  var j = jQuery.noConflict();
  j( '#itemName' ).append( appendHtml );
	
  document.getElementById('appendhtml').onclick = function() {
    var itemDescription = document.getElementById('itemDescription');
    var anchorPosition = itemDescription.getBoundingClientRect().top;
    scrollTo({
      top: anchorPosition + window.pageYOffset,
      behavior: "smooth"});
};	
  },800);

上記JavaScriptコードををコピペしてJSファイルを作ってください。

特にこだわりがなければsp_gidelink.jsってファイル名にしてsp_gidelinkってフォルダを作って入れておいてください。

「商品詳細はページ後半にございます。<br>こちらをタップで移動します。」の部分が実際に表示されるテキストです。好きなように書き換えてOK。

また、var idHush = で指定しているid行を書き換えることでページ内リンク先を変えられます。今回のケースでは動画の部分にページ内ジャンプします。動画も飛ばしたい、って方はスマホ商品説明文のなかに別のIDでも作ってうまくやってください。

コピペでCSSファイルを作成

続いて下記のCSSコードをコピペして.cssファイルとして保存してください。

特にこだわりなければ、先ほどのJavascriptファイル同様ファイル名はsp_gidelink.cssとして、sp_gidelinkフォルダに入れてください。

@charset "utf-8";
/* CSS Document */
/* ver002 */

#appendhtml {
  box-sizing: border-box;
  user-select:none;
  white-space: pre;
  margin-right: auto;
  margin-left: auto;
  text-align: center; /* 文字中央寄せ */
  width: 90%; /* 全体横幅 */
  padding: 16px; /* 内部四方余白 */
  margin-top: 24px; /* 上部余白 */
  margin-bottom: 24px; /* 下部余白 */
  border-radius: 12px; /* 角丸 */
  background: #bf0000; /* 背景色 */
  line-height: 1.6em; /* 行間指定 */
  font-size: 14px; /* 文字サイズ */
  font-weight: bold; /* 文字太さ */
  color: #fff; /* 文字色 */
}

現状では角丸付きの楽天レッドなボックスに太字白文字にしてあります。コメントアウト欄を参考にカスタマイズしてください。

完了したらsp_gidelinkフォルダごとsp_gidelink.jsファイルとsp_gidelink.cssファイルをGOLDのルート直下にアップロード。

RMS上に読み込みコードをコピペ

商品ページ共通説明文にJS＆CSSファイルの読み込みコードをコピペする。

続いて、上記楽天GOLDにアップロードしたファイルをスマホ商品ページで読み込むための設定をします。

下記の手順でスマホ商品ページの設定画面へ移動してください。

RMSにログイン
店舗設定
2 デザイン設定
2 スマートフォンデザイン設定内の商品ページ共通パーツ設定

「商品ページ共通説明文」欄に下記コードをコピペして入力してください。

<!--スマホ商品ページ案内文・ページ内リンク付き-->
<link rel="stylesheet" ="" href="https://www.rakuten.ne.jp/gold/【ショップURL】/sp_gidelink/sp_gidelink.css">
<script src="https://www.rakuten.ne.jp/gold/【ショップURL】/sp_gidelink/sp_gidelink.js" type="text/javascript" charset="UTF-8" ="" ></script 　　　　　　　　　　　　　　　　　　>
<!--/スマホ商品ページ案内文・ページ内リンク付き-->

コピペの際、二箇所の【ショップURL】をご自身のショップものURLに変更してください。

あと、アップロードするフォルダやファイル名を変えている場合は適宜URLを書き換えてください。