Fix filter buttons when reusing projects template for multiple sections #1098

Copilot · 2025-11-11T23:51:27Z

Issue

Fixes issue where filter buttons scroll the page instead of filtering items when the projects template is reused for custom sections (e.g., "Talks, Posters & Conferences").

Description

Root cause: Template generated hardcoded IDs. When reused, getElementById() only found the first section, leaving others uninitialized.

Template (layouts/partials/sections/projects.html):

Made IDs unique per section: project-card-holder-{{ $sectionID }}, project-filter-buttons-{{ $sectionID }}
Added data-section="{{ $sectionID }}" to containers and buttons

JavaScript (assets/scripts/sections/projects.js):

Changed from getElementById() to querySelectorAll('.filtr-projects')
Initialize separate Filterizr instance per section with scoped control selectors

Each section now filters independently.

Test Evidence

Setup: Create a custom section reusing the projects template:

# data/sections/conferences.yaml
section:
  name: Talks, Posters & Conferences
  id: conferences
  template: sections/projects.html
  enable: true

buttons:
- name: All
  filter: "all"
- name: Talk
  filter: "talk"
- name: Poster
  filter: "poster"

projects:
- name: "Example Poster"
  tags: ["poster"]
- name: "Example Talk"
  tags: ["talk"]

Verify:

Both original Projects section and custom section appear on page
Filter buttons in each section only affect that section's items
No page scrolling when clicking filters
Filtering animation works correctly in both sections

Original prompt

This section details on the original issue you should resolve

<issue_title>Duplicate Projects Section</issue_title>
<issue_description>Hello,

I’m trying to reuse the Toha projects section template to create a custom section called Talks, Posters & Conferences.

My config.yaml looks like this:
section:
  name: Talks, Posters & Conferences
  id: conferences
  template: sections/projects.html
  enable: true
  weight: 7
  showOnNavbar: true

buttons:
- name: All
  filter: "all"
- name: Talk
  filter: "talk"
- name: Poster
  filter: "poster"
- name: Contribution
  filter: "contribution"

projects:
- name: "Example Poster"
  role: Example Conference
  timeline: "2025"
  summary: "Short description"
  tags: ["poster"]
Problem:
The section renders correctly, but when I click on the filter buttons the behavior is not the expected filtering animation. Instead, the page scrolls as if the buttons were anchors (e.g. #talk).

Expected behavior:
Filter buttons should hide/show cards in the new section the same way as in the default Projects section.

Thank you very much for your availability and support! </issue_description>

<agent_instructions>Make sure to keep code consistent with repository. Also, add instruction in the PR comment on how to test it.</agent_instructions>

Comments on the Issue (you are @copilot in this section)
@hossainemruz Do you have any live example site where I can check the behavior?

Fixes Duplicate Projects Section #1071

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

netlify · 2025-11-11T23:51:32Z

✅ Deploy Preview for toha-ci ready!

Name	Link
🔨 Latest commit	`21f70a6`
🔍 Latest deploy log	https://app.netlify.com/projects/toha-ci/deploys/6913da747231cf00080c7e27
😎 Deploy Preview	https://deploy-preview-1098--toha-ci.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Co-authored-by: hossainemruz <12577390+hossainemruz@users.noreply.github.com>

github-actions

Device	URL
desktop	https://6913d9b256572c000859844d--toha-ci.netlify.app

Device	URL
mobile	https://6913d9b256572c000859844d--toha-ci.netlify.app

Device	URL
desktop	https://6913d9b256572c000859844d--toha-ci.netlify.app/posts/

Device	URL
mobile	https://6913d9b256572c000859844d--toha-ci.netlify.app/posts/

Device	URL
desktop	https://6913d9b256572c000859844d--toha-ci.netlify.app/posts/markdown-sample/

Device	URL
mobile	https://6913d9b256572c000859844d--toha-ci.netlify.app/posts/markdown-sample/

Device	URL
desktop	https://6913d9b256572c000859844d--toha-ci.netlify.app/posts/shortcodes/

Device	URL
mobile	https://6913d9b256572c000859844d--toha-ci.netlify.app/posts/shortcodes/

Not what you expected? Are your scores flaky? GitHub runners could be the cause.
Try running on Foo instead

github-actions

Device	URL
desktop	https://6913da747231cf00080c7e27--toha-ci.netlify.app

Device	URL
mobile	https://6913da747231cf00080c7e27--toha-ci.netlify.app

Device	URL
desktop	https://6913da747231cf00080c7e27--toha-ci.netlify.app/posts/

Device	URL
mobile	https://6913da747231cf00080c7e27--toha-ci.netlify.app/posts/

Device	URL
desktop	https://6913da747231cf00080c7e27--toha-ci.netlify.app/posts/markdown-sample/

Device	URL
mobile	https://6913da747231cf00080c7e27--toha-ci.netlify.app/posts/markdown-sample/

Device	URL
desktop	https://6913da747231cf00080c7e27--toha-ci.netlify.app/posts/shortcodes/

Device	URL
mobile	https://6913da747231cf00080c7e27--toha-ci.netlify.app/posts/shortcodes/

Not what you expected? Are your scores flaky? GitHub runners could be the cause.
Try running on Foo instead

Copilot AI self-assigned this Nov 11, 2025

Initial plan

eb028a6

Copilot AI assigned hossainemruz Nov 11, 2025

Copilot started work on behalf of hossainemruz November 11, 2025 23:51 View session

Copilot AI and others added 2 commits November 11, 2025 23:54

Initial plan for fixing duplicate projects section filtering

d917a5f

Co-authored-by: hossainemruz <12577390+hossainemruz@users.noreply.github.com>

Fix duplicate projects section filtering by making IDs unique

ada85df

Co-authored-by: hossainemruz <12577390+hossainemruz@users.noreply.github.com>

Copilot AI changed the title ~~[WIP] Fix filter button behavior in Talks, Posters & Conferences section~~ Fix filter buttons when reusing projects template for multiple sections Nov 11, 2025

Copilot AI requested a review from hossainemruz November 11, 2025 23:59

Copilot finished work on behalf of hossainemruz November 11, 2025 23:59

Merge branch 'main' into copilot/fix-filter-button-behavior

d5b3fca

hossainemruz marked this pull request as ready for review November 12, 2025 00:49

github-actions bot reviewed Nov 12, 2025

View reviewed changes

Update dependencies

21f70a6

hossainemruz approved these changes Nov 12, 2025

View reviewed changes

hossainemruz added the bug-fix Bug fixes label Nov 12, 2025

github-actions bot reviewed Nov 12, 2025

View reviewed changes

hossainemruz merged commit 645585a into main Nov 12, 2025
12 checks passed

hossainemruz deleted the copilot/fix-filter-button-behavior branch November 12, 2025 00:57

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix filter buttons when reusing projects template for multiple sections #1098

Fix filter buttons when reusing projects template for multiple sections #1098

Copilot AI commented Nov 11, 2025 •

edited

Loading

Uh oh!

netlify bot commented Nov 11, 2025 •

edited

Loading

Uh oh!

github-actions bot left a comment

Uh oh!

github-actions bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Fix filter buttons when reusing projects template for multiple sections #1098

Fix filter buttons when reusing projects template for multiple sections #1098

Conversation

Copilot AI commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Issue

Description

Test Evidence

Comments on the Issue (you are @copilot in this section)

Uh oh!

netlify bot commented Nov 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for toha-ci ready!

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Copilot AI commented Nov 11, 2025 •

edited

Loading

netlify bot commented Nov 11, 2025 •

edited

Loading