internetarchive / internetarchive/openlibrary

Add Dropdown Menu to Facet Carousels

Open
#10,512 12 comments 0 reactions 1 assignee Claimed by @BearSunny View on GitHub
Fellowship Opportunity Lead: @mekarpeles Module: Carousels Needs: Breakdown Needs: Designs Priority: 2 State: Blocked Theme: Design Type: Design Proposal Type: Feature Request Type: Proposal
Dominant language
Python
Stars
6.7k
Forks
2k
Avg merge
2d 14h
Merged PRs (30d)
126

Description

### Feature Request

### Problem / Opportunity

Today, our subject pages are not useful to most [international] audiences because they either see random works or likely books predominantly in English.

We want to DRY the filtering system data model so it can be used by **carousels** and **mobile search**

The TL;DR

Once we merge:
* #5858

We will be able to change either all the carousels on a page or a single carousel by having some sort of facet or dropdown option.

My preference is that (for starters) each carousel would have its own filter icon
Image

Which would allow the patron to (a) specify language, (b) add tags to the query, (c) toggle ebook only

### Proposal

For v1, success means the ability to click a filter or cog icon and apply additional filters or facets (similar to the search page) to a carousel. A requirement is that language be a dropdown and that "All" is selected by default. Presumably this should be sticky across page loads but/and have an easy way to `x` and clear facets.

Github does something similar, which is having a cog that allows patrons to specify tags or other facets, e.g.

Image


Image

## Breakdown

### Related files

Refer to [this map of common Endpoints](https://github.com/internetarchive/openlibrary/wiki/Endpoints):
*

### Requirements Checklist
Checklist of requirements that need to be satisfied in order for this issue to be closed:
* [ ] Clicking facets should somehow replace or update the existing carousel (or items), possibly using a partial?
* [ ] A loading indicator should appear after facets are added, while the carousel is reloading.
* [ ] Clicking on `x` clear all the facets and reloads the original carousel
* [ ] An update button should be clicked in order to save the state
* [ ] Show somehow if/when facets are sticky set on a specific carousel (e.g. cog or filter is a different color, or we show a bar with the facets selected (that you can `x` / clear like the search page).
* [ ] Use localstorage to save a mapping of carousel_id to "query" and "settings": {} where the settings contains the options in the UI and the query is what gets sent to solr.

### Stakeholders

* @jimchamp has implemented our carousel partials


### Instructions for Contributors

* **Before** [creating a new branch](https://github.com/internetarchive/openlibrary/wiki/Git-Cheat-Sheet#making-changes-and-creating-a-pull-request) or pushing up changes to a PR, please first [run these commands](https://github.com/internetarchive/openlibrary/wiki/Git-Cheat-Sheet#working-on-your-branch) to ensure your repository is up to date, as the pre-commit bot may add commits to your PRs upstream.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.