CampTix: Poor UX when one ticket type is sold out

[hlashbrooke]

CampTix allows WordCamp organisers to create multiple ticket types. The most common usage of this is to create the following two tikets:

1. A general admission ticket (no more than the local equivlent of $20/day).
2. A "micro-sponsor" ticket, which is generally around 3-5x more expensive than the regular ticket.

This is entirely correct, but the issue comes in when the general admission tickets are sold out and there are only micro-sponsor tickets remaining. This happened recently in the case of WordCamp Greenville and it creates a confusing UX for potential attendees. See these URLs to see the issue:

• Ticket sales page: ​https://2018.greenville.wordcamp.org/tickets/ (screenshot attached below because this page will be outdated soon)
• Tickets CPT in the dashboard: ​https://2018.greenville.wordcamp.org/wp-admin/edit.php?post_type=tix_ticket (only visible to organisers)

The issue here is that a potential attendee comes to the ticket sales page and only sees the micro-sponor ticket available, then thinks that the tickets for the WordCamp are $100 each (this did actually happen, so it's not a made-up scenario). If we had some kind of indicator that the other ticket type was sold out, then that could help to mitigate this issue.

I created a quick mockup for a potential solution here (attached below) that does the following if a ticket type is sold out:

1. Does not remove the ticket type from the table.
2. Replaces the quantity select box with a 'Sold out' string.
3. Reduces the opacity of the row to 0.3.

There may be a better solution for this as this was a very quick mockup, so open to ideas here of course. Essentially I think we need to improve the UX so that it's clear what tickets are sold out to prevent confusion.

[hlashbrooke]

The current ticket sales page with the general admission ticket sold out.

[hlashbrooke]

A mockup of a potential solution for this issue.

[hlashbrooke]

If this solution is acceptable, then I'm happy to take ownership and work on it as it would actually be a pretty small patch in the end.

[iandunn]

Yeah, I agree that that is a problem, and I like your solution. Let's do it :)

[hlashbrooke]

Adds 'Sold out' string, CSS class and opacity

[hlashbrooke]

Filter to show sold out tickets

[hlashbrooke]

I uploaded 2 patch files - one is for CampTix itself (3493-camptix.diff) and it adds the following:

1. Logic to display a 'Sold out' string instead of the quantity select box.
2. A new tix-sold-out class to the tr.
3. CSS to make that class display with at 40% opacity.

The other patch (3493.1.diff) uses the camptix_hide_empty_tickets filter to display the table rows for sold out tickets.

All that together achieves the mockup I uploaded earlier.

[hlashbrooke]

Uncommenting necessary filter

[hlashbrooke]

Removing unneeded function

[hlashbrooke]

3493.2.diff is an updated patch that removes the now unneded hide_empty_tickets() function.

[iandunn]

Discussed in the bug scrub. Overall it looks good, thanks! A few minor changes that'd be helpful:

• Remove the opacity to avoid a11y concerns
• Remove add_action( 'init', __NAMESPACE__ . '\hide_empty_tickets' ); since the function was removed
• Escape translated strings

[dd32]

This ticket has been moved to GitHub ​https://github.com/WordPress/wordcamp.org/issues/573