https://github.com/wisehands/genericshoppingcart
Responsive Generic Shopping Cart
https://github.com/wisehands/genericshoppingcart
es6 javascript polymer polymer-3 polymer-cli webcomponent webcomponents
Last synced: 4 months ago
JSON representation
Responsive Generic Shopping Cart
- Host: GitHub
- URL: https://github.com/wisehands/genericshoppingcart
- Owner: WiseHands
- License: gpl-3.0
- Created: 2019-12-09T17:02:17.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-12-30T19:19:21.000Z (over 3 years ago)
- Last Synced: 2025-10-02T18:57:38.986Z (8 months ago)
- Topics: es6, javascript, polymer, polymer-3, polymer-cli, webcomponent, webcomponents
- Language: JavaScript
- Homepage:
- Size: 523 KB
- Stars: 6
- Watchers: 2
- Forks: 2
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://www.webcomponents.org/element/wise-shopping-cart)
# \
Responsive shopping cart by [WiseHands](https://wisehands.me)
### 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:
```
[
{
"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);
})
```