Barba.js and problem with some elementor widgets

  • Resolved florianw7

    (@florianw7)


    3 years, 3 months ago

    Hi Ooohboi! I’ve successfully implemented barba.js into my wordpress site with elementor following your great example website that is linked here: https://www.ads-software.com/support/topic/barba-js-implementation/

    But I noticed that some widgets like the animated headline or the text path widget are not working anymore after leaving and re-entering the page on which they are placed on.

    I’ve also tried manually loading the css file for the animated-headline via the “loadjscssfile” function in the javascript from your example site. Sadly that didn’t work out.

    Do you have any tips on what else I could try, to make those widgets work? Every thing else (the barba page transitions and the specific page css) is working fine so far.

Viewing 15 replies - 1 through 15 (of 16 total)
  • Plugin Contributor Oooh Boi

    (@ooohboi)

    Well, that’s a good point – even though not that good for yourself ??
    Anyhow, I don’t think I know the answer right off the bat, but I could share with you what I usually do when it comes to a situation like this.

    1) I’d disable Barba for a moment
    2) open some file comparing tool, like https://www.diffchecker.com/
    3) copy the HTML of the initial page & paste it into the diffchecker
    4) copy the HTML of the target page & paste it to compare

    The difference can tell you what’s missing, so you gonna have to work around it.
    I’m talking about the missing files (in header & footer), not the actual HTML structure, of course.
    In case there’s no difference, well I’d probably take a walk, or a coffee break, go swimming – anything capable of clearing/resetting my mind. The answer is yet to come on its own.

    I’ll leave this topic unresolved, so if you ever want to get back and share your experience – you’re welcome to do that!

    Good luck in any case!

    Plugin Contributor Oooh Boi

    (@ooohboi)

    Any follow-up on this one?

    Thread Starter florianw7

    (@florianw7)

    Hi again!

    Sadly not, I see no difference in the DOM and it seems that all the relevant css and js files are there but the widgets are only working when manually reloading the site in the browser. I get that behaviour with pretty much every widget, that has some kind of animation playing.

    Not sure what else I could try to fix it.

    Thread Starter florianw7

    (@florianw7)

    Just found out that using barba.js with Elementor also breaks the Elementor Form. When coming from a different page and clicking the submit button, it reloads the page instead of sending the form.

    Whereas those other widgets not working with barba is something to endure, this problem is a deal breaker from me, as my website depends on a working contact form.

    I’ve tried preventing barba to work when clicking that specific form button, as described here: https://barba.js.org/docs/advanced/strategies/ but sadly I didn’t get it to work.

    I’m just writing this here for others that may experience similar issues when trying out barba with elementor and would be relly stoked, if someone comes up with a working solution.

    Hi, there’s indeed an issue as far as I can tell. Any elementor widget that uses JS won’t work unless you reload the page.

    So tabs, animated headline, slider, video ,form etc. won’t work.

    I would be so keen for a solution, but I’m not a coder myself…

    Thread Starter florianw7

    (@florianw7)

    Good news guys!

    I finally found a working solution to this problem.

    So basically I added this snippet of code to my barba.hooks.beforeEnter function: 

    <script>
    jQuery(".elementor-element").each(function () {
        elementorFrontend.elementsHandler.runReadyTrigger(jQuery(this));
    });
