Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Category Panel Component #141

Open
wants to merge 18 commits into
base: master
Choose a base branch
from

Conversation

sahanljc
Copy link

@sahanljc sahanljc commented Apr 8, 2019

What is the purpose of this pull request?

Category panel is an optional representation of the category tree response returned by the VTEX product search API. It leverages the CategoriesHighlights from vtex.store-components. The visibility of the category panel defaults to false.

What problem is this solving?

Stores often want to show the category images when a customer searches a product. vtex.search-results shows the available category filters in a left panel along with a link. It does not support showing an image.

How should this be manually tested?

  1. Set the showCategoryPanel property of the SearchResultQueryLoader to true.
  2. Search a product. (quantityOfItemsPerRow defaults to 4. You can optionally set it to 2.)

Screenshots or example usage

category-panel

Types of changes

  • Bug fix (a non-breaking change which fixes an issue)
  • New feature (a non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Requires change to documentation, which has been updated accordingly.

Category panel is an optional representation of the category tree
response returned by the VTEX product search API. The visibility of
the category panel defaults to false.
@gabrielgalc
Copy link
Contributor

Hi @sahanljc , thank you for the contribution!
Can you provide us a workspace so we can check the component's behavior?
Thanks!

Copy link
Contributor

@klzns klzns left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for your contribution, just minor adjustments

react/CategoryPanel.js Outdated Show resolved Hide resolved
react/CategoryPanel.js Outdated Show resolved Hide resolved
@sahanljc
Copy link
Author

sahanljc commented Apr 9, 2019

Hi @gabrielgalc, you can check the feature at this workspace. For detailed search results have a look at the brand search for South Co.

You can do full text search for 4414 in Electronic Components, sample in Electronic Components.

@sahanljc
Copy link
Author

sahanljc commented Apr 9, 2019

Do you guys think we should apply the map based filter in this panel as well? I am referring to the getAvailableCategories in react/FilterNavigator.js.

react/CategoryPanel.js Outdated Show resolved Hide resolved
react/CategoryPanel.js Outdated Show resolved Hide resolved
react/CategoryPanel.js Outdated Show resolved Hide resolved
react/CategoryPanel.js Outdated Show resolved Hide resolved
react/CategoryPanel.js Outdated Show resolved Hide resolved
react/CategoryPanel.js Outdated Show resolved Hide resolved
Use `mh4-ns` tachyons class instead of the check on mobile from
runtime.
`<h3>` is a block level element as @klzns pointed out and hence the
styles can be applied to `<h3>` directly.
* master: (21 commits)
  Release v3.13.1
  Add block to examples
  Release v3.13.0
  Add docs for search-title and remove unecessary padding
  Update CHANGELOG
  Add optional title block
  Update snapshot test
  Add test id
  Query by testid
  Fix comments and update class reference
  update snapshots
  Behavior tests
  Update to VTEX test tools
  Release v3.12.14
  Using store-icons instead of dreamstore-icons
  Update SNAPSHOT
  Release v3.12.13
  Add new CSS handle filterContent
  Release v3.12.12
  Fix variable name
  ...
* master:
  Release v3.13.2
  Rename component to SearchTitle
  Remove showTitle schema property
* master: (60 commits)
  Release v3.15.1
  Use recordsFiltered field from productSearch query
  Release v3.15.0
  Fix tests
  Add option to toggle visibility of facet item quantity
  Add default empty products message
  Fallback to not found page when there are no products
  Fix fetch more update
  Update changelog
  Move selected filter logic to components
  Fix prop type error
  Release v3.14.1
  Fix messages on not found page
  Release v3.14.0
  Add backwards compat props
  Add default value for query and convert to function component
  Prettier
  Scope messages
  Use decodeURIComponent when comparing values
  Remove search-title from default blocks
  ...
* master:
  Release v3.16.1
  Release v3.16.0
  Updating snapshot
  Removing fixed value on UI
  Linting
  Removing default sortby options
  Release v3.15.5
  Fix selected filters not accounting for map
  Release v3.15.4
  check facet map on withFacets
  check facet query on withFacets
  add facetMap and facetQuery params to query
  changelog
  use productSearchV2 on local query and add default items per page
  Release v3.15.3
  decode uri on gallery title
  Release v3.15.2
  Fix infinite loading on fetch more
  Update README.md
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

4 participants