Guides / Algolia AI / Shopping Guides / Ui library

ShoppingGuidesHeadlines

On this page

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

React

The <ShoppingGuidesHeadlines /> widget lets you reference and render different shopping guides 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
25
26

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

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

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

  return (
    <ShoppingGuidesHeadlines
      showFeedback
      userToken={userToken}
      nbHeadlines={6}
      client={client}
      category={category}
      showImmediate
    />
  )
}

Parameters

client
type: GSEClient
Required

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

The category used for retrieving the headlines.
nbHeadlines
type: number

The number of headlines to display. Default: 4
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-ShoppingGuideHeadlinesContent-wrapper',
        props.classNames?.wrapper
      )}
    >
      <props.View />
    </section>
  );
}
view
type: ViewProps

The view component into which your shopping guide headlines will be rendered.

The default implementation is:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38

function ListView(props) {
  return (
    <div
      className={cx(
        'ais-ShoppingGuideHeadlinesContent-container',
        props.classNames?.container
      )}
    >
      {props.items.map((item) => (
        <div
          key={item.objectID}
          className={cx(
            'ais-ShoppingGuideHeadlinesContent-item',
            props.classNames?.item
          )}
        >
          <props.itemComponent
            createElement={createElement}
            Fragment={Fragment}
            classNames={props.classNames}
            item={item}
            getters={props.getters}
          />
        </div>
      ))}
      {props.showFeedback && (
        <props.feedbackComponent
          castFeedback={props.castFeedback}
          objectIDs={props.items.map((item) => item.objectID)}
          voteTarget="headline"
          alreadyCast={props.alreadyCast}
          createElement={createElement}
          Fragment={Fragment}
        />
      )}
    </div>
  );
}
itemComponent
type: ({ item, createElement, Fragment, html }) => JSX.Element | VNode | VNode[]

Component to display the headlines.
classNames
type: HeadlinesButtonClassNames

The class names for the component.

Copy 
1
2
3
4
5
6
7
8
9
10

type HeadlinesButtonClassNames = Partial<{
  wrapper?: string;
  container?: string;
  item?: string;
  itemContent?: string;
  itemTitle?: string;
  itemImage?: string;
  list?: string;
  readMore?: string;
}>;

JavaScript

The shoppingGuidesHeadlines 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

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

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

shoppingGuidesHeadlines({
  container: '#headlines',
  client: client,
  userToken: 'test-user',
  showImmediate: true,
  showFeedback: true,
  category: 'category',
});

Parameters

client
type: GSEClient
Required

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

The category used for retrieving the headlines.
nbHeadlines
type: number

The number of headlines to display. Default: 4
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-ShoppingGuideHeadlinesContent-wrapper',
        props.classNames?.wrapper
      )}
    >
      <props.View />
    </section>
  );
}
view
type: ViewProps

The view component into which your shopping guide headlines will be rendered.

The default implementation is:

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38

function ListView(props) {
  return (
    <div
      className={cx(
        'ais-ShoppingGuideHeadlinesContent-container',
        props.classNames?.container
      )}
    >
      {props.items.map((item) => (
        <div
          key={item.objectID}
          className={cx(
            'ais-ShoppingGuideHeadlinesContent-item',
            props.classNames?.item
          )}
        >
          <props.itemComponent
            createElement={createElement}
            Fragment={Fragment}
            classNames={props.classNames}
            item={item}
            getters={props.getters}
          />
        </div>
      ))}
      {props.showFeedback && (
        <props.feedbackComponent
          castFeedback={props.castFeedback}
          objectIDs={props.items.map((item) => item.objectID)}
          voteTarget="headline"
          alreadyCast={props.alreadyCast}
          createElement={createElement}
          Fragment={Fragment}
        />
      )}
    </div>
  );
}
itemComponent
type: ({ item, createElement, Fragment, html }) => JSX.Element | VNode | VNode[]

Component to display the headlines.
classNames
type: HeadlinesButtonClassNames

The class names for the component.

Copy 
1
2
3
4
5
6
7
8
9
10

type HeadlinesButtonClassNames = Partial<{
  wrapper?: string;
  container?: string;
  item?: string;
  itemContent?: string;
  itemTitle?: string;
  itemImage?: string;
  list?: string;
  readMore?: string;
}>;
Previous
Publish Shopping Guides
Next
ShoppingGuidesContent
Did you find this page helpful?