Introduction

・ 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.

This is the completed form

-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

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 in the Ruby on Rails ActiveRecord model as a tree structure (hierarchy).

This time we will use ancestry to implement a multi-level category.

Definition of completion

・ You can select up to the grandchild category ・ Size can be selected ・ You can list products ← This is important

This time I will make a mini app

First, do 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.

`Gemfile`


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.

`config/database.yml`


# 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.

Create an items table (so that items can be listed)

$ rails g model item

There is a model file called ʻitem.rbin 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.

`20200815022617_create_items.rb`


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

If 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.

Create an items controller (also create a view)

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.

`routes.rb`


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 categories table.

Summary

Finally, the summary so far.

-Create an application with rails new ・ 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.

reference

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

Implement the product category function using ancestry ① (Preparation)