使用 jQuery 製作而成的「卡片形式」購物清單，目的是希望可將此網頁功能套用在其他購物類型的網頁，可作為視窗、懸浮頁面使用。其中，此網頁結構主要分為三個部分，由上至下分別為「新增商品欄位」、「各項商品清單」以及「商品總價計算」等三大功能區塊。
最上方「新增商品欄位」功能區塊：使用者可在此區塊中新增商品欄位，透過手動輸入的方式，依序輸入要新增的商品「名稱」、「數量」與「單價」後，點擊「新增」按鈕後即可增加商品資訊。
中央「各項商品清單」功能區塊：各項商品資訊將會顯示於此區塊，會依照使用者新增商品的順序依序排列顯示。若想移除特定項目商品，每一個項目右側設有移除按鈕，點擊後即可移除該商品項目。若需要重新修改商品數量的資訊，可以點擊「+」或「-」按鈕調整數量，或是直接透過鍵盤輸入數量；避免使用者在調整商品數量時誤植錯誤數值，該功能有針對「0」與「負數」製作防呆機制（例如：按鍵淡化、清除錯誤字元、圖示震動提醒等）。
最下方「商品總價計算」功能區塊：為了讓網頁整體呈現卡片形式的設計，避免使用者大量新增的商品資訊，可能會佔據網頁過長空間配置，因此將商品清單的區域採獨立捲動的方式，使總價計算的位置能夠固定於網頁下方。當使用者於上方新增商品或是修改商品數量時，該區塊也會即時計算出商品總價數值。