</script>

    which was mentioned here https://github.com/elementor/elementor/issues/5843#issuecomment-765196491

    This basically triggers the javascript of each elementor element, making it work again after a barba page transition. Tested it with an elementor form and an animated headline widget so far.

    @ooohboi I think this topic can be closed now ??

    @florianw7 Awesome! Tested and works

    Plugin Contributor Oooh Boi

    (@ooohboi)

    Thanks, @florianw7 buddy! Your commitment is appreciated as well as the precious feedback!

    melo1551

    (@melo1551)

    @florianw7 could you tell me where exactly you inserted that code snippet? It does not word for me putting it just in the header or footer.

    Thread Starter florianw7

    (@florianw7)

    @melo1551 I used the custom code option from elementor and set the code to be executed at the end of the <body>.

    @florianw7 I really appreciate you telling me where to put it. I tried to implement the code in so many ways but it would make no difference. The js for the widgets is not being triggered in some way and they do not work as they do on a normal page load.

    Thread Starter florianw7

    (@florianw7)

    @melo1551 as far as I understand it, the code has to be placed in the barba.hooks.beforeEnter function, because then it gets executed everytime you switch pages using barba. Have you tried that already?

    Its still working on my end. Im using the elementor hello theme btw, but I think it doesn‘t make a difference.

    • This reply was modified 2 years, 10 months ago by florianw7.

    @florianw7 yes I actually tried that but I am not sure if I misplaced the code. It actually broke the barbafunction when I placed the code there. Could you show me the code you use so I can compare my errors or actually just copy & paste it?

    Thread Starter florianw7

    (@florianw7)

    @melo1551 there you go, adapt it to your needs

    barba.hooks.beforeEnter(({ current, next }) => {
    if (current.container) {
        let nextHtml = next.html;
        let response = nextHtml.replace( /(<\/?)body( .+?)?>/gi, "$1notbody$2>", nextHtml );
        let bodyClasses = jQuery(response).filter("notbody").attr("class");
        jQuery("body").attr("class", bodyClasses);

        if (bodyClasses.includes( "elementor-page" ) ) {
            let currentPageId = current.container.querySelector(".elementor").getAttribute("data-elementor-id");
            let nextPageId = next.container.querySelector(".elementor").getAttribute("data-elementor-id");
            let oldScriptURL = "https://example.com/wp-content/uploads/elementor/css/post-" + currentPageId + ".css";
            let newScriptURL = "https://example.com/wp-content/uploads/elementor/css/post-" + nextPageId + ".css";
            const oldElementorScript = document.querySelector( 'link[src="' + oldScriptURL + '"]' );
            if (oldElementorScript) { oldElementorScript.remove(); }
            loadjscssfile(newScriptURL, "css");
            jQuery('.elementor-element').each(function() { elementorFrontend.elementsHandler.runReadyTrigger( jQuery( this ) ); });
        }
    }
});

    Edit: After deleting my cache it actually seems that it’s working fine now! Ignore the following:

    Sorry for asking you such a crazy amount of questions. Did you separate the barba.hooks.beforeEnter from the other snippet parts?

    mine now looks like this after I implemented it the same way as you did:

    <script>
    ;
    (function() {

        document.addEventListener("DOMContentLoaded", () => {

            gsap.set('.ob-barba-loader', {
                scaleX: 0,
                rotation: 30,
                xPercent: -5,
                yPercent: -50,
                transformOrigin: 'left center',
                autoAlpha: 1
            });

            barba.hooks.beforeEnter(({current, next}) => {
                // Set <body> classes for the 'next' page
                if (current.container) {
                    // // only run during a page transition - not initial load
                    let nextHtml = next.html;
                    let response = nextHtml.replace(/(<\/?)body( .+?)?>/gi, "$1notbody$2>", nextHtml);

                    let bodyClasses = jQuery(response).filter("notbody").attr("class");
                    jQuery("body").attr("class", bodyClasses);

                    // ELEMENTOR
                    // Where the magic happens - this loads the new Elementor styles and removes the old styles
                    if (bodyClasses.includes("elementor-page")) {
                        let currentPageId = current.container.querySelector(".elementor").getAttribute("data-elementor-id");
                        let nextPageId = next.container.querySelector(".elementor").getAttribute("data-elementor-id");
                        let oldScriptURL = "/wp-content/uploads/elementor/css/post-" + currentPageId + ".css";
                        let newScriptURL = "/wp-content/uploads/elementor/css/post-" + nextPageId + ".css"; // Add this for cache fix: ?cachebuster=' + new Date().getTime()

                        console.log('Old css: ' + oldScriptURL);
                        console.log('New css: ' + newScriptURL);
                        console.log(current.container);

                        const oldElementorScript = document.querySelector('link[src="' + oldScriptURL + '"]');
                        if (oldElementorScript) {
                            oldElementorScript.remove();
                        }
                        loadjscssfile(newScriptURL, "css");
											  jQuery('.elementor-element').each(function() { elementorFrontend.elementsHandler.runReadyTrigger( jQuery( this ) ); });
                    }
                }

            });

            barba.init({
                debug: true,
                timeout: 5000,
                transitions: [{
                    async leave() {
                        await loaderIn();
                    },
                    enter() {
                        window.scrollTo(0, 0);
                        loaderAway();
                    }
                }]
            });

        });

        loaderIn = function() {
            // GSAP tween to stretch the loading screen across the whole screen
            return gsap.fromTo('.ob-barba-loader',
            {
                rotation: 10,
                scaleX: 0,
                xPercent: -5
            },
            {
                duration: 0.4,
                xPercent: 0,
                scaleX: 1,
                rotation: 0,
                ease: 'power4.inOut',
                transformOrigin: 'left center'
            });
        }

        loaderAway = function() {
            // GSAP tween to hide loading screen
            return gsap.to('.ob-barba-loader', {
                duration: 0.4,
                scaleX: 0,
                xPercent: 5,
                rotation: -10,
                transformOrigin: 'right center',
                ease: 'power4.inOut'
            });
        }
        // This function helps add and remove js and css files during a page transition
        loadjscssfile = function(filename, filetype) {
            if (filetype == "js") {
                //if filename is a external JavaScript file
                const existingScript = document.querySelector('script[src="${filename}"]');
                if (existingScript) {
                    existingScript.remove();
                }
                var fileref = document.createElement("script");
                fileref.setAttribute("type", "text/javascript");
                fileref.setAttribute("src", filename);
            } else if (filetype == "css") {
                //if filename is an external CSS file
                const existingCSS = document.querySelector(<code>link[href='${filename}']</code>);
                if (existingCSS) {
                    existingCSS.remove();
                }
                var fileref = document.createElement("link");
                fileref.setAttribute("rel", "stylesheet");
                fileref.setAttribute("type", "text/css");
                fileref.setAttribute("href", filename);
            }
            if (typeof fileref != "undefined")
                document.getElementsByTagName("head")[0].appendChild(fileref);
        }

    })();
    </script>
    • This reply was modified 2 years, 10 months ago by melo1551.
    • This reply was modified 2 years, 10 months ago by melo1551.
Viewing 15 replies - 1 through 15 (of 16 total)
  • The topic ‘Barba.js and problem with some elementor widgets’ is closed to new replies.