• Resolved Sam

    (@sblekhman)


    Hello,

    I am trying to embed an Eventbrite checkout widget on my page. I have done with on three other pages successfully. We have recently migrated to a new server and updated WP and all plugins. Since the migration, when I paste the code into an HTML block on Elementor and update the page, Elementor/WP is changing my HTML code. It is turning the <script> into a hyperlink. See below for the original code and what it is being changed to. Does anyone have a way to stop WP/Elementor from changing the code?

    Original code:

    <div id="eventbrite-widget-container-75687396039"></div>
    
    <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({
            // Required
            widgetType: 'checkout',
            eventId: '75687396039',
            iframeContainerId: 'eventbrite-widget-container-75687396039',
    
            // Optional
            iframeContainerHeight: 425,  // Widget height in pixels. Defaults to a minimum of 425px if not provided
            onOrderComplete: exampleCallback  // Method called when an order has successfully completed
        });
    </script>

    What it changes it to when I come back:

    <div id="eventbrite-widget-container-75687396039"></div>
    
    <a href="https://www.eventbrite.com/static/widgets/eb_widgets.js">https://www.eventbrite.com/static/widgets/eb_widgets.js</a>
    
        var exampleCallback = function() {
            console.log('Order complete!');
        };
    
        window.EBWidgets.createWidget({
            // Required
            widgetType: 'checkout',
            eventId: '75687396039',
            iframeContainerId: 'eventbrite-widget-container-75687396039',
    
            // Optional
            iframeContainerHeight: 425,  // Widget height in pixels. Defaults to a minimum of 425px if not provided
            onOrderComplete: exampleCallback  // Method called when an order has successfully completed
        });
    
    • This topic was modified 6 years, 8 months ago by Sam. Reason: fixing code
    • This topic was modified 6 years, 8 months ago by Sam.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Just spun up a fresh WP install, Twenty Nineteen theme, latest WP core and Elementor and used your provided original example and pasted it into an HTML element and it works without any code manipulations.

    I suspect either a plugin/theme causing some sort of rewrite/filter/sanitization or maybe you are using the WordPress custom HTML widget and not Elementors?

    See – https://imgur.com/dpQv8e5

    Thread Starter Sam

    (@sblekhman)

    @pingram3541 I use the Elementor HTML Widget and mine actually works in the editor but when I update the page and view it not in the Elementor editor it breaks.

    See – https://imgur.com/fwAtd7f

    Could you check if it works when you load the page outside of the editor?

    I sure did. I also verified there were no script errors in the browser console and upon the script loading I was able to toggle each of the items expanded details, the popover promo code box as well as clicking the bottom checkout button redirecting me to the Gala checkout page.

    Here’s a one-time self destructing link you can use to see it working on my test site – https://privnote.com/Btlxrzs4#1COcUMN8e

    Thread Starter Sam

    (@sblekhman)

    Thank you for all the help!

    Any other tips you have for finding what is causing this?

    Do you know of a way to “protect” o the HTML widget from whatever is doing this? Is there a way to have an iframe or something to house the code?

    There is always a way my friend.

    The best way would be to find what is causing this, most likely another plugin or a theme setting of which you’d have to disable and test. If the site is already in production this may not be an option and I’d then suggest making a duplicate you can test with offline or via sub-domain.

    One method might be to use a shortcode to inject your custom code into the page by pasting a unique shortcode into an elementor widget such as the shortcode or text editor widgets.

    You would need to be using a theme you can modify, child theme’s are best if your theme is public and gets updates. There is much documentation around the web on how to set up a child theme if you are not already using one.

    In your child theme’s functions.php you can add something like this:

    //add Eventbrite checkout widget
    function sb_eventbrite_checkout_shortcode() {
        ob_start(); //this captures the html below
    
        ?>
    <div id="eventbrite-widget-container-75687396039"></div>
    
    <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({
            // Required
            widgetType: 'checkout',
            eventId: '75687396039',
            iframeContainerId: 'eventbrite-widget-container-75687396039',
    
            // Optional
            iframeContainerHeight: 425,  // Widget height in pixels. Defaults to a minimum of 425px if not provided
            onOrderComplete: exampleCallback  // Method called when an order has successfully completed
        });
    </script>
        <?php
    
        return ob_get_clean(); //this spits it out
    }
    add_shortcode('eb_checkout', 'sb_eventbrite_checkout_shortcode');

    And then simply add the following [eb_checkout] shortcode to your Elementor page content where you desire it’s output.

    WordPress has so many hooks and filters even this could be filtered by an outside mechanism from any active plugin or theme so your best best is trying to figure out what is causing this behavior otherwise it will haunt you.

    Best of luck and success to you!

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘HTML being stripped of Javascript’ is closed to new replies.