How to implement the breadcrumb function using gretel

スクリーンショット 2020-10-14 12.49.19.png

What: What is the breadcrumb function?

The breadcrumb feature is this display you often see at the top of web pages! !! スクリーンショット 2020-10-14 12.49.19.png

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

How to implement the breadcrumb function using gretel
[Swift] How to implement the countdown function
[Swift] How to implement the Twitter login function using Firebase UI ①
[Swift] How to implement the Twitter login function using Firebase UI ②
[Swift] How to implement the LINE login function
[swift5] How to implement the Twitter share function
[For beginners] How to implement the delete function
[Swift] How to implement the fade-in / out function
Rails learning How to implement search function using ActiveModel
How to add the delete function
[Java] How to use the hasNext function
How to implement TextInputLayout with validation function
[Processing × Java] How to use the function
[Swift5] How to implement animation using "lottie-ios"
How to implement image posting using rails
[Behavior confirmed in December 2020] How to implement the alert display function
Implement the star five function using the for statement
Implement the product category function using ancestry ① (Preparation)
Flow to implement image posting function using ActiveStorage
How to implement the email authentication function at the time of user registration
How to implement image posting function using Active Storage in Ruby on Rails
Continued ・ Flow to implement image posting function using ActiveStorage
Try to implement tagging function using rails and js
How to add ActionText function
Implement category function using ancestory
[Rails] How to implement scraping
[Java] How to implement multithreading
How to authorize using graphql-ruby
How to easily implement in-app purchase using itemstore <Implementation: Android>
[Swift] I tried to implement the function of the vending machine
How to install JDK 8 on Windows without using the installer
[Rails] I tried to implement "Like function" using rails and js
How to play MIDI files using the Java Sound API
How to use the link_to method
How to use the include? method
How to use the form_with method
How to find the average angle
How to use the wrapper class
Try to implement iOS14 Widget function
[Java] Try to implement using generics
[Rails] How to implement star rating
How to build CloudStack using Docker
How to create a jar file or war file using the jar command
How to create a registration / update function where the table crosses
I tried to implement the image preview function with Rails / jQuery
How to get the contents of Map using for statement Memorandum
[Rails] How to put a crown mark on the ranking function
How to solve the unknown error when using slf4j in Java
How to implement UI automated test using image comparison in Selenium
How to use MinIO with the same function as S3 Use docker-compose
[Rails 5] How to display the password change screen when using devise
A story about using the CoreImage framework to erase stains with Swift and implement a blur erase function
How to execute a contract using web3j
How to place geckodriver (Selenium WebDriver) on the path using Maven command
How to sort a List using Comparator
How to implement search functionality in Rails
How to implement date calculation in Java
How to implement Kalman filter in Java
How to return a value from Model to Controller using the [Swift5] protocol
[Java] How to use the File class
How to delete the wrong migration file