JWT Cart is a lightweight library that provides cart for shopping or just storing your own cart-items
- Store all items in local storage
- Add/remove items callbacks
- Get JWT token with decoded cart items
- Run the below command to add jwt-cart to your exisitng or new project.
npm install --save jwt-cart
or
yarn add jwt-cart -S
- Import jwt-cart into your module to start using it.
import JwtCart from 'jwt-cart'
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/jwt-cart"></script>
Files are delivered via the CDN service provided by jsdeliver
- Add form to items
<!-- Add item form -->
<form method="post" class="jwt-cart-item">
<input type="hidden" name="id" value="{{ product.id }}"> <!-- This input is required! -->
<input type="hidden" name="count" value="1">
<button type="submit">Add item</button>
</form>
- Setup Cart
const onItemAdded = (form, item, items) => {
// isInit is true
// your code
// EXAMPLE: form.getElementsByTagName('button')[0].innerHTML = 'Remove product';
}
const onItemRemoved = (form, item, items) => {
// your code
// EXAMPLE: form.getElementsByTagName('button')[0].innerHTML = 'Add product';
}
const onBind = (form, item, items) => {
// Call when item added during bind bindItems (page inizialized)
// your code
// EXAMPLE: form.getElementsByTagName('button')[0].innerHTML = 'Remove product';
}
const onChange = (items) => {
// Call when local store was mutated
}
const jwtCart = new JwtCart('my-cart-key');
jwtCart.onAdd(onItemAdded);
jwtCart.onRemove(onItemRemoved);
jwtCart.onBind(onBind);
jwtCart.onChange(onChange);
// This method scan page and bind forms with class "jwt-cart-item"
jwtCart.bindItems();
jwtCart.clearAll()
- remove all itemsjwtCart.addItem(item)
- add item to cart, item is required an object which contains id and optional fieldsjwtCart.removeItem(item)
- remove item from cart, item is required an object which contains id
MIT © Hastes