・I made a flea market app by team development of a certain programming school. ・It was very difficult to implement the product category function, so I will write it as a memorandum. ・Since there are many things to do, write it in multiple times. ・I’m really confident Therefore, I hope that it will be helpful for beginners in similar situations, and I will write an article. ・We would appreciate if you could point out any mistakes.
Complete form is this
- If you select the parent category, the child category will be displayed, if you select the child category, the grandchild category will be displayed, and if the size is related, if you select the grandchild category, the size will be displayed. https://gyazo.com/97e3bdfac114bcced73aa3840f02801c
By the way, what is ancestry
Official documentation https://github.com/stefankroes/ancestry [Translation] Gem Ancestry Official Document https://qiita.com/Rubyist_SOTA/items/49383aa7f60c42141871
Ancestry is a gem that allows you to organize records of ActiveRecord model of Ruby on Rails as a tree structure (hierarchy).
We will use ancestry this time to implement a multi-level category.
Definition of completion
・You can select up to grandchildren category ・Size can be selected ・Items can be displayed ← This is important
This time we will make a mini app
rails new in the terminal.
After that, if the file name is not displayed in the code block, it is the operation in the terminal.
$ rails _6.0.0_ new ancestry_app -d mysql $ cd ancestry_app/
Install some gems. Described at the bottom.
gem'haml-rails' gem'jquery-rails' gem'ancestry'
gem'haml-rails' uses haml notation,
gem'jquery-rails' uses jQuery to implement Ajax,
`gem’ancestry’ is to implement category functionality,
You need each.
Change the data storage format.
# encoding: utf8mb4 encoding: utf8
Next, enter the following commands in order in the terminal.
$ bundle install $ rails db:create $ rails haml:erb2haml
enable gem, Create a database, Convert the file written in erb to haml notation (enter y when prompted for a command on the way, enter y), It is the flow.
Create the items table (so that the item can be listed)
$ rails g model item
A model file called
item.rb in the models directory
A migration file called
20200815022617_create_items.rb in the db/migrate directory,
Each created. (The number in the file name of the migration file is the date and time of generation)
Modify the migration file.
class CreateItems <ActiveRecord::Migration[6.0] def change create_table :items do |t| # This time, create a string type name column, so describe as follows. t.string :name, null: false t.timestamps end end end
If you add
null: false, product data cannot be registered without inputting the name column (not null constraint).
If you just use
t.string :name, you can register product data even if the name column is empty.
Now create the items table.
$ rails db:migrate
You now have an items table. If you look at the contents of the table with sequelpro ・Id column ・Name column ・Created_at column ・Updated_at column There should be
items Make controller (make view)
This time, we will implement the category function on the product listing screen.
So you need the screen of
While creating the controller, we also create a new action view.
$ rails g controller items new
The view file called
Rails.application.routes.draw do # get'items/new' resources :items end
This time, it’s a mini app, so let’s do the routing for the time being. Originally, use only option.
Now when you start the server you should be able to access
For the time being, I was able to reach the product listing screen.
① is up to here.
Next time, we will start by creating the
Finally, the summary so far.
・Create application with
・Install gem and create database
・Create a product listing screen
that’s all. It will continue to the next. We will revise and add to it as needed.
Official documentation https://github.com/stefankroes/ancestry [Translation] Gem Ancestry Official Document https://qiita.com/Rubyist_SOTA/items/49383aa7f60c42141871 [Rails] Implementation of gem ancestry category function https://qiita.com/k_suke_ja/items/aee192b5174402b6e8ca