Full-featured Seating Chart Plugin With jQuery - Seat Charts

Seat Charts is a powerful jQuery plugin which helps you render an fully accessible and configurable seating chart / seat map in the webpage.

Features:

• WAI-ARIA compliant.
• Custom seats, maps and legends.
• Booking details.
• Lots of API.

How to use it:

1. Add the jQuery Seat Charts plugin's JavaScript and stylesheet 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. Create the placeholder elements for the seat map.

<div id="seat-map">
  <div class="front-indicator">Front</div>
</div>

3. Create the placeholder 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 &raquo;</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 update 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;
}

4. All default options.

// requires jQuery UI
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   : {}

5. API methods.

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( )

Change log:

2016-12-29

• JS update

---

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