小雕雕的家

這一篇要寫的是 n 久之前上課的心得第四篇，關於購物車頁面與流程的設計

購物車頁面的設計在以往因為網路技術上的關係，所以在設計上都比較簡單，只會列出你的購物清單

然後讓消費者檢視一下金額是否有符合，商品是否有正確，然後就進行結帳了

但是因為網路技術的進步，消費者的使用者經驗也因此慢慢的改變，會出現一些讓你可以管理商品的工具

不再只是單純用來檢視商品而已，例如編輯你的商品數量、款式、商品比較....等一些比較

然後一般在台灣的電商網站普遍有一個現象，當你將商品加入購物車之後想要檢視自己要購買的商品

吃飯前，來用5分鐘寫個廢文

其實好像也不需用到 jquery，這個是有點簡單的技巧，但是標題有點難下

總之就像下圖的建議搜尋，當滑鼠點一下頁面其他地方時，建議搜尋要收起來

但是又不能用 document or body 的 click，因為 div 也在document  裡面，點了 div 自己也會被收起來

但有時候我只想要點下去有別的功用，不想要他收起來

這時候下面這段 code 就可以解決啦!

這篇要講的是迷你購物車，迷你購物車是什麼呢?

就是下面這東東，在商品頁點下去購買之後會出現的小型購物清單

雖然我覺得也可以叫做臨時購物車，不過上課時還是用迷你購物車來稱呼

但!! 在開始這次的主題之前，因為上一次上課沒講完，所以再繼續補充有關商品頁的設計與元素

下面兩張投影片因為時間過太久，已經忘記什麼意思了~~

這篇文章是上的第二堂課內容

因為上禮拜內容太多講不完，因此上課一開始繼續接續補充上次課程內容

一樣是因為之後要部門分享，所以先把重點記下來避免失憶

類別頁的設計 (續)

第一堂課請看這邊：

[UX/UI] 電子商務網站的規劃與設計課後心得 (一) - 電子商務網站發展趨勢、線上購物行為模式、首頁與類別頁的規劃與設計

如果你有寫過爬蟲程式的話，就會知道找 XPath 路徑其實是有點麻煩

尤其是對方一直改版，DOM的架構一直變就很煩

先補充小常識，知道的人可以跳過：

XPath 是一種在 XML 中用來快速尋找節點的一種表達式，他非常的簡單易用

有興趣自己 try try：https://zh.wikipedia.org/wiki/XPath

因為網頁元素也是成雙成對，因此有部分元件也可使用 XPath 來取得要抓取的節點內容

這篇是上課的心得，聽說上完課要回公司做部門內分享，所以怕記憶力衰退把它寫下來

本篇內容都是上課中提到的，但是偶爾會加上我的一些想法在裡面

第一堂的上課內容包含這些 (總共五堂)

1. 電子商務網站發展趨勢

2. 線上購物行為模式

3. 首頁與類別頁的規劃與設計

此篇是給新手看的，老手可以直接上一頁了

這篇要來仔細研究的是邏輯運算子的使用，與一些開發上的小技巧

大家看到標題一定會以為這篇又是來混篇數的， &&、||、! (and、or、not) 還需要你講嗎

的確是混篇數沒錯，但如果真的了解這幾個運算子的使用，能讓你在開發時的 code 更簡短，邏輯更清晰

Javascript 有以下幾種類型的運算子，但這篇主要是針對邏輯運算子，想了解其他運算子的自己點進去看

代入運算子、比較運算子、算術運算子、位元運算子、邏輯運算子、字串運算子、特殊運算子

另外還有一元、二元、三元運算子，三元運算子就是條件運算子，請點進上面"特殊運算子"裡面有講

這篇要來出考題考考大家！！ 答對了沒有獎品

前言：

這篇要來拿昨天看到的一個例子來練習，覺得是個很好的範例，內含許多 javascript 基礎

在這個系列的第一篇有說明了 By Value、By Reference 的差異還有造成差異的原因

在進行考試之前可以進來這篇複習：

Javascript 基礎打底系列 (一) - 常見的出包狀況解析 (關於By Value、By Reference)

如果你看過且已經完全了解上面那篇的話，那下面這問題就會答對