Editing Reflow's Components with CSS

Reflow
1

Hey there! I’m building an ecommerce website with Reflow. But I came across some issues. For instance, I would like to change the grid layout of the Product List, and also the size of the “.ref-product” without affecting the same product when it’s in the shopping cart, but it feels almost impossible.
(Maybe a “.ref-product-cart” could fix that and separate one from the other).

I rewrote a copy of all of the components in it (tedious process lol), and then I managed to achieve the look I want.
But after testing the “new component” (e.g. ‘Product List’), it only works if the original one is also displayed. If I replace it, the look breaks. :pensive: Has anyone here tried/experienced the same issues?

Does anyone know how to solve this? At this point I’m kinda lost not knowing whether I will be able to accomplish the results I was going for. Any help or guidance would be kindly appreciated.

2

Not your answer, but do you know it’s possible to do reflow translation? It has already been made available here on the forum, I have never used it in my applications.

1 Like
3

Have you tried creating a blank div with id=‘productwrapper’

Then puting your product list inside this

then in your css use:


.productwrapper    .ref-product {
  your styles here
}

This way the styles will only be relevant to the list rather than the cart

3 Likes
4

Thanks for both your replies, guys! After hours of trial and error yesterday, I did manage to do it. Each section individually. But your suggestion @richards might be even better, in terms of keeping a clean and simple code. I signed an NDA for this website, but as soon as it’s up and running, I will share it so you can give me some feedback. :wink: