前置作業：前台商品 show 頁面

接下來我們要美化網址，

要美化的主要是 show 的網址，

顯示出 id 其實會有點奇怪？

我們可以透過 Friendly_id 這個套件把 id 做成其他有意義的詞

Friendly_id 怎麼用

step 1. 安裝 Friendly_id

gem 'friendly_id'

step 2. 增加 slug 到商品的 model

class AddSlugToProducts < ActiveRecord::Migration[7.0]
  def change
    add_column :drinks, :slug, :string
    add_index :drinks, :slug, unique: true
    add_column :desserts, :slug, :string
    add_index :desserts, :slug, unique: true
  end
end

step 3. 安裝 friendly id

這個指令會幫我們生出 friendly_id 的設定檔以及 migration

> rails g friendly_id

  create  db/migrate/20230924140957_create_friendly_id_slugs.rb
  create  config/initializers/friendly_id.rb

step 4. 在 model 中設定 friendly_id

我們需要用到 FriendlyId 的方法，要擴充 model ，所以 extend FriendlyId

並且跟他說哪個欄位要當成 slug，我們剛多加了一個 slug 的欄位，
就把它拿來當 slug 吧

# app/models/drink.rb

class Drink < ApplicationRecord
  extend FriendlyId
  
  frinedly_id :slug, use: :slugged
  
  ...
end

step 5. 修改 controller 的尋找 id 方法

# app/controllers/drink_controller.rb

class DrinksController < ApplicationController
  ...

  def show
    @drink = Drink.friendly.find(params[:id])
  end
end

step 6. 在 new 跟 edit 頁面中加入欄位

# app/components/drink_form_component.html.erb

<%= form_with model: [:admin, @dessert] do |f| %>
  ...

  <div class="flex items-center mb-4 field">
    <%= f.label :slug, 'slug' , class: 'mr-4' %><br />
    <%= f.text_field :slug, class: 'rounded-md' %>
  </div>

  ...

<% end %>

step 7. 在 controller 的 params 多加上 slug

# app/controllers/drink_controller.rb

def drink_params
   params.require(:drink).permit(:name, :price, :description, :ingredient, :slug, :picture)
end

重新新增一筆，網址的 id 就會變成 slug 囉