feat(widgets): Implement queryRuleCustomData widget

[tharropoulos]

Rationale

We're enhancing our search experience by introducing the ability to display dynamic content based on metadata from curation rules. This feature allows us to show personalized banners, promotions, or any custom content triggered by specific search queries.

Change Summary

Added Features:

1. New method in SearchResponseAdapter.js:

   • _adaptUserData(metadata): Adapts the metadata from Typesense response to the format expected by InstantSearch.js.

2. In app.js (testground):

   • Added queryRuleCustomData widget to display custom content based on metadata.

Code Changes:

1. In SearchResponseAdapter.js:

   • Modified adapt() method to include appliedRules and userData when metadata is present in the Typesense response.

2. In populateProductsIndex.js:

   • Added an override rule for "Samsung" queries to include metadata for promotional content.

Test Updates:

1. In SearchResponseAdapter.test.js:

   • Added tests for _adaptUserData method to ensure correct formatting of metadata.

2. In widgets.test.js:

   • Added tests for queryRuleCustomData widget to verify proper rendering of metadata-based content.

Documentation Updates:

1. In index.html (testground):
   • Added a new <div> with id "banner" to display the custom content.
2. In README.md:
   • Removed the queryRuleCustomData widget from the list of unsupported widgets.

Demo

To demonstrate the new feature, we've added a custom banner for Samsung phone promotions in our test environment. Here's how it works:

1. When a user searches for "Samsung", it triggers a curation rule we've set up.
2. This rule includes metadata with promotional content: "20% on all Samsung Phones!"
3. The queryRuleCustomData widget detects this metadata and renders it in the "#banner" element.
4. Users see a personalized banner with the promotion, enhancing their search experience.

This demo showcases how we can dynamically display relevant content based on user queries, opening up possibilities for targeted marketing, seasonal promotions, or any other context-sensitive information we want to present to our users.

PR Checklist

• I have read and signed the Contributor License Agreement.

[tharropoulos]

It seems as though updating to 27.1 (39b6d85) breaks the searchExperience test. Specifically on

typesense-instantsearch-adapter/test/searchExperience.test.js

Lines 296 to 298 in 49c65f5

	await expect(page).toMatchElement("#stats", {
	text: "250 results found",
	});

When using 27.1 it returns 263 records as opposed to the test's 250

[jasonbosco]

@tharropoulos Yeah, I've seen some minor differences in number of results fetched between versions as we changed the defaults for some of the search parameters. So feel free to update the count of results found in the tests

[tharropoulos]

@tharropoulos Yeah, I've seen some minor differences in number of results fetched between versions as we changed the defaults for some of the search parameters. So feel free to update the count of results found in the tests

Resolved in 0f6fd6e

[jasonbosco]

Now available in v2.9.0-4