HTML5 E-commerce Shopping Cart Plugin For jQuery - Shop.js

The Shop.js jQuery plugin allows you to easily create a dynamic, interactive shopping cart for your e-commerce website.

Key features:

• Check form validation.
• Handles the checkout form by adding a validation routine and saving user's info into the session storage.
• Custom Paypal payment form.
• Number formatting.
• Custom shipping rates calculation

How to use it:

1. Add jQuery library and the jQuery shop.js script to the product, cart, order and checkout pages.

<script src="jquery.min.js"></script>
<script src="jquery.shop.js"></script>

2. The product page.

<div id="products">
  <ul>
    <li>
      <div class="product-image">
        <img src="images/wine1.jpg" alt="" />
      </div>
      <div class="product-description" data-name="Wine #1" data-price="5">
        <h3 class="product-name">Wine #1</h3>
        <p class="product-price">&euro; 5</p>
        <form class="add-to-cart" action="cart.html" method="post">
          <div>
            <label for="qty-1">Quantity</label>
            <input type="text" name="qty-1" id="qty-1" class="qty" value="1" />
          </div>
          <p><input type="submit" value="Add to cart" class="btn" /></p>
        </form>
      </div>
    </li>
    
    <li>
      <div class="product-image">
        <img src="images/wine2.jpg" alt="" />
      </div>
      <div class="product-description" data-name="Wine #2" data-price="8">
        <h3 class="product-name">Wine #2</h3>
        <p class="product-price">&euro; 8</p>
        <form class="add-to-cart" action="cart.html" method="post">
          <div>
            <label for="qty-2">Quantity</label>
            <input type="text" name="qty-2" id="qty-2" class="qty" value="1" />
          </div>
          <p><input type="submit" value="Add to cart" class="btn" /></p>
        </form>
      </div>
    </li>
    
    <li>
      <div class="product-image">
        <img src="images/wine3.jpg" alt="" />
      </div>
      <div class="product-description" data-name="Wine #3" data-price="11">
        <h3 class="product-name">Wine #3</h3>
        <p class="product-price">&euro; 11</p>
        <form class="add-to-cart" action="cart.html" method="post">
          <div>
            <label for="qty-3">Quantity</label>
            <input type="text" name="qty-3" id="qty-3" class="qty" value="1" />
          </div>
          <p><input type="submit" value="Add to cart" class="btn" /></p>
        </form>
      </div>
    </li>

  </ul>
</div>

3. The cart page.

<form id="shopping-cart" action="cart.html" method="post">
  <table class="shopping-cart">
    <thead>
    <tr>
      <th scope="col">Item</th>
      <th scope="col">Qty</th>
      <th scope="col" colspan="2">Price</th>
    </tr>
    </thead>
    <tbody>
    
    </tbody>
  </table>
  <p id="sub-total">
    <strong>Sub Total</strong>: <span id="stotal"></span>
  </p>
  <ul id="shopping-cart-actions">
    <li>
      <input type="submit" name="update" id="update-cart" class="btn" value="Update Cart" />
    </li>
    <li>
      <input type="submit" name="delete" id="empty-cart" class="btn" value="Empty Cart" />
    </li>
    <li>
      <a href="index.html" class="btn">Continue Shopping</a>
    </li>
    <li>
      <a href="checkout.html" class="btn">Go To Checkout</a>
    </li>
  </ul>
</form>

4. The checkout page.

