Skip to content

Conversation

@charleycampbell
Copy link
Contributor

@charleycampbell charleycampbell commented Jan 12, 2026

Co-authored by: @emma-imber

What does this change?

Replaces the 'At a Glance' section at the top of a Filter article with a scrollable products carousel.

Summary of changes:

  • Introduces a new ProductCarouselElement and extends the FEElement union to include it.
  • Adds enhancement logic to: extract product URLs, match and filter out duplicates products and insert the carousel instead of the “At a glance” section.
  • Passes pageId through and ensures only allow-listed pages can render a carousel.
  • Updates renderElement.tsx to render the new ScrollableProduct component for carousel elements.

Why?

As part of the continuation of making improvements to The Filter articles this is a changes that we plan to A/B/C test to see whether it is worth implementing it throughout the publishing pipeline.

Screenshots

After
image

Before
image

@github-actions
Copy link

github-actions bot commented Jan 12, 2026

@charleycampbell charleycampbell changed the title Replace at a glance Replace at a glance with scrollable carousel Jan 12, 2026
Copy link
Contributor

@oliverabrahams oliverabrahams left a comment

Choose a reason for hiding this comment

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

Left some comments, Very happy to chat through them.

Base automatically changed from mob/scrollable-products to main January 19, 2026 14:59
@github-actions
Copy link

github-actions bot commented Jan 20, 2026

@charleycampbell charleycampbell added the feature Departmental tracking: work on a new feature label Jan 20, 2026
…er the nav buttons

- Increases the product threshold from 2 to 3 for the carosuel to render
- Removes the at a glance which is added in Composer as we have it as part of the new rendered elements
- make carsouel an unordered list
@charleycampbell charleycampbell marked this pull request as ready for review January 22, 2026 09:20
@charleycampbell charleycampbell requested a review from a team as a code owner January 22, 2026 09:20
@github-actions
Copy link

Hello 👋! When you're ready to run Chromatic, please apply the run_chromatic label to this PR.

You will need to reapply the label each time you want to run Chromatic.

Click here to see the Chromatic project.

products.length >= 3;

const insertCarouselPlaceholder = (elements: FEElement[]): FEElement[] => {
if (!Array.isArray(elements) || elements.length === 0) return [];
Copy link
Contributor

@oliverabrahams oliverabrahams Jan 22, 2026

Choose a reason for hiding this comment

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

We shouldn't need this check here as it will return an empty array if it is empty and should always be an array think this relates to the TS issues you were having in the editor yday

Suggested change
if (!Array.isArray(elements) || elements.length === 0) return [];

if (!inAtAGlanceSection) {
if (isAtAGlance(element)) {
inAtAGlanceSection = true;
atAGlanceElements = [];
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
atAGlanceElements = [];
atAGlanceElements = [element];

I think we want to include the heading in the AAG elements here

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

Labels

feature Departmental tracking: work on a new feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants