Page for 'not supported' / 'coming soon' content types

[zackkrida]

Problem

We need to design and implement a page for the 'not supported' / 'coming soon' content types we would like to show in the content switcher. At the time of writing those are 3D models and video. Adding these pages will help us get a sense of interest in these content types. We can also show external sources for these content types in the meantime to help users.

Description

@panchovm started a design for these pages, but it needs to be updated and finished now that we've updated the copy and styling of the 'external sources' feature. Here's an example mockup he provided as a starting point:

Alternatives

Additional context

Implementation

• [ ] 🙋 I would be interested in implementing this feature.

[fcoveram]

I updated the Figma file where the mockup is with the following changes:

• Replaced "one of the additional sources" with "one of the external sources".
• Updated the Filters button with a new disabled state.
• Fixed the external icon size as the previous mockup had a component bug from the WordPress Design Library.

Here is the new mockup. I do not envision any other change as the original task (#1197) aims to update the "external source" term.

[fcoveram]

In ticket #1798 I requested the component update to add the disabled state.

[zackkrida]

@panchovm looks great, thank you! One consideration: should these mockups use the row of external source buttons, or the new dropdown menu style for the external sources?

[fcoveram]

A row of buttons. The dropdown menu was to prioritize Openverse results, but in this case, it is better to make the options more explicit.

[vj27111997]

hey @zackkrida I want to contribute in this feature can I make pull request please provide your confirmation

[zackkrida]

Hi @vj27111997 you are welcome to work on this! These changes exist in the v-else-if="!hasNoResults && !isSupported" block inside of the https://github.com/WordPress/openverse-frontend/blob/c801914bcd05d64c0c58fac80ece43e2b05e1afd/src/components/VMetaSearch/VMetaSearchForm.vue component. Comment here and @ @WordPress/openverse-frontend with any questions.

[vineetjain27]

hi @zackkrida i understand the changes you suggest,but i feel there is no issue v-else-if="!hasNoResults && !isSupported" block inside ,i think we do not need to change anything in this block now.it is just work fine.

[zackkrida]

Hi @vineetjain27, I am not sure I am following your question. The section of the code I was referring to in my comment is this line https://github.com/WordPress/openverse-frontend/blob/c801914bcd05d64c0c58fac80ece43e2b05e1afd/src/components/VMetaSearch/VMetaSearchForm.vue#L17

To see this in the site, do the following:

1. Visit the preferences page of the staging site: https://search-staging.openverse.engineering/preferences
2. Enable the external_sources feature
3. Then, go to the search page: https://search-staging.openverse.engineering/search/?q=dogs
4. You'll now see additional items in the content switcher:

5. Those "coming soon" items, video and 3d models, each need their own page using the template design shared in this comment: https://github.com/WordPress/openverse-frontend/issues/1791#issuecomment-1240853358