# Review sorting options exist (helpful, recent, rating)

- **Pattern:** `ab-001206` (`ecommerce-reviews.display-ux.review-sorting`)
- **Severity:** medium
- **Lifecycle:** active
- **Last modified:** 2026-04-18
- **Canonical URL:** https://auditbuffet.com/patterns/ab-001206
- **License:** CC-BY-4.0 — attribute to AuditBuffet Pattern Catalog (https://auditbuffet.com/patterns/ab-001206)

## Why it matters

Reviews rendered in a single fixed order force shoppers to read chronologically, which buries the most decision-useful content. Negative reviews discovered through sorting drive credibility; a catalog that shows only the oldest or newest feedback reads like curation and erodes trust. Sort controls also let shoppers self-serve the exact signal they need — recency for fast-changing products, helpfulness for depth, rating extremes for risk assessment — so conversion lifts on products with mixed reviews.

## Severity rationale

Medium because reviews still render without sort, but decision quality and time-to-purchase degrade noticeably on high-volume products.

## Remediation

Add a sort control at `components/ReviewSort.tsx` emitting `recent`, `helpful`, `highest-rating`, and `lowest-rating` values, and wire the API to accept a `sort` query parameter that maps to an ORDER BY clause. Verify the displayed order actually changes on each selection:

```ts
const sortMap = {
  recent: { created_at: 'desc' },
  helpful: { helpful_votes: 'desc' },
  'highest-rating': { rating: 'desc' },
  'lowest-rating': { rating: 'asc' }
}
```

## Detection

- **ID:** `review-sorting`
- **Severity:** `medium`
- **What to look for:** Enumerate all sorting options available in the review display UI. For each option, classify whether it has a corresponding query or sort implementation in the API/data layer. Count the total number of functional sort options.
- **Pass criteria:** At least 2 distinct sorting options are available and functional (e.g., "Most Recent" and "Most Helpful" or "Highest Rating"), each backed by a corresponding sort parameter in the review query or API endpoint.
- **Fail criteria:** Fewer than 2 sorting options exist, or the sort dropdown/control renders options that do not actually change the displayed review order.
- **Skip (N/A) when:** The project has fewer than 5 total reviews in the database or no review display section exists.
- **Detail on fail:** `"0 sorting options found. Reviews always render in database insertion order."` or `"Sort dropdown shows 3 options but onChange handler is empty — reviews never reorder."`
- **Remediation:** Add a sort control in `components/ReviewSort.tsx` and update the review query/display:

  ```tsx
  // components/ReviewSort.tsx
  export function ReviewSort({ onSortChange, currentSort }) {
    return (
      <select value={currentSort} onChange={(e) => onSortChange(e.target.value)}>
        <option value="recent">Most Recent</option>
        <option value="helpful">Most Helpful</option>
        <option value="highest-rating">Highest Rating First</option>
        <option value="lowest-rating">Lowest Rating First</option>
      </select>
    )
  }

  // api/reviews?productId=X&sort=recent|helpful|highest-rating|lowest-rating
  const sortMap = {
    recent: { created_at: 'desc' },
    helpful: { helpful_votes: 'desc' },
    'highest-rating': { rating: 'desc' },
    'lowest-rating': { rating: 'asc' }
  }
  ```

Taxons: user-experience

HTML version: https://auditbuffet.com/patterns/ab-001206