10 個免費的 CSS 和 JavaScript 電子商務購物車 UI 示例

電子商務購物車需要可供所有訪問者使用和訪問。 您的目標是增加轉化率並讓人們在結賬時保持參與，而做到這一點的最佳方法是使用鼓勵用戶活動的簡潔設計。

有許多免費的開源購物車，您可以為任何目的重新設計。 我們冒昧地在這個系列中收集了我們的最愛。

平板車

不可否認扁平化設計的流行。 它適用於所有類型的網站，它可以幫助設計師更多地關注可用性而不是美學。

這就是為什麼這款平板購物車對於任何構建電子商務結賬頁面的人來說都是一個極好的資源。 無論佈局風格如何，顏色都易於更新，界面功能相同。

我不認為扁平化設計是每個項目的解決方案，但在正確的情況下，這支筆可以很好地作為起始模板。

查看 Will Paige 的 Pen Flat Cart [codepen comp]

無表用戶界面

許多結帳頁面使用表格來組織數據，但 Alex Rodrigues 的這個示例使用DIV代替。

它是完全響應的，因此無論您使用什麼設備，佈局都應該看起來很棒。 每一行都包含足夠的數據來正確重新設計並保持一切井井有條，即使在超小屏幕上也是如此。 CSS 代碼使用 Compass 來節省時間，同時使用免費的 Google Fonts 來獲得一點風格。

查看 alex rodrigues 的 Pen Responsive Table-less Shopping Cart

美味的購物車

我無法想像這可以在真實網站上使用，但作為 UI/UX 實驗，它非常酷。 同名的美味購物車就像一個在線麵包店/糖果店，上面有不同甜點的照片。

您可以向左/向右移動光標以在輪播中前進或在移動設備上滑動。 每件商品都有加號/減號圖標，用於添加商品或將其從您的訂單中刪除，加上一個“X”圖標，可將其完全從您的購物車中刪除。

整個事情都是建立在 Sass、Slim 和 jQuery 之上的，所以它是一個非常棒的前端項目！ 如果你想剖析一些很棒的代碼，這個例子值得保存。

查看 Didier 的 Pen Delicious 購物車

響應式設計

這是另一個基於 Sass 和無表構建的簡單響應式購物車 UI。

我比其他人更喜歡這種響應式結帳，因為斷點感覺更自然。 即使在較小的屏幕上，購物車物品也不會感到局促或不合適。

所有“刪除”按鈕都通過 JavaScript 工作，數字輸入字段自動更新定價。 這對於買家可能希望在付款前增加數量並查看總成本估算的前端購物車頁面非常有用。

查看 Justin Klemm 的 Pen 響應式購物車

jQuery 購物籃

這支筆更像是一個線框，而不是一個完整的結帳頁面，但它是一個完美的起點。 開發人員 Khurram Alvi 使用基本的 HTML/CSS 和一點 jQuery 創建了這個響應式購物車。

它是完全響應的，並且數量輸入按您的預期工作。 一件好事是這款推車設計的簡單性。 它不會將任何顏色、字體或紋理強加到佈局中。 任何希望從頭開始構建新購物車的人都可以從這裡開始，因為它很容易構建和重組。

查看 Khurram Alvi 的 Pen Responsive jQuery Shopping Basket

挑戰車

每隔一段時間就會出現新的 CodePen 挑戰，要求開發人員創建不同的界面，如註冊頁面或模式窗口。 Ziga Miklic 的這支筆來自購物車 UI 的挑戰，它是前端開發的傑作。

當您從購物車中添加/刪除商品時，您會注意到價格會自動更新，並帶有一個小的滑動動畫。 您還可以單擊任何產品圖像，輕鬆將其從購物車中刪除。 這些小功能為界面添加了很多內容，使克隆變得輕而易舉。

甚至結賬功能也有自己的動畫功能，儘管它沒有連接到後端的任何東西。

查看 Ziga Miklic 的 Pen 購物車 [CodePen Challenge]

滑動車 UI

選項卡式小部件可讓您將內容添加到單個頁面上，並賦予用戶對該內容的控制權。 在這個滑動購物車中，您可以在購物車本身和保存的“收藏”項目列表之間切換。

結帳功能實際上都不起作用，因此您無法將商品收藏或添加/刪除到購物車中。 但是界面項目已經到位，所以一點 JavaScript 魔法就可以解決這個問題。 儘管如此，我對這款購物車的干淨外觀和獨特但可用的標籤界面印象深刻。

查看 Alex 的 Pen 購物車（響應式）

動態商店和購物車

將商店和購物車混合到一個界面中是一項艱鉅的工作，但 Olivia Cheng 用這支筆完成了它。

它在網格中使用寬縮略圖，懸停時帶有“添加到購物車”按鈕。 單擊此按鈕以使用自動更新價格添加上述項目。 一項獨特的功能是在項目縮略圖頂部添加的數量。 這在真正的購物車上可能會讓人感到困惑，但如果數字小一點，這將是節省空間的好方法。

查看 Olivia Cheng 的 Pen Sliding Shopping Cart & Store

清潔購物車

開發人員 Bart Veneman 將這個乾淨的購物車創建為一個簡單的界面模板。 它會自動計算總價，甚至包括結帳按鈕附近的稅費。

所有這些動態功能都通過 JavaScript 工作，令人驚訝的是，這支筆使用了 Zepto 而不是 jQuery。 這對於喜歡 Zepto 庫的開發人員來說非常有用，但實際上任何人都可以選擇此代碼並對其進行修改以適應任何模板。

查看 Bart Veneman 的 Pen Shopping Cart

帶有 Vue.js 的簡單購物車

使用 Vue.js 進行前端編碼使模板變得更加簡單。 這支筆是實際上建立在 JavaScript 基礎上的動態購物車的一個例子。

每次點擊購物車都會自動更新，因此您可以添加/刪除商品並立即查看結果。 右上角的按鈕使用 Bootstrap 的模態組件在模態窗口中打開您當前的購物車。

如果你喜歡 Vue.js 語法，那麼這個模板是開始構建購物車的好地方。 它很容易定制，應該在所有瀏覽器中都能正常工作。

查看 Cristian Matos 的 Pen VueJS 2 簡單購物車

域購物車

這是我最喜歡的以域名註冊商為藍本的購物車設計之一。 編碼員 Jesse Bilsten 詳細了解了這個界面，包括支付部分和所需的 T&C 區域。

在完成結帳過程之前，您必須單擊“我同意”按鈕。 對於一些電子商務網站來說，這是一個小而有價值的功能，我真的很喜歡兩欄佈局。 而且這種設計是完全響應式的，因此您可以克隆它以在幾乎任何電子商務系統中使用。

查看 Pen 響應式購物車 - Jesse Bilsten 的 Brand v01