簡要說明
這是一款使用jQuery和CSS3制作的簡單實用的商品購物和添加購物車界面設計方案。使用者可以在商品購物界面中預覽各種型号、顔色、尺寸的商品。然後通過點選添加到購物車按鈕就可以将該商品添加到購物車中，操作簡單直覺。
在傳統的購物網站中，使用者在商品展示界面看中了一件商品之後，點選這件商品的縮略圖，然後可以鍵入到對應水準的子頁面中。在這個子頁面中，使用者可以選擇檢視一些商品的屬性，然後把商品添加到購物車中。但是在這個購物車界面設計中，使用者可以直接在購物界面檢視商品的屬性，并直接将商品添加到購物車中，簡化了使用者的操作，大大提升了使用者的體驗度。
通過在商品預覽圖界面添加“快速添加到購物車”按鈕，可以減少使用者的操作步驟，提升使用者體驗，增加轉化率。
HTML結構
該購物界面的HTML結構使用一個無序清單來制作。每一個無序清單項中又包含一個無序清單，由于制作商品的圖檔畫廊。div.cd-customization是包含商品的屬性和“添加到購物車”按鈕的面闆。div.cd-item-info是商品的名稱和價格。
color-1
color-2
Small
Medium
Add to Cart
Customize
Product Name
$9.99
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;
transform: translateX(100%);
transition: transform 0.3s 0s, visibility 0s 0.3s;
}
.cd-slider-wrapper li.selected {
position: relative;
visibility: visible;
z-index: 1;
transform: translateX(0);
transition: transform 0.3s 0s, visibility 0s 0s;
}
.cd-slider-wrapper li.move-left {
transform: translateX(-100%);
}
.cd-customization元素在使用者用滑鼠滑過商品縮略圖時才被顯示出來。它使用絕對定位并放置在父元素.cd-single-item的下面。
為了建立自定義選項(商品的顔色和尺寸)，這裡使用了不同的
元素，它們都被包裹在div[data-type="select"]元素中。
元素使用絕對定位，并相對于他們的父元素居中。它們的父元素div[data-type="select"]有固定的高度(34px)以及overflow:hidden屬性。無序清單中的每一個清單項的高度都和div[data-type="select"]相同，是以預設情況下，隻有被選擇的項是可見的。
當使用者點選了某個自定義選項時，div[data-type="select"]的overflow屬性被設定為可見，這樣整個
元素都被顯示出來。
.cd-customization {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
visibility: hidden;
opacity: 0;
}
.no-touch .cd-single-item:hover .cd-customization {
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 {
overflow: visible;
}
為了確定被選擇的
元素一直可見，插件中通過建立.selected-n class對
元素中的清單項進行了重新排列。例如：當第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 {
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由一個元素(按鈕上的文本)和一個SVG(check圖示)組成。預設情況下，圖示是不可見的。
當商品被添加到購物車的時候，.add-to-cart按鈕被添加了.is-added class：此時元素被隐藏(移動到左邊)，SVG圖示被移動回中間，然後開始繪制動畫。
.cd-customization .add-to-cart em {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cd-customization .add-to-cart svg {
position: absolute;
left: 50%;
top: 50%;
width: 100%;
transform: translateX(50%) translateY(-50%);
}
.cd-customization .add-to-cart.is-added em {
color: transparent;
transform: translateX(-100%);
}
.cd-customization .add-to-cart.is-added svg {
transform: translateX(-50%) translateY(-50%);
}
SVG圖示的繪制動畫使用的是stroke-dasharray和stroke-dashoffset屬性。