Create expandable search interface for Sajari website and website search integrations

[alexluscombe]

Develop an updated version of the search interface on the Sajari website using the React SDK. New designs can be found here:

Search box and 5 overlay results: https://app.zeplin.io/project/5ba096204799c73235ed771c/screen/5c0db33282be7db71db52e74 (new design on the right)

Full results page:
https://app.zeplin.io/project/5ba096204799c73235ed771c/screen/5c0db33182be7db71db52d7c

Behavior:

• Initial animation is similar to the version currently on the Sajari homepage i.e. field expands and placeholder text is removed when field is clicked
• Search field should use Instant search and typeahead
• Top 5 results should be displayed by default alongside filters (see design)
• Link at bottom of results Show all xxx results clicks through to full paginated results page where 10 results are shown on each page by default
• On mouse over title links should change state - see example Lightning Fast links in Performance block on this page - https://www.sajari.com/site-search

Intention is to also make this interface available here - https://www.sajari.com/console/collection/integrate/search-interface - as a search interface for customers to use on their websites

[zlatanpham]

Hi @alexluscombe, can you take a look at demo for the new interface and give your feedback? and please note that:

• There is no responsiveness yet. If it's in need, please inform me to do the part.
• The custom checkboxes customized from the checkbox sdk do not play nicely with the keyboard control. I'll try to fix that later.
• The design of results page includes 2 search bars. I'm not sure if it makes sense to have 2 search bars sharing the same state on a page, thus, I removed the search input from the header of the demo. Please inform me if it still required to keep both of them.

[alexluscombe]

Hi @zlatanpham thanks for the demo. It's looking good but we have a few changes.

• Add a 68px margin on the bottom of the overlay results box, so it doesn’t touch the end of (short) pages. Reproduce by dragging the page to make it smaller to touch the bottom of the results box.
• Need to correct how hyperlinks work. Please find the original hyperlink styling here. - https://jsfiddle.net/vanejung/faLqvwnc/
• Need to correct the textfield shadow behaviours on hover and focus state on the results page. Should only show shadow when field has been clicked, should be in non-active state when the results page is initially rendered as per design here - https://app.zeplin.io/project/5ba096204799c73235ed771c/screen/5c512cdb31131d309fbf37e3
• Adjusted design on results page so that filters are on left hand side. Updated design here. - https://app.zeplin.io/project/5ba096204799c73235ed771c/screen/5c512cdb31131d309fbf37e3
• Removing search from header on results is a good idea, thanks.
• Mobile design has been added - please implement responsive design for mobile screen sizes - https://app.zeplin.io/project/5ba096204799c73235ed771c/screen/5c512aa007ca6e42b8420e45

[zlatanpham]

Hi @alexluscombe, I updated the demo based on the feedback. A small issue is the hyperlink won't be nice if the text is long. Should I fix that since I just copied the style from https://jsfiddle.net/vanejung/faLqvwnc/?