Filter seats

[cvgarciarea]

I need to filter seats by their properties (like category, section, whether it's accessible, etc) but so far the only way to achieve something "similar" was just setting objectWithoutPricingSelectable to false to my SeatsioSeatingChart and playing with the pricing property. It's a tedious way to do this and it actually doesn't work like I want to.

There is a minified version of my code:

import { useState } from "react";
import { SeatsioSeatingChart } from "@seatsio/seatsio-react";

const Seats = () => {
  const [pricing, setPricing] = useState([
    { category: "Outter", price: 0.3 },
    { category: "Inner", price: 0.4 },
    { category: "Gold", price: 2 },
    { category: "Silver", price: 1.6 },
    { category: "Black", price: 1.2 },
  ]);

  return (
    <>
      <div style={{ display: "flex", flex: 1 }} id="chart" />

      <SeatsioSeatingChart
        divId="chart"
        workspaceKey="key"
        event="event"
        pricing={pricing}
        priceFormatter={function (price) {
          return "eth " + price;
        }}
        region="sa"
        objectWithoutPricingSelectable={false}
      />
    </>
  );
};

export default Seats;

So... How could, for example, I enable to select seats only in the "Section A" and with the "Gold" category?

[mroloux]

Hi,

I'm afraid we don't provide a way to indicate which sections should be selectable. You can only control selectability on the category level, through

https://docs.seats.io/docs/renderer/availablecategories https://docs.seats.io/docs/renderer/config-unavailablecategories

Would that work for you?

If not, could you describe the flow your users are going through? Can they choose between categories AND sections?

[cvgarciarea]

Thank you @mroloux for the quick answer!

The main idea is to "join" different kinds of filters, for example, "I want a 'silver' seat and I want it in the B section", because, I don't know, a friend of mine told me this is what he bought in the last match and he was happy with it.

Those are the filters we are considering right now:

Using availableCategories I must define a different category for every single combination of selected filters (except for the price), so I must create a "Section-B-Silver" category, for example. It's actually not too hard to do, the problems are: 1) it's not scalable, it increments exponentially. 2) if I want to add a new "filter" (a new seat property, for example: 'this seat has X benefit') I must define it in the seats.io chart editor, add it to my code and add the logic to filter it, I mean, it's not reusable.

[mroloux]

Ok, that makes sense. Unfortunately we don't support that kind of advanced filtering at the moment.

I'll discuss internally and get back to you.

[mroloux]

Hi Cristian, we discussed, and we agree it would be nice to offer a JS API that allows filtering by category, section, price etc.

So we've added that to our TODO list. I can't give you a release date however - we're currently tackling features that have higher priority. But I'll make sure to let you know when start working on this.

For future support requests, our preferred channels are support@seats.io, or the chat button on our website. That way the whole team sees the conversation, and you'll maximise your chance of getting a fast answer 😉

Thanks for the suggestion, very interesting! Matti

[cvgarciarea]

Thanks for caring about my request!