cadot-info-basket

A javascript basket with cookies and create html, install and use in 5 minutes!

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 ;-)

License

Unless stated otherwise all works are:

• Copyright © 2021+ Cadot.info ltd

and licensed under:

• MIT License

basket