feat(collection): filter & search

[roiLeo]

SearchBar component looks a bit weird on collection page.
Maybe we need to update design/blocks or create an uniq search component for collection.
I would like to try to have filter on the left (replace with icon) & searbar at the center.

PR type

• Feature

Before submitting this PR, please make sure:

• Code builds clean without any errors or warnings
• I've merged recent default branch -- main and I've no conflicts
• I've didn't break any original functionality
• I've posted screenshot of demonstrated change in this PR

What's new? (may be part of changelog)

• Add sorting by sale price on collection & profile #831 related
• Add SearchBar component on collection

Screenshot

[yangwao]

I would swap search with sort queries & buy now.
Reasoning, people looking which to buy based on predefined things there, like which are available and by other sort queries.

uniq search component for collection.

I see, I'd vote for it probably, we can duplicate it later for one component:)

[yangwao]

Uwaga! 😄 Opozorilo

Screen.Recording.2021-10-12.at.12.21.15.mov

[roiLeo]

Uwaga! 😄 Opozorilo
Screen.Recording.2021-10-12.at.12.21.15.mov

Looks like a new feature to me 😄

I see, I'd vote for it probably, we can duplicate it later for one component:)

Proposal UI

current

with filter icon left

without toggle

[yangwao]

Let's use with filter icon left and add buy now to the end, right next end of Search field?

[vikiival]

I miss pagination there but I would vote for 2nd (+ add 'filter' label for non-technical users)

[roiLeo]

Pushed new content with a new copy of SearchBar component but for collection

Screeenshot

[yangwao]

how it would looks like with emojis like 🛒 or 🛍 ? Just curious, just want to have some lightweight
Or checking fontawesome,
cart-shopping-fast https://fontawesome.com/v6.0/icons?q=shop&s=solid%2Cbrands

OR let's add BUY NOW with all caps and we are done?

[roiLeo]

how it would looks like with emojis like 🛒 or 🛍 ? Just curious, just want to have some lightweight Or checking fontawesome, cart-shopping-fast https://fontawesome.com/v6.0/icons?q=shop&s=solid%2Cbrands

Your icon is only avaible on FontAwesome 6, we're on FontAwesome 5 right now.
Here is some example you ask.

edit: could be misleading to show shopping-cart on a filter button

[yangwao]

how it would looks like with emojis like 🛒 or 🛍 ? Just curious, just want to have some lightweight Or checking fontawesome, cart-shopping-fast https://fontawesome.com/v6.0/icons?q=shop&s=solid%2Cbrands

Your icon is only avaible on FontAwesome 6, we're on FontAwesome 5 right now. Here is some example you ask.

edit: could be misleading to show shopping-cart on a filter button

filter is okay with that pipe.

I thought for BUY NOW 😄 - v5.15 maybe shopping-cart https://fontawesome.com/v5.15/icons/shopping-cart?style=solid ?

[yangwao]

I think let's make buy now with CAPS BUY NOW and basically that's it now, it's etchy scratchy but fn is there, we should get some designer who will help lay out components to not be that random like on cocaine

[yangwao]

Uwaga! 😄 Opozorilo

Screen.Recording.2021-10-12.at.12.21.15.mov

We solve it later I guess? Can open an issue and let this fly before today's sub0 :)