・ I made a flea market app by team development of a certain programming school. -Since it was very difficult to implement the product category function, I will write it as a memorandum. ・ Since I have a lot to do, I will write it in multiple times. ・ I'm very confident. So, I hope it will be helpful for beginners in the same situation, so I will write it as an article. ・ I would appreciate it if you could point out any mistakes.
-Select the parent category to display the child category, select the child category to display the grandchild category, and select the grandchild category for size-related items to display the size. https://gyazo.com/97e3bdfac114bcced73aa3840f02801c
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 in the Ruby on Rails ActiveRecord model as a tree structure (hierarchy).
This time we will use ancestry to implement a multi-level category.
・ You can select up to the grandchild category ・ Size can be selected ・ You can list products ← This is important
rails new in the terminal.
After that, if the file name is not displayed in the code block, it is an 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' is for implementing Ajax in jQuery,
gem'ancestry' is to implement categorical 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 described in erb to haml notation (enter y when prompted for command input on the way, ENTER), It is a flow.
$ rails g model item
There is a model file called ʻitem.rb
in the models directory There is a migration file called20200815022617_create_items.rb` in the db / migrate directory.
Each was created. (The number in the file name of the migration file is the generation date and time)
Modify the migration file.
class CreateItems < ActiveRecord::Migration[6.0] def change create_table :items do |t| #This time, we will create a string type name column, so write as follows. t.string :name, null: false t.timestamps end end end
null: false is added, product data cannot be registered unless the name column is entered (not null constraint).
If you simply use
t.string: name, you can register product data even if the name column is empty.
Now let's create an items table.
$ rails db:migrate
You now have an items table. Looking at the contents of the table with sequel pro ・ Id column ・ Name column -Created_at column -Updated_at column There should be.
This time, we will implement the category function on the product listing screen.
So you need a screen of
localhost: 3000 / items / new.
Creating a controller I also create a view of the new action.
$ rails g controller items new
ʻApp / controllers / items_controller.rb
and a controller ʻApp / views / new.html.haml is a view file
Each was created.
Rails.application.routes.draw do # get 'items/new' resources :items end
This time, it's a mini app, so for the time being, I'll do the routing like this. Originally, use the only option.
Now when you start the server you should be able to access
localhost: 3000 / items / new.
I was able to reach the product listing screen for the time being.
① is up to here.
Next time, we will start by creating a
Finally, the summary so far.
-Create an application with
・ Install gems and create databases
・ Create a product listing screen
that's all. It will continue to the next. We will make corrections and additions as needed.
Official documentation https://github.com/stefankroes/ancestry [Translation] Gem Ancestry Official Document https://qiita.com/Rubyist_SOTA/items/49383aa7f60c42141871 [Rails] gem ancestry category function implementation https://qiita.com/k_suke_ja/items/aee192b5174402b6e8ca