Ruby on Rails 開發從頭來（十三）：結帳頁面整合購物車顯示

需求：結帳頁面同時顯示購物車明細

避免用戶在填寫訂單資訊時需切換頁面確認商品，將購物車內嵌於結帳頁。

結帳頁面引入購物車元件

<%= error_messages_for("order") %>
<%= render_component :action => "display_cart", :params => { :context => :checkout } %>
<%= stylesheet_link_tag "scaffold", "depot", :media => "all" %>

render_component 參數傳遞

:params => { :context => :checkout } 傳遞額外參數給目標動作，讓其區分呼叫情境。

修改 display_cart 動作

def display_cart
  @cart = find_cart
  @items = @cart.items
  if @items.empty?
    redirect_to_index("Your cart is currently empty")
  end
  if params[:context] == :checkout
    render :layout => false  # 嵌入時不使用佈局
  end
end

修改購物車視圖：情境化顯示

  
<%= link_to 'Continue shopping', :action => "index" %>
  <% unless params[:context] == :checkout -%>
    
<%= link_to 'Empty cart', :action => "empty_cart" %>
    
<%= link_to 'Checkout', :action => "checkout" %>
  <% end -%>

結帳情境下隱藏「清空購物車」與「結帳」連結，避免混淆。

結果驗證

1. 首頁加入商品 → 點擊 "Checkout"
2. 結帳頁面頂部顯示訂單表單，下方嵌入購物車明細表格
3. 購物車區塊無「清空」、「結帳」連結，只保留「繼續購物」
4. 填寫訂單送出 → 導向首頁，購物車自動清空

關鍵技巧總結

• render_component 重用控制器動作與視圖，支援參數傳遞
• render :layout => false 嵌入模式不套用完整佈局
• 視圖中檢查 params[:context] 區分獨立/嵌入情境
• 符合 DRY 原則：購物車顯示邏輯集中在 display_cart 一處