Skip to content

Product-list: compare icon toggle, conditional Starting At, count-sorted filters - #846

Open
davidnuescheler wants to merge 4 commits into
mainfrom
product-list-tweaks
Open

Product-list: compare icon toggle, conditional Starting At, count-sorted filters#846
davidnuescheler wants to merge 4 commits into
mainfrom
product-list-tweaks

Conversation

@davidnuescheler

@davidnuescheler davidnuescheler commented Aug 27, 2026

Copy link
Copy Markdown
Contributor

https://product-list-tweaks--vitamix--aemsites.aem.page/drafts/uncled/blenders

Summary

  • Compare button: replaced text ("Compare" / "Remove from Compare") with an icon toggle — a plus icon that swaps to a checkmark once added. Hover tooltips: "Add to Comparison list" / "View Comparison List". Clicking the checkmark now navigates to the comparison list rather than removing the item; hitting the 4-item limit still just shows the existing toast.
  • "Starting At" pricing: now only shown when a product's variants actually have differing sale prices. Products with a single fixed price show a plain price with no "Starting At" label.
  • Filter sorting: all facet filters (mobile drawer + desktop dropdowns) now sort values by product count descending (e.g. "Ascent X Series (7)" ranks above "Legacy Series (3)"), falling back to alphabetical order on ties.

Files

  • blocks/plp/plus.svg (new) — plus icon matching checkmark.svg's stroke style
  • scripts/add-to-compare.js — export getHeaderCompareHref for reuse
  • widgets/product-list/product-list.js — button/price/sort logic
  • widgets/product-list/product-list.css — icon button styling
  • widgets/product-list/product-list.json — new tooltip copy (EN/FR/ES)

🤖 Generated with Claude Code

…nt-sorted filters

- Compare button now shows a plus icon that swaps to a checkmark once
  added, with "Add to Comparison list" / "View Comparison List" tooltips.
  Clicking the checkmark navigates to the comparison list instead of
  removing (hitting the limit still just shows a toast).
- "Starting At" now only renders when a product's variants actually have
  differing sale prices; otherwise the plain price is shown.
- Facet filters (drawer + toolbar dropdowns) now sort by product count
  descending, falling back to alphabetical on ties, applied to every
  filter (not just Series).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@aem-code-sync

aem-code-sync Bot commented Aug 27, 2026

Copy link
Copy Markdown

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed.
In case there are problems, just click a checkbox below to rerun the respective action.

  • Re-run all PSI checks
  • Re-run failed PSI checks
  • Re-sync branch
Commits

@aem-code-sync

aem-code-sync Bot commented Aug 31, 2026

Copy link
Copy Markdown
Page Scores Audits Google
📱 /drafts/uncled/blenders PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI
🖥️ /drafts/uncled/blenders PERFORMANCE A11Y SEO BEST PRACTICES SI FCP LCP TBT CLS PSI

.product-list-widget .product-list-widget-compare-icon {
width: 1rem;
height: 1rem;
background: url('/blocks/plp/plus.svg') center / contain no-repeat;

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

interesting

"startingAt": "Starting At",
"compare": "Compare",
"removeFromCompare": "Remove from Compare",
"addToComparisonList": "Add to Comparison list",

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

which is correct, upper or lower L/list?

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.

2 participants