How to 'pjax' with bricks?

How To
21

let me know what errors are showing up in the console or send me a link to your site.

22

i have deleted my test site. i would reinstall sure and test again. and, will return ofcourse here! thanks for ur interest to help.

23

Hi there,

Iā€™ve tried barba.js with gsap and it works just fine.

Use this in function.php

add_filter( 'bricks/body/attributes', function( $attributes ) {
  // Add 'data-barba' HTML attribute to body with value 'wrapper'
  $attributes['data-barba'] = 'wrapper';
  return $attributes;
} );

add_filter( 'bricks/content/attributes', function( $attributes ) {
  // get page ID
  $id = get_the_ID();
  // Add 'data-barba' HTML attribute to main with value 'container'
  $attributes['data-barba'] = 'container';
  // Add 'data-barba-namespace' HTML attribute to main with current page id
  $attributes['data-barba-namespace'] = 'page-'.$id;
  return $attributes;
} );

then place this after footer

<script src="https://unpkg.com/@barba/core"></script>

<!-- load gsap animation library (minified version) -->
<script src="https://unpkg.com/gsap@latest/dist/gsap.min.js"></script>

<!-- init barba with transition -->
<script type="text/javascript">
  barba.init({
    transitions: [{
      name: 'transition',
      leave(data) {
        return gsap.to(data.current.container, {
          xPercent: -100
        });
      },
      enter(data) {
        return gsap.from(data.next.container, {
          xPercent: -100
        });
      }
    }]
  });
</script>

ā€¦ just an exampleā€¦you can continue with barb and gsap docs.

5 Likes
24

Looking forward to trying this! Cheers :slight_smile:

25

Unfortunately this seems to suffer the same fate mentioned above. Transitions seem to work well, which is cool, but elements like the slider get lost en route, eventually resulting in a blank page.

Thanks for the input, though!

26

This is why Iā€™ve always shied away from writing a tutorial on it. Fairly easy to implement originally, but all the potential issues come afterwards when you start adding plugins or trying to use elements that come with JS that needs to run at particular times to behave correctly.

Itā€™d be one day of ā€œhey nice tutorialā€ followed by wall of support questions coming my way for the next three years when it inevitably goes wrong for half of the Bricks users. :rofl:

4 Likes
27

Maybe something of interest without Barba or swup?

(ok, saw that anime.js will be loaded)
or

1 Like
28

Hi Mike,

sure I know.

From what Iā€™ve found it suppose to be used for static content.

Anyway you can initialize sliders or JS after transition but you need to know which parts need to be loaded again.

1 Like
29

Please see also https://highway.js.org/ by Dog Studio

30

Hi, are there any updates on this?
For example Elementor themes such as ā€œHaringtonā€ (Harington - Creative Portfolio Theme by ClaPat | ThemeForest) seem to have an AJAX loading option enabled, which enables the website to make use of Barba.js.

Isnā€™t there any way to implement this to Bricks Builder theme as well? I would love to find out how, since Bricks is now my go-to-theme / page builder and updates are so quickly developed.

1 Like
31

Sounds like a plugin territory to me. I am pretty sure that BricksForge has this approach coveredā€¦ Furthermore, HTMX is also a great option ā€¦ I was playing with it and there is a thread about it as well.

2 Likes
32

Any news here?
I was able to integrate perfectly Barba with Elementor following this tutorial and with some after work:

I remember that Iā€™ve used a piece of code that re-fires widgets, do we have this possibility in Bricks?

Iā€™m new to Bricks so Iā€™m exploring how to do again.

33

You may use my hint here. But you will need to reinitialize bricks JS functions and make sure that CSS stylesheets are loaded globally.

34

Yes, that is the point. The piece of code I used with Elementor was something like this:

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

is there any function like this or we should request it ?

35

It depends on what you want to run. Let say you may re-run interactions. You may use this in barba before enter:

beforeEnter(data) {
   bricksInteractionsFn.run();
},

Anyway you may run other bricks js functions depends on what you are using.

36

Thanks Martin ! where did you find that function? Iā€™m exploring dev documentation but I canā€™t find where, just in the bricks.min.js like
function bricksVideo() { bricksVideoFn.run() }.
I would like to know more about widget functions (like background video, gallery, postsā€¦). When I did with Elementor with that line I shared I was able to re run everything on page so Iā€™m looking for something similar but I suppose that one by one is also OK and a little more powerful :wink:

After some experimentation also Iā€™ll decide if going with barba, swup or htmlx. Barba seems a little outdated, swup is maintaned and htmlx is something fresh Iā€™ve never try :open_mouth:
Thanks again

37

Well you have to try to see what will best suits your needs.

Anyway if you are thinking about htmx you may take a look at @sinanisler post: Bricks + HTMX

38

My entire page implodes