cadot-info-basket
v1.0.40
Published
A javascript basket with cookies and create html
Downloads
21
Readme
A javascript basket with cookies and create html, install and use in 5 minutes!
Install
npm install --save cadot-info-basket
or
yarn add cadot-info-basket
Usage
const basket = require("cadot-info-basket");
basket.init();
for default config (described after)
Initialisation
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'...)
Integration
You are two parts
basket viewer
<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...
products
a button for add a product
<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
a button for remove
<button data-id="prod-1" class="remBasket">remove</button>
note:data-id is necessary
additions
you can make a clear basket
<button id="clearbasket">clear basket</button>
tips
if you want button without basket in a page, you can add div with <div id="basket"></div>
in the page buttons.
Complete example
<!-- ------------------------------- 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:
and licensed under: