[Ruby] Implement the product category function using ancestry ① (Preparation)

3 minute read

Introduction

・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

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

Gemfile


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.

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

20200815022617_create_items.rb


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 localhost:3000/items/new. While creating the controller, we also create a new action view.

$ rails g controller items new

Controller called app/controllers/items_controller.rb, The view file called app/views/new.html.haml Each created.

routes.rb


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 localhost:3000/items/new. 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 categories table.

Summary

Finally, the summary so far.

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

Reference

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