CampTix: Poor UX when one ticket type is sold out

[ghost]

Imported from https://meta.trac.wordpress.org/ticket/3493 Created by @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.

[ghost]

Comment by @hlashbrooke:

• current.png added

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

[ghost]

Comment by @hlashbrooke:

• mockup.png added

A mockup of a potential solution for this issue.

[ghost]

Comment by @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.

[ghost]

Comment by @iandunn:

• Status set to assigned
• Owner set to @hlashbrooke

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

[ghost]

Comment by @hlashbrooke:

• 3493-camptix.diff added

Adds 'Sold out' string, CSS class and opacity

[ghost]

Comment by @hlashbrooke:

• 3493.diff added

Filter to show sold out tickets

[ghost]

Comment by @hlashbrooke:

• Keywords set to Has Screenshots Has Patch Needs Testing

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.

[ghost]

Comment by @hlashbrooke:

• 3493.1.diff added

Uncommenting necessary filter

[ghost]

Comment by @hlashbrooke:

• 3493.2.diff added

Removing unneeded function

[ghost]

Comment by @hlashbrooke:

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

[ghost]

Comment by slackbot:

This ticket was mentioned in Slack in #meta-wordcamp by iandunn. View the logs.

[ghost]

Comment by slackbot:

This ticket was mentioned in Slack in #meta-wordcamp by iandunn. View the logs.

[ghost]

Comment by @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

[ghost]

Comment by slackbot:

This ticket was mentioned in Slack in #meta-wordcamp by ryelle. View the logs.

[ghost]

Comment by slackbot:

This ticket was mentioned in Slack in #meta-wordcamp by iandunn. View the logs.

[ghost]

Comment by slackbot:

This ticket was mentioned in Slack in #meta-wordcamp by iandunn. View the logs.