Seat Booking Charts- jQuery Plugin

File Size:25.15 KB
Views Total:1,564
Last Update:March 16, 2018
Publish Date:December 1, 2017
Official Website:Go to website
License:MIT

jQuery Seat Charts are counted as the full-brown seat map library. It is a powerful jQuery plugin which helps one to render a fully accessible and configurable seating chart/eat map on the webpage. As it is an accessible map that holds the mouse and the keyboard events and that gives powerful selectors to control the map system.

How to use it:

  1. Add the jQuery Seat Charts plugin’s JS and Css into your jQuery page.
    <link rel="stylesheet" href="jquery.seat-charts.css">
    <script src="//code.jquery.com/jquery.min.js"></script> 
    <script src="jquery.seat-charts.js"></script>
  2.  Add elements for the seat map.
    <div id="seat-map">
      <div class="front-indicator">Front</div>
    </div>
  3.  Add elements for the booking details.
    <div class="booking-details">
      <h2>Booking Details</h2>
      <h3> Selected Seats (<span id="counter">0</span>):</h3>
      <ul id="selected-seats">
      </ul>
      Total: <b>$<span id="total">0</span></b>
      <button class="checkout-button">Checkout »</button>
      <div id="legend"></div>
    </div>
  4.  Setup the plugin as follows.
    var firstSeatLabel = 1;
    
      $(document).ready(function() {
        var $cart = $('#selected-seats'),
          $counter = $('#counter'),
          $total = $('#total'),
          sc = $('#seat-map').seatCharts({
          map: [
            'ff_ff',
            'ff_ff',
            'ee_ee',
            'ee_ee',
            'ee___',
            'ee_ee',
            'ee_ee',
            'ee_ee',
            'eeeee',
          ],
          seats: {
            f: {
              price   : 100,
              classes : 'first-class', //your custom CSS class
              category: 'First Class'
            },
            e: {
              price   : 40,
              classes : 'economy-class', //your custom CSS class
              category: 'Economy Class'
            }         
          
          },
          naming : {
            top : false,
            getLabel : function (character, row, column) {
              return firstSeatLabel++;
            },
          },
          legend : {
            node : $('#legend'),
              items : [
              [ 'f', 'available',   'First Class' ],
              [ 'e', 'available',   'Economy Class'],
              [ 'f', 'unavailable', 'Already Booked']
              ]         
          },
          click: function () {
            if (this.status() == 'available') {
              //let's create a new <li> which we'll add to the cart items
              $('<li>'+this.data().category+' Seat # '+this.settings.label+': <b>$'+this.data().price+'</b> <a href="#" class="cancel-cart-item">[cancel]</a></li>')
                .attr('id', 'cart-item-'+this.settings.id)
                .data('seatId', this.settings.id)
                .appendTo($cart);
              
              /*
               * Lets up<a href="https://www.jqueryshare.net/time-clock/">date</a> the counter and total
               *
               * .find function will not find the current seat, because it will change its stauts only after return
               * 'selected'. This is why we have to add 1 to the length and the current seat price to the total.
               */
              $counter.text(sc.find('selected').length+1);
              $total.text(recalculateTotal(sc)+this.data().price);
              
              return 'selected';
            } else if (this.status() == 'selected') {
              //update the counter
              $counter.text(sc.find('selected').length-1);
              //and total
              $total.text(recalculateTotal(sc)-this.data().price);
            
              //remove the item from our cart
              $('#cart-item-'+this.settings.id).remove();
            
              //seat has been vacated
              return 'available';
            } else if (this.status() == 'unavailable') {
              //seat has been already booked
              return 'unavailable';
            } else {
              return this.style();
            }
          }
        });
    
        //this will handle "[cancel]" link clicks
        $('#selected-seats').on('click', '.cancel-cart-item', function () {
          //let's just trigger Click event on the appropriate seat, so we don't have to repeat the logic here
          sc.get($(this).parents('li:first').data('seatId')).click();
        });
    
        //let's pretend some seats have already been booked
        sc.get(['1_2', '4_1', '7_1', '7_2']).status('unavailable');
    
    });
    
    function recalculateTotal(sc) {
      var total = 0;
    
      //basically find every selected seat and sum its price
      sc.find('selected').each(function () {
        total += this.data().price;
      });
      
      return total;
    }
  5.  All default plugin options.
    // requires <a href="https://www.jqueryshare.net/tags.php?/jQuery UI/">jQuery UI</a>
    animate : false, 
    
    // specify your own column and row labels as well as functions for generating seat ids and labels
    naming  : {
      top    : true,
      left   : true,
      getId  : function(character, row, column) {
        return row + '_' + column;
      },
      getLabel : function (character, row, column) {
        return column;
      }
      
    },
    
    // custom legend
    legend : {
      node   : null,
      items  : []
    },
    
    // click function
    click   : function() {
    
      if (this.status() == 'available') {
        return 'selected';
      } else if (this.status() == 'selected') {
        return 'available';
      } else {
        return this.style();
      }
      
    },
    
    // focus function
    focus  : function() {
    
      if (this.status() == 'available') {
        return 'focused';
      } else  {
        return this.style();
      }
    },
    
    // blur function
    blur   : function() {
      return this.status();
    },
    
    // seat map definition
    seats   : {}
  6.  Api method.
    var sc = $('#sc-container').seatCharts({
        //... 
    });
    
    //get 2_3 seat
    sc.get('2_3'); 
    
    //get 2_3 and 2_4 seats
    sc.get(['2_3', '2_4']); 
    
    //find all a seats
    sc.find('a'); 
    
    //find all unavailable seats
    sc.find('unavailable'); 
    
    //find all available a seats
    sc.find('a.available'); 
    
    //find all seats in the first row
    sc.find(/^1_[0-9]+/); 
    
    //find available seats within specified seat ids
    sc.get(['1_2', '1_3', '1_4']).find('available'); 
    
    //set status for one seat
    sc.status('2_15', 'unvailable'); 
    
    //set status for two seats
    sc.status(['2_15', '2_10'], 'unvailable'); 
    
    //make all unvailable seats available
    sc.find('unavailable').status('available'); 
    
    //make all unavailable seats disappear
    sc.find('unavailable').node().fadeOut('fast'); 
    
    //with callback
    sc.find('a.unavailable').each(function(seatId) {
        console.log(this.data()); //display seat data
    }); 
    
    //If status argument is set, it will be used as a new seat status, otherwise current status will be returned.
    sc.status( [status] )
    
    //Returns a reference to jQuery element.
    sc.node( )
    
    //Returns a reference to seat data.
    sc.data( )
    
    //Returns seat character.
    sc.char( )

    Done 🙂