Marketing Agency based in Germany
How do I create a dynamic filter for productcollections (recommended/related products) on the webflow ecommerce product page?
Webflow ecommerce currently does not offer an integrated solution to filter product collections dynamically.
An example from one of my projects:
In the store there are different product categories of trading card games (Pokemon, YuGiOh, Magic, etc.) .
I would like to achieve the following:
When you get to a product page of a Pokemon product, there should be a product collection that only shows related Pokemon products. And when you get to a product page of a YuGiOh product, there should be a product collection that only shows related YuGiOh products.
What do we need to achieve this?
• Jetboost
• Copy and paste a bit of code
Here is the solution
1. Step
Create a collection list on the product page, link it to the product collection and style it. In this collection all existing products of your store will be displayed.
2. Step
Create new categories for the products that should be displayed in the dynamic collection list.
For example:
New category -> Pokemon Accessories
New category -> YuGiOh Accessories
Add the appropriate products to the respective category. In the Pokemon accessories category, we add all products that are accessories for Pokemon items. We do the same for the YuGiOh category.
Now we need to add a single reference field to the products collection. Here we then store the appropriate accessories category.
3. Step
Create a divblock on the product page (at any place) and put in these 2 elements:
• Textblock
• Input field
Select the Textblock and give it this id: productName
Select the Input field and give it this id: inputField
Now connect the textblock element to the cms, to get the name of the category collection, that is set within the product. After that you can set the divblock to display: none
Now add this code to the before </body> tag on the product page.
<script>
document.addEventListener('DOMContentLoaded', function() {
// Select the textblock element
const productName = document.getElementById('productName');
// Select the inputfield
const inputField = document.getElementById('inputField');
// Puts the text from the textblock into the inputfield
if (productName && inputField) {
inputField.value = productName.textContent || productName.innerText;
}
});
</script>
What does this code do?
It retrieves the text from the dynamic textblock element and automatically inserts it into the input field.
Now we can filter the collection list with the input field with jetboost.
4. Step
Go to jetboost.io and create a real-time list search booster.
Choose the products collection and choose the "Categories" field to filter.
Now follow the instructions and choose input field as filter.
You have to give your input field the class from jetboost:
You are done & here's what happens:
1. You have created categories for filtering (e.g. accessories, related products, recommendations, or similar), in which you insert the corresponding products.
2. You put a suitable category for each product in the single reference field of the product collection. For example: Set the Pokemon Accessories category to a Pokemon product.
3. The dynamic text block reflects the stored category and the code inserts it automatically into the input field.
4. Jetboost then filters the collection list according to the value of the input field and automatically displays only products in the collection list that match this category.