Search-Bar Functionality

dyslexic.zeke7 months ago

8

• 

  reepicheep058 months ago

  I meant that your frontend is going to reach out to the backend to get the data. Since your frontend and backend are in the same environment you probably want to use the local API.

  
  
  

  Here is a simple example of querying the search collection. Read through the Payload Local API and Rest API docs and then look into query params in NextJS to pass the search into the payload query.

  
  
  https://payloadcms.com/docs/local-api/overview
  https://payloadcms.com/docs/rest-api/overview
  
  
  
  
  

  // app/(app)/SomePage/page.tsx
  
  // Payload
  import { getPayload } from 'payload'
  import configPromise from '@payload-config'
  import { Search } from 'payload-types' 
  // might need to run `pnpm generate:types` after installing the search plugin.
  
  type ExpectedParams = { search?: string; someOtherParam?: string };
  
  const SomePage = async ({searchParams}: {searchParams?: ExpectedParams}) => {
    // Get search term from URL param
    const search = searchParams?.search;
  
    if (!search || search.length < 1) {
      return <div>Some search component here </div>;
    }
  
    /////// Using Local API
    const payload = await getPayload({ config: configPromise });
  
    // Build your query from the searchParams
    const whereQuery = {
      where: {
        slug: {
          // Just searching slug in this example
          includes: search,
        },
      },
    };
  
    // This is just an example from the docs
    const whereExample = {
      where: {
        color: {
          // property name to filter on
          equals: "mint", // operator to use and value to compare against
        },
      },
    };
  
    // This is the query.
    const searchResults: Search = await payload.findGlobal({
      slug: "search",
      depth: 2,
      where: whereQuery, // Query goes here
    });
  
    // example REST api
    // const restSearchResults = await fetch('/api/search?where=[]')
  
    return <div>{JSON.stringify(searchResults, null, 2)}</div>;
  };
  export default SomePage

• 

  dyslexic.zeke8 months ago

  could you expand a little more on what you mean by "query the search collection (created by the plugin). Do you mean query the Search-Bar component itself or the /store page where the searchbar goes to show the products?

  
  
  

  Would you like me to put it here!?

  
  
  

  Yes I am using App router!

• 

  reepicheep058 months ago

  I would install the search plugin with one of these commands:

  
  
  yarn add @payloadcms/plugin-search
pnpm i @payloadcms/plugin-search
npm install @payloadcms/plugin-search
  
  

  Add

  import search from "@payloadcms/plugin-search";

  to your imports in your config file.

  
  
  

  Then add the plugins array to your config :

  
  
  

  export default buildConfig({
    ...
    admin: {...},
  
    plugins: [
      search({
        collections: ["pages", "posts"],
        defaultPriorities: {
          pages: 10,
          posts: 20,
        },
      }),
    ],
  
    rateLimit: {...},
    ...
  })

  
  
  

  Then you can query the search collection (created by the plugin) on your page/components. Are you using app router?

• 

  dyslexic.zeke8 months ago

  Here you go!

  
  
  

  import { buildConfig } from "payload/config";

  
  

  import { webpackBundler } from "@payloadcms/bundler-webpack";

  
  

  import { mongooseAdapter } from "@payloadcms/db-mongodb";

  
  

  import { slateEditor } from "@payloadcms/richtext-slate";

  
  

  import path from "path";

  
  

  import { Users } from "./collections/Users";

  
  

  import dotenv from "dotenv";

  
  

  import { Products } from "./collections/Products/Products";

  
  

  import { Media } from "./collections/Media";

  
  

  import { ProductFiles } from "./collections/ProductFile";

  
  

  import { Orders } from "./collections/Orders";

  
  
  

  dotenv.config({

  
  

  path: path.resolve(

  dirname, "../.env"),
  });
  
  export default buildConfig({
  serverURL: process.env.NEXT_PUBLIC_SERVER_URL || "",
  collections: [Users, Products, Media, ProductFiles, Orders],
  routes: {
  admin: "/sell",
  },
  admin: {
  user: "users",
  bundler: webpackBundler(),
  meta: {
  titleSuffix: "- Dream",
  favicon: "/favicon.ico",
  ogImage: "/thumbnail.jpg",
  },
  },
  rateLimit: {
  max: 2000,
  },
  editor: slateEditor({}),
  db: mongooseAdapter({
  url: process.env.MONGODB_URL!,
  }),
  typescript: {
  outputFile: path.resolve(

  dirname, "payload-types.ts"),

  
  

  },

  
  

  });

  
  
  

  Yes! Give me 5 seconds and ill have it to you!

