How to implement the breadcrumb function using gretel
What: What is the breadcrumb function?
The breadcrumb feature is this display you often see at the top of web pages! !!
Why: Why implement the breadcrumb feature
The breadcrumb feature is a feature that makes it easier for users to visually see which page they are currently on.
How: How to implement
step 1: Introduction of gemfile
Now add'gem gretel' to your gemfile and run bundle install.
gem 'gretel'
$ bundle install
step 2: Create configuration file
After the bundle install is complete, run rails generate gretel: install. This will generate breadcrumbs.rb in the config directory. This will be the configuration file.
$ rails generate gretel:install
step 3: Description of configuration file
Describe it in the generated breadcrumbs.rb.
This time, I would like to use item variables to acquire and display the parent, child, and grandchild elements of the hierarchical category. : warning: One thing to note here is that in addition to passing the @item variable as an argument in the view, if you do not add the variable item to the parent of the crumb after the child element, an error will occur! (I don't know the cause, I would appreciate it if you could tell me!)
crumb :root do
link 'FreeMa', root_path
end
crumb :parent_category do |item|
link item.category.parent.parent.name, root_path
parent :root
end
crumb :child_category do |item|
link item.category.parent.name, root_path
parent :parent_category, item
end
crumb :grandchild_category do |item|
link item.category.name, root_path
parent :child_category, item
end
crumb :current_product do |item|
link item.name
parent :grandchild_category, item
end
step 4: View description
- breadcrumb :parent_category, @item
- breadcrumb :child_category, @item, class: 'content'
- breadcrumb :grandchild_category, @item, class: 'content'
- breadcrumb :current_product, @item, class: 'current'
= breadcrumbs separator: " › "
step 5: Adjusting the view
If you adjust the appearance with css, ...
Complete! !!
I've omitted a lot of explanation Official document has a detailed explanation, so please read it! [Reference article] Implementation of breadcrumb trail [Rails] Create a breadcrumb trail using gretel The most obvious breadcrumb implementation (gem'gretel')
Recommended Posts