A javascript basket with cookies and create html, install and use in 5 minutes!
npm install --save cadot-info-basket
or
yarn add cadot-info-basket
const basket = require("cadot-info-basket");basket.init();for default config (described after)
you can define parameter in init: -ButtonAddClass = class for add in basket -ButtonRemClass = class for remove in basket -IdnbrProducts = id for get number of products -ClassList = class of lists element, the first element is the base for create the others -IdtotalProducts = id for get price of tottal products -IdnbrTotalProducts = id for get total de category of product
example:
basket.init('classButton'...)
You are two parts
<div id="basket">
<h1>Basket</h1>
<p>Number of products in the basket <span id="nbrProducts"></span></p>
<p>Number of product type in the basket:<span id="nbrTotalProducts"></span></p>
<ul id="listProducts">
<li><span class="productName"></span><span class="productQuantity"></span><span class="productOpts"></span><span class="productPrice"></span></li>
</ul>
<p id="totalPriceProducts"></p>
</div>notes: -you can move the elements add text, icons...
<button class="addBasket" data-id="prod-1" data-name="Flour of corn" data-price="12.12" data-opts='{"¤delivered":"4 days","color":"green"}'>Flour</button>
note:
-data-id, data-name and data-price is necessary
-data-opts can set in basket a visible option (by the ¤ in first) and hidden option by other
<button data-id="prod-1" class="remBasket">remove</button>
note:data-id is necessary
you can make a clear basket
<button id="clearbasket">clear basket</button>
if you want button without basket in a page, you can add div with <div id="basket"></div> in the page buttons.
<!-- ------------------------------- basket -------------------------------- -->
<div id="basket">
<h1>Basket</h1>
<p>Number of products in the basket <span id="nbrProducts"></span></p>
<p>Number of product type in the basket:<span id="nbrTotalProducts"></span></p>
<ul id="listProducts">
<!-----template line for product -------->
<li><span class="productName"></span><span class="productQuantity"></span><span class="productOpts"></span><span class="productPrice"></span></li>
</ul>
<p id="totalPriceProducts"></p>
</div>
<!-- ------------------------------ products ------------------------------- -->
<h2>Products</h2>
<button id="clearbasket">clear basket</button>
<button class="addBasket" data-id="prod-1" data-name="Flour of corn" data-price="12.12" data-opts='{"¤delivered":"4 days","color":"green"}'>Flour</button>
<button data-id="prod-1" class="remBasket">remove</button>
<button class="addBasket" data-id="prod-2" data-name="honey best quality" data-price="3.33" data-opts='{"¤delivered":"Immediatly","color":"red"}'>honey</button>
<button data-id="prod-2" class="remBasket">remove</button>
<button data-id="prod-3" class="remBasket">remove</button>
</div>please give issues or Pull Request in github ;-)
Unless stated otherwise all works are:
- Copyright © 2021+ Cadot.info ltd
and licensed under:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent