Skip to content

Instantly share code, notes, and snippets.

@XEKAOFF

XEKAOFF/index.pug

Created May 19, 2019 16:21
Show Gist options
  • Save XEKAOFF/2a6a69422e06680d6828f329d407a9aa to your computer and use it in GitHub Desktop.
Save XEKAOFF/2a6a69422e06680d6828f329d407a9aa to your computer and use it in GitHub Desktop.
Download ZIP
vue shopping cart
Raw
index.pug
#vue
header
.wr.flex.topLine
h1 Ninja shop
#cart
span {{count}} / {{total}} ₽
//0 / 00 ₽
svg(xmlns='http://www.w3.org/2000/svg', width='32px', height='32px', viewbox='0 0 512 512')
polygon(points='447.992,336 181.555,336 69.539,80 0.008,80 0.008,48 90.477,48 202.492,304 447.992,304')
path(d='M287.992,416c0,26.5-21.5,48-48,48s-48-21.5-48-48s21.5-48,48-48S287.992,389.5,287.992,416z')
path(d='M447.992,416c0,26.5-21.5,48-48,48s-48-21.5-48-48s21.5-48,48-48S447.992,389.5,447.992,416z')
polygon(points='499.18,144 511.992,112 160.008,112 172.805,144')
polygon(points='211.195,240 223.992,272 447.992,272 460.805,240')
polygon(points='486.398,176 185.602,176 198.398,208 473.586,208')
ul.inCart
h2(v-if="!cart.length") Empty
li(v-for="item,i in cart")
img(:src="'//zupra.github.io/test/img/shop/'+item.id+'.jpg'")
p <b>{{ item.qty }}</b> &times; {{ item.name }} {{ item.price }} ₽
button(@click="item.qty += 1", ) +1
button(v-if="item.qty > 1", @click="(item.qty > 1) ? item.qty -= 1 : ''") -1
button(@click="del(i, item.id)") X
.product-List.wr.flex_wr
.product-item(v-for='item in products', @click="off_focus($event)")
img(:src="'//zupra.github.io/test/img/shop/'+item.id+'.jpg'")
svg.zoom(@click="focus($event)", xmlns='http://www.w3.org/2000/svg', width='24', height='24', viewbox='0 0 24 24', fill='none', stroke='#000', stroke-width='2', stroke-linecap='round', stroke-linejoin='round')
circle(cx='11', cy='11', r='8')
line(x1='21', y1='21', x2='16.65', y2='16.65')
line(x1='11', y1='8', x2='11', y2='14')
line(x1='8', y1='11', x2='14', y2='11')
.item-buy(v-show="1")
p
i 99 ₽
b(v-for="size in ['S','M','L','XL']") {{size}}
button.btn(@click='addToCart(item)', :disabled='item.qty', v-text="!item.qty ? 'Add to Cart': 'In cart'")
Raw
script.js
let products = [
{
id: 1,
name: "black Ninja",
price: 99
},
{
id: 2,
name: "Happy Ninja",
price: 99
},
{
id: 3,
name: "Hoodie Ninja",
price: 99
},
{
id: 4,
name: "Hoodie black",
price: 99
},
{
id: 5,
name: "Hoodie pink",
price: 99
},
{
id: 6,
name: "Patient Ninja",
price: 99
},
{
id: 7,
name: "WTF Ninja",
price: 99
},
{
id: 8,
name: "WTF-2 Ninja",
price: 99
},
{
id: 9,
name: "Red WOO",
price: 99
},
{
id: 10,
name: "Blue WOO",
price: 99
},
{
id: 11,
name: "Simple Ninja",
price: 99
},
{
id: 12,
name: "Red Ninja",
price: 99
}
];
var vm = new Vue({
el: "#vue",
data: {
products: products,
//isFocus: false,
cart: []
},
computed: {
count: function() {
return this.cart.reduce(function(n, cart) {
return cart.qty + n;
}, 0);
},
total: function() {
return this.cart
.reduce(function(n, cart) {
return cart.price * cart.qty + n;
}, 0).toFixed();
}
},
methods: {
focus(e) {
e.currentTarget.parentElement.classList.toggle("focus");
},
off_focus(e) {
e.target.classList.remove("focus");
},
addToCart(product) {
this.$set(product, "qty", +1);
this.cart.push(product);
},
unblock(id) {
for (var i = 0; i < this.products.length; i++) {
if (this.products[i].id === id) {
delete this.products[i].qty;
break;
}
}
},
del(index, id) {
this.cart.splice(index, 1);
this.unblock(id);
}
}
});
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.js"></script>
Raw
style.stylus
*
margin 0
padding 0
box-sizing border-box
$wrap = 1220px
$finger = 50px
$blue = #5d9cec
header
position fixed
z-index 10
width 100%
top 0
height $finger
overflow hidden
line-height $finger
box-shadow: 0 -5px 5px 5px rgba(0,0,0,0.3)
background rgba(#FFF, .8)
.topLine
padding-left 1em
justify-content space-between
#cart
color #FFF
padding 0 .5em
//text-align center
fill #FFF
min-width $finger
background $blue
cursor pointer
&:hover
.inCart
display block
.inCart
padding .5em .8em
line-height 1.6
box-shadow: 0 0 1em #747474;
list-style none
position fixed
margin-left -160px
width 260px
background #EFEFEF
color #000
display none
img
width 50px
float left
button
width 2.4em
height 2.4em
line-height 2.4em
border-radius 50%
background darkcyan
color #FFF
li
overflow auto
li + li
border-top 1px solid #CCC
//fix
p
padding-top 4px
span
padding-left .2em
svg
vertical-align middle
.wr
max-width $wrap
margin auto
.flex, .flex_wr
display flex
.flex_wr
flex-wrap wrap
justify-content center
body
padding-top 60px
color #666d70
font-family sans-serif
//.product-List
.product-item
position relative
margin 4px
flex: 1 1 20%;
@media (max-width: 900px)
flex: 1 1 180px;
@media (max-width: 500px)
flex: 1 0 130px;
img//285x356
display block
width 100%
&:hover .zoom
stroke $blue //#555
.zoom
cursor pointer
stroke #CCC
position absolute
bottom 0
right 0
transition transform .3s
&:hover
transform scale(1.4)
.focus
z-index 1
//border 1px solid #000
//box-shadow: 0 0 7px rgba(#000, .4)
&:after
background: rgba(#607d8b, .8) //(14,74,125,0.8) (#ffeb3b,0.1); //EEE
content: '';
cursor: pointer;
position: fixed;
left: 0;
top: 0;
z-index: -2;
width: 100%;
height: 100%;
.focus .item-buy
display block
.item-buy
text-align center
position absolute
z-index 1
top calc(100% + 8px)
//bottom -5em
width 100%
padding 1em
background #FFF
//box-shadow: 0 0 7px rgba(#000, .4)
display none
p
margin-bottom .5em
i
font-style normal
vertical-align: middle;
font-size 1.4em
line-height 1
b
cursor pointer
margin 0 .2em .4em
display inline-block
border 1px solid #EEE
padding .2em .4em
&:hover
border-color bisque
color #444
button
border 0
cursor pointer
outline none
.btn
padding .5em
width 100%
font-size inherit
color darkgray
background none
border 1px solid #CCC
transition all .3s
&:hover:not([disabled])
border-color $blue //#FFF
background $blue //darkcyan
border-radius 20px
color #FFF
&[disabled]
cursor default
background #E0E4CC + 50%
color #555
Raw
vue-shopping-cart.markdown
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment