Issue with Subcategory Filtering in Reflow Product List

Reflow
1

Hi again!
I’m using the Reflow product list for a project. I have two sets of product lines (one for page 1 and the other for page 2). I’d like to manage all the products with a single Reflow account. Currently, I do this by creating two main categories, each with its own subcategories. Then, I display Category 1 on page 1 and Category 2 on page 2.

The issue arises when I try to filter products using the Category List component. When I click on one of the subcategories, the page reloads with the correct category ID, but it still shows all the products in the parent category.

What can be done to fix this?
Thank you in advance.

2

If I understand correctly, the new category ID is correctly added in the page URL ?category=12345 but the component shows another category.

If it’s possible, can you check if you’ve explicitly selected a category in the component’s options?

For example, if the component has data-reflow-category="55555", it will always show category 55555, ignoring the one in the URL.

1 Like
3

I have explicitly set it in the options. That’s the thing. As for now, I found a work around (just for this project) but when I have time Ill try and tinker a bit with some code see if I can force category even though there is already one selected from the option. Thank you!!!

4

Would you happen to know a solution to reflow product element having bad image sizes even though the uploaded image is actually square? See this forum page
Thanks in advance!

5

When we created Reflow, the plan was to make a library that works for a broad spectrum of website layouts. The means that the default library styles focus on responsiveness above everything else.

In some cases, like the project you’re working on, these default styles can get in the way of the design the user has in mind.

Your best bet would be to try to adjust the styles using custom CSS.

For example, something like the code below will force the images to be square but can come at the cost of responsiveness.

.reflow-product-list .ref-product {
    width: 300px;
}

.reflow-product-list.ref-cards .ref-image {
    height: 300px;
}

Finding CSS styles that work will vary a lot from project to project.

1 Like
6

I totally get that, and thank you very much for your answer. Ill implement this with some media query and experiment with it a bit.

Thank you.

1 Like