Is something like barba.js feasible in HubSpot?

Amit_95 · ‎Dec 29, 2021

I'm trying to implement barba.js on a HubSpot site for page transitions.

I'm currently building my site using custom modules and JS from custom modules do not get minified into a single .js file. An explanation of this is below.

Let's say I have on single .js file called scripts-min.js. This file is added onto the page via src, i.e.

<script src=".../scripts-min.min.js"></script>

Then, let's say I have a custom module called hero, which has some JS in the module block. That markup is rendered onto the page within <script> tags. So, in short, it appears something like this:

<script>
// js from hero custom module is here
</script>

<script src=".../scripts-min.min.js"></script>

Now, consider the following two pages:

Resources
Customers

With my current barba.js implementation, this is the current flow I'm experiencing:

I access the resources page (not by transitioning to it, by directly accessing it via /resources).
At this point, all my js is working (slick-sliders, scroll functions etc)
I then use the navigation to access the customers page. The page loads, but all of the js specific to modules and forms for that page are not working.

In short, js for pages that I transition to, do not work.

To resolve this, what I'm trying to do is to reload all scripts within the container beforeEnter(). Trying to refresh scripts that have src and those that HubSpot renders inline.

$(function() {

  function delay(n){
    n = n || 2000;
    return new Promise((done) => {
      setTimeout(() => {
        done();
      }, n);
    });
  }

  barba.init({
    sync: true,
    prefetchIgnore: true,
    debug: true,
    transitions: [{

      async leave(data){
        const done = this.async();
        await delay(200);
        done();
      },

      async beforeEnter({ next, container }) {

        $(container).find('script').each(function (i, script) {
          var $script = $(script);
          $.ajax({
            url: $script.attr('src'),
            cache: true,
            dataType: 'script',
            success: function () {
              $script.trigger('load');
            }
          });
        });
      },

      async enter(data){
        let scrollX = 0

However, my current beforeEnter() still yields the same results. Any way around this?

I haven't seen any discussion involving barba and HubSpot, which was surpring as barba is really popular. This makes me think, is it feasible to use in HubSpot? I can imagine form js will need some workarounds too when transitioning over to new pages?

benvanlooy · ‎Mar 14, 2023

I implemented barba on an wordpress website that has a HS tracking code, just wondering how I can "push" an event that tells HS there is a new pageload 🤔

2CUBE-Studio · ‎Dec 29, 2022

Yes, that's possible. I already impliment in my website

Amit_95 · ‎Jan 17, 2022

Assuming it is not possible since no reply?

Amit_95 · ‎Jan 6, 2022

Hi @miljkovicmisa,

Thanks for the above 🙂

Few questions / follow-up points:

1. With the above implementation of `barba.js` I have given, scripts that have a `src` work fine when transitioning to a new page. For example, I have simple `js` to `addClass` to `header` when scrolling down. This `js` is added to my main scripts file (calleds `scripts.min.js`). `scripts.min.js` is part of my `footer` custom module and has been connected via the "linked files" tab on the module (meaning it has a `src`).

2. `barba.js` and my custom `anim.js` file (which contains my barba code) is added to the end of my `footer` like so:

  <script src="{{ get_asset_url('/website/assets/build/js/lib/barba/barba-min.js') }}"></script>
  <script defer src="{{ get_asset_url('/website/assets/build/js/dist/amin.js') }}"></script>

Note: I do not havve any barba code in custom modules. All of my barba related code is in `anim.js`

3. `js` that is part of custom modules are rendered out inline in HubSpot, example below. These inline scripts do not have a `src` and therefore are not reloaded when transitioning to a new page. HubSpot forms are another example, these are rendered inline, so if barba is feasible in HubSpot, there needs to be a way to refresh scripts which have `src` and scripts that do not.

<script>
// js from hero custom module is here
</script>

4. I have already tried to make it work using the hooks referenced. The arguments of `beforeEnter` transition will be object of `data.next`:

Source: https://barba.js.org/docs/advanced/hooks/#data-properties

As such, I have tried to make use of `data.next`, but no luck.

See my latest approach here:

$(function() {

  function delay(n){
    n = n || 2000;
    return new Promise((done) => {
      setTimeout(() => {
        done();
      }, n);
    });
  }

  function reload_scripts(param){
    $(param).find('script').each(function (i, script) {
      var $script = $(script);
      $.ajax({
        url: $script.attr('src'),
        cache: true,
        dataType: 'script',
        success: function () {
          $script.trigger('load');
          console.log("scripts loaded");
        }
      });
    });
  }


  barba.init({
    sync: true,
    prefetchIgnore: true,
    debug: true,
    transitions: [{

      async leave(data){
        const done = this.async();
        await delay(200);
        done();
      },

      async beforeEnter(data) {
        reload_scripts(data.next.container);
      },

      async beforeEnter({ next }) {
        reload_scripts(next.container);
      },

      async enter(data){
        // scroll to top of page when transitioning
        let scrollX = 0
        let scrollY = 0

        barba.hooks.leave(() => {
          scrollX = barba.history.current.scroll.x;
          scrollY = barba.history.current.scroll.y;
        });

        window.scrollTo(scrollX, scrollY);
      },

      async once(data){
        console.log("transition complete");
      },

    }]
  });

});

Just need a way to refresh inline scripts `beforeEnter()`

miljkovicmisa · ‎Jan 4, 2022

Hello and happy New Year @Amit_95 and @dennisedson , first off, I would recommend you reading this awesome answer to a question I asked here in the community, it shows some perks you should take care of when doing such implementations, the second thing you need to do is separate barba.js from any module, you should add the link to the barba.js as shown in the docs, just before the end of the <body> tag. Last but not least make sure that bara.js code runs in the console of the browser (use inspect tools).
Please do share with us what your html/hubl looks like and where you implement the barba.js library and initialization.

Note: Don't get overwhelmed, barba.js requires intermediate knowledge of javascript so, some concepts may be a bit more difficult to grasp, take your time and share your findings so the community could best help you.

Hope I gave you some directions, for any further questions don't hesitate to ask here. You can also find me in the slack community by searching for @miljkovicmisa.

webdew · ‎Jan 4, 2022

Hi @Amit_95,

Instead of using min.js file use CDN file of barba.js to render your js, always prefer to attach all CDN file in base.html. Please refer to this article for CDN

Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.
Thanks and Regard.

dennisedson · ‎Jan 3, 2022

Hey @Amit_95

Good question. I would think it should be possible and yeah, forms would need to be tackled somehow. I have never implemented it myself so I rely on people smarter than I to answer questions like this 🤣

One smart cookie is @miljkovicmisa . If anyone can do this, he can 👍

@miljkovicmisa now that I have put you under pressure, what do you think 🤔

CMS Development