专栏首页蚂蚁开源社区简单实用的商品购物和添加购物车UI设计

简单实用的商品购物和添加购物车UI设计

简要说明

这是一款使用jQuery和CSS3制作的简单实用的商品购物和添加购物车界面设计方案。用户可以在商品购物界面中预览各种型号、颜色、尺寸的商品。然后通过点击添加到购物车按钮就可以将该商品添加到购物车中,操作简单直观。

在传统的购物网站中,用户在商品展示界面看中了一件商品之后,点击这件商品的缩略图,然后可以键入到对应水平的子页面中。在这个子页面中,用户可以选择查看一些商品的属性,然后把商品添加到购物车中。但是在这个购物车界面设计中,用户可以直接在购物界面查看商品的属性,并直接将商品添加到购物车中,简化了用户的操作,大大提升了用户的体验度。

通过在商品预览图界面添加“快速添加到购物车”按钮,可以减少用户的操作步骤,提升用户体验,增加转化率。

HTML结构

该购物界面的HTML结构使用一个无序列表来制作。每一个无序列表项中又包含一个无序列表,由于制作商品的图片画廊。div.cd-customization是包含商品的属性和“添加到购物车”按钮的面板。div.cd-item-info是商品的名称和价格。

<ul class="cd-gallery"> <li> <div class="cd-single-item"> <a href="#0"> <ul class="cd-slider-wrapper"> <li class="selected"><img src="img/thumb-1.jpg" alt="Preview image"></li> <li><img src="img/thumb-2.jpg" alt="Preview image"></li> <!-- other product images here --> </ul> </a> <div class="cd-customization"> <div class="color" data-type="select"> <ul> <li class="color-1 active">color-1</li> <li class="color-2">color-2</li> <!-- other product colors here --> </ul> </div> <div class="size" data-type="select"> <ul> <li class="small active">Small</li> <li class="medium">Medium</li> <!-- other product sizes here --> </ul> </div> <button class="add-to-cart"> <em>Add to Cart</em> <svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32"> <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/> </svg> </button> </div> <!-- .cd-customization --> <button class="cd-customization-trigger">Customize</button> </div> <!-- .cd-single-item --> <div class="cd-item-info"> <b><a href="#0">Product Name</a></b> <em>$9.99</em> </div> <!-- cd-item-info --> </li> <!-- other list items here --> </ul> <!-- cd-gallery -->

CSS样式

对于商品的图片画廊,默认情况下,列表项使用绝对定位,并被移动到它的父元素.cd-gallery之外,因此它们是不可见的。它们使用了两个class:.selected用于添加到列表项的第一项,使其可见,.move-left,图片向左移动,使其不可见。

.cd-slider-wrapper { position: relative; overflow: hidden; } .cd-slider-wrapper li { position: absolute; top: 0; left: 0; visibility: hidden; /* by default, move the product image to the right*/ transform: translateX(100%); transition: transform 0.3s 0s, visibility 0s 0.3s; } .cd-slider-wrapper li.selected { /* this is the visible product image */ position: relative; visibility: visible; z-index: 1; transform: translateX(0); transition: transform 0.3s 0s, visibility 0s 0s; } .cd-slider-wrapper li.move-left { /* move the product image to the left */ transform: translateX(-100%); }

.cd-customization元素在用户用鼠标滑过商品缩略图时才被显示出来。它使用绝对定位并放置在父元素.cd-single-item的下面。

为了创建自定义选项(商品的颜色和尺寸),这里使用了不同的<ul>元素,它们都被包裹在div[data-type="select"]元素中。<ul>元素使用绝对定位,并相对于他们的父元素居中。它们的父元素div[data-type="select"]有固定的高度(34px)以及overflow:hidden属性。无序列表中的每一个列表项的高度都和div[data-type="select"]相同,因此默认情况下,只有被选择的项是可见的。

当用户点击了某个自定义选项时,div[data-type="select"]的overflow属性被设置为可见,这样整个<ul>元素都被显示出来。

.cd-customization { position: absolute; left: 0; bottom: 0; width: 100%; visibility: hidden; opacity: 0; } .no-touch .cd-single-item:hover .cd-customization { /* product customization visible */ pointer-events: auto; visibility: visible; opacity: 1; } .cd-customization .color, .cd-customization .size { height: 34px; position: relative; overflow: hidden; } .cd-customization .color ul, .cd-customization .size ul { display: inline-block; position: absolute; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%); width: 100%; } .cd-customization .color.is-open, .cd-customization .size.is-open { /* color/size list open - make ul element visible */ overflow: visible; }

