<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/lockingdong/pen/XNMoNw?depth=everything&order=popularity&page=13&q=shop&show_forks=false" />
<style class="cp-pen-styles">@charset "UTF-8";
* {
font-family: 微軟正黑體;
box-sizing: border-box;
position: relative;
outline: none;
}
.mouseP {
position: absolute;
z-index: 5;
display: none;
}
body, html {
margin: 0;
width: 100%;
height: 100%;
}
body {
background: linear-gradient(to top, #c7b299, #D4D3DD);
background-attachment: fixed;
}
.bottom {
width: 820px;
height: auto;
margin: 0 auto;
margin-top: 10px;
box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.6);
border-radius: 10px;
overflow: hidden;
}
.bottom .white_bottom {
overflow: hidden;
width: 820px;
height: auto;
display: flex;
}
.bottom .white_bottom .left_side {
width: 58.53659%;
height: auto;
}
.bottom .white_bottom .left_side .top_sq {
width: 100%;
height: 330px;
background: #c7b299;
}
.bottom .white_bottom .left_side .bottom_sq {
width: 100%;
height: 332px;
background: #666666;
}
.bottom .white_bottom .left_side .shoe {
position: absolute;
width: 100%;
height: 140px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
}
.bottom .white_bottom .left_side .shoe div {
width: 60px;
height: auto;
}
.bottom .white_bottom .left_side .shoe .left_btn, .bottom .white_bottom .left_side .shoe .right_btn {
text-align: center;
font-size: 30px;
color: #f2f2f2;
vertical-align: middle;
line-height: 120px;
text-shadow: 0px 1px 15px rgba(0, 0, 0, 0.6);
cursor: pointer;
}
.bottom .white_bottom .left_side .shoe .left_btn {
padding-left: 12px;
}
.bottom .white_bottom .left_side .shoe .right_btn {
padding-right: 12px;
}
.bottom .white_bottom .left_side .shoe .shoe_img {
width: 100%;
}
.bottom .white_bottom .left_side .shoe .shoe_img img {
position: absolute;
width: 100%;
top: -20px;
}
.bottom .white_bottom .left_side .shoe .shoe_img .imgR {
left: 0px;
}
.bottom .white_bottom .left_side .shoe .shoe_img .imgW {
left: -410px;
}
.bottom .white_bottom .left_side .switch {
width: 55px;
height: 12px;
position: absolute;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
top: 61%;
}
.bottom .white_bottom .left_side .switch .switch1, .bottom .white_bottom .left_side .switch .switch2 {
width: 12px;
height: 12px;
position: absolute;
border-radius: 50px;
border: 1px solid #f2f2f2;
cursor: pointer;
}
.bottom .white_bottom .left_side .switch .switch2 {
right: 0;
}
.bottom .white_bottom .left_side .icon {
width: 96px;
height: 38px;
position: absolute;
top: 34px;
left: 30px;
display: flex;
justify-content: space-between;
cursor: pointer;
}
.bottom .white_bottom .left_side .icon div {
width: 38px;
height: 38px;
}
.bottom .white_bottom .left_side .icon div svg:hover {
filter: drop-shadow(0px 1px 1px rgba(242, 242, 242, 0.6));
transition: 0.2s;
}
.bottom .white_bottom .left_side .icon .cart .RTnumber {
text-align: center;
width: 20px;
height: 20px;
font-size: 6px;
border-radius: 50px;
background: #602935;
color: #f2f2f2;
line-height: 18px;
vertical-align: middle;
position: absolute;
top: -5px;
right: -5px;
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.6);
}
.bottom .white_bottom .right_side {
width: 41.46341%;
height: 660px;
background: #f2f2f2;
box-shadow: 0px 1px 20px rgba(0, 0, 0, 0.6);
}
.bottom .white_bottom .right_side .deco {
width: 40px;
height: 3px;
position: absolute;
left: 50px;
top: 200px;
background: #602935;
}
.bottom .white_bottom .right_side .info, .bottom .white_bottom .right_side .detail {
position: absolute;
left: 50px;
}
.bottom .white_bottom .right_side .info {
width: 220px;
height: 120px;
top: 70px;
}
.bottom .white_bottom .right_side .info .sname {
font-size: 15px;
color: #333;
}
.bottom .white_bottom .right_side .info .name {
color: #602935;
font-size: 38px;
line-height: 30px;
margin-top: 12px;
margin-bottom: 15px;
}
.bottom .white_bottom .right_side .info .price {
color: #4d4d4d;
font-size: 25px;
margin-top: 2px;
}
.bottom .white_bottom .right_side .detail {
width: 237px;
height: 214px;
top: 283px;
display: flex;
flex-direction: column;
justify-content: space-between;
color: #333333;
}
.bottom .white_bottom .right_side .detail .text {
font-size: 15px;
letter-spacing: 0px;
height: 25px;
}
.bottom .white_bottom .right_side .detail div {
height: 52px;
}
.bottom .white_bottom .right_side .detail .qua .text {
display: flex;
}
.bottom .white_bottom .right_side .detail .qua .text .word, .bottom .white_bottom .right_side .detail .qua .text .count {
height: 100%;
}
.bottom .white_bottom .right_side .detail .qua .counter {
height: 33px;
display: flex;
align-items: center;
}
.bottom .white_bottom .right_side .detail .qua .counter div {
border: 1px solid gray;
height: 26px;
width: 16px;
text-align: center;
line-height: 22px;
vertical-align: middle;
font-weight: 300;
border-right: none;
}
.bottom .white_bottom .right_side .detail .qua .counter .num {
font-weight: 500;
width: 26px;
}
.bottom .white_bottom .right_side .detail .qua .counter .add {
border-right: 1px solid gray;
}
.bottom .white_bottom .right_side .detail .qua .counter .add, .bottom .white_bottom .right_side .detail .qua .counter .sub {
cursor: pointer;
}
.bottom .white_bottom .right_side .detail .qua .counter .add:hover, .bottom .white_bottom .right_side .detail .qua .counter .sub:hover {
background: #c7b299;
color: #f2f2f2;
}
.bottom .white_bottom .right_side .detail .color .text {
display: flex;
}
.bottom .white_bottom .right_side .detail .color .text div {
height: 100%;
}
.bottom .white_bottom .right_side .detail .color .color_group {
height: 33px;
display: flex;
align-items: center;
}
.bottom .white_bottom .right_side .detail .color .color_group div {
border: 1px solid gray;
width: 26px;
height: 26px;
margin-right: 3px;
font-size: 0;
cursor: pointer;
}
.bottom .white_bottom .right_side .detail .color .color_group div:hover {
transform: scale(1.1);
}
.bottom .white_bottom .right_side .detail .color .color_group .c1 {
background: #602935;
}
.bottom .white_bottom .right_side .detail .size .text {
display: flex;
}
.bottom .white_bottom .right_side .detail .size .text div {
height: 100%;
}
.bottom .white_bottom .right_side .detail .size ul {
margin: 0;
padding: 0;
display: flex;
height: 33px;
align-items: center;
}
.bottom .white_bottom .right_side .detail .size ul li {
border: 1px solid gray;
margin-right: 3px;
list-style: none;
width: 26px;
height: 26px;
text-align: center;
font-size: 10px;
letter-spacing: -1px;
line-height: 26px;
vertical-align: middle;
cursor: pointer;
}
.bottom .white_bottom .right_side .detail .size ul li:hover {
background: #c7b299;
transform: scale(1.1);
}
.bottom .white_bottom .right_side button {
width: 300px;
height: 67px;
position: absolute;
left: 20px;
bottom: 37px;
border-radius: 50px;
border: none;
background: #602935;
color: #f2f2f2;
font-size: 13px;
letter-spacing: 1.2px;
cursor: pointer;
transition: 0.2s;
padding-right: 15px;
display: flex;
align-items: center;
justify-content: center;
}
.bottom .white_bottom .right_side button h1, .bottom .white_bottom .right_side button svg {
vertical-align: middle;
}
.bottom .white_bottom .right_side button h1 {
margin: 0;
font-weight: 400;
}
.bottom .white_bottom .right_side button svg {
width: 50px;
height: 50px;
stroke-width: 1;
}
.bottom .white_bottom .right_side button svg path {
stroke: #f2f2f2;
}
.bottom .white_bottom .right_side button:active {
box-shadow: inset 0px 3px 20px rgba(0, 0, 0, 0.5);
}
.th {
transform: scale(1.1);
}
.th_size {
background: #c7b299;
box-sizing: initial;
transform: scale(1.1);
}
.th_shoe {
background: rgba(242, 242, 242, 0.8);
}
svg {
fill: none;
stroke: #f2f2f2;
stroke-linecap: round;
stroke-linejoin: round;
width: 100%;
stroke-width: 2;
transform: scale(1.3);
}
svg .w {
fill: #f2f2f2;
}
svg circle {
stroke-width: 1.5;
}
* {
box-sizing: border-box;
}
.cart_bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 662px;
background: rgba(0, 0, 0, 0.6);
display: flex;
display: none;
align-items: center;
justify-content: center;
}
.cart_bottom .cart_list {
background: #f2f2f2;
width: 622px;
height: 470px;
border-radius: 10px 10px 0 0;
}
.cart_bottom .cart_list .close_btn {
position: absolute;
right: 13px;
top: 8px;
color: #602935;
z-index: 2;
cursor: pointer;
}
.cart_bottom .cart_list .title {
width: 100%;
height: 106px;
}
.cart_bottom .cart_list .title .cart_icon {
display: inline-block;
position: absolute;
top: 10px;
left: 15px;
}
.cart_bottom .cart_list .title .cart_icon svg {
width: 80px;
height: 80px;
stroke: #c7b299;
stroke-width: 1.2;
}
.cart_bottom .cart_list .title .cart_icon svg circle {
fill: #c7b299;
}
.cart_bottom .cart_list .title h2 {
color: #777;
display: inline-block;
position: absolute;
left: 80px;
}
.cart_bottom .cart_list .title h2:after {
content: "";
position: absolute;
width: 68px;
height: 5px;
background: #c7b299;
left: 0;
bottom: -4px;
}
.cart_bottom .cart_list .list {
width: 100%;
}
.cart_bottom .cart_list .list div {
display: inline-block;
}
.cart_bottom .cart_list .list .cart_cat {
font-size: 0;
white-space: nowrap;
height: 36px;
line-height: 36px;
width: 100%;
padding-left: 70px;
}
.cart_bottom .cart_list .list .cart_cat:after {
content: "";
position: absolute;
width: 500px;
height: 1px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(90deg, #e6e6e6 0%, #c8c8c8 13%, gray 45%, #cccccc 86%, #e6e6e6 100%);
top: 36px;
opacity: 0.6;
}
.cart_bottom .cart_list .list .cart_cat div {
font-size: initial;
margin: 0;
font-size: 12px;
color: #4d4d4d;
width: 60px;
font-size: initial;
font-size: 12px;
font-weight: bold;
color: #333333;
width: 60px;
margin-right: 20px;
}
.cart_bottom .cart_list .list .cart_cat .desT {
width: 140px;
}
.cart_bottom .cart_list .list ul {
margin: 0;
padding: 0 40px;
height: 235px;
overflow-y: scroll;
}
.cart_bottom .cart_list .list ul li {
margin: 0;
padding-left: 30px;
list-style: none;
height: 60px;
font-size: 0;
line-height: 60px;
vertical-align: middle;
letter-spacing: -0.4px;
white-space: nowrap;
}
.cart_bottom .cart_list .list ul li:after {
content: "";
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #cccccc;
border-bottom: 1px solid;
width: 500px;
height: 1px;
top: 60px;
}
.cart_bottom .cart_list .list ul li div {
font-size: 12px;
display: inline-block;
width: 60px;
margin-right: 20px;
}
.cart_bottom .cart_list .list ul li .i_des {
font-size: 0;
width: 140px;
}
.cart_bottom .cart_list .list ul li .i_des .pimg {
width: 60px;
margin-right: 13px;
}
.cart_bottom .cart_list .list ul li .i_des .pimg img {
width: 100%;
top: 9px;
display: block;
}
.cart_bottom .cart_list .list ul li .i_des .i_date {
font-size: 5px;
position: absolute;
left: 72px;
top: 36px;
line-height: initial;
color: #c7b299;
}
.cart_bottom .cart_list .list ul li .i_price {
margin-right: 0;
}
.cart_bottom .cart_list .list ul li .i_remove:hover {
transform: scale(1.1);
top: 1px;
left: 3px;
cursor: pointer;
}
.cart_bottom .cart_list .list ul li .i_remove svg {
fill: #c7b299;
width: 15px;
height: 15px;
position: absolute;
top: -13px;
left: 4px;
}
.cart_bottom .cart_list .total {
height: 50px;
line-height: 50px;
vertical-align: middle;
}
.cart_bottom .cart_list .total div {
position: absolute;
display: inline-block;
font-size: 14px;
color: #333333;
font-weight: 600;
}
.cart_bottom .cart_list .total .totalT {
left: 405px;
}
.cart_bottom .cart_list .total .totalP {
left: 460px;
}
.cart_bottom .cart_list .checkout {
height: 77px;
background: #c7b299;
border-radius: 0 0 10px 10px;
}
.cart_bottom .cart_list .checkout:after {
content: "";
position: absolute;
width: 500px;
height: 1px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: linear-gradient(90deg, #e6e6e6 0%, #c8c8c8 13%, gray 45%, #cccccc 86%, #e6e6e6 100%);
top: -48px;
opacity: 0.6;
}
.cart_bottom .cart_list .checkout button {
width: 138px;
height: 31px;
border-radius: 50px;
border: none;
color: #f2f2f2;
background: #602935;
letter-spacing: 1.5px;
position: absolute;
transform: translateY(-50%);
top: 50%;
left: 430px;
cursor: pointer;
}
.cart_bottom .cart_list .checkout .cancel {
color: #602935;
background: none;
font-weight: bold;
border: 2px solid #602935;
left: 280px;
}
::-webkit-scrollbar {
width: 5px;
}
::-webkit-scrollbar-track {
background: #eee;
}
::-webkit-scrollbar-thumb {
background: #666;
}
.roomRec {
pointer-events: none;
width: 150px;
height: 150px;
position: absolute;
z-index: 6;
top: 0;
left: 0;
overflow: hidden;
z-index: 1;
border: 1px solid #666666;
display: none;
}
.roomRec .recbottom {
width: 1000px;
height: 500px;
background: rgba(242, 242, 242, 0.6);
position: absolute;
z-index: -1;
}
.roomRec img {
position: absolute;
z-index: -1;
}
.countScale {
animation: tobig 0.5s;
}
@keyframes tobig {
0% {
transform: scale(1);
}
50% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
.blur {
filter: blur(5px);
}
</style></head><body>
<div class="bottom">
<div class="white_bottom">
<div class="left_side">
<input class="mouseP" type="text"/>
<div class="top_sq"></div>
<div class="bottom_sq"></div>
<div class="shoe">
<div class="left_btn">❰</div>
<div class="shoe_img"><img class="imgR" src="https://github.com/Lockingdong/Shopping-Cart/blob/master/shoeR.png?raw=true"/><img class="imgW" src="https://github.com/Lockingdong/Shopping-Cart/blob/master/shoeW.png?raw=true"/></div>
<div class="right_btn">❱</div>
</div>
<div class="switch">
<div class="switch1 th_shoe"></div>
<div class="switch2"></div>
</div>
<div class="icon">
<div class="back">
<svg viewbox="0 2 50 50">
<circle cx="25.906" cy="27.496" r="19.121"></circle>
<polyline points="24.5,34.157 17.053,27.341 24.5,20.525 "></polyline>
<line x1="17.053" y1="27.341" x2="35.237" y2="27.468"></line>
</svg>
</div>
<div class="cart" id="cartIcon">
<svg viewbox="0 0 50 50">
<path d="M22.822,28.96"></path>
<polyline points="15.289,18.241 17.591,18.528 21.689,30 30.228,30 32.208,22.262 18.891,22.325 "></polyline>
<circle class="w" cx="28.472" cy="32.31" r="0.996"></circle>
<circle class="w" cx="23.257" cy="32.31" r="0.996"></circle>
<circle cx="24.804" cy="25.496" r="19.121"></circle>
</svg>
<div class="RTnumber"></div>
</div>
</div>
</div>
<div class="right_side">
<div class="info">
<div class="sname"> Skate Shoes
<div class="name">Roshe <b>Walk</b></div>
</div>
<div class="price">NT$ 8,700</div>
</div>
<div class="deco"> </div>
<div class="detail">
<div class="qua">
<div class="text">
<div class="word">Quantity: </div>
<div class="count">1</div>
</div>
<div class="counter">
<div class="sub">-</div>
<div class="num">1</div>
<div class="add">+</div>
</div>
</div>
<div class="color">
<div class="text">
<div class="word">Color:  </div>
<div class="this_color"></div>
</div>
<div class="color_group">
<div class="c1">Maroon</div>
<div class="c2">Ivory</div>
</div>
</div>
<div class="size">
<div class="text">
<div class="this_size">Size: </div>
<div class="size_num"></div>
</div>
<ul>
<li>7</li>
<li>7.5</li>
<li>8</li>
<li>8.5</li>
<li>9</li>
<li>9.5</li>
<li>10</li>
<li>10.5 </li>
</ul>
</div>
</div>
<button id="addTOCart">
<svg viewbox="0 0 50 50">
<path d="M22.822,28.96"></path>
<polyline points="15.289,18.241 17.591,18.528 21.689,30 30.228,30 32.208,22.262 18.891,22.325 "></polyline>
<circle class="w" cx="28.472" cy="32.31" r="0.996"></circle>
<circle class="w" cx="23.257" cy="32.31" r="0.996"></circle>
</svg>
<h1>Add to Cart</h1>
</button>
</div>
</div>
<div class="cart_bottom">
<div class="cart_list">
<div class="close_btn">✖</div>
<div class="title">
<div class="cart_icon">
<svg viewbox="0 0 50 50">
<path d="M22.822,28.96"></path>
<polyline points="15.289,18.241 17.591,18.528 21.689,30 30.228,30 32.208,22.262 18.891,22.325 "></polyline>
<circle class="w" cx="28.472" cy="32.31" r="0.996"></circle>
<circle class="w" cx="23.257" cy="32.31" r="0.996"></circle>
</svg>
</div>
<h2>Your Cart</h2>
</div>
<div class="list">
<div class="cart_cat">
<div class="desT">Description</div>
<div class="colorT">Color</div>
<div class="sizeT">size</div>
<div class="QTYT">QTY</div>
<div class="priceT">Price</div>
</div>
<ul></ul>
</div>
<div class="total">
<div class="totalT">Total:</div>
<div class="totalP">NT$ 21600</div>
</div>
<div class="checkout">
<button class="cancel">Cancel</button>
<button>Checkout</button>
</div>
</div>
</div>
</div>
<div class="roomRec">
<div class="recbottom"></div><img src=""/>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script >$('.cart_list').click(function(){
return false;
});
$('.close_btn, .cancel, .cart_bottom').click(function(){
$('.cart_bottom').css({'display': 'none'});
$('.white_bottom').removeClass('blur');
});
$('#cartIcon').click(function(){
$('.cart_bottom').css({'display': 'flex'});
$('.white_bottom').addClass('blur');
});
//----------add qty-----------
var qty = 1;
function AddandSub(obj, n){
$(obj).click(function(){
if(n==-1){
( qty <= 1 ) ? qty==1 : qty += n;
}else{
qty += n;
}
$('.num').text(qty);
$('.count').text(qty);
});
}
AddandSub('.add', 1)
AddandSub('.sub', -1)
//---------------select--------------------
function Select_AddClass(group, text_obj, classN){
for(i=0 ; i<$(group).length ; i++){if (window.CP.shouldStopExecution(1)){break;}
$(group).eq(i).click(function(){
$(group).removeClass(classN);
var text;
text = $(this).text();
$(text_obj).text(text);
$(this).addClass(classN);
$('.RTnumber').removeClass('countScale');
});
}
window.CP.exitedLoop(1);
}
//---------------selectColor--------------------
Select_AddClass('.color_group div', '.this_color', 'th')
//---------------selectSize--------------------
Select_AddClass('.size ul li', '.size_num', 'th_size')
//
var d = new Date();
var dd = d.getDate();
var mm = d.getMonth() + 1;
var yy = d.getFullYear();
var buyListJson = {
name: "myCart",
item: [
{
"src": "https://dl.dropbox.com/s/zj3p16de62wt8gv/shoeR.png?dl=0",
"i_name": "Roshe Walk",
"i_date": "2016-11-23",
"i_color": "Maroon",
"i_size": "8",
"i_QTY": "2",
"i_price": "17400"
},
{
"src": "https://dl.dropbox.com/s/shb10c7em9ja96v/shoeW.png?dl=0",
"i_name": "Roshe Walk",
"i_date": "2016-11-22",
"i_color": "Ivory",
"i_size": "8.5",
"i_QTY": "1",
"i_price": "8700"
}
]
}
var myshoelink = "https://dl.dropbox.com/s/ciozu8rpd40bex8/shoeBuyList.txt?dl=0";
$.ajax({
url: myshoelink,
success: function(data){
//alert();
console.log(JSON.parse(data));
buyListJson = JSON.parse(data);
createList();
}
});
var total = 0;
var redsrc = "https://dl.dropbox.com/s/zj3p16de62wt8gv/shoeR.png?dl=0";
var whitesrc = "https://dl.dropbox.com/s/shb10c7em9ja96v/shoeW.png?dl=0";
var cartlist = "<li> <div class='i_des'> <div class='pimg'><img src={{img}}/></div> <div class='i_name'>{{i_name}}</div> <div class='i_date'>{{i_date}}</div> </div> <div class='i_color'>{{i_color}}</div> <div class='i_size'>{{i_size}}</div> <div class='i_QTY'>{{i_QTY}}</div> <div class='i_price'>NT$ {{i_price}}</div> <div class='i_remove'> <svg viewbox='0 0 100 100'> <g> <rect x='22' y='22' width='56' height='9'></rect> <rect x='39' y='18' width='22' height='4'></rect> <path d='M26,35v48h48V35H26z M39,74h-4V39h4V74z M52,74h-4V39h4V74z M66,74h-5V39h5V74z'></path> </g> </svg> </div> </li>";
function createList(){
total = 0;
$('.list ul').html(''); //-----------clear OG list------------
for(i=0 ; i<buyListJson.item.length ; i++){if (window.CP.shouldStopExecution(2)){break;}
$('.list ul').append(cartlist.replace('{{img}',buyListJson.item[i].src)
.replace('{{i_name}}',buyListJson.item[i].i_name)
.replace('{{i_date}}',buyListJson.item[i].i_date)
.replace('{{i_color}}',buyListJson.item[i].i_color)
.replace('{{i_size}}',buyListJson.item[i].i_size)
.replace('{{i_QTY}}',buyListJson.item[i].i_QTY)
.replace('{{i_price}}',buyListJson.item[i].i_price)
);
//-------------------add remove event-------------------------------
$('.i_remove').eq(i).attr("deleteIndex", i); //---加屬性
$('.i_remove').eq(i).click(function(){
$(this).parent().animate({'left': '-300','opacity': '0'}, 500);
console.log($(this).attr("deleteIndex"));
buyListJson.item.splice($(this).attr("deleteIndex"), 1);
//刪除陣列裡第this.deleteIndex個物件
setTimeout(function(){
createList();
}, 500);
});
//-----------------------total price----------------------------------
total += parseInt(buyListJson.item[i].i_price);
//console.log(total)
//console.log($('.totalP').text())
}
window.CP.exitedLoop(2);
$('.totalP').text("NT$ " + total);
//-----------------detect list amount------------------------
if(buyListJson.item.length == 0){
$('.RTnumber').css({'display': 'none'});
}else{
$('.RTnumber').css({'display': 'block'});
$('.RTnumber').text(buyListJson.item.length);
}
}
createList();
//-----------------------add to list----------------------------------------
$('#addTOCart').click(function(){
//--------------detect none color & size-----------------------
if(($('.this_color').text() == "") || ($('.size_num').text() == "")){
alert("Please select the quantity, color and size.");
return false;
}else{
//alert()
//---------------detect shoe color----------------------------
var thissrc = "";
if($('.this_color').text() == "Maroon"){
thissrc = redsrc;
}else{
thissrc = whitesrc;
}
//-----------------------------------------
buyListJson.item.unshift({
src: thissrc,
i_name: $('.info .name').text(),
i_date: yy + '-' + mm + '-' + dd,
i_color: $('.this_color').text(),
i_size: $('.size_num').text(),
i_QTY: $('.num').text(),
i_price: 8700 * parseInt($('.num').text())
});
$('.RTnumber').addClass('countScale');
createList();
}
//-------------removeClass--------------------------
$('.color_group div').removeClass('th');
$('.this_color').text("");
$('.size ul li').removeClass('th_size');
$('.size_num').text("");
//----------------set qty to 1-----------------------
qty = 1;
$('.count').text(qty);
$('.num').text(qty);
});
$('.imgW').css({'left': '-410px'});
$('.imgR').css({'left': '0px'});
//----------------------
function switch_click(obj, dis1, dis2 ,Img){
$(obj).click(function(){
$('.switch div').removeClass('th_shoe');
$(this).addClass('th_shoe')
$('.imgW').animate({'left': dis1}, 500);
$('.imgR').animate({'left': dis2}, 500);
roomImg(Img);
});
}
switch_click('.switch2', '0px', '410px', '.imgW');
switch_click('.switch1', '-410px', '0px', '.imgR');
function trigger(obj, obj2){
$(obj).click(function(){
$(obj2).trigger("click")
});
}
trigger('.right_btn', ".switch2");
trigger('.left_btn', ".switch1");
trigger('.c1', ".switch1");
trigger('.c2', ".switch2");
$( ".switch1" ).trigger( "click" );
//----------------image room--------------------
function roomImg(obj){
$('.roomRec img').css({'width': parseInt($('.imgR').css('width'))*3 + 'px'});
//放大原圖3倍
$('.shoe_img img, .roomRec').mousemove(function(ev){
var scrollLeft = document.body.scrollLeft || document.documentElement.scrollLeft;
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
//console.log(scrollTop)
$('.roomRec').css({"display": "block"});
var oEvent = ev || event;
var X = scrollLeft+oEvent.clientX;
var Y = scrollTop+oEvent.clientY;
var recH = parseInt($('.roomRec').css("height"));
//放大框的高
$('.roomRec img').attr("src", $(this).attr("src"));
//放大框內的IMG就是滑鼠指到的圖片
$('.roomRec').css({'left': X + 'px'});
$('.roomRec').css({'top': Y - recH + 'px'});
//讓放大框的高能在滑鼠的右上角
var imgL = Math.round( X - $(obj).offset().left);
var imgT = Math.round( Y - $(obj).offset().top);
//滑鼠在此張圖片上的位置
$('.mouseP').val(imgL + " , " + imgT);
$('.roomRec img').css({'left': ((-imgL) * 3 + 60)+ 'px'});
$('.roomRec img').css({'top': ((-imgT) * 3 + 60)+ 'px'});
//決定放大框內的圖片需要移動的位置
});
$('.shoe_img img').mouseleave(function(){
$('.roomRec').css({'display': 'none'});
});
}
//# sourceURL=pen.js
</script>
</body></html>
