0.3.5 • Published 3 years ago
wise-shopping-cart v0.3.5
\<wise-shopping-cart>
Responsive shopping cart by WiseHands
It contains:
- image
- name
- quantity
- price
- currency
- increase/decrease quantity buttons
- remove item from cart button
Desktop view
Mobile view
Viewing Demo
$ npm install
$ polymer serve
How to use
You can see usage in demo-wise-shopping-cart.js
Notes
Product images should have 1:1 ratio.
To initialize use this JSON to fill values:
<wise-shopping-cart currency-label="USD" cart-items="[[cartItems]]" basket-empty-label="Empty Shopping Cart" start-shopping-label="Start Shopping"></wise-shopping-cart>
[
{
"uuid": "8",
"name": "Google Pixel 4",
"imagePath": "demo1.jpg",
"quantity": 1,
"price": 799,
"additionList": [
{
"uuid": "401",
"title": "memory card",
"price": 25,
"quantity": 2,
"imagePath": "http://localhost:3334/public/product_images/402881ce7010f488017010f495ef000b//public/files/402881ce7010f488017010f495ef000b/9746a26d-ea5d-4bac-b1f4-6a77994ffded.jpg"
},
{
"uuid": "402",
"title": "headphone",
"price": 20,
"quantity": 1,
"imagePath": "http://localhost:3334/public/product_images/402881ce7010f488017010f495ef000b//public/files/402881ce7010f488017010f495ef000b/9746a26d-ea5d-4bac-b1f4-6a77994ffded.jpg"
}
]
},
{
"uuid": "16",
"name": "Apple iPhone 11 Pro",
"imagePath": "demo2.jpg",
"quantity": 1,
"price": 1199,
"additionList": []
}
]
There are events available:
increase-item-quantity
decrease-item-quantity
remove-item
open-product
document.addEventListener('remove-item', function (e) {
console.log("remove item clicked, add your handler to invoke api or change value in other storage", e.detail);
})
document.addEventListener('decrease-item-quantity', function (e) {
console.log("decrease item quantity clicked, add your handler to invoke api or change value in other storage", e.detail);
})
document.addEventListener('increase-item-quantity', function (e) {
console.log("increase item quantity clicked, add your handler to invoke api or change value in other storage", e.detail);
})
document.addEventListener('start-shopping', function (e) {
console.log("in empty basket, start shopping button was clicked", e.detail);
})
document.addEventListener('open-product', function (e) {
console.log("click on title product or image for open product page", e.detail);
})
0.3.5
3 years ago
0.3.4
3 years ago
0.3.3
3 years ago
0.3.2
3 years ago
0.3.1
3 years ago
0.3.0
4 years ago
0.2.9
4 years ago
0.2.8
4 years ago
0.2.7
4 years ago
0.2.6
4 years ago
0.2.3
4 years ago
0.2.5
4 years ago
0.2.4
4 years ago
0.2.2
4 years ago
0.2.1
4 years ago
0.2.0
4 years ago
0.1.9
4 years ago
0.1.8
4 years ago
0.1.7
4 years ago
0.1.6
4 years ago
0.1.5
4 years ago
0.1.4
4 years ago
0.1.3
4 years ago
0.1.2
4 years ago
0.1.1
4 years ago
0.1.0
4 years ago
0.0.10
4 years ago
0.0.9
4 years ago
0.0.8
4 years ago
0.0.7
4 years ago
0.0.6
4 years ago
0.0.3
4 years ago
0.0.5
4 years ago
0.0.4
4 years ago
0.0.2
4 years ago
0.0.1
4 years ago