Diacart
Diacart is a shopping cart based on localStorage. It provides a declarative interface that allows you to fully customize the cart.
Features
- Easy and fast integration into your frontend
- Simple customization of templates (based on lit-html)
- lit-html provides quick template redrawing (lit-html only ever updates the parts of templates that actually change - it doesn’t re-render the entire view.)
- Multi-tab sync
- Compatible with all major browsers
Installation
npm install diacart -S
Usage
Insert the container diacart html-code on the cart page:
Insert add to cart button to your products catalog:
Add two attributes to the button:
data-diacart-add-to-cart - Defines the function of the button.
data-diacart-item-json - Defines JSON with the following product properties:
- id - product ID
- name - product name
- price - product price as number
- image - product thumb as image link
- quantity (default: 1) - selected quantity of product
Escape quotes in JSON before inserting it into the data-diacart-item-json attribute.
Add to cart
Insert JS
;; // in case you want to change the default templates // All parameters are optional. You can omit the option parameter in Diacart, then the default options will be used.const diacart = name: "diacart" title: "Shopping cart" totalPriceText: "Total amount" totalQuantityText: "Total quantity" removeFromCartBtnText: "" emptyCartText: "Your shopping cart is empty" orderBtnText: "Checkout" clearBtnText: "Clear cart" currency: "$" groupBy: "id" // 'null', 'undefined' or false to not group itemHasQuantity: true // 'true' or 'false' itemHasPrice: true // 'true' or 'false' // selectors containerSelector: "[data-diacart-container]" // here will be rendered template miniContainerSelector: "[data-diacart-mini-container]" // here will be rendered miniTemplate totalPriceContainerSelector: "[data-diacart-total-price-container]" // here will be rendered totalPriceTemplate totalQuantityContainerSelector: "[data-diacart-total-quantity-container]" // here will be rendered totalQuantityTemplate addToCartBtnSelector: "[data-diacart-add-to-cart]" // the 'add' function will be attached to them removeFromCartBtnSelector: "[data-diacart-remove-from-cart]" // the 'remove' function will be attached to them quantityInputSelector: "[data-diacart-quantity-input]" orderBtnSelector: "[data-diacart-order]" // the 'order' function will be attached to them clearBtnSelector: "[data-diacart-clear]" // the 'clear' function will be attached to them // template rendering functions templateTagFunction: html // MUST specify these parameters if you want to override templates! templateRenderFunction: render // MUST specify these parameters if you want to override templates! // template functions { const options storage totalPrice = diacartObject; return html` `; } // cart template as a function { return html` `; } // cart item template as a function, used in 'template' function html`` // mini cart template as a function { const options totalPrice = diacartObject; return optionscurrency + " " || "" + ; } // total price template as a function { const totalQuantity = diacartObject; return ; } // total quantity template as a function; // events { console;} { console;} { console;} { console;} { console;} { console;} { console;} diacart; // will be called at every product addingdiacart; // will be called at every product updatingdiacart; // will be called at every storage updatingdiacart; // will be called at every removing product from cartdiacart; // will be called at every orderingdiacart; // will be called only once when clearing the cartdiacart; // will be called at every rerendering const productData = id: 46 name: "Aliquam vehicula dui purus (id46)" price: 1300 image: "https://picsum.photos/300/200?image=513";const cartItemId = diacart; // add product, triggers 'add' eventdiacart; // update product by id, triggers 'update' eventconsole; // check on whether a product exists on a specific querydiacart; // remove product by id, triggers 'remove' event console;diacart; // add product, triggers 'add' event diacart; // order cart, triggers 'order' eventdiacartclear; // clear cart, triggers 'clear' event diacart; // remove event listener