Skip to content

feat: Make store filters functional #7

Description

@m2ecommerce

Problem

The filter buttons on the Store page (/store) are currently visual-only. They have no click handlers or filtering logic. Users cannot actually filter products by category, maintenance level, light requirements, etc.

This significantly reduces the usability of the shop.

Goal

Implement real filtering functionality on the Store page so users can interactively filter the product list.

Current State

  • Filter buttons exist in the UI (likely in src/pages/store/index.astro or a related component)
  • Clicking them does nothing
  • Products are rendered from Medusa data

Proposed Approach

  • Add client-side filtering (or server-side if preferred)
  • Use reactive state (Astro islands or a small React component)
  • Support multiple filter types (e.g. Light, Maintenance, Room type, etc.)
  • Ensure filters work well with the current design system

Implementation Tasks

  • Identify where the current filter UI is implemented
  • Define the filter data model (what fields can be filtered)
  • Implement filtering logic
  • Make filters reactive and update the product grid
  • Handle "clear filters" / reset state
  • Test on mobile and desktop
  • Ensure performance is acceptable with current product count (~150 visible products)

Acceptance Criteria

  • Clicking filter buttons updates the displayed products
  • Multiple filters can be combined
  • Filters are visually active when selected
  • "Clear all" functionality works
  • No console errors

Notes

  • This is one of the highest-impact remaining UX improvements before a 9/10 launch.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions