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

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

Recommended Posts

Implement the product category function using ancestry ① (Preparation)
Implement category function using ancestory
[Rails] Implementation of multi-layer category function using ancestry "Preparation"
Implement the star five function using the for statement
How to implement the breadcrumb function using gretel
Let's introduce the credit card function using payjp (preparation)
[Rails] Implementation of multi-layer category function using ancestry "seed"
[Rails] Implementation of multi-layer category function using ancestry "Editing form"
[Rails] Implementation of multi-layer category function using ancestry "Creation form"
User evaluation using the like function
[Rails] gem ancestry category function implementation
[Swift] How to implement the Twitter login function using Firebase UI ①
[Swift] How to implement the Twitter login function using Firebase UI ②
[Swift] How to implement the countdown function
[Rails] Implement the product purchase function with a credit card registered with PAY.JP
Implement user edit / update function without using devise
[Swift] How to implement the LINE login function
Implement partial match search function without using Ransuck
[swift5] How to implement the Twitter share function
Implement star rating function using Raty in Rails6
[For beginners] How to implement the delete function
Flow to implement image posting function using ActiveStorage
[Swift] How to implement the fade-in / out function
How to create hierarchical category data using ancestry
[Rails] Category function
[Rails] Implement a counter that counts the parent category when registering a child category (ancestry, counter_culture)
Continued ・ Flow to implement image posting function using ActiveStorage
I tried using the Server Push function of Servlet 4.0
Try to implement using Rakuten product search API (easy)
Rails learning How to implement search function using ActiveModel
Create a login authentication screen using the session function
Try to implement tagging function using rails and js