Press "Enter" to skip to content

Full-Featured Seating Layouts – Like Movie, Flight and Seat Selection | seatLayout.js

seatLayout.js is a jQuery extension, you need to have JQ already installed or add a reference to your page. This plugin helps developers create flexible and customizable seating layouts that can be helpful in a movie, flight, and seat booking selection.

How to make use of it:

1. Add the stylesheet seatLayout.css and JavaScript seatLayout.js to the webpage.

<link rel="stylesheet" href="/path/to/seatLayout.css">
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/seatLayout.min.js"></script>

2. Create a container to hold the seating layout.

<div class="example"></div>

3. Define your information for the seating layout utilizing JSON or JavaScript.

// layoutData.json
{
  "product_id": 12345,
  "freeSeating": false,
  "tempTransId": "12345",
  "seatLayout": {
    "colAreas": {
      "Count": 2,
      "intMaxSeatId": 43,
      "intMinSeatId": 2,
      "objArea": [{
          "AreaDesc": "EXECUTIVE",
          "AreaCode": "0000000003",
          "AreaNum": "1",
          "HasCurrentOrder": true,
          "objRow": [{
              "GridRowId": 1,
              "PhyRowId": "A",
              "objSeat": [{
                  "GridSeatNum": 1,
                  "SeatStatus": "0",
                  "seatNumber": 1
                },
                // ...
              ]
            },
            // ...
          ]
        },
        {
          "AreaDesc": "SPECIAL",
          "AreaCode": "0000000002",
          "AreaNum": "2",
          "HasCurrentOrder": true,
          "objRow": [{
              "GridRowId": 1,
              "PhyRowId": "N",
              "objSeat": [{
                  "GridSeatNum": 3,
                  "SeatStatus": "0",
                  "seatNumber": 1
                },
                // ...
              ]
            },
          ]
        }
      ]
    }
  },
  "areas": [],
  "groupedSeats": []
}

4. Initialize the plugin on the container and populate the seating layout with the info you provide.

$('.selectMove').seatLayout({
  data: JSON.parse(seatData)
});

5. Specify the variety of seats allowed to select at a time.

$('.selectMove').seatLayout({
  data: JSON.parse(seatData),
  numberOfSeat: 2
});

6. Determine whether or not or to not present the motion buttons.

$('.selectMove').seatLayout({
  data: JSON.parse(seatData),
  showActionButtons: false
});

7. Apply further CSS classes to the seating layout.

$('.selectMove').seatLayout({
  data: JSON.parse(seatData),
  classes : {
    doneBtn : '',
    cancelBtn : '',
    seat:'',
    row:'',
    area:'',
    screen:''
  }
});

8. Available callback capabilities.

$('.selectMove').seatLayout({
  callOnSeatRender: function (Obj) {
    //modify seat object if require and return it;
    return Obj;
  },
  callOnSeatSelect: function (_event, _data, _selected, _element) {
    console.log(_event);
    console.log(_data);
    console.log(_selected);
  },
  selectionDone: function (_array) {
    console.log(_array);
  },
  cancel: function () {
    return false;
  }
});

Create Flexible Seating Layouts, Seat Layout Plugin/Github


See Demo And Download

Official Website(SachinKurkute): Click Here

This superior jQuery/javascript plugin is developed by SachinKurkute. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.