Here's a list of functions to add 3rd party features back into pjax pageloads, and how to do it

Hey Forgers!

I’ve been having a lot of fun with the new PJAX page transitions feature of BricksForge.

I had a couple of problems during my experimentations:

  1. I didn’t know how to find out which functions to add to the compatibility tab.

  2. I didn’t know how to format those functions correctly.

After lots of digging around, and not getting very far, I finally found a method to figure this out, and get most 3rd party scripts working with pjax.

I’ll keep this post updated if I find anything else interesting. If you’re having trouble getting something to work; assuming we both have licences for the same plugins, let me know and I’ll take a look.
If you find anything useful, please add it to this post.

Video here: BricksForge Page Transitions and 3rd party plugins

TL;DR:

  1. Download Query Monitor
  2. Turn on pjax page transitions in Bricksforge, navigate the site using menu/buttons (not simply entering the address… You have to trigger a pjax load by navigating the site) and go find out what plugins/functions aren’t working.
  3. On a page that you’re expecting a function to work, press refresh; which will load the page properly with all the functions you want.
  4. Open Query monitor from the admin bar, click on the “scripts” tab, and look for any mentions of the function you’re looking for. Sometimes it might not be obvious, but you can look at the structure of the link by each function to determine which plugin it’s coming from.
  5. Open the link to the script in question, and look for a main function. This may take some guesswork, but in many cases, you’re looking for something along the lines of
    function thisIsTheFunctionYouAreLookingFor();
  6. Copy just the thisIsTheFunctionYouAreLookingFor(); bit, paste it into the BricksForge compatibility tab and save. If you’re feeling extra clever, write it like so:
if (typeof thisIsTheFunctionYouAreLookingFor !== "undefined") { 
  thisIsTheFunctionYouAreLookingFor()
}

You should now have the function loading on the page! If not, then take another look at the script, and try to find something that makes sense.

In any other event, you might have luck asking the developer of the 3rd party plugin directly. Something along the lines of

“Hi, I’m trying to get your plugin to load via pjax. Which functions do I need to reinitialise on pageload to get feature working?”

It’s always good to show your workings up to the point of asking, both to show interest/effort, and give the dev an idea of what you’re trying to achieve.

Code provided by David Browne of the excellent BricksExtras, to get most of their functions working with pjax:

David (One of the devs at the superb BricksExtras) was kind enough to not only improve my attempt, but also provide a block of code we can simply enter into the BricksForge Compatibility tab, to get most of the BricksExtras elements working on pjax pageload. This is an improvement, because it checks to see if the relevant function exists on each page; keeping your site nice and lean.

if (typeof xBackToTop !== "undefined") { 
  xBackToTop()
}
if (typeof xLottie !== "undefined") { 
xLottie()
}
if (typeof xBeforeAfterImage !== "undefined") {   
xBeforeAfterImage()
}
if (typeof xBurgerTrigger !== "undefined") {   
xBurgerTrigger()
}
if (typeof xContentTimeline !== "undefined") {   
xContentTimeline()
}
if (typeof xDynamicChart !== "undefined") {
xDynamicChart()
}

if (typeof xCountdown !== "undefined") {
  xCountdown()
}

if (typeof xContentTimelineHorizontal !== "undefined") {
  xContentTimelineHorizontal()
}

if (typeof xLightbox !== "undefined") {
  xLightbox()
}

if (typeof xDynamicTable !== "undefined") {
  xDynamicTable()
}

if (typeof xPopover !== "undefined") {
  xPopover()
}

if (typeof xProAccordion !== "undefined") {
  xProAccordion()
}

if (typeof xImageHotspots !== "undefined") {
  xImageHotspots()
}

if (typeof doExtrasModal !== "undefined") {
  doExtrasModal(document)
}

if (typeof doExtrasOffCanvas !== "undefined") {
    doExtrasOffCanvas(document)
}


/* tilt, currently no wrapper function so you'd need to add back in like this - will make this easier */

function doTilt() {

if ( !document.querySelector("[data-x-tilt]") ) { return }

const xTiltElements = document.querySelectorAll("[data-x-tilt]");

xTiltElements.forEach(function(xTiltEl) {

  const configAttr = xTiltEl.getAttribute('data-x-tilt')
    const elementConfig = configAttr ? JSON.parse(configAttr) : {}

    let tiltOptions = elementConfig.config;

        VanillaTilt.init(xTiltEl,tiltOptions);
        tiltStatus = true;

    window.addEventListener('resize', function() {

        mobileStatus = window.innerWidth <= elementConfig.breakpoint ? true : false;

        if (true === mobileStatus && true === tiltStatus) {
                xTiltEl.vanillaTilt.destroy();
                tiltStatus = false;
        }

        if (false === mobileStatus) {
                VanillaTilt.init(xTiltEl,tiltOptions);
                tiltStatus = true;
        }

    });

});    

}

doTilt()
7 Likes

Greeeat work!! That will be really really helpful for the community! :slight_smile:

Just pinned this thread :wink:

2 Likes

Great work! This will come in handy :blush:

Thanks for spending the time to share this info, I was having some trouble figuring out the reinitialization but this cleared up everything for me!

Hello Battolio. Thanks for your clarification. But I ran into a problem that I need to define the brix functions (more precisely, the pop-up window and the animation of the appearance of elements). I can’t track these functions in Query Monitor. Can you tell me how to do this?
p\s
In more detail, on one of the pages I have a button, when you click on it, a pop-up window with animation opens. the popup contains dynamic data (post content)

Hey!

So is this all using native Bricks elements? Or a 3rd party plugin?

This is all using native Bricks elements. PJAX also includes CSS mode. I’ll say right away that I don’t want to use GSAP because… it has a bug with animation (the elements are loaded first and only then the animation is turned on. That is, the animation of the appearance of elements does not work correctly).

I noticed that the pop-up window doesn’t load because it’s missing from the html markup

Hmmm… Honestly I’m not sure!
I’ll give it a try when I’m at the desk.

So:

Pjax load to a new page with a popup triggering button with dynamic data in the popup, but the popup doesn’t show at all because it hasn’t been created yet?

In the meantime, there is a new function Daniele added. I think it’s called morph? (or similar) it’s next to the “cache” checkbox in compatibility IIRC.
Try messing around with that. As far as my limited understanding takes me, it tells pjax to watch out for new data.
Then, instead of using a classic popup, you could create one manually in bricks, as part of the header, and start it off hidden. Some combination of them might do the trick :slight_smile:

Hi there,

here also my findings to make page transition compatible with bricks native offcanvas element and polylang:

1) Bricks Offcanvas:

2) Polylang

  • always duplicate and translate bricks templates (don’t use bricks terms >language to show them)
  • use the provided swup helper plugin “morph” to change the desired container upon language change; for example: brx-header, brx-footer.

It doesn’t pretend to be the best solution or something that cover every scenario, just what I’ve found so far.

2 Likes

Great!
For anyone interested, I’ve found the function needed for Complianz:
show_cookie_banner()

Unfortunately though, it is still not working correctly. when changing page, it gets all weird before working.

If anybody can check and have any guess whyb this is happening?
Thanks