Jump to content

Eventbrite embedded checkout freezes scroll if closed

Recommended Posts

 

I embedded a coded CTA button that load an iframe on two different pages. The same exact Eventbrite embedded code on both CTA's. One works totally fine (scroll is not affected if I close the iframe):

https://www.lnstake.org/chalk-walk-checkout-page

 

This other one locks up after I open the embedded iframe and then close it, I cannot scroll unless I reload the page:

https://www.lnstake.org/christmas-chalk-walk

The iframe also flickers and seems to reload 2 or 3 times. The other one does not have this issue.

What would be the cause of this error? Is there something on this last page that is causing the page to break?

 

Update: I actually realized that the problem is I am using this embedded code multiple times. It worked fine on the test page because I only had one CTA compare to 4 on the bad page. So my question would be, is this happening because it is pulling the library 4x? How can i simplify this embedded code for buttons 2-4 on that page if the JS library is loaded?

 

Here is the embedded code I used:

 

<!-- Noscript content for added SEO -->
<noscript><a href="https://christmas-chalk-walk.eventbrite.com" rel="noopener noreferrer" target="_blank">Buy Tickets on Eventbrite</a></noscript>
<!-- You can customize this button any way you like -->
<center>
<button id="eventbrite-widget-modal-trigger-472644972837" class="eventbrite" type="button">RESERVE A SPOT</button>
</center>
<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>

<script type="text/javascript">
    var exampleCallback = function() {
        console.log('Order complete!');
    };

    window.EBWidgets.createWidget({
        widgetType: 'checkout',
        eventId: '472644972837',
        modal: true,
        modalTriggerElementId: 'eventbrite-widget-modal-trigger-472644972837',
        onOrderComplete: exampleCallback
    });
</script>

Edited by Laguna_Niguel
New information
Link to comment
  • Replies 1
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

55 minutes ago, Laguna_Niguel said:

 

I embedded a coded CTA button that load an iframe on two different pages. The same exact Eventbrite embedded code on both CTA's. One works totally fine (scroll is not affected if I close the iframe):

https://www.lnstake.org/chalk-walk-checkout-page

 

This other one locks up after I open the embedded iframe and then close it, I cannot scroll unless I reload the page:

https://www.lnstake.org/christmas-chalk-walk

The iframe also flickers and seems to reload 2 or 3 times. The other one does not have this issue.

What would be the cause of this error? Is there something on this last page that is causing the page to break?

 

Update: I actually realized that the problem is I am using this embedded code multiple times. It worked fine on the test page because I only had one CTA compare to 4 on the bad page. So my question would be, is this happening because it is pulling the library 4x? How can i simplify this embedded code for buttons 2-4 on that page if the JS library is loaded?

 

Here is the embedded code I used:

 

<!-- Noscript content for added SEO -->
<noscript><a href="https://christmas-chalk-walk.eventbrite.com" rel="noopener noreferrer" target="_blank">Buy Tickets on Eventbrite</a></noscript>
<!-- You can customize this button any way you like -->
<center>
<button id="eventbrite-widget-modal-trigger-472644972837" class="eventbrite" type="button">RESERVE A SPOT</button>
</center>
<script src="https://www.eventbrite.com/static/widgets/eb_widgets.js"></script>

<script type="text/javascript">
    var exampleCallback = function() {
        console.log('Order complete!');
    };

    window.EBWidgets.createWidget({
        widgetType: 'checkout',
        eventId: '472644972837',
        modal: true,
        modalTriggerElementId: 'eventbrite-widget-modal-trigger-472644972837',
        onOrderComplete: exampleCallback
    });
</script>

You can try adding your custom code on Home > Settings > Advanced > Code injection, choose footer, only add the <script> tag

On the code block, you only need the HTML code on it so the script code won't be duplicated

Greeting, it's BeyondSpace, I am Squarespace dev focus on provide solutions to enhance feature that squarespace.com can't provide.
Feel free to check my current Squarespace Plugins Developement: Enable Pinch/Zoom on lightbox, Delivery Date Picker, Keyword Highlighter
If you find my answer fit your need, let's leave a like or upvote so others with the same issue can find their solution. Thank you

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.