はじめに
商品ページを作成中、詳細ページが長くなったりスマホ表示にしたとき「この商品を予約するボタン」にスクロールして戻るのが大変になってしまいました。
そこで、一般的な商品ページなどでよく見る、「予約へボタン」を画面右下に固定して設置することにしました。
実装自体は簡単なのですが、ちょっと忘れそうだったので記録しておきます。
実装内容
使うのはビューと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
.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での問い合わせボタンが出てきたりするページもあったり、ページ内リンクの仕様にも個性があるので、そういった面に注目しながら既存のサイトを巡るのも面白いです。