[Ecommerce] Dynamic filter by custom option element in product page

Hey folks,
Need some help with what I presumed to be a fairly simple task. In this project, I’ve got a custom option field in my product with a few options. Essentially, I wanted to be able to filter products by colorway, while keeping it separate from the built-in collections feature.

Here’s where the issue lies: I don’t see a filter option that states: [Custom option field] of current product page is equal to [Custom option field] of sorted product previews.

Screen Shot 2022-05-18 at 8.02.03 PM

The bottom dropdown only allows for direct choice, not a dynamic choice based on current product. Everything concerning this can be found on the product template page. I’d be happy to hire someone to write a few lines of custom code (I’m not fluent in JS but I assume this shouldn’t be too difficult)

Thank you all. Cheers.


Here is my site Read-Only: Webflow - Teacaps

Hey Curtis,

So “Similar Product Tag” is your custom field?

This is how I would do it:

  1. Display the custom field (“Similar Product Tag”) on the product page, anywhere, so we can pick it up from script (then we just hide it from the display)
  2. In the “Related products” section, display all products, with the custom field printed somewhere too (we’ll hide it later)
  3. The script will pick up the current custom field (“Similar Product Tag”), and remove the products (in the “Related products” section) that do not have the same custom field
  4. Hide the custom fields with display:none CSS property so that the fields are still in the html but hidden from the view

If you do step 1 and 2, I can help you with the script :slight_smile:

Tell me if that helps! Cheers.

Hey @erwann!
That sounds like a great workaround solution, thanks! I’ve updated the product page to display the current product’s tag (Class: Custom Tag Display), and each product to display its own tag (Class: Product Custom Tag Display).

I’ve also removed all filters from the list of products. Unfortunately, I’m not too familiar with JS - really appreciate your help with the script. Thanks again!

Cheers,
Curtis

Cool I saw your update!

Can you try this adding this script, publish the site (won’t work in preview mode) and see if it works?

window.addEventListener('DOMContentLoaded', (event) => {
    const productSimilarTag = document.getElementsByClassName("custom-tag-display")[0];
    if (!productSimilarTag) { return; }

    const relatedProductsSimilarTag = document.getElementsByClassName("product-custom-tag-display");

    for (const relatedProductSimilarTag of relatedProductsSimilarTag) {
        if (relatedProductSimilarTag.innerText !== productSimilarTag.innerText) {
            relatedProductSimilarTag.parentElement.parentElement.parentElement.style = "display:none";
        }
    }
});

It worked for me running it from the javascript console, hope it works as well for you.

Keep me updated! Cheers.

Hey @erwann,
The script you wrote worked flawlessly, thanks so much! I’ve gone ahead and set all the custom tag display elements to hidden, everything looks great.

Really appreciate your help with this.

Cheers,
Curtis

Great, glad it works! You’re welcome.

Cheers,
Erwann.