为了确保被选择的<li>元素一直可见,插件中通过创建.selected-n class对<ul>元素中的列表项进行了重新排列。例如:当第3个列表项被选择的时候,.selected-3会被添加到div[data-type="select"]中。

.cd-customization .color.selected-3 ul li:first-of-type, .cd-customization .size.selected-3 ul li:first-of-type { /* third option selected in the ul.color/ul.size list */ transform: translateY(0); } .cd-customization .color.selected-3 ul li:nth-of-type(2), .cd-customization .size.selected-3 ul li:nth-of-type(2) { transform: translateY(100%); } .cd-customization .color.selected-3 ul li:nth-of-type(3), .cd-customization .size.selected-3 ul li:nth-of-type(3) { transform: translateY(-100%); }

“添加到购物车”按钮.add-to-cart由一个<em>元素(按钮上的文本)和一个SVG(check图标)组成。默认情况下,图标是不可见的。

当商品被添加到购物车的时候,.add-to-cart按钮被添加了.is-added class:此时<em>元素被隐藏(移动到左边),SVG图标被移动回中间,然后开始绘制动画。

.cd-customization .add-to-cart em { /* this is the button text message */ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .cd-customization .add-to-cart svg { /* this is the check icon */ position: absolute; left: 50%; top: 50%; width: 100%; /* move the icon on the right - outside the button */ transform: translateX(50%) translateY(-50%); } .cd-customization .add-to-cart.is-added em { /* product added to the cart - hide text message on the left with no transition*/ color: transparent; transform: translateX(-100%); } .cd-customization .add-to-cart.is-added svg { /* product added to the cart - move the svg back inside the button */ transform: translateX(-50%) translateY(-50%); }

SVG图标的绘制动画使用的是stroke-dasharray和stroke-dashoffset属性。

<svg x="0px" y="0px" width="32px" height="32px" viewBox="0 0 32 32"> <path stroke-dasharray="19.79 19.79" stroke-dashoffset="19.79" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-linecap="square" stroke-miterlimit="10" d="M9,17l3.9,3.9c0.1,0.1,0.2,0.1,0.3,0L23,11"/> </svg>

本文分享自微信公众号 - 蚂蚁开源社区(mayi_zzfriend),作者:思齐大神

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-12-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 11款适合移动设备使用CSS3分页导航条源码解析/代码下载

    所有的分页导航条DEMO的html结构都是一样的:使用一个<nav>元素来包裹一个无序列表。列表项中的.button是前一页和后一页按钮。

    用户5997198
  • 【前端技巧】html页面引入公共的头部和底部

    我们在做项目的时候经常会遇到一样的头部和底部,如果每个页面都复制一遍,不仅工作量大而且万一需要修改一下文章就更麻烦了,这时候就需要我们把公共部分提取出来,等需要...

    用户5997198
  • 创意卡片式项目管理界面UI设计源码

    这是一款非常有创意的卡片式项目管理界面UI设计效果。该UI设计中,将各个项目以卡片的方式堆叠排列在屏幕上,当点击了其中的某个项目的时候,该项目图片会全屏放大,向...

    用户5997198
  • Protobuf 语法指南

    本指南描述了怎样使用protocol buffer 语法来构造你的protocol buffer数据,包括.proto文件语法以及怎样生成.proto文件的数据...

    beifengtz
  • 【java基础】Java中instanceof关键字的理解

    java 中的instanceof 运算符是用来在运行时指出对象是否是特定类的一个实例。instanceof通过返回一个布尔值来指出,这个对象是否是这个特定类或...

    程序员互动联盟
  • 2018年Go语言实战笔记2string字符串处理time时间处理指针strconv 类型转换rand 随机数函数几个实例

    接触一门新语言,了解其语法结构,常用的包是必须的,同时也是无聊的。有过其他编程语言基础的同学,学习go的语法很简单,参照 go文档 过一遍就能对go的语法有大致...

    章鱼喵
  • Go-指针、传值与传引用、垃圾回收

    要点 Go使用的*、&、new()这些运算符,和C++的用法完全一样。 有传值和传引用/传地址的概念,和C++一样。 Go没有new对应的delete操作,而是...

    李海彬
  • jsp格式化输出日期

    用户2657851
  • Go-指针、传值与传引用、垃圾回收

    要点 Go使用的*、&、new()这些运算符,和C++的用法完全一样。 有传值和传引用/传地址的概念,和C++一样。 Go没有new对应的delete操作,而是...

    李海彬
  • Go-指针、传值与传引用、垃圾回收

    要点 Go使用的*、&、new()这些运算符,和C++的用法完全一样。 有传值和传引用/传地址的概念,和C++一样。 Go没有new对应的delete操作,而是...

    李海彬

扫码关注云+社区

领取腾讯云代金券