@ignitesales/itemcart NPM

Item Cart

A simple javascript cart manager. Add / remove items to a cart with ease.

With item-cart you can:

Add elements (based on className) to a cart element (based on ID)
Easily remove elements

Installation

NPM:

npm install @ignitesales/item-cart

Usage

Markup for the cart is pretty simple. You need a element that holds the items (referred to as the shelf), and an element that will be the cart, where items will be copied to when added.

To indicate items that should already be in the cart upon rendering the page, add "item-active" to the elements className.

HTML:

<head>
    <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <link rel="stylesheet" type="text/css" href="/node_modules/@ignitesales/itemcart/dist/item-cart.css">
</head>
<body>

    ...
    <!-- Example Cart Markup -->
    <div id="shelf">
    <div class="itemCart-element">Item #1</div>
    <div class="itemCart-element">Item #2</div>
    <div class="itemCart-element item-active">Item #3</div>
    </div>
    <div id="cart"></div>
    ...
  
    <!-- Bottom of body -->
    <script src="/node_modules/@ignitesales/itemcart/dist/item-cart.js" ></script>
    <script>
    var itemCart = ItemCart({
        shelfId: "shelf",
        cartId: "cart",
        defaultAddBtn: true,
        defaultRemoveBtn: true
    });
    </script>
</body>

ES6:

import ItemCart from '@ignitesales/item-cart'

const itemCart = ItemCart({
    shelfId: "shelf",
    cartId: "cart",
    defaultAddBtn: true,
    defaultRemoveBtn: true
})

Methods

ItemCart(options)

Create a new instance of 'ItemCart'.

options (Object) - Options to customize a new instance of ItemCart:
- sheflId | String | Required - ID of the element which holds items that can be added to cart
- cartId | String | Required - ID of the cart element where items will be added
- itemsClass | String | Optional - className for the elements that can be copied to cart. These elements should be children of the option.shelfId selector. Default: itemCart-element
- addItemClass | String | Optional - className for the button that will add elements to the cart. Element must be a child of the option.itemsClass selector. Default: itemCartAddBtn
- removeItemClass | String | Optional - className for the button that will remove elements from the cart. Element must be a child of the option.itemsClass selector. Default: itemCartRemoveBtn
- defaultAddBtn | Boolean | Optional - if true, a button for adding to the cart will be attached to all shelf items. Default: false
- defaultRemoveBtn | Boolean | Optional - if true, a button for remove from the cart will be attached to all shelf items. Default: false
- cartMap | Object (String : String) | Optional - a map of strings to strings. Left string value indicates the className of an item. The right string indicates the ID of a cart section. This can be used to move certain shelf items to a specific area of the cart (i.e. section off cart elements by their own category). Otherwise, new items added to the cart will be appended to the bottom of the cart.
- clearCartBtnId | String | Optional - ID for a button that will clear the cart.

const itemCart = ItemCart({
  shelfId: "shelf",
  cartId: "cart",
  defaultAddBtn: true,
  defaultRemoveBtn: true,
  cartMap: {
      "musicItem" :     "entertainment",
      "gameItem" :      "electronics",
      "foodItem" :      "entertainment",
      "movieItem" :     "entertainment",
  },
  clearCartBtnId: "clearCart"
});

ItemCart.render();

Re-renders the cart elements. Items in the shelf that have "item-active" className will automatically be added to the cart during the render.

itemCart.render();

License

cart basket item simple

5 years ago

5 years ago

5 years ago