breadcrumbs_on_railsを使ったパンくず実装

パンくず実装した際の備忘録として本記事は記載します。

環境構成について
rails 5.2.4
haml

今回つかったgemについて
breadcrumbs_on_rails

準備

gemのインストール

gem 'breadcrumbs_on_rails'

そしてターミナル上で以下のコマンドを打ち込みます。

bundle install

これで準備完了。
すぐにでもパンくず実装できます。

コントローラー側の入力

ここでは仮に、cardsというコントローラーで書くとする。（内容はクレジットカード登録画面）
コントローラーの名称はなんでも良い。あなたの好きなコントローラーで入力してほしい。
ちなみにmypageというディレクトリの以下にクレジットカード登録画面は置いております。

イメージとしては、
ホーム　＞　マイページ　＞　支払い方法　
というふうに表示するようにやってみます。

まずは、ものは試しに以下のコマンドを入力してみよう。

class CardsController < ApplicationController
  add_breadcrumb "ホーム" ,:root 

  def index
    add_breadcrumb 'マイページ', mypage_path
    add_breadcrumb '支払い方法'
  end

  def show
    add_breadcrumb 'マイページ', mypage_path
    add_breadcrumb '支払い方法' cards_index_path
    add_breadcrumb 'クレジット詳細'
  end
end

入力できたかな？
2行目になにやら見慣れぬメソッドがございますなぁ。
これは、breadcrumbs_on_railsのメソッドです。
入力の式としては、

add_breadcrumb　<第一引数> ,<第二引数>

で表現できてます。

第一引数には、表示したい文字、第二引数には、パスが入っております。
第二引数は、関数内と関数外での記述は若干異なるので注意しましょうね。

関数外であれば、:ルート名
関数内であれば、ルート名_path
となります。

例としてroot_pathを登録したい場合
関数外 :root
関数内 root_path
となります。

関数外は ":" がいるんですなぁ。

また、イメージしたパンくずを表現したい場合、indexが該当します。
showは別のパンくずとなるんですなぁ。

順番としては、上から順番にパンくずは読み出されます。
今回は一番最初のadd_breadcrumbは、ホームなため、ホームが表示される。
そこからは、関数毎に分岐されるんですね。
ホームのみ関数共通になっているというイメージです。

cardsコントローラーを読み込むと以下のようになります。
indexは　ホーム　＞　マイページ　＞　支払い方法　
showは　ホーム　＞　マイページ　＞　支払い方法　＞クレジット詳細

しかしまだこの段階では、表示されない。

vew側でメソッドが必要なのです。
今回はhamlで書いてます。

= render_breadcrumbs separator: ' > '

そうすると以下の画面のようにこうなる。
[indexの場合]

[showの場合]

参考
https://pg-happy.jp/rails-pankuzu-list.html