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:
-
I didn’t know how to find out which functions to add to the compatibility tab.
-
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:
- Download Query Monitor
- 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.
- 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.
- 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.
- 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(); - 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()
