Cinema Chapter of Online Seat Selection and Reservation Based on jquery

Let me show you the renderings first (source code download is supported):

When we buy tickets online (such as movie tickets, train tickets, etc.), we can choose our own seats. The developer will list the seats on the page, and users can clearly see the available seats and payment at a glance. This article takes movie theater ticket purchase as an example to show you how to select seats, process seat selection data, etc.

Here, I would like to introduce to you an online seat selection plug-in based on jQuery: jQuery Seat Charts, which supports custom seat types and prices, custom styles, and settings. The selected seat also supports keyboard control of the seat.

HTML

We assume that we enter the seat selection page of the movie "Interstellar". Please see the big picture above for the page layout. The left side of the page will be in #seat-map The seat layout of the theater is displayed. The #booking-details on the right displays movie-related information as well as the selected seat information #selected-seats and ticket amount information. After selecting the seat, confirm to the payment page to complete the payment.

屏幕影片：星际穿越3D时间：11月14日 21:00座位：票数：0总计：￥0

CSS

Use CSS to convert each element on the page Element beautification, especially the seat list layout, sets different styles for seat status (sold, optional seats, selected seats, etc.). We have sorted out the CSS code. Of course, you can modify any CSS according to the style of your project page. code.

.front{width: 300px;margin: 5px 32px 45px 32px;background-color: #f0f0f0; color: #666;text-align: center;padding: 3px;border-radius: 5px;} 
.booking-details {float: right;position: relative;width:200px;height: 450px; } 
.booking-details h3 {margin: 5px 5px 0 0;font-size: 16px;} 
.booking-details p{line-height:26px; font-size:16px; color:#999} 
.booking-details p span{color:#666} 
p.seatCharts-cell {color: #182C4E;height: 25px;width: 25px;line-height: 25px;margin: 3px;float: left;text-align: center;outline: none;font-size: 13px;} 
p.seatCharts-seat {color: #fff;cursor: pointer;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius: 5px;} 
p.seatCharts-row {height: 35px;} 
p.seatCharts-seat.available {background-color: #B9DEA0;} 
p.seatCharts-seat.focused {background-color: #76B474;border: none;} 
p.seatCharts-seat.selected {background-color: #E6CAC4;} 
p.seatCharts-seat.unavailable {background-color: #472B34;cursor: not-allowed;} 
p.seatCharts-container {border-right: 1px dotted #adadad;width: 400px;padding: 20px;float: left;} 
p.seatCharts-legend {padding-left: 0px;position: absolute;bottom: 16px;} 
ul.seatCharts-legendList {padding-left: 0px;} 
.seatCharts-legendItem{float:left; width:90px;margin-top: 10px;line-height: 2;} 
span.seatCharts-legendDescription {margin-left: 5px;line-height: 30px;} 
.checkout-button {display: block;width:80px; height:24px; line-height:20px;margin: 10px auto;border:1px solid #999;font-size: 14px; cursor:pointer} 
#selected-seats {max-height: 150px;overflow-y: auto;overflow-x: none;width: 200px;} 
#selected-seats li{float:left; width:72px; height:26px; line-height:26px; border:1px solid #d3d3d3; background:#f7f7f7; margin:6px; font-size:14px; font-weight:bold; text-align:center}

jQuery

jQuery

This example is based on jQuery, so don’t forget to load the jquery library and seat selection plug-in: jQuery Seat Charts first.

?
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.seat-charts.min.js"></script>

Next we define elements such as fare, seating area, number of tickets, total amount, and then call the plug-in: $('#seat-map').seatCharts() .

We first set up the seating map. The seats in a theater are fixed. In this example, the third row is the aisle, and the empty seats on the right side of the third and fourth rows are the exits. We have couple seats in the last row, so the layout of the screening room is as follows:

aaaaaaaaaa
aaaaaaaaaa
__________
aaaaaaaa__
aaaaaaaaaa
aaaaaaaaaa
aaaaaaaaaa
aaaaaaaaaa
aaaaaaaaaa
aa__aa __aa

We use the letter a to represent the seat and the symbol _ Empty means there are no seats. Of course, you can also use a, b, c, etc. to represent seats of different levels.

Then define the legend style. The key is to detect the click event click(): when the user clicks on the seat, if the seat status is available (available), then after clicking on the seat, the seat information (rows and rows) will be displayed. seat) is added to the selected seat list on the right, and the total number of votes and total amount are calculated; if the seat status is selected (selected), then after clicking the seat again, the selected seat information will be added from the seat on the right Delete it from the list and set the status to optional; if the seat status is sold (unavailable), the seat cannot be clicked. Finally, use the get() method to set the status of the sold seat number to sold.

The following is the detailed code:

var price = 80; //票价
$(document).ready(function() {
var $cart = $('#selected-seats'), //座位区
$counter = $('#counter'), //票数
$total = $('#total'); //总计金额
var sc = $('#seat-map').seatCharts({
map: [ //座位图
 'aaaaaaaaaa',
 'aaaaaaaaaa',
 '__________',
 'aaaaaaaa__',
 'aaaaaaaaaa',
 'aaaaaaaaaa',
 'aaaaaaaaaa',
 'aaaaaaaaaa',
 'aaaaaaaaaa',
 'aa__aa__aa'
],
legend : { //定义图例
 node : $('#legend'),
 items : [
 [ 'a', 'available', '可选座' ],
 [ 'a', 'unavailable', '已售出']
 ]  
},
click: function () { //点击事件
 if (this.status() == 'available') { //可选座
 $(&#39;<li>&#39;+(this.settings.row+1)+&#39;排&#39;+this.settings.label+&#39;座</li>&#39;)
  .attr(&#39;id&#39;, &#39;cart-item-&#39;+this.settings.id)
  .data(&#39;seatId&#39;, this.settings.id)
  .appendTo($cart);
 $counter.text(sc.find(&#39;selected&#39;).length+1);
 $total.text(recalculateTotal(sc)+price);
 return &#39;selected&#39;;
 } else if (this.status() == &#39;selected&#39;) { //已选中
 //更新数量
 $counter.text(sc.find(&#39;selected&#39;).length-1);
 //更新总计
 $total.text(recalculateTotal(sc)-price);
 //删除已预订座位
 $(&#39;#cart-item-&#39;+this.settings.id).remove();
 //可选座
 return &#39;available&#39;;
 } else if (this.status() == &#39;unavailable&#39;) { //已售出
 return &#39;unavailable&#39;;
 } else {
 return this.style();
 }
}
});
//已售出的座位
sc.get([&#39;1_2&#39;, &#39;4_4&#39;,&#39;4_5&#39;,&#39;6_6&#39;,&#39;6_7&#39;,&#39;8_5&#39;,&#39;8_6&#39;,&#39;8_7&#39;,&#39;8_8&#39;, &#39;10_1&#39;, &#39;10_2&#39;]).status(&#39;unavailable&#39;);
});
//计算总金额
function recalculateTotal(sc) {
var total = 0;
sc.find(&#39;selected&#39;).each(function () {
total += price;
});
return total;
}

The above code uses jquery to implement online seat selection and reservation for theaters. I hope you like it!