Analytics.SearchView

component

Examples

• example

  Description

  This is the default example

  JavaScript

  import {Analytics} from '@shopify/hydrogen';
  import {useLoaderData} from 'react-router';
  
  export async function loader({request}) {
    const url = new URL(request.url);
    const searchParams = new URLSearchParams(url.search);
    const searchTerm = String(searchParams.get('q') || '');
  
    return {searchTerm};
  }
  
  export default function SearchPage() {
    const {searchTerm} = useLoaderData();
    return (
      <div className="search">
        <h1>Search</h1>
        <Analytics.SearchView data={{searchTerm}} />
      </div>
    );
  }
  

  TypeScript

  import {Analytics} from '@shopify/hydrogen';
  import {type LoaderFunctionArgs} from '@shopify/remix-oxygen';
  import {useLoaderData} from 'react-router';
  
  export async function loader({request}: LoaderFunctionArgs) {
    const url = new URL(request.url);
    const searchParams = new URLSearchParams(url.search);
    const searchTerm = String(searchParams.get('q') || '');
  
    return {searchTerm};
  }
  
  export default function SearchPage() {
    const {searchTerm} = useLoaderData<typeof loader>();
    return (
      <div className="search">
        <h1>Search</h1>
        <Analytics.SearchView data={{searchTerm}} />
      </div>
    );
  }