Page Request - /search.vue Site Search Template

[pghorpade]

Page Description

This Page is used on the FTVA site to display site search results. There are 3 variants for this page:
When a search is performed, it returns some results and an aggregation with pagination. Next, when a search is performed, there are no results, no aggregation, no pagination, and no number of pages. Last, the tablet and mobile view will hide the filters on the page and use the FilterDropDown component.

Youtube video walkthrough

There is no craft content type for this template

Design

Please also see attached screenshots for quick reference.

• Desktop: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/-FTVA--Final-Design-with-Annotations?node-id=993-9382&p=f&t=fDA7OR58CeMwv1XX-0
• Mobile: https://www.figma.com/design/L8e1czKo8a8px368ayyPZ4/-FTVA--Final-Design-with-Annotations?node-id=8662-4898&t=fDA7OR58CeMwv1XX-0

If no mobile designs provided, please use your best judgment for responsiveness.

Jira Epic

APPS-2697

Route

This route link pages/search.vue will be created in the Nuxt pages folder.

ES Query

1. There will be a change to update the index mapping when the index is created, just like the library website recent search improvement work link
2. There will be a new composable that queries paginated site search results with aggregation data for the filters from the Elastic search index.
3. The query will sort by title or posted Date, check how this affects the default sort by score or relevancy when both title and score are sorted on
4. The query will be similar to a library website site search query with ftva-related changes

Developer Tips

1. The page will be a 2-column layout, but won't use the TwoColumnLayout component; this will be built into the page. Single column layout for no search results variation of this template
2. There is a breadcrumb to go to the home page
3. Style NavSearch on the page to change the styles on the button and other styles like background color.
4. The Filter Results section will use BlockTag pills and will be clickable with NuxtLinks and hover styles will be added on the page.
5. When the filters are selected, the ES search query is executed with filters.
6. There will be a sortby SingleDropDown component with the following values: title(a-z), title(z-a), publication date(asc), publication date(desc).
7. BlockTag with dark background will be used to display text like from ES results json 8 of 10 Results the dark mode style will be added on the page look at this example
8. Use SectionStaffArticleList wrapped in SectionWrapper.
9. Use SectionPagination on the desktop view
10. Starting from tablet view, the filters will be moved in a dropdown using the filterdropdown component before the sortby dropdown, and both will function as a drawer when clicked.
11. In the mobile view enable infinite scroll.
12. Finally, there is a ftva call to action at the bottom of results when results are found.
13. When there are no results only show the text and catalog link in one column layout centered and no call to action.

Filter Results:

Update each template to index a new field called groupName to merge different sectionhandle into one group:

• Articles (Articles)
• Collections (Collection, Collection Story, LA Rebellion Individual, LA Rebellion Filmmakers single, Explore Collections single, Motion Picture Collections single, Television Colletions single, Watch and Listen Online single)
• Events (Events and Listing Page)
• Series (Series and Listing Page)
• General Content (ARSC single, Billy wilder single, Homepage, IMCS single, general content pages)

The filter items will not have count when not selected when selected we will show the count

Child components

1. NavBreadcrumb is used for breadcrumbs.
2. NavSearch is used forthe search input and button.
3. BlockTag for filters under Filter Results section and the Total result text.
4. SectionRemoveSearchFilters for Tablet and Mobile screens after the filters are selected.
5. DropDownFilters for Tablet and Mobile screens ,this will replace Filter Results section in Tablet and Mobile Screens.
6. SectionStaffArticleListing for show the search results listing with image, URI, sectionhandle, description and dates for events, event series, article content type, No dates for other content types.
7. SectionPagination for prev next pagination links
8. BlockCallToAction for Not Finding what you are looking for.
9. RichText for No Search Results found text
10. ButtonLink for UC Library Catalog link.## Screenshots