Gatsby - Embedded agility-search-panel Not Rendering

I am using Gatsby and Agility Search and am trying to get the embedded search panel (https://help.agilitycms.com/hc/en-us/articles/360018922031) working. However, it does not render and there are no errors in my web developer console.

Screenshot of developer tools `Elements` tab:

 

Again, there are no errors or even warnings in the console. The function call `Agility.Search.Init()` already depends on jQuery existing (I have tried without jQuery loaded) so I know jQuery is loaded and working.

My component code:

import React from "react"

const Search = () => {
return (
<div className="container">
<div className="row">
<div className="col-md-12 col-sm-12">
<div className="agility-search-panel"/>
</div>
</div>
</div>
)
}

export default Search
0

Comments

10 comments
  • Maybe I need another Agility script imported, too? At the bottom of the agility-search.js file, it appears to be looking for an existing `Agility.Search` object.

    0
    Comment actions Permalink
  • Hi John,

    I believe this may be a case where the `Agility.Search.Init` method is happening before your React component is hydrated. What happens if you move that `Agility.Search.Init` code to a function that happens AFTER render of your `Search` component?

    0
    Comment actions Permalink
  • It will not build because "Agility is not defined".

    import React, { useEffect } from "react"

    const Search = (props) => {
    useEffect(() => {
    Agility.Search.Init({
    url: "https://search.agilitycms.com",
    websiteName: "<websiteName>",
    lang: "",
    authKey: "<authKey>",
    })
    })

    return (
    <div className="container">
    <div className="row">
    <div className="col-md-12 col-sm-12">
    <div className="agility-search-panel"/>
    </div>
    </div>
    </div>
    )
    }

    export default Search


    Maybe there is a different way to call the main Agility object? Do I need a certain import for that? Or does it not exist until I import a different Agility script that is normally included with the asp.net version of Agility?

    e: I have also tried importing the `agility-search.js` file directly into my module after downloading it to my machine and it will not compile, either, because it is not able to find the Agility object.

    0
    Comment actions Permalink
  • Hmm... Did you try calling `window.Agility.Search.Init`? The trick here is to try and load that agility-search.js script and have it available as a global object and then access that in your code. 

    0
    Comment actions Permalink
  • A thought here, what if you were to load that script asynchronously from within your react component?

    0
    Comment actions Permalink
  • I did try calling `window.Agility.Search.Init` and just tried again. `Agility` is still undefined.

    How would I load the script asynchronously from within my react component? I currently have the script loading at the bottom of my layout with:

    <script src="https://search.agilitycms.com/scripts/agility-search.min.js"/>
    0
    Comment actions Permalink
  • Hi John,

    I just set up a quick test and found you can load the script in your file gatsby-browser.js (you may need to create one in your root if you don't already have one).

    exports.onInitialClientRender = () => {

        var loadScript = function(src) {

            var tag = document.createElement('script');

            tag.async = false;

            tag.src = src;

            window.document.body.appendChild(tag);

        }

            

        if(window.document) {

            loadScript('https://search.agilitycms.com/scripts/agility-search.min.js')

        }

    }
    Then, in your React component, you can refer to `Agility.Search.Init` to initialize the function there, or you can initialize it directly from the gatsby-browser.js file.

    I'm not sure how this interacts with your jQuery though, you'll have to test that out. Let me know if this works for you.
    0
    Comment actions Permalink
  • Alternatively, you may find the embed method may not work best for you in your website. Instead, you can hit our API directly using your own client. We took this approach ourselves in the Agility CMS website.

    You can see how we did our search here.

    0
    Comment actions Permalink
  • I may have to use the API way because I just can't get the embed to work.

    0
    Comment actions Permalink
  • Yes, I think that maybe the best path for now (calling the API directly). The embed method wasn't designed for use in React/Gatsby. I think you'll find writing your own client like we did, easier to work with.

    0
    Comment actions Permalink

Please sign in to leave a comment.

Didn't find what you were looking for?

New post