Hi folks,
Currently re-designing an eCommerce site using Foundry v3 and need some advice on how to create a page with the list of products.
The idea is to show a photo and a name of the product (or button “Buy Now”) so people could click on it and then get to the actual product to customise it and the order. I.E., very standard way of presenting. You’ve seen that on millions of eCommerce sites before.
The problem I’ve got is I don’t know the number of products for each specific category. Could be one, two, or twenty.
What is the best way to do that with Foundry v3?
I tried to use a Container with and without “Act as Card Group wrapper” and added multiple Cards there, but when I’m adding more cards to the container, the cards are just resizing to fit the row.
So when I have say 5 cards (i.e., products) they overflow to the next row. And when changing resolution it basically changes the number of cards per row and not resizing the cards.
Is that achievable with Container and Cards? Or should I use something like Flux?
Hi, Flux will be the simplest way to achieve that (it’s a very nice and powerful tool) and you can easily change the design when you want. You also can use columns. Four columns-grids and add card in. In your example : four column, two cards in the first and one in the others. Hope that helps.
I’m more after a flexible design rather than a pre-defined “four columns-grids” for the simple reason - it will be generated automatically by a backend CMS so you cannot really predict how many cards you need to put into each column.
Currently it’s implemented as inline ul-li list which could have indefinite number of items so they wrap around the div boundaries. The only problem that you need to define div width and that affects responsiveness.
When you have indicated a number of columns, Flux in auto row mode add row when needed. In your case I think perhaps the « no-code » wouldn’t be the best way or the fastest. I know people doesn’t want Database if possible but isn’t it the best way to manage a content with an unknown number of items ? I think you already know but just in case Elixirgraphics youtube channel provide all tuto and presentation for products. By the way Alloy provide CMS feature with droplets, maybe it could help with flux and your needs.
elixirgraphics, thanks for pointing me into the right direction. I kept try using just the standard columns/grid tool and after playing with it for a while I managed to achieve exactly what I needed. Bingo!
Now the CMS simply adds another card into a grid and everything overflows to the next row. The only trick was to carefully calculate manual column width for each breakpoint and set max-width and spacers for the cards.
Bruno, no, no, I got what you meant. It was more about timing and “push” from Adam to stick with the existing tool rather than starting exploring other options (like what I was doing before). You know, it’s like you trying different things and after a while someone just tells you need to start from the scratch. And you like: “C’mon! I tried that already!” But delete everything and start anding and it worked for some reason.
