Pinegrow Interactions in NextJS

General
1

My mobile view menu collapse (nav) isn’t working. This is probably because of interactions not working.

import type { NextPage } from 'next'
import Head from 'next/head'

const Header: NextPage = ({children}) =>
{
    return (
        <Head>
            <link rel="stylesheet" href="https://unpkg.com/tailwindcss@2.0.2/dist/tailwind.min.css"/>
            <script src="pg-interactions.js"></script>
        </Head>
        );
}

export default Header

I have in my public folder :

$ tree
.
├── favicon.ico
├── pg-interactions.js
├── pgia
│   └── lib
│       └── pgia.js
└── vercel.svg

2 directories, 4 files

pg-interactions.js is getting loaded in the Network tab - (http://localhost:3000/pg-interactions.js exists) but the interactions don’t work.

2

Hi @anjanesh,
What is contained in the pg-interactions.js file? I’m guessing it is the script that is normally inline?
Hard to troubleshoot, but I’m guessing it has something to do with when interactions goes looking for page elements vs when they are loaded in. WHat templating language are you using, and when does the pgia.js load in? I’m wondering if you will have to pop a small script in after total load like:

let el = document.body;
pgia.elementAnimationsManager.refreshAnimations(el, true);

This would be a bit of overkill if the nav menu is the only interaction, so you could make it mare targeted.
Thanks,
Bob

3 
# Unhandled Runtime Error

ReferenceError: pgia is not defined

I am using NextJS - a React framework - so basically React under the hood. So I guess we can’t get the on load in vanilla JavaScript when using React ?

Right now the only issue is with the menu not appearing on mobile view when clicked on.

4

Hi @anjanesh

DUH! Sorry I missed the title of your post. Sometimes I can be an idiot.

Maybe this would help?

I guess you could load the pgia.js script in with a strategy of afterInteractive to allow Next to hydrate the page first?
Again, a little hard to troubleshoot. Not sure when in the page load/where on the page you injected the snippet above.
Cheers,
Bob

1 Like
5

I had : <Script src="pg-interactions.js" strategy="afterInteractive"></Script>
I even changed it to :

        <Script strategy="afterInteractive"
        dangerouslySetInnerHTML={{
            __html: `
            /* Pinegrow Interactions, do not remove */ (function(){ ... })()
          `,
          }}
        ></Script>

Still the responsive menu doesn’t appear. Is there some one, two liner switch to just enable the menu on mobile ?

6

Hi @anjanesh,
That script doesn’t power the interactions. It is there for when interactions is disabled. All of the actual interactions are in the pgia.js file. That is the one you should be loading with your strategy.

Not sure what you mean here. You can enable an animation only on mobile from within the Interactions panel of Pinegrow.
Cheers,
Bob

7

Thank You so much !
I changed to <Script src="pgia/lib/pgia.js" strategy="afterInteractive"></Script> and all is working now.
I thought the inline script has to do with initializing the pgia/lib/pgia.js script.

8

This came up on my weekly email so don’t mind if I pitch in. I’m not so sure on the status of this but seems you’ve solved something basic with an overly technical solution.

@anjanesh, you’re loading your JavaScript in the <head>. None of the HTML is present on the page at this point so therefore your JavaScript has nothing to bind to. Moving it to before the </body> should be your solution. You must understand code loads linearly, that is, in order. Your pgia.js and pg-interactions.js need to be loaded before the closing body tag, in that order (assuming your JS relies on pgia.js)

1 Like
9

Yes, thank you very much - I made a mistake in a React function which caused the interaction not loading, thanks again.

1 Like