2

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

Issue with HubSpot is that it renders our js related to forms or js related to custom modules within <script><script> tags.

As such, currently, with my barba implementation, if I transition over to a page with a HubSpot form for example, that form will not show and js related to my modules (such as slick js, they do not work either.

Using the hooks defined below (from the docs), I've added an ajax call to attempt to reload scripts that have a src defined. However, I cannot test if that is working because the js from my custom modules are not working.

Property Description
data.current Current page related
data.next Next page related
data.trigger Link that triggered the transition

Question being, is there a way for me to reload scripts without src defined?

Here is my current implementation:

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
      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("test");
    },

  }]
});

Here is a working demo

Follow these steps:

  1. Click on page 1. Notice how the HubSpot form loads.
  2. Click on page 2
  3. Notice how the slick slider module isn't working
  4. Now refresh page 2 and you will see slick is working.
  5. Navigate to page 1 and you'll see the form is not working now.

Visual of issue:

enter image description here

Freddy
  • 683
  • 4
  • 35
  • 114
  • Can you provide minimal reproducible on [codesandbox](https://codesandbox.io/s/)? Use static template create two pages: main with barba and other mimicking Hubspot. Just a potsot, can you put content coming from HubSpot in ` – the Hutt Jan 21 '22 at 04:05
  • Also note, that when you go from `page 1` and onto `page 2`, then go back to `page 1`, everything on that page will work. This is because whatever page you initially land on the JS for that is rendered, but JS for pages navigated to (that `barba` has to `prefetch`) do not. See my steps to recreate in my question. – Freddy Jan 22 '22 at 12:47
  • @onkarruikar - In addition to the above, this is why the fixed header works. `.fixed` is added via JS and this works when you go on a new page because that JS has been `fetched` from `barba` on whatever page is loaded. – Freddy Jan 22 '22 at 12:55
  • 1
    @onkarruikar - Based on your demo, it doesn't look like your page is transitioning the same as mine (yours looks like it is loading in the new page as default, as in `barba` isn't transitioning). I have `barba debug mode` enabled, and in my `console` I can see the following: https://i.imgur.com/X9d2Q53.png - Do you see barba finding a transition on your end? – Freddy Jan 22 '22 at 15:04
  • In my gif I've opened dev console see at ~33s. The log does say it found transition. – the Hutt Jan 22 '22 at 15:07
  • @onkarruikar - hm, this is weird, here is my demo with console open: https://im2.ezgif.com/tmp/ezgif-2-6c5aa50f6e.gif – Freddy Jan 22 '22 at 15:11
  • @onkarruikar - In your demo, after page change, I cannot see the console log `[@barba/core] Transition found [page] {leave: ƒ, beforeEnter: ƒ, enter: ƒ, once: ƒ, async: ƒ}`, which appears on mine. In your demo, it seems as `barba` is finding the initial transition, but not after page change? – Freddy Jan 22 '22 at 15:14
  • yeah! for me the entire page is loading not just the content. I tried on other browsers same thing. Delete irrelevant comments we are triggering the limit. After looking carefully, it does find and log the transition before going to next page, but after a second it reloads entire page. Barba is not suppressing anchor tag default click behavior in my browser. I've disabled all plugins. – the Hutt Jan 22 '22 at 15:18
  • @onkarruikar - Is it behaving the same for you on a mobile device? – Freddy Jan 22 '22 at 15:48

0 Answers0