Search from two Projects

🆘 Support
1

I am building a website that pulls content from two different DatoCMS projects; everything works great and I don’t have any issues with that. Now I need to add search functionality to the site and I was wondering if it would be possible to have the search pull content from the two projects. I was looking at the docs and it seems that I can only add one API Token. Any ideas on how I can accomplish this?

Thank you

2

@jgiraldo if the site is statically generated you should be able to accomplish this by setting up the build trigger with the search enabled in just one project. What we do a scraping of the public site, so you should be good to go by enabling the search only in one build trigger.

Let me know if you have problems or issues with this!

3

That’s great. Yes, the site is statically generated; I am using Gatsby. However, after following the docs on how to setup the Search Widget on the site, I get a 404 response. The docs are very straightforward and I followed everything as described. Not sure why I am getting the 404 error though. Please advise.

4

Can you please share a link that can help me reproduce?

What is returning the 404?

5

Here is the link of the site on Netlify: https://wvumedicine-childrens.netlify.app/

It seems nothing gets loaded into the #search-container div
and also when I test the search with the curl script as described on the documentation, I get a 404.

6

hey @jgiraldo if I click on the magnifying glass nothing happens here :frowning:

7

@mat_jack1 I was able to get the search working (to a point). I followed the docs and now I can print the search results on the console but I am stuck trying to figure out how to display the search on the page/component. Here is the link of the site again: https://wvumedicine-childrens.netlify.app/

Below is the code for the component:

/** @jsx jsx */
import { jsx, Box, Button, Flex, Input } from "theme-ui"
import { useState, useRef } from "react"
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
import { faSearch } from "@fortawesome/pro-regular-svg-icons"
import DatoCmsSearch from "datocms-search/dist/datocms-search.base"

const Search = ({ initialQuery = "" }) => {
  const [query, setQuery] = useState(initialQuery)
  const inputEl = useRef(null)
  const client = new DatoCmsSearch("144b024a6f81e4c4d2fa3db02a8bf5")
  const handleChange = e => {
    setQuery(e.target.value)
  }
  const handleSubmit = e => {
    e.preventDefault()
    // `inputEl.current` points to the mounted search input element
    const q = inputEl.current.value
  }

  client
    .search(query, { highlightWith: '<span class="h"></span>' })
    .then(function(response) {
      console.info(response.results)
      console.info(response.total)
    })
    .catch(function(error) {
      console.error(error)
    })

  return (
    <Box sx={{ position: "relative" }}>
      <Flex as="form" role="search" sx={{ alignItems: "center", ml: 2 }}>
        <label htmlFor="search-input" style={{ display: "none" }}>
          Search for:
        </label>
        <Input
          ref={inputEl}
          type="search"
          id="search-input"
          value={query}
          placeholder="Search..."
          onChange={handleChange}
          sx={{ backgroundColor: "white", height: "3em" }}
        />
        <Button
          type="submit"
          aria-label="search"
          sx={{
            background: "transparent",
            border: "none",
            height: "50px",
            cursor: "pointer",
            mr: [3, 3, 0],
            ":hover:not(.touch)": {
              background: "transparent",
              border: "none",
              outline: "none",
            },
            ":focus": {
              background: "transparent",
              border: "none",
              outline: "none",
            },
          }}
        >
          <FontAwesomeIcon
            icon={faSearch}
            sx={{ color: "white" }}
            style={{ fontSize: "1.5em" }}
          />
        </Button>
      </Flex>
      <Box
        sx={{
          backgroundColor: "gray.3",
          display: "block",
          position: "absolute",
          top: "53px",
          width: ["full"],
        }}
      >
        Display results here
      </Box>
    </Box>
  )
}

export default Search

Thanks for your help

8

Hey @jgiraldo from your code looks to me like you are running the search only at component loading time?

If that’s fine, still you should implement your logic to display the results if you are not using our widget. If you are using your visualization I’m not sure how I could help, but if instead you want to use our widget, can you please share access to your repo so that I can double check how are you importing our CSS and how you are triggering the search?

9

I initially wanted to use the Widget but I was having some issues and that’s why I decided to try it without the widget. This morning I spent some time adding the widget and it seems I am getting close but for some reason I only see the search box for a split second on the page and it completely disappears. I pushed the changes to the test site so you can see what I mean (look under the main nav on the white space). My repo is on Github but it is a private repo; what would be the best way to give you access? Thank you

10

I’ve sent you a PM for this :slight_smile:

11

@mat_jack1 I figure it out. Thanks for the help.

1 Like