前台

全站共用區塊

主要是 header，重要功能都在此；共用的 footer 為靜態性質，不另外贅述。

• 非 CI 程式用到的版（主要為資訊頁）

  • seo_css_js.html
  • rwd_header.html
  • rwd_header_search.html

• CI 程式，dev 下

  • views/components/navigation_2017.php

搜尋功能

1. pjax
2. 儲存使用者搜尋字串
3. 於搜尋結果點擊 href 時，儲存使用者搜尋字串與點擊的商品資訊
4. Autocomplete 與快速選擇

代找功能

1. helpme_find.html
2. 此頁面為靜態化頁面，請閱讀手動靜態化章節

2017新header

1. 右 2 廣告，超過 2 張圖自動跑馬燈
2. 四 button 切換類目；使用 VueJS 獲得 json 數據並渲染

購物車浮動圖示

首頁

類目頁

商品過濾與排序

1. List.js
2. 過濾分類選詞、透過商品的不同屬性排序
3. 純前端

快速購物功能

1. 直接點擊商品的加入詢價/我要購買，可將商品加入購物車
2. 使用購物車 API
3. VueJS

商品頁

1. 使用購物車 API 加入購物車
2. 頁面牌價資訊為 AJAX 獲得，確保牌價資訊為最新
3. VueJS

資訊頁

• 匯款通知 /payback.php
• 線上傳檔 /webup.php
• 製稿說明 /finalized.php
• 刀模下載 /download.php
• 產品詢價（總詢）/total_inquiry.php
• 聯絡資訊 /about_company.php

著陸頁

1. 除了 gift.html 以外的著陸頁，皆為前輩們古早味純手工天然鍛造
2. 透過 ajax 獲取頁面歸屬資訊（於著陸頁管理中），實現自動 hover nav 所屬類目之功能。

   <script type="text/javascript" src="/promote/js/gift_ajax.js"></script>
   

3. ajax 16 廣告之目標 URI 已替換並重新編寫。

gift

1. 程式生成中間主要內容
2. List.js 實現價格區間過濾
3. 上方賀成交跑馬燈，同禮贈品首頁賀成交