[RUBY] [Rails] Afficher les catégories à plusieurs niveaux dans la liste des rebuts

Aperçu

Affichez la catégorie à plusieurs niveaux créée par l'ascendance dans la liste de fil d'Ariane. J'ai utilisé une gemme appelée gretel pour créer la liste des miettes de pain. Cette fois, nous allons créer une liste de pain de mie qui affiche les catégories de produits telles qu'elles apparaissent sur le site EC.

supposition

• La table de catégories est créée en utilisant l'ascendance.
• Une page de liste de catégories et une page de liste de produits par catégorie (pages liées à chaque morceau de pain) sont créées.

La structure de la liste des morceaux de pain expliquée cette fois est la suivante. Première page> Liste des catégories> Catégorie parente> Catégorie enfant> Catégorie petit-enfant

Article de référence

Nous utilisons une gemme appelée ascendance pour créer des catégories à plusieurs niveaux. Les articles suivants seront utiles pour la méthode d'introduction. https://qiita.com/Sotq_17/items/120256209993fb05ebac https://qiita.com/pdm21/items/fe0055b3190af790f1c0

Aussi, concernant la création de la liste des produits page par catégorie, je voudrais que vous vous référiez à mes articles passés. https://qiita.com/Iwa_tech/items/8c396723bd9ea8e9894f

la mise en oeuvre

introduction

installation de gemmes

Tout d'abord, installez gretel.

# Gemfile
gem 'gretel'

#Terminal
$ bundle install

Génération du fichier de configuration

Tapez ce qui suit dans le terminal et exécutez.

$ rails generate gretel:install

Ensuite, un fichier appelé breadcrumbs.rb est automatiquement généré sous le répertoire config. Dans ce fichier, vous décrirez les paramètres pour lesquels les morceaux de pain à lier vers quelle 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`).

Créer des miettes de pain sur la page de la liste des catégories

Tout d'abord, faites-le à partir des restes de pain de la première page> partie de la liste des catégories qui peut être facilement implémentée.

Définition de la chapelure

Dans le fichier breadcrumbs.rb, décrivez la destination du lien des miettes de pain. Spécifiez les caractères à afficher sur le lien et le chemin de la destination du lien de la même manière que la méthode link_to.

config/breadcrumbs.rb

crumb :root do
  link "haut de page", root_path
end

crumb :category_index do
  link "Liste des catégories", categories_path
end

Installé en vue

Création de modèle partiel

Créez un modèle partiel pour la liste de fil d'Ariane afin qu'il puisse être appelé à partir de plusieurs pages. Vous pouvez l'écrire dans layouts / application.html, mais cette fois j'ai voulu séparer l'affichage pour chaque page, j'ai donc décidé d'utiliser un modèle partiel. L'attribut separator permet de définir l'affichage du séparateur entre les miettes de pain.

_breadcrumbs.html.haml

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

Appel de modèle partiel

Dans la vue de la page de la liste des catégories, appelez la liste des morceaux de pain. La description sur la première ligne ci-dessous spécifie les morceaux de pain à appeler.

app/views/categories/index.html.haml

- breadcrumb :category_index
= render "breadcrumbs"

À présent, vous devriez avoir été en mesure d'afficher la liste des morceaux de pain sur la page de la liste des catégories. À propos, puisque la classe appelée current est automatiquement attribuée aux restes de pain de la page affichée, vous pouvez également utiliser CSS pour mettre en valeur le nom de la page affichée comme indiqué ci-dessous.

Créer des miettes de pain sur la page de détail de la catégorie

Ensuite, affichez la liste des miettes de pain sur la page de la liste des produits par catégorie. Comme indiqué ci-dessous, nous visons à ajouter des morceaux de pain de chaque catégorie sous les morceaux de pain que nous avons fabriqués précédemment.

Première page> Liste des catégories> Catégorie parente> Catégorie enfant> Catégorie petit-enfant

Définition de la chapelure

Définissez des miettes de pain pour les trois catégories de parent, enfant et petit-enfant. faire dans la définition de miettes|Nom de variable|Cela vous permettra d'utiliser des variables dans les miettes.

config/breadcrumbs.rb

#Chapelure de catégorie parentale
crumb :parent_category do |category|
  category = Category.find(params[:id]).root
  link "#{category.name}", category_path(category)
  parent :category_index
end
# -----------------------------------------------------------------
#Chapelure catégorie enfant
crumb :child_category do |category|
  category = Category.find(params[:id])
  #Lorsque la page affichée est une page de liste de catégories enfants
  if category.has_children?
    link "#{category.name}", category_path(category)
    parent :parent_category

  #Lorsque la page affichée est une page de liste de catégories de petits-enfants
  else
    link "#{category.parent.name}", category_path(category.parent)
    parent :parent_category
  end
end
# -----------------------------------------------------------------
#Chapelure catégorie petit-enfant
crumb :grandchild_category do |category|
  category = Category.find(params[:id])
  link "#{category.name}", category_path(category)
  parent :child_category
end

Après le parent:, spécifiez le nom de miettes que vous souhaitez définir comme parent des miettes. (Si vous ne spécifiez pas le parent comme dans la page de liste des catégories, les restes de pain racine seront le parent)

Seules les miettes de pain de la catégorie enfant ont besoin d'une certaine ingéniosité. Le traitement est modifié selon deux conditions, l'une est lorsque les bouts de pain de la catégorie enfant sont appelés depuis la page de la catégorie petit-enfant et l'autre est lorsqu'ils sont appelés depuis la page de la catégorie enfant.

Installé en vue

Enfin, appelez les miettes de pain en vue et vous avez terminé. Dans la description côté contrôleur, la catégorie à afficher en détail est ici affectée à @category. Les miettes de pain à afficher sont divisées en fonction de la hiérarchie @category. Si le morceau de pain appelant est défini sur un parent, le morceau de pain du parent sera également appelé.

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"

Avec ce qui précède, la liste des miettes de pain peut être affichée sur la page de détail de la catégorie. Assurez-vous que la hiérarchie du fil d'Ariane et le nom de la catégorie changent de manière appropriée en fonction de la catégorie que vous sélectionnez.

finalement

Cette fois, j'ai expliqué comment afficher la catégorie à plusieurs niveaux créée par l'ascendance dans la liste de fil d'Ariane. Merci de visiter notre site.

C'est un article que j'ai utilisé comme référence lors de la création de la fonction de chapelure. https://qiita.com/you8/items/d2d37a745060b79c112f https://qiita.com/Azure0701/items/16de34a0010eb7f05d89