這篇都在教設計版面，個人覺得可看可不看。
參考影片-第四篇：https://youtu.be/WRVwfVUaj_Y?t=4m10s
購物車code的部份。(為什麼我會設定4分10秒開始播放呢？因為前面都在講唔欸某欸…)
第三篇都在說明版面的設計(html、css)，第四篇是購物車的部份，所以決定把三、四篇寫在一起，才不會太空虛…
以下是第三篇的檔案內容，其他就不再多加贅述了哦！如果你心裡有其他想要的設計，那就不需要照著做，我是想照著他的步驟有了基本設計後再來做調整修改，對我來說比較順手。
views/layouts/application.hrml.erb
<!DOCTYPE html> <html> <head> <title>Workspace</title> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %> <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %> <%= csrf_meta_tags %> </head> <body> <nav id="nav"> <div id="page_nav"> <%= link_to('首頁', root_path) %> <%= link_to('產品', products_path) %> <%= link_to('關於我們', page_about_path) %> <%= link_to('問與答', page_faqs_path) %> <%= link_to('聯絡我們', page_contact_path) %> </div> <div id="sign_in"> <% if user_signed_in? %> Signed in as <%= current_user.email %>. Not you? <%= link_to('登出', destroy_user_session_path, :method => :delete) %> | <%= link_to('修改密碼', edit_registration_path(:user)) %> <% else %> <%= link_to('註冊', new_registration_path(:user)) %> | <%= link_to('登入', new_session_path(:user)) %> <% end %> </div> </nav> <div id="main_wrap"> <% if notice %> <p class="alert alert-success"><%= notice %></p> <% end %> <% if alert %> <p class="alert alert-danger"><%= alert %></p> <% end %> <%= yield %> </div> </body> </html>
app/assets/stylesheets/application.css
/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
* or any plugin's vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any styles
* defined in the other CSS/SCSS files in this directory. It is generally better to create a new
* file per style scope.
*
*= require_tree .
*= require_self
*/
*{
margin: 0;
padding: 0;
}
#nav{
width: 100%;
height:40px;
background: #000;
float: left;
}
#page_nav a, #sign_in a {
line-height: 40px;
color: #FFF;
padding: 0 20px 0 20px;
text-decoration: none;
}
#page_nav {
margin: 0 0 0 5%;
float: left;
}
#sign_in{
float: right;
margin: 0 5% 0 0;
}
#main_wrap {
width: 90%;
float: left;
margin: 20px 5% 0 5%;
}
----------------------------------------------------
第四篇，routes.rb購物車的address設定，編輯成下列內容
get '/cart' => 'cart#index' get '/cart/clear' => 'cart#clearCart' get '/cart/:id' => 'cart#add'*get '{網址}' => '{controller}#{action}'
文章有提到本來要把cart的controller檔案內容放到影片的說明，不過沒放，以下就是cart_controller.rb內容，拿去用唄！
class CartController < ApplicationController
def add
id = params[:id]
#if the cart has already been created, use the existing cart else create a new cart
if session[:cart] then
cart = session[:cart]
else
session[:cart] = {}
cart = session[:cart]
end
#if the product has already been added to the cart, increment the value else set the value to 1
if cart[id] then
cart[id] = cart[id] + 1
else
cart[id] = 1
end
redirect_to :action => :index
end
def clearCart
session[:cart] = nil
redirect_to :action => :index
end
def index
#if there is a cart , pass it to the page for display else pass an empty value
if session[:cart] then
@cart = session[:cart]
else
@cart = {}
end
end
end
看完後是不是有空虛、寂寞、覺得冷的情形呢…
沒有留言:
張貼留言