1

Estoy haciendo un seleccionador de asientos usando la librería jquery seat charts (https://github.com/mateuszmarkowski/jQuery-Seat-Charts).

Necesito saber si hay alguna forma de definir unos asientos preseleccionados por defecto ya que éstos solo se pueden seleccionar haciendo click.

De momento he añadido esto al script:

    $(document).ready(function() {

    var sc = $('#seat-map').seatCharts({
        map: [
            'aaaaaaaaaaaa',
            'aaaaaaaaaaaa',
            'bbbbbbbbbb__',
            'bbbbbbbbbb__',
            'bbbbbbbbbbbb',
            'cccccccccccc'
        ],
        seats: {
            a: {
                price   : 99.99,
                classes : 'front-seat' //your custom CSS class
            }

        },
        click: function () {
            if (this.status() == 'available') {
                //do some stuff, i.e. add to the cart
                return 'selected';
            } else if (this.status() == 'selected') {
                //seat has been vacated
                return 'available';
            } else if (this.status() == 'unavailable') {
                //seat has been already booked
                return 'unavailable';
            } else {
                return this.style();
            }
        }
    });

    //Make all available 'c' seats unavailable
    sc.find('c.available').status('unavailable');

    /*
    Get seats with ids 2_6, 1_7 (more on ids later on),
    put them in a jQuery set and change some css
    */
    sc.get(['2_6', '1_7']).node().css({
        color: '#ffcfcf'
    });

    console.log('Seat 1_2 costs ' + sc.get('1_2').data().price + ' and is currently ' + sc.status('1_2'));

});
    var $cart = $('#selected-seats');//Lista de asientos seleccionados
    $('<li>Asiento número' + ' ' + $("#{{ fila }}_{{ columna }}").settings.label + ' <a href="#" class="cancel-cart-item">[cancelar]</a></li>')
        .attr('id', 'cart-item-'+$("#{{ fila }}_{{ columna }}").settings.id)
        .data('seatId', $("#{{ fila }}_{{ columna }}").settings.id)
        .appendTo($cart);
    $counter.text(sc.find('selected').length+1);

Pero no me funciona.

2 respuestas 2

0

En tu mismo código tienes la línea:

sc.find('c.available').status('unavailable');

Que lo que hace es poner todos los asientos de tipo c que estén disponibles como no disponibles. Para hacer lo que necesitas es modificar sólo un poco esa misma línea:

sc.find('c.available').status('selected');

Esto lo que hace es poner todos los asientos de tipo c disponibles y los selecciona.

Si necesitas pre seleccionar algún otro tipo de asiento, modifica la c por el tipo de asiento que necesites.

Para ser aún más específico podrías definir tu map así:

map: [
        'aaaaaapaaaaa',
        'aaaapaaaaaaa',
        'bpppbbbbbb__',
        'bpppbbbbbb__',
        'bbbbpppbbbbb',
        'cccccccppppp'
    ],

Dónde he creado un nuevo tipo de asiento p y luego:

sc.find('p.available').status('selected');

Todos los asientos de tipo p (he escogido p --> Preseleccionados) y los marca como seleccionados.

Y para que se añadan a la lista de asientos seleccionados:

 sc.find('selected').each(function () { $('<li>Asiento número' + ' ' + this.settings.label + ' <a href="#" class="cancel-cart-item">[cancelar]</a></li>')
    .attr('id', 'cart-item-'+this.settings.id)
    .data('seatId', this.settings.id)
    .appendTo($cart); 
//$counter.text(sc.find('selected').length+1); }); 
3
  • Muchas gracias, me ha servido mucho tu ejemplo, he tenido que añadir también esto, para que se añadan a la lista, sc.find('selected').each(function () { $('<li>Asiento número' + ' ' + this.settings.label + ' <a href="#" class="cancel-cart-item">[cancelar]</a></li>') .attr('id', 'cart-item-'+this.settings.id).data('seatId', this.settings.id).appendTo($cart); //$counter.text(sc.find('selected').length+1); });
    – user9099
    Commented el 22 jun. 2016 a las 10:21
  • @AlbertoMier Puedes editar mi respuesta para añadir lo que comentas y así dejarla 100% completa. Un saludo! Commented el 22 jun. 2016 a las 10:27
  • bueno el aporte de este post. estoy tratando de hacer un proyecto y usar este plugin pero necesito que solo permita seleccionar uno solo, y en caso de seleccionar otro se desastive el anterior y se active el nuevo. Commented el 6 jun. 2018 a las 20:05
0

Para seleccionar solamente un asiento y en caso de clickear un segundo, tercero, n asiento, que se de-seleccione el anterior, puedes declarar una variable global "_prev_seat" que contedrá el id del asiento seleccionado, luego en la función click:

          // Si no hay asiento seleccionado, paso, de lo contrario
          // lo de-selecciono.
          if(_prev_seat!=null){
            sc.status(_prev_seat,'available');
            sc.find(_prev_seat).status('available');
          }
          _prev_seat=this.settings.id;  

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.