はじめに

商品ページを作成中、詳細ページが長くなったりスマホ表示にしたとき「この商品を予約するボタン」にスクロールして戻るのが大変になってしまいました。

そこで、一般的な商品ページなどでよく見る、「予約へボタン」を画面右下に固定して設置することにしました。
実装自体は簡単なのですが、ちょっと忘れそうだったので記録しておきます。

実装内容

使うのはビューとCSSだけです。

ビュー

商品詳細ページ

<!--商品情報-->
  <div id="order" class="wide-item col-5 p-2 mt-3">
    <h2 class="h5 fw-bold"><%= @item.name %> <span class="text-black-50 h6">[ <%= @item.id %> ]</span></h2>
    <p class="py-3">
      価格: <span class="h3"><%= @item.price.to_s(:delimited, delimiter: ',') %></span> 円
     </p>
:
:
:
  <div>

  <!--予約に進むボタン-->
  <%= link_to '#order' do %>
    <div class="back-order px-3 py-1 rounded-pill border border-white border-2">
      <% if shop_signed_in? || admin_signed_in? %>
        <div class="d-flex justify-content-center fs-2 pt-1"><i class="fa-solid fa-file-pen"></i></div>
        <small>商品編集へ</small>
      <% else %>
        <div class="d-flex justify-content-center fs-2 pt-1"><i class="fa-solid fa-calendar-check"></i></div>
        <small>予約へ</small>
      <% end %>
    </div>
  <% end %>

※このサイトの場合は、ショップ管理者としてログインすると「予約ボタン」ではなく「商品編集ボタン」が表示される仕組みになっていたので、管理者がログインした場合の設定も記述してあります。

仕組みは、
<div id="order"></div> 「予約へボタン」のリンク先をidで指定して、
<%= link_to '#order' do %><% end %> 「予約へボタン」を押すと画面がidの位置に移動します。

最初、あまり深く考えずに<a href ='#order'>を使ってリンクを設定していたのですが、Railsの記述に合わせた方が良いかも…？と思い、<%= link_to '#order' do %>に書き直しました。

CSS

css

.back-order {
    position: fixed;
    right: 15px;
    bottom: 15px;
    background-color: #ACCBCF;
    opacity: 0.8;
    small {
        font-size: 13px;
    }
}

position: fixed;
その要素はビューポート（画面の表示領域）内の固定された位置に配置されます。
スクロールしても画面上の同じ位置に留まります。
これを利用して、
right: 15px;で画面の右からの位置
bottom: 15px;で画面の下からの位置
を設定して画面の右下に固定しています。

なんとなく小さい文字には<small>タグを使いがちなのですが、ここで使うのが適切なのかはよく分かっていません…。

おわりに

ちょっとしたことですが、これがあるだけで圧倒的に使いやすさが変わります。

スマホ画面だと電話やLINEでの問い合わせボタンが出てきたりするページもあったり、ページ内リンクの仕様にも個性があるので、そういった面に注目しながら既存のサイトを巡るのも面白いです。