BricksForge Page Transitions and 3rd party plugins

Name: BricksForge Page Transitions and 3rd party plugins
Uploaded: 2023-11-24
Description: BricksForge Page Transitions and 3rd party plugins

Here I go over how to add a BricksExtras Pro Slider back into a pageload.

In this video, I'm using the following plugins and themes:

[Bricks Theme](https://bricksbuilder.io/)

[BricksForge](https://bricksforge.io/)

[BricksExtras](https://bricksextras.com/)

[Query Monitor](https://wordpress.org/plugins/query-monitor/)

TL;DR: 

1. Download [Query Monitor](https://wordpress.org/plugins/query-monitor/)

1. 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.

1.  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.

1. 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.

1. 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();`


1. 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.

https://gist.github.com/wplit/b4974a1fe36170d69e0a8736f24f58e8

```
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()
```