【JA魔改秘笈】十分鐘搞定商品列表、商品詳情頁面!

關於這篇教程

無論是上一次的 Job Listing 大賽,還是這一次的 JD Store 比賽,「作品醜」相信是不少同學特別糾結的地方,甚至成為了很多人作品難產的原因之一。吉米跟我準備了購物網站幾個主要頁面的板塊,希望能幫助大家脫離前端大坑。有了這樣一個雛形以後,你會有更多信心和時間進行後續迭代!

先前吉米為大家準備了 Landing Page 的部分:<【JA魔改秘笈】还卡在前端的坑吗?教你如何第一次做Landing Page就上手!!>;照顧完購物網站的門面,我們接著看看購物網站的「商品列表」、「商品資訊」這兩大主要頁面吧!

GitHub 開源代碼

專案連結:Jdstore-theme-simple

Demo

利用代碼,你可以快速裝修購物網站的「商品列表(products#index)」以及「商品資訊頁(products#show)」,輕鬆作出簡單、大方的樣式。

  • 商品列表(products#index)

  • 商品資訊頁(products#show)




GEM / 檔案路徑 / 功能與板塊

Gem

  • bootstrap-sass (*Bootstrap 模版)
  • font-awesome-rails (*Font awesome 圖標)

HTML + SCSS

功能 / 板塊

  • 商品列表 - 廣告圖
  • 商品列表 - 商品類型 & 品牌選單
  • 商品列表 - 頁面路徑 & 排序
  • 商品列表
  • 商品資訊 - 廣告圖
  • 商品資訊 - 商品類型 & 品牌選單
  • 商品資訊 - 頁面路徑 & 排序
  • 商品資訊 - 頁面左側:商品圖片
  • 商品資訊 - 頁面右側:商品主要資訊及功能




如何使用

Step 1. 鎖定想要用的板塊

Step 2. HTML 代碼

  • 到 app/views/products 中找到你要參考的頁面的文檔:
    • app/views/products/index.html.erb (*商品列表)
    • app/views/products/show.html.erb (*商品資訊)
  • 每一個大區塊都是以 <section> </section> 包住;板塊中的元件則使用 <div> </div> 來區隔。
  • 記住這個 Class 的名稱。

Step 3. CSS 代碼

  • app/assets/stylesheets/application.scss,利用快捷鍵 command + F 搜尋剛剛記下的 Class 名稱。裡面會包含該區塊使用到的 CSS 代碼。

這樣就大功告成,就是這麼簡單!接下來你就可以:

  • 替換圖片、連結。
  • 我們提供的代碼已經預先將很多元件以 <div> </div> 區隔並設置 Class(例如上圖的:.title.price),你可以針對你的喜好、需求,找到該 Class,調整前端細節(顏色、大小、間隔)。




過程中遇到任何問題,都可以透過 Slack:xbearx1987、anndo-2 找到吉米或我,我們很樂意為你解答。如果你覺得我們的前端模板對你有幫助,希望你能至我們的作品 J & A SELECT投下寶貴的一票!你的支持會成為我們持續分享的動力。

Comments

comments powered by Disqus