• 

  reepicheep058 months ago

  No worries, just trying to point you in the right direction.

  
  
  

  Can you share your payload config file?

• 

  dyslexic.zeke8 months ago

  Im new to this so sorry if I dont understand as much!

  
  
  

  What other context would you like!!!!

  
  
  

  Thanks for your help!!!

  
  
  

  I am using v3 I believe and I am using NextJS!

• 

  reepicheep058 months ago

  You should provide more context so me or others can provide better answers.

  
  
  

  Are you using payload v3 or v2?

  
  

  Are you using NextJS?

  
  
  

  While you can technially just query the docs directly, I would recommend setting up the search plugin, or creating your own indexed collection for quick searching.

  
  
  https://payloadcms.com/docs/plugins/search
• 

  dyslexic.zeke8 months ago

  IF anyone Needs anything else please LMK!!!

  
  
  

  Values/Labels/Categories:

  
  
  

  export const PRODUCT_CATEGORIES = [

  
  

  {

  
  

  label: "Software",

  
  

  value: "sofware" as const,

  
  

  Featured: [

  
  

  {

  
  

  name: "SaaS",

  
  

  href: "/sell",

  
  

  productlist: "Marketing, E-commerce, Education, Healthcare, Finance",

  
  

  },

  
  

  {

  
  

  name: "Apps",

  
  

  href: "/sell",

  
  

  productlist:

  
  

  "Social Media & Entertainment, Health & Fitness, Educational, Music, Shopping",

  
  

  },

  
  

  {

  
  

  name: "Dream Favorites",

  
  

  href: "#",

  
  

  productlist:

  
  

  "Shopping, Health & Fitness, Marketing, E-commerce, Educational",

  
  

  },

  
  

  ],

  
  

  },

  
  
  

  export default function Store() {

  
  

  const searchParams = useSearchParams();

  
  

  const searchTerm = searchParams.get("search") || "";

  
  
  

  return (

  
  

  #
  

  <MaxWidthWrapper>

  
  

  <ProductReel

  
  

  query={{ sort: "desc", limit: 20 }}

  
  

  title="Welcome To The Store"

  
  

  />

  
  
  

  2. Here is my chucks of code!

  
  
  

  Homepage(searchBar):

  
  

  <div className="mt-6 w-full max-w-md relative">

  
  

  <input

  
  

  type="text"

  
  

  className="mt-2 w-full px-4 py-2 border rounded-full shadow-xl focus:outline-none focus:ring-2 focus:ring-indigo-500 pr-10"

  
  

  placeholder="Search 'Courses'"

  
  

  value={searchTerm}

  
  

  onChange={handleInputChange}

  
  

  onKeyPress={handleKeyPress} // Added to handle Enter key press

  
  

  />

  
  

  <button

  
  

  className="absolute right-4 top-7 transform -translate-y-1/2"

  
  

  onClick={handleSearch}

  
  

  >

  
  

  <Search className="text-indigo-500" />

  
  

  </button>

  
  

  </div>

  
  
  

  1. I'm trying to solve how to make a searchbar that is on my Homepage.tsx. I want this search-bar to work with payloa-cms because that is where all the functionality for my products are. I have some payload values/labels/categories which describe what each product on my store is (I will list those below). I want customers to search for one of these Values/Labels/Categories (Like "Software", "Design", "Courses") and it takes them to the /store and filters them via My code called <ProductReel /> (this is how my products show up on my site). If you have anymore questions about what i'm trying to achieve Just ask! Now ill list all the code!