cart.js

Cart.js is an easy to use shopping-cart system made in JavaScript (Jquery) only.

Using cart.js

There are a couple of steps you need to take before you can use cart.js. See this example below.

Add the scripts:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="{path-to-your-file}/Cart.js"></script>

This is what your buttons should look like for cart.js to work. Of course you can add your own classes as well

In your shop file:

The add button

<div class="in-shopping-cart" data-product-id="<?= $product["productId"]; ?>">In Cart</div>

In your cart file:

$productObject = new Product();
$cart = json_decode($_COOKIE["cart"]);

foreach ($cart as $cartItem){
  $product = $productObject->getProductByID($cartItem->productId);

The remove button:

  <div class="out-of-shopping-cart" data-product-id="<?= $product["productId"]; ?>">Remove</div>

The update inputField:

  <input type="number" value="<?= $cartItem->amount ?>" onchange="updateCart(<?= $cartItem->productId ?>, this.value)">

In this example we use php. You can use any language you want as long as you

• give "data-product-id={id}" the id of the product

• add the classes from this example

• have a method that can get a product by id: $productObject->getProductByID({id})