search

bigcommerce / catalyst

Catalyst - for Composable Commerce
https://catalyst-demo.site
MIT License
99 stars 90 forks source link

Faceted Category Slug Page has an empty column (1) when facets/filters disabled (desktop 4 column width) #915

Open electricenjindevops opened 4 months ago

electricenjindevops commented 4 months ago

Describe the bug When a store does not have access to facets / filters or none exist, the first column of the faceted category slug page is empty. This is where the FacetedSearch component would appear. The code does not check if facets exist before declaring column width settings (tailwind) on the page-level, even though the display (or non-display) of the filters occurs in the component.

To Reproduce Steps to reproduce the behavior:

  1. Create a free trial store with no facets/filters enabled.
  2. Start up a default Catalyst store.
  3. Visit a category collection page (ex: Shop All)
  4. Notice the left column on desktop is empty, where faceted search should appear.

Expected behavior Catalyst should have an optimized state for the collection pages when facets/filters are not shown in the left-side (first) column on desktop. My recommendation is to utilize the empty space to fit a 4th product card into the desktop display, or to center the existing 3 card/column display if not shifting to 4 cards per row.

Screenshots image

Additional context I have not tested other breakpoints, or mobile, but can see how the code decisions here could allow for similar problems possibly. This specific bug report is based on the 4-column desktop display pictured above.

jorgemoya commented 4 months ago

Thanks for the feedback, we will take a look at this!

electricenjindevops commented 4 months ago

Thanks for the feedback, we will take a look at this!

Thanks! I don't want to muddy the waters here, but there are a few instances where "ghost elements" can be left behind. Another example would be if there are no featured products or new products, a div would appear with no content on the homepage. This obviously is not really urgent due to stores without products not being the norm, but I'm sure there must be other cases of this because of how some of the Page templates setup the structure & then use components, but the components themselves aren't guaranteed to render based on conditionals.