<div id="content">
  <h1>Checkout</h1>
    <table id="checkout-cart" class="shopping-cart">
      <thead>
      <tr>
        <th scope="col">Item</th>
        <th scope="col">Qty</th>
        <th scope="col">Price</th>
      </tr>
      </thead>
      <tbody>
      
      </tbody>
    </table>
   <div id="pricing">
    
    <p id="shipping">
      <strong>Shipping</strong>: <span id="sshipping"></span>
    </p>
    
    <p id="sub-total">
      <strong>Total</strong>: <span id="stotal"></span>
    </p>
   </div>
   
   <form action="order.html" method="post" id="checkout-order-form">
    <h2>Your Details</h2>
    
    <fieldset id="fieldset-billing">
      <legend>Billing</legend>
      <div>
        <label for="name">Name</label>
        <input type="text" name="name" id="name" data-type="string" data-message="This field cannot be empty" />
      </div>
      <div>
        <label for="email">Email</label>
        <input type="text" name="email" id="email" data-type="expression" data-message="Not a valid email address" />
      </div>
      <div>
        <label for="city">City</label>
        <input type="text" name="city" id="city" data-type="string" data-message="This field cannot be empty" />
      </div>
      <div>
        <label for="address">Address</label>
        <input type="text" name="address" id="address" data-type="string" data-message="This field cannot be empty" />
      </div>
      <div>
        <label for="zip">ZIP Code</label>
        <input type="text" name="zip" id="zip" data-type="string" data-message="This field cannot be empty" />
      </div>
      <div>
        <label for="country">Country</label>
        <select name="country" id="country" data-type="string" data-message="This field cannot be empty">
          <option value="">Select</option>
          <option value="US">USA</option>
          <option value="IT">Italy</option>
        </select>
      </div>
    </fieldset>
    
    <div id="shipping-same">Same as Billing <input type="checkbox" id="same-as-billing" value=""/></div>
    
    <fieldset id="fieldset-shipping">
      
      <legend>Shipping</legend>
      
      <div>
        <label for="sname">Name</label>
        <input type="text" name="sname" id="sname" data-type="string" data-message="This field cannot be empty" />
      </div>
      <div>
        <label for="semail">Email</label>
        <input type="text" name="semail" id="semail" data-type="expression" data-message="Not a valid email address" />
      </div>
      <div>
        <label for="scity">City</label>
        <input type="text" name="scity" id="scity" data-type="string" data-message="This field cannot be empty" />
      </div>
      <div>
        <label for="saddress">Address</label>
        <input type="text" name="saddress" id="saddress" data-type="string" data-message="This field cannot be empty" />
      </div>
      <div>
        <label for="szip">ZIP Code</label>
        <input type="text" name="szip" id="szip" data-type="string" data-message="This field cannot be empty" />
      </div>
      <div>
        <label for="scountry">Country</label>
        <select name="scountry" id="scountry" data-type="string" data-message="This field cannot be empty">
          <option value="">Select</option>
          <option value="US">USA</option>
          <option value="IT">Italy</option>
        </select>
      </div>
    </fieldset>
    
    <p><input type="submit" id="submit-order" value="Submit" class="btn" /></p>
   
   </form>
</div>

5. The order page.

<div id="content">
  <h1>Your Order</h1>
  <table id="checkout-cart" class="shopping-cart">
    <thead>
      <tr>
        <th scope="col">Item</th>
        <th scope="col">Qty</th>
        <th scope="col">Price</th>
      </tr>
    </thead>
    <tbody>
    </tbody>
  </table>
  <div id="pricing">
    <p id="shipping"> <strong>Shipping</strong>: <span id="sshipping"></span> </p>
    <p id="sub-total"> <strong>Total</strong>: <span id="stotal"></span> </p>
  </div>
  <div id="user-details">
    <h2>Your Data</h2>
    <div id="user-details-content"></div>
  </div>
  <form id="paypal-form" action="" method="post">
    <input type="hidden" name="cmd" value="_cart" />
    <input type="hidden" name="upload" value="1" />
    <input type="hidden" name="business" value="" />
    <input type="hidden" name="currency_code" value="" />
    <input type="submit" id="paypal-btn" class="btn" value="Pay with PayPal" />
  </form>
</div>

6. Config the shopping card by override the default values in the JavaScript as these.

// HTML entity of the currency to be displayed in the layout
this.currency = "€"; 

// Currency symbol as textual string
this.currencyString = "€"; 

// PayPal's currency code
this.paypalCurrency = "EUR"; 

// Your Business PayPal's account email address
this.paypalBusinessEmail = "[email protected]"; 

// The URL of the PayPal's form
this.paypalURL = "https://www.sandbox.paypal.com/cgi-bin/webscr"; 

---

This awesome jQuery plugin is developed by gabrieleromanato. For more Advanced Usages, please check the demo page or visit the official website.