peet86 / cart-localstorage Goto Github PK
View Code? Open in Web Editor NEWJavaScript Shopping Cart library on top of localStorage
Home Page: https://peet86.github.io/cart-localstorage/
License: MIT License
JavaScript Shopping Cart library on top of localStorage
Home Page: https://peet86.github.io/cart-localstorage/
License: MIT License
If i use the cartLS.quantity(id,1); or cartLS.quantity(id,-1); the quantity is going p.e. from 7 by default to 71 instead of 8
What is going wrong?
Adding negative quantity does not work
I need a function to get the count of cart items as they are being added to cart. Seems the library doesn't have it.
When using
const myproduct = {id: 3, name: "Vans", price: 75}
add(myproduct, 2);
ReferenceError: _typeof is not definedcart-localstorage.min.js:1:12
https://unpkg.com/[email protected]/dist/cart-localstorage.min.js:1
Imported in html as
<script src="https://unpkg.com/[email protected]/dist/cart-localstorage.min.js" type="text/javascript"></script>When I use the update()
is there a way to target nested objects?
For example, here is my line item object:
{
id: 4133
nonprofit: {
name: "Product 1",
message: "message for someone",
}
price: 10
quantity: 1
}
I wanted to use the update()
to change the message
within the nonprofit
object.
Right now the update()
only takes "field" key but how can I access that field within the nested object?
I tried doing this but it just add it as a key within the object update(4133, 'nonprofit.message', 10)
Thanks!
Hi,
Items do not seem to get added to the cart if the price is 0 / 0.00.
This makes it difficult / impossible to add 'Free' items to the cart.
Is this expected behaviour? How do I add free items to the cart?
Thanks,
Alex
I am loading the cart-localstorage.min.js on my own server and not via the CDN but i want to change the localstorage name __cart into __cart2. I did it in this file but i got an error 'cartLS is not defined'. Can you tell me what i am doing wrong?
I only changed the bold line:
var cartLS = (function (a) {
"use strict";
function b(a, b, c) {
return b in a ? Object.defineProperty(a, b, { value: c, enumerable: !0, configurable: !0, writable: !0 }) : (a[b] = c), a;
}
function c(a, b) {
var c = Object.keys(a);
if (Object.getOwnPropertySymbols) {
var d = Object.getOwnPropertySymbols(a);
b &&
(d = d.filter(function (b) {
return Object.getOwnPropertyDescriptor(a, b).enumerable;
})),
c.push.apply(c, d);
}
return c;
}
function d(a) {
for (var b, d = 1; d < arguments.length; d++)
(b = null == arguments[d] ? {} : arguments[d]),
d % 2
? c(b, !0).forEach(function (c) {
f(a, c, b[c]);
})
: Object.getOwnPropertyDescriptors
? Object.defineProperties(a, Object.getOwnPropertyDescriptors(b))
: c(b).forEach(function (c) {
Object.defineProperty(a, c, Object.getOwnPropertyDescriptor(b, c));
});
return a;
}
var e = (function (a, b) {
return (b = { exports: {} }), a(b, b.exports), b.exports;
})(function (a) {
function b(a) {
return (
(b =
"function" == typeof Symbol && "symbol" == typeof Symbol.iterator
? function (a) {
return typeof a;
}
: function (a) {
return a && "function" == typeof Symbol && a.constructor === Symbol && a !== Symbol.prototype ? "symbol" : typeof a;
}),
b(a)
);
}
function c(d) {
return (
(a.exports =
"function" == typeof Symbol && "symbol" === b(Symbol.iterator)
? (c = function (a) {
return b(a);
})
: (c = function (a) {
return a && "function" == typeof Symbol && a.constructor === Symbol && a !== Symbol.prototype ? "symbol" : b(a);
})),
c(d)
);
}
a.exports = c;
}),
f = b,
g = "__cart2",
h = null,
i = function (a) {
h = a;
},
j = function (a) {
return JSON.parse(localStorage.getItem(a || g)) || [];
},
k = function (a, b) {
localStorage.setItem(b || g, JSON.stringify(a)), h && h(j(b || g));
},
l = function (a) {
localStorage.removeItem(a || g), h && h(j(a || g));
},
m = function (a) {
return j().find(function (b) {
return b.id === a;
});
},
n = function (a) {
return !!m(a);
},
o = function (a) {
return k(
j().filter(function (b) {
return b.id !== a;
})
);
},
p = function (a, b, c) {
return k(
j().map(function (e) {
return e.id === a ? d({}, e, f({}, b, c)) : e;
})
);
},
q = function (a) {
return a.id && a.price;
},
r = function (a) {
return s(a) ? a.price * a.quantity : 0;
},
s = function (a) {
return a && a.price && a.quantity;
},
t = function (a) {
return a && "function" == typeof a;
};
return (
(a.add = function (a, b) {
return q(a) ? (n(a.id) ? p(a.id, "quantity", m(a.id).quantity + (b || 1)) : k(j().concat(d({}, a, { quantity: b || 1 })))) : null;
}),
(a.destroy = function () {
return l();
}),
(a.exists = n),
(a.get = m),
(a.list = j),
(a.onChange = function (a) {
return t(a) ? i(a) : console.log(e(a));
}),
(a.quantity = function (a, b) {
return n(a) && 0 < m(a).quantity + b ? p(a, "quantity", m(a).quantity + b) : o(a);
}),
(a.remove = o),
(a.subtotal = r),
(a.total = function (a) {
return j().reduce(function (b, c) {
return t(a) ? a(b, c) : (b += r(c));
}, 0);
}),
(a.update = p),
a
);
})({}); //# sourceMappingURL=cart-localstorage.min.js.map
you can add a count() function that return the number of items that are in list()
this function is necessary since with "list().length" we only get the items, we must add the quantity of products
receiving the error "localStorage" is not available during server side rendering when building the app
Any ideas how to solve this problem ?
How can I read this code? Why it looks like a complete abracadabra?
Thank you for this library.
By default returns with the total price:
or you can pass a custom reducer function to have full control over the calculation.
Do you have an example of using a reducer function for total? I'm trying to implement applying "discount" functionality (ie: 10% off the subtotal) but not sure what the best way to implement that would be.
Thank you in advance if you are able to recommend anything.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.