Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Widget: Support for inline seating plan #2997

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from

Conversation

raphaelm
Copy link
Member

@raphaelm raphaelm commented Dec 22, 2022

Okay, so this is an experimental idea. We've had some complaints that the widget does not show the seating plan directly, but instead always opens its overlay for the seating plan.

With our ongoing work of rewriting our seating plan renderer, we have a well-capsuled seating component now which we could properly embed in the widget.

However, I'm very unsure as to how to do that without giving up our loose coupling between pretix and pretix-seating. First, pretix-seating is not open source. Second, we actually know of people running their own seating plugin instead of pretix-seating. So I'd prefer to keep the louse coupling.

That leaves us with two approaches:

  • The widget itself gets a plugin system. Might be interesting but could get very complex.
  • We just use iframes here as well.

This PR implements the second idea. It has some advantages, such as keeping a small interface between pretix and pretix-seating, but one large disadvantage: The seating part of the widget is not accessible through CSS. The buttons will look different (I first tried to fix that by just working without a second button but that would require refactoring our seat validation), and we can work around part of it with some conditional background:transparent statements that I have not yet added, but it will always look slightly off since it's using different fonts etc.

For these reasons and for backwards compatibility I declared it opt-in. Still better than nothing for many users!

Do we want to follow this approach further, the other approach, or none at all?

Screenshot 2022-12-22 at 12-57-21 Screenshot

Internal note: See also https://code.rami.io/pretix/pretix-seating/-/merge_requests/12

@cla-bot cla-bot bot added the cla-signed label Dec 22, 2022
@codecov
Copy link

codecov bot commented Dec 22, 2022

Codecov Report

Merging #2997 (3b62737) into master (d3698b3) will decrease coverage by 0.00%.
The diff coverage is 25.00%.

Additional details and impacted files
@@            Coverage Diff             @@
##           master    #2997      +/-   ##
==========================================
- Coverage   77.96%   77.95%   -0.01%     
==========================================
  Files         398      398              
  Lines       53167    53170       +3     
==========================================
  Hits        41450    41450              
- Misses      11717    11720       +3     
Impacted Files Coverage Δ
src/pretix/presale/views/event.py 73.53% <25.00%> (-0.57%) ⬇️

@raphaelm raphaelm requested a review from wiffbi January 2, 2023 08:48
@vchrisb
Copy link
Contributor

vchrisb commented Mar 21, 2023

It would be great to have an inline seating plan, even if it is (not yet) perfect.
Would it maybe possible to add some css options on the pretix side? Similar to "shop design" settings?

@wiffbi
Copy link
Contributor

wiffbi commented Mar 21, 2023

What if we embed the seating-plan through its web-components directly? Custom-Seating-Plan plugins would not work right away as they hook into /seatingframe/-URL I guess, but that could be worked around by overwriting our web-components with their own custom web-components? We could even go so far as in creating a new web-component <pretix-seating-select>, which is basically a wrapper around our three web components. Custom seating plugins would then just need to create a web component, which is just a wrapper around an iframe, which embeds the /seatingiframe/-URL. As a fallback during that transition for custom seating plugins, when the <pretix-seating-select> element is not defined, we could just show the button as it is today. So basically something like this:

<pretix-seating-select plan="…" event="…" …>
    <script> … translation JSON goes here … </script>
    <!-- the following is HTMLs fallback mechanism and will show the button 
         when the custom element pretix-seating-select is not defined -->
    <p><button>Open seatingplan</button></p>
</pretix-seating-select>

Or instead of the button show the iframe with /seatingiframe/-URL as a fallback? Problem though is the new postMessage-machnism that you added to the buy-button. So maybe to keep it simple just use the open-seatingplan-button as fallback?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants