Client Side Shopping Cart Manipulation Plugin – jQuery Cesta-Feira

File Size:13.06 KB
Views Total:402
Last Update:March 16, 2018
Publish Date:December 2, 2017
Official Website:Go to website
License:MIT

A lightweight but still useful jQuery plugin that adds an interactive shopping cart to the main web pages is known as Cesta-Feira. It allows the dynamic addition, removal, clearance and updating of the items on the side of the client. It is based on the HTML5 web storage API link.

How to use it:

1. Include jQuery library and the jQuery Cesta-Feira plugin’s script.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="cesta-feira.js"></script>

2. Include the jStorage library to enable the local storage feature across the browsers.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jStorage/0.4.12/jstorage.min.js"></script>

3. Example product page:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container"> <a class="navbar-brand" href="javascript:;">Cesta-Feira</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar<a href="https://www.jqueryshare.net/tags.php?/Responsive/">Responsive</a>" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item active"> <a class="nav-link" href="index.html">Home</a> </li>
        <li class="nav-item"> <a class="nav-link cart-item-count" href="cart.html" data-cesta-feira-items-count><span class="fa fa-shopping-cart"></span> Shopping Cart</a> </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container"> 
  
  <!-- Page Features -->
  <div class="row text-center">
    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card"> <img class="card-img-top" src="http://placehold.it/500x325?text=Product 1" alt="">
        <div class="card-body">
          <h4 class="card-title">Product 1</h4>
          <p class="card-text">Price: $23,02</p>
        </div>
        <div class="card-footer">
          <form action="" class="form" data-cesta-feira-form>
            <div class="form-group">
              <input type="number" min="1" value="1" class="form-control" name="quantity" data-cesta-feira-attribute placeholder="Quantity">
            </div>
            <div class="form-group">
              <select class="form-control" name="observations" data-cesta-feira-attribute required>
                <option value="">Number</option>
                <option value="38">38</option>
                <option value="40">40</option>
                <option value="42">42</option>
              </select>
            </div>
            <input type="hidden" value="Product 1" name="product_name" data-cesta-feira-attribute="">
            <input type="hidden" value="23.02" name="unity_price" data-cesta-feira-attribute>
            <input type="hidden" value="1" data-cesta-feira-item-id />
            <input type="hidden" value="shoe" name="item_type" data-cesta-feira-attribute>
            <input type="submit" class="btn btn-primary" value="Add to Cart"/>
          </form>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card"> <img class="card-img-top" src="http://placehold.it/500x325?text=Product 2" alt="">
        <div class="card-body">
          <h4 class="card-title">Product 2</h4>
          <p class="card-text">Price: $12,11</p>
        </div>
        <div class="card-footer">
          <form action="" class="form" data-cesta-feira-form>
            <div class="form-group">
              <input type="number" min="1" value="1" class="form-control" name="quantity" data-cesta-feira-attribute placeholder="Quantity">
            </div>
            <div class="form-group">
              <input type="text" class="form-control" name="observations" data-cesta-feira-attribute placeholder="Observations">
            </div>
            <input type="hidden" value="Product 2" name="product_name" data-cesta-feira-attribute="">
            <input type="hidden" value="12.11" name="unity_price" data-cesta-feira-attribute>
            <input type="hidden" value="other" name="item_type" data-cesta-feira-attribute>
            <input type="hidden" value="2" data-cesta-feira-item-id />
            <input type="submit" class="btn btn-primary" value="Add to Cart"/>
          </form>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card"> <img class="card-img-top" src="http://placehold.it/500x325?text=Product 3" alt="">
        <div class="card-body">
          <h4 class="card-title">Product 3</h4>
          <p class="card-text">Price: $24,08</p>
        </div>
        <div class="card-footer">
          <form action="" class="form" data-cesta-feira-form>
            <div class="form-group">
              <input type="number" min="1" value="1" class="form-control" name="quantity" data-cesta-feira-attribute placeholder="Quantity">
            </div>
            <div class="form-group">
              <select class="form-control" name="observations" data-cesta-feira-attribute required>
                <option value="">Color</option>
                <option value="Red">Red</option>
                <option value="Blue">Blue</option>
                <option value="Black">Black</option>
              </select>
            </div>
            <input type="hidden" value="Product 3" name="product_name" data-cesta-feira-attribute="">
            <input type="hidden" value="24.08" name="unity_price" data-cesta-feira-attribute>
            <input type="hidden" value="shirt" name="item_type" data-cesta-feira-attribute>
            <input type="hidden" value="3" data-cesta-feira-item-id />
            <input type="submit" class="btn btn-primary" value="Add to Cart"/>
          </form>
        </div>
      </div>
    </div>
    <div class="col-lg-3 col-md-6 mb-4">
      <div class="card"> <img class="card-img-top" src="http://placehold.it/500x325?text=Product 4" alt="">
        <div class="card-body">
          <h4 class="card-title">Product 4</h4>
          <p class="card-text">Price: $2,02</p>
        </div>
        <div class="card-footer">
          <form action="" class="form" data-cesta-feira-form>
            <div class="form-group">
              <input type="number" min="1" value="1" class="form-control" name="quantity" data-cesta-feira-attribute placeholder="Quantity">
            </div>
            <div class="form-group">
              <input type="text" class="form-control" name="observations" data-cesta-feira-attribute placeholder="Observations">
            </div>
            <input type="hidden" value="Product 4" name="product_name" data-cesta-feira-attribute>
            <input type="hidden" value="2.02" name="unity_price" data-cesta-feira-attribute>
            <input type="hidden" value="other" name="item_type" data-cesta-feira-attribute>
            <input type="hidden" value="4" data-cesta-feira-item-id />
            <input type="submit" class="btn btn-primary" value="Add to Cart"/>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

4. Example cart page:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
  <div class="container"> <a class="navbar-brand" href="javascript:;">Cesta-Feira</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
                aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item"> <a class="nav-link" href="index.html">Home</a> </li>
        <li class="nav-item active"> <a class="nav-link cart-item-count" href="cart.html" data-cesta-feira-items-count><span
                            class="fa fa-shopping-cart"></span> Shopping Cart</a> </li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <div class="row">
    <div class="col-sm-12 col-md-10 col-md-offset-1">
      <table class="table table-hover">
        <thead>
          <tr>
            <th>Product</th>
            <th>Quantity</th>
            <th class="text-center">Price</th>
            <th class="text-center">Total</th>
            <th> </th>
          </tr>
        </thead>
        <tbody id="cart-items">
        </tbody>
        <tfoot>
          <tr>
            <td><a href="javascript:;" class="btn btn-danger" data-cesta-feira-clear-basket>Clear Cart</a></td>
            <td>  </td>
            <td>Total</td>
            <td class="text-right" id="total-value"><strong>$0</strong></td>
            <td>  </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</div>

Done 🙂