[Rails] Show multi-level categories in the breadcrumb trail

Overview

Display the multi-level category created by ancestry in the breadcrumb trail. I used a gem called gretel to create the breadcrumb trail. This time, we will create a breadcrumb trail that displays the product categories as seen on the EC site.

Premise

--Category table is created using ancestry. --Category list page and product list page by category (page linked to each breadcrumb) are created.

The structure of the breadcrumb trail explained this time is as follows. Top page> Category list> Parent category> Child category> Grandchild category

Reference article

We use a gem called ancestry to create multi-level categories. The following articles will be helpful for the introduction method. https://qiita.com/Sotq_17/items/120256209993fb05ebac https://qiita.com/pdm21/items/fe0055b3190af790f1c0

Also, regarding the creation of the product list page by category, I would like you to refer to my past posts. https://qiita.com/Iwa_tech/items/8c396723bd9ea8e9894f

Implementation

Introduction

gem installation

First, install gretel.

# Gemfile
gem 'gretel'

#Terminal
$ bundle install

Generation of configuration file

Type the following into the terminal and execute.

$ rails generate gretel:install

Then, a file called breadcrumbs.rb is automatically generated under the config directory. In this file, you will describe the settings for which breadcrumbs are linked to which page.

config/breadcrumbs.rb

crumb :root do
  link "Home", root_path
end

# crumb :projects do
#   link "Projects", projects_path
# end

# crumb :project do |project|
#   link project.name, project_path(project)
#   parent :projects
# end

# crumb :project_issues do |project|
#   link "Issues", project_issues_path(project)
#   parent :project, project
# end

# crumb :issue do |issue|
#   link issue.title, issue_path(issue)
#   parent :project_issues, issue.project
# end

# If you want to split your breadcrumbs configuration over multiple files, you
# can create a folder named `config/breadcrumbs` and put your configuration
# files there. All *.rb files (e.g. `frontend.rb` or `products.rb`) in that
# folder are loaded and reloaded automatically when you change them, just like
# this file (`config/breadcrumbs.rb`).

Creating breadcrumbs on the category list page

First of all, make it from the breadcrumbs on the top page> category list, which can be easily implemented.

Breadcrumb definition

In the breadcrumbs.rb file, describe the link destination of the breadcrumbs. Specify the characters to be displayed on the link and the path of the link destination in the same way as the link_to method.

config/breadcrumbs.rb

crumb :root do
  link "top page", root_path
end

crumb :category_index do
  link "Category list", categories_path
end

Installed in view

Partial template creation

Create a partial breadcrumb template that can be called from multiple pages. You can write it in layouts / application.html, but this time I wanted to separate the display for each page, so I decided to use a partial template. The separator attribute allows you to define the display of the breadcrumb separator.

_breadcrumbs.html.haml

.breadcrumbs
  = breadcrumbs separator: " › ", class: "breadcrumbs-list"

Partial template call

In the view of the category list page, call the breadcrumb trail. The breadcrumbs to be called are specified in the description on the first line below.

app/views/categories/index.html.haml

- breadcrumb :category_index
= render "breadcrumbs"

At this point, you should have been able to display the breadcrumb trail on the category list page. By the way, since the breadcrumbs of the displayed page are automatically given a class called current, you can also use CSS to emphasize the displayed page name as shown below.

Creating breadcrumbs on the category details page

Next, display the breadcrumb trail on the product list page by category. As shown below, we aim to add breadcrumbs of each category under the breadcrumbs we made earlier.

Top page> Category list> Parent category> Child category> Grandchild category

Breadcrumb definition

Set breadcrumbs for the three categories of parent, child, and grandchild. do in the definition part of crumb|Variable name|By doing so, you can use variables in breadcrumbs.

config/breadcrumbs.rb

#Bread crumbs in the parent category
crumb :parent_category do |category|
  category = Category.find(params[:id]).root
  link "#{category.name}", category_path(category)
  parent :category_index
end
# -----------------------------------------------------------------
#Bread crumbs in the child category
crumb :child_category do |category|
  category = Category.find(params[:id])
  #When the displayed page is a list page of child categories
  if category.has_children?
    link "#{category.name}", category_path(category)
    parent :parent_category

  #When the displayed page is a list page of grandchild categories
  else
    link "#{category.parent.name}", category_path(category.parent)
    parent :parent_category
  end
end
# -----------------------------------------------------------------
#Bread crumbs in the grandchild category
crumb :grandchild_category do |category|
  category = Category.find(params[:id])
  link "#{category.name}", category_path(category)
  parent :child_category
end

After parent :, specify the crumb name you want to set as the parent of the breadcrumb. (If you do not specify parent as in the category list page, root breadcrumbs will be the parent)

Only the breadcrumbs in the child category need some ingenuity. The processing is changed according to two conditions, when the breadcrumbs of the child category are called from the page of the grandchild category and when they are called from the page of the child category.

Installed in view

Finally, call the breadcrumbs in view and you're done. In the description on the controller side, the category to be displayed in detail is assigned to @category here. Bread crumbs to be displayed are divided according to which hierarchy @category is. If the called breadcrumb has a parent, it will also call the parent's breadcrumb.

app/views/categories/show.html.haml

- if @category.root?
  - breadcrumb :parent_category
- elsif @category.has_children?
  - breadcrumb :child_category
- else
  - breadcrumb :grandchild_category
= render "breadcrumbs"

With the above, the breadcrumb trail can be displayed on the category details page. Make sure that the breadcrumb hierarchy and category names change appropriately depending on the category you select.

Finally

This time, I explained how to display the multi-level category created by ancestry in the breadcrumb trail. Thank you for visiting our website.

This is an article that I used as a reference when creating the breadcrumb function. https://qiita.com/you8/items/d2d37a745060b79c112f https://qiita.com/Azure0701/items/16de34a0010eb7f05d89