feat: Add search usecases to the search code sample

README.md

@@ -8,7 +8,7 @@ This repository holds code samples that demonstrate how to implement the various
 
 | Name | Tech stack | Preview |
 |-------------------------------------------------------------------|-----------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
-| [Search](./examples/search/README.md)  | TypeScript, Tailwind CSS, Limitless UI, React | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/search) |
+| [Search & Search Usecases](./examples/search/README.md) | TypeScript, Tailwind CSS, Limitless UI, React | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/search) |
 | [Autosuggest](./examples/autosuggest/README.md) | TypeScript, Tailwind CSS, React | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/autosuggest) |
 | [Recommendations](./examples/recommendations/README.md) | JavaScript, Tailwind CSS, React | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/recommendations) |
 | [Facets](./examples/facets/README.md) | JavaScript, Tailwind CSS, React | [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/bloomreach/web-code-samples/tree/main/examples/facets) |

examples/pixel/README.md

@@ -1,11 +1,17 @@
 # Bloomreach - Pixel instrumentation example
 
-This example demonstrates how to instrument the pixel across a simple storefront for page view, widget view, suggest, search, click, add to cart and conversion events.
+This example demonstrates how to instrument the pixel across a simple storefront for page view,
+widget view, suggest, search, click, add to cart and conversion events.
 
-- See `src/config.js` file to configure it to run for your account and catalog. This also has the configuration to turn on debug mode for the pixel
+- See `src/config.js` file to configure it to run for your account and catalog. This also has the
+ configuration to turn on debug mode for the pixel
 - See `src/hooks/useAnalytics.js` file to see how the pixel events are formatted
-- Search for the term `trackEvent` to see how the pixel events are instrumented across the sourcecode
-- Note: On codesandbox, because of how the preview is rendered in the iframe, the pixel script is not able to set the `_br_uid_2` cookie on the right domain, so you will not see the cookie sent in the pixel events. For the cookie to be set and sent in the pixel events, open the codesandbox preview in a new tab or run the example locally
+- Search for the term `trackEvent` to see how the pixel events are instrumented across the
+ sourcecode
+- Note: On online code editors, because of how the preview is rendered in the iframe with a
+ different domain, the pixel script is not able to set the `_br_uid_2` cookie on the right domain,
+ so you will not see the cookie sent in the pixel events. For the cookie to be set and sent in the
+ pixel events, open the online code editor preview in a new tab or run the example locally
 
 ## How to use
 
@@ -21,3 +27,4 @@ npm run dev
 or:
 
 [![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/devbox/github/bloomreach/web-code-samples/tree/main/examples/pixel)
+[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/bloomreach/web-code-samples/tree/main/examples/pixel)

examples/pixel/src/app/page.jsx

@@ -18,7 +18,7 @@ function getRandomCategories(data) {
  }
 
  return categories[0].value
- .filter((cat) => cat.cat_name.split(' ').length === 1)
+ .filter((cat) => cat.cat_name.split(/[\s\%]+/g).length === 1)
  .slice(0, 12);
 }
 

examples/search/README.md

@@ -1,6 +1,6 @@
 # Bloomreach - Search example
 
-This example demonstrates how to setup Bloomreach's search feature. See `config.js` file to configure it to run for your account and catalog
+This example demonstrates how to setup Bloomreach's search feature and the various search usecases. See `config.js` file to configure it to run for your account and catalog
 To see an example with facets, see the facets example
 
 ## How to use

examples/search/package.json

@@ -11,6 +11,7 @@
  "@bloomreach/react-banana-ui": "1.11.0",
  "@radix-ui/react-accordion": "1.1.2",
  "@uiw/react-json-view": "2.0.0-alpha.16",
+ "html-react-parser": "^5.1.18",
  "lodash": "4.17.21",
  "react": "18.3",
  "react-dom": "18.3",

examples/search/src/App.tsx

@@ -1,4 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
+import parse from "html-react-parser";
 import {
  ToggleField,
  InputField,
@@ -133,7 +134,7 @@ export default function App() {
 
  <div>
  <InputField
- helperText="Search for chair, bed, office furniture, chandeliers, chiar (for autocorrect)..."
+ helperText="Search for chair, bed, office furniture, chiar (for autocorrect), plant (for campaign), bloomreach (for redirect)..."
  value={query}
  leftElement={loading ? <LoaderIcon className="animate-spin" /> : <SearchIcon />}
  clearable
@@ -195,6 +196,17 @@ export default function App() {
  </div>
  </div>
 
+ {data?.keywordRedirect ? <div className="text-sm my-8">
+ Redirect to
+ {' '}
+ <a className="font-semibold text-blue-600" href={data.keywordRedirect["redirected url"]} target="_blank">
+ {data.keywordRedirect["redirected url"]}
+ </a>
+ </div> : null}
+ {data?.campaign?.htmlText ? <div className="my-8">
+ {parse(data.campaign.htmlText)}
+ </div> : null}
+
  {data?.response?.docs?.length ? (
  <div className="flex flex-col">
  <div className="grid grid-cols-2 gap-4 sm:grid-cols-3 md:grid-cols-4">