How can I do dynamic filtering of related products?

Hi guys, I’m facing a problem since a few days, and I hope someone here can help me.

Currently I am working on an online store for trading card games (Pokemon, Yu-Gi-Oh, Magic, etc.).

On the product pages I would like to include 2 things:

  1. recommended accessories collection
  2. related products collection

For example, when I go to a Pokemon product page, I want only Pokemon accessories and related Pokemon products to be displayed in the collections.

Recommended accessories collection:

Related products collection:

The built-in filter functions do not solve the problem, because the filters cannot be set dynamically, so that the two collections automatically contain only products that correspond to the product category of the main product.

Does anyone know a way I can solve this problem?

With the help of ChatGPT I have already created code for webflow in the past, which worked great (dragscroll on the product page for example).

I got this code suggested to make a dynamic filtering of the collections possible, but I can’t get the implementation right:

I’m not sure what values need to be entered here for the selector and the data-attributes.
I would be very happy if someone could help me with my problem!

Here is my site Read-Only: [LINK][1]
Live-Website: Yu-Gi-Oh! Duelist Nexus Booster - Deutsch

Thank you for your time!

I have found a solution and documented here: