Guides / Algolia AI / Shopping Guides / Ui library

ShoppingGuidesContent

On this page

Algolia Shopping Guides is currently in beta according to the Algolia Terms of Service (“Beta Services”).

React

The <ShoppingGuidesContent /> widget lets you render the content of a shopping guide on your website.

Installation

The Algolia Shopping Guides React package is available on the npm registry.

Copy 
1
2
3

yarn add @algolia/generative-experiences-react
# or
npm install @algolia/generative-experiences-react

Usage

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import { createClient } from '@algolia/generative-experiences-api-client';
import {
  ShoppingGuidesContent,
} from '@algolia/generative-experiences-react';

const client = createClient({
  appId: 'YourApplicationID',
  indexName: 'your_index_name',
  searchOnlyAPIKey: 'YourSearchOnlyAPIKey',
});

function App({ userToken, currentObjectID }) {
  //...

  return (
    <ShoppingGuidesContent
      client={client}
      showFeedback
      userToken={userToken}
      objectID={currentObjectID}
      itemComponent={({ hit }) => <HitComponent hit={hit} />}
    />
  )
}

Parameters

client
type: GSEClient
Required

The initialized Algolia Generative Experiences client.
objectID
type: string
Required

The objectID for the guide to be retrieved.
itemComponent
type: ({ item, createElement, Fragment, html }) => JSX.Element | VNode | VNode[]
Required

Component to display the items featured in the guide.
onlyPublished
type: boolean

Whether to only return headlines with generated content. Default: true
showImmediate
type: boolean

Whether to generate and display the headlines on load. Default: true
showFeedback
type: boolean

Whether to show the feedback widget. Default: false
userToken
type: string

The user token needed for computing feedback. required if showFeedback is true
children
type: (props: ChildrenProps) => JSX.Element

A render function to fully customize what’s displayed.

The default implementation is:

Copy 
1
2
3
4
5
6
7
8
9
10
11
12

function defaultRender(props) {
  return (
    <section
      className={cx(
        'ais-ShoppingGuidesContent-wrapper',
        props.classNames?.wrapper
      )}
    >
      <props.View />
    </section>
  );
}
view
type: ViewProps

The view component into which your guide content will be rendered.
classNames
type: ContentClassNames

The class names for the component.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13

type ContentClassNames = Partial<{
  wrapper?: string;
  container?: string;
  contentSection?: string;
  productLink?: string;
  heroImage?: string;
  factorSection?: string;
  relatedItemsSection?: string;
  relatedItemsListContainer?: string;
  relatedItemsTitle?: string;
  relatedItemsList?: string;
  item?: string;
}>;

JavaScript

The shoppingGuidesContent widget lets you reference and render different shopping guides on your website.

Installation

The Algolia Shopping Guides JavaScript package is available on the npm registry.

Copy 
1
2
3

yarn add @algolia/generative-experiences-js
# or
npm install @algolia/generative-experiences-js

Usage

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

import { createClient } from '@algolia/generative-experiences-api-client';
import {
  shoppingGuidesContent,
} from '@algolia/generative-experiences-js';

const client = createClient({
  appId: 'YourApplicationID',
  indexName: 'your_index_name',
  searchOnlyAPIKey: 'YourSearchOnlyAPIKey',
});

shoppingGuidesContent({
  container: '#content',
  client: client,
  userToken: 'test-user',
  showFeedback: true,
  itemComponent({ hit }) {
    return <div>{hit.title}</div>;
  },
  objectID: objectID,
});

Parameters

client
type: GSEClient
Required

The initialized Algolia Generative Experiences client.
objectID
type: string
Required

The objectID for the guide to be retrieved.
itemComponent
type: ({ item, createElement, Fragment, html }) => JSX.Element | VNode | VNode[]
Required

Component to display the items featured in the guide.
onlyPublished
type: boolean

Whether to only return headlines with generated content. Default: true
showImmediate
type: boolean

Whether to generate and display the headlines on load. Default: true
showFeedback
type: boolean

Whether to show the feedback widget. Default: false
userToken
type: string

The user token needed for computing feedback. required if showFeedback is true
children
type: (props: ChildrenProps) => JSX.Element

A render function to fully customize what’s displayed.

The default implementation is:

Copy 
1
2
3
4
5
6
7
8
9
10
11
12

function defaultRender(props) {
  return (
    <section
      className={cx(
        'ais-ShoppingGuidesContent-wrapper',
        props.classNames?.wrapper
      )}
    >
      <props.View />
    </section>
  );
}
view
type: ViewProps

The view component into which your guide content will be rendered.
classNames
type: ContentClassNames

The class names for the component.

Copy 
1
2
3
4
5
6
7
8
9
10
11
12
13

type ContentClassNames = Partial<{
  wrapper?: string;
  container?: string;
  contentSection?: string;
  productLink?: string;
  heroImage?: string;
  factorSection?: string;
  relatedItemsSection?: string;
  relatedItemsListContainer?: string;
  relatedItemsTitle?: string;
  relatedItemsList?: string;
  item?: string;
}>;
Previous
ShoppingGuidesHeadlines
Next
ShoppingGuidesFeedback
Did you find this page helpful?