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