【楽天市場】商品ページにモーダルウィンドウでお知らせやバナーを全画面に表示しよう！

こんにちは、Ryohei（@ityryohei）です！

本記事では、楽天市場のRMSのデザイン設定にて、商品ページにモーダルウィンドウでお知らせやバナーを全画面に表示する方法をご紹介しています。

楽天市場で商品ページに全画面でバナーやクーポンを表示したいな。良い方法ないかな？

上記の疑問にお答えします。

では、解説していきます。

楽天市場のデザイン設定はJavaScriptが使えない

楽天市場のデザイン設定と記載しておりますが、具体的には下記のヘッダー・フッター・レフトナビのテンプレート設定を指しています。

RMSトップ > 店舗設定 > 4 デザイン設定 > ヘッダー・フッターレフトナビのテンプレート設定

上記では、楽天市場の自分の店舗に表示する共通パーツを設定することができ、ヘッダーやフッター、レフトナビをある程度好きなデザインに変更することができます。

デザインをある程度好きに変更することができるため、モーダルウィンドウも簡単に実装できる気がしてしまいますが、実際には一般的なモーダルウィンドウを実装することはできません。なぜなら任意のJavaScriptを読み込んだり直書きすることができないため、モーダルの開閉に使用するイベントの設定ができないからです。そのため楽天市場の商品ページ等でモーダルウィンドウを使って全画面表示を実現したい場合はHTMLとCSSで組み込む必要があります

HTMLとCSSでモーダルウィンドウを作成する

本記事でご紹介するのは、ページを表示した際にモーダルウィンドウを表示状態にして置き、コンテンツ以外の部分をクリックまたタップすると、モーダルウィンドウが閉じるといった内容です。

HTML

<input type="checkbox" name="modal" id="modal-window">
<label class="modal" for="modal-window" >
    <div class="modal__bg"></div>
    <div class="modal__content">
        <a href="#" target="_blank">
            <img src="https://picsum.photos/300/300" width="300" height="300" alt="">
        </a>
    </div>
    <div class="modal__close">×</div>
</label>

SCSS（CSS）

.modal {
  position: fixed;
  top: 0;
  left:0;
  z-index: 1;
  width: 100%;
  height: 100vh;

  &__bg {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: inherit;
      height: inherit;
      background-color: rgba(0, 0, 0, .5);
      cursor: pointer;
  }
    
  &__close {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 2;
      font-size: 40px;
      color: #ffffff;
      cursor: pointer;
  }

  &__content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-wrap: wrap;
      width: 96%;
      height: auto;
      max-width: 600px;
      box-sizing: border-box;
  }
}

#modal-window {
  position: fixed;
  left: 0;
  top: 0;
  z-index: -1;
  visibility: hidden;
}

#modal-window:checked + .modal {
  display: none;
}

実行結果

See the Pen 8065 by ryohei (@intotheprogram) on CodePen.

後は上記のHTML（CSSは別のファイルで管理）とアップロードしたCSSファイルをlinkタグで読み込み、デザイン設定のヘッダー・フッター・レフトナビのテンプレート設定から管理しやすいフィールドに下記を貼付します。

<link rel="stylesheet" type="text/css" href="https://www.rakuten.ne.jp/gold/xxx/assets/css/modal.css" media="all">
<input type="checkbox" name="modal" id="modal-window">
<label class="modal" for="modal-window" >
    <div class="modal__bg"></div>
    <div class="modal__content">
        <a href="#" target="_blank">
            <img src="https://picsum.photos/300/300" width="300" height="300" alt="">
        </a>
    </div>
    <div class="modal__close">×</div>
</label>

これで楽天市場の商品ページにモーダルウィンドウを表示することができるようになりました。

最後に

楽天市場のデザインのカスタマイズはある程度仕様を把握する必要がありますが、仕様がわかっていればお客様の要望に対してYES／NOの判断ができるようになります。RMSからある程度触ってみる必要がありますが、楽天市場は今後も長い間、利用されるモールだと思いますので、時間を作って勉強するのも良いかもしれません。

以上、楽天市場の商品ページにモーダルウィンドウでお知らせやバナーを全画面に表示する方法のご紹介でした！