diff --git a/stories/query-rule-context.stories.ts b/stories/query-rule-context.stories.ts
index 24dd6738d0..e4b9cbc165 100644
--- a/stories/query-rule-context.stories.ts
+++ b/stories/query-rule-context.stories.ts
@@ -41,21 +41,26 @@ storiesOf('QueryRuleContext', module)
search.addWidget(
instantsearch.widgets.queryRuleCustomData({
container: widgetContainer,
- transformItems: (items: CustomDataItem[]) => items[0],
+ transformItems(items: CustomDataItem[]) {
+ return items.filter(item => typeof item.banner !== 'undefined');
+ },
templates: {
- default({ title, banner, link }: CustomDataItem) {
- if (!banner) {
- return '';
- }
+ default: ({ items }: { items: CustomDataItem[] }) =>
+ items
+ .map(item => {
+ const { title, banner, link } = item;
- return `
-
${title}
+ return `
+
+ ${title}
-
-
-
- `;
- },
+
+
+
+
+ `;
+ })
+ .join(''),
},
})
);
@@ -94,21 +99,24 @@ storiesOf('QueryRuleContext', module)
search.addWidget(
instantsearch.widgets.queryRuleCustomData({
container: widgetContainer,
- transformItems: (items: CustomDataItem[]) => items[0],
+ transformItems(items: CustomDataItem[]) {
+ return items.filter(item => typeof item.banner !== 'undefined');
+ },
templates: {
- default({ title, banner, link }: CustomDataItem) {
- if (!banner) {
- return '';
- }
+ default: ({ items }: { items: CustomDataItem[] }) =>
+ items.map(item => {
+ const { title, banner, link } = item;
- return `
- ${title}
+ return `
+
+ ${title}
-
-
-
- `;
- },
+
+
+
+
+ `;
+ }),
},
})
);
diff --git a/stories/query-rule-custom-data.stories.ts b/stories/query-rule-custom-data.stories.ts
index 45baaa24c8..6e963f7ecc 100644
--- a/stories/query-rule-custom-data.stories.ts
+++ b/stories/query-rule-custom-data.stories.ts
@@ -29,28 +29,65 @@ storiesOf('QueryRuleCustomData', module)
search.addWidget(
instantsearch.widgets.queryRuleCustomData({
container: widgetContainer,
- transformItems: (items: CustomDataItem[]) => items[0],
templates: {
- default({ title, banner, link }: CustomDataItem) {
- if (!banner) {
- return '';
- }
+ default: ({ items }: { items: CustomDataItem[] }) =>
+ items
+ .map(item => {
+ const { title, banner, link } = item;
- return `
- ${title}
+ if (!banner) {
+ return;
+ }
-
-
-
- `;
- },
+ return `
+
+ ${title}
+
+
+
+
+
+ `;
+ })
+ .join(''),
},
})
);
}, searchOptions)
)
.add(
- 'with default banner',
+ 'with Hogan',
+ withHits(({ search, container, instantsearch }) => {
+ const widgetContainer = document.createElement('div');
+ const description = document.createElement('p');
+ description.innerHTML = 'Type music
and a banner will appear.';
+
+ container.appendChild(description);
+ container.appendChild(widgetContainer);
+
+ search.addWidget(
+ instantsearch.widgets.queryRuleCustomData({
+ container: widgetContainer,
+ templates: {
+ default: `
+ {{#items}}
+ {{#banner}}
+
+ {{title}}
+
+
+
+
+
+ {{/banner}}
+ {{/items}}`,
+ },
+ })
+ );
+ }, searchOptions)
+ )
+ .add(
+ 'with default and single banner',
withHits(({ search, container, instantsearch }) => {
const widgetContainer = document.createElement('div');
const description = document.createElement('p');
@@ -65,21 +102,26 @@ storiesOf('QueryRuleCustomData', module)
container: widgetContainer,
transformItems: (items: CustomDataItem[]) => {
if (items.length > 0) {
- return items[0];
+ return items.filter(item => typeof item.banner !== 'undefined');
}
- return {
- title: 'Kill Bill',
- banner: 'http://static.bobatv.net/IMovie/mv_2352/poster_2352.jpg',
- link: 'https://www.netflix.com/title/60031236',
- };
+ return [
+ {
+ title: 'Kill Bill',
+ banner:
+ 'http://static.bobatv.net/IMovie/mv_2352/poster_2352.jpg',
+ link: 'https://www.netflix.com/title/60031236',
+ },
+ ];
},
templates: {
- default({ title, banner, link }: CustomDataItem) {
- if (!banner) {
- return '';
+ default(items: CustomDataItem[]) {
+ if (items.length === 0) {
+ return;
}
+ const { title, banner, link } = items[0];
+
return `
${title}