[Grid view] Display product as a grid by rioug · Pull Request #14345 · openfoodfoundation/openfoodnetwork

rioug · 2026-05-28T05:06:12Z

⚠️ use clockify code Roadmap 2026: #84 - Grid view when working on this ⚠️

What? Why?

Closes As a shopper I want to see products in shops as a grid #14000

First step of Grid view, this PR show a basic grid view limited to one page and 10 products max. There are now variant information for now. This PR also include some refactor around tooltip, it makes the TooltipComponent available to the frontend.

What should we test?

Make sure to enable the product_grid_view feature

With a shop with one order cycle open:

Load the shop page
-> products should be displayed as a grid

Click on image/text
-> product overlay should display product information
Hover over product or enterprise property
-> Tool tip shows

With a shop with multiple order cycle open:

Load the shop page and choose an order cycle
-> products should be displayed as a grid
Change the selected order cycle
-> product list should update and products should be displayed as a grid

Try with different grid size, mobile examples :

Tooltip

This PR includes some changes around tooltip :

check they are still displaying as expected in the backoffice (enterprise edit page is a good place to check).

Release notes

Changelog Category (reviewers may add a label for the release notes):

User facing changes
API changes (V0, V1, DFC or Webhook)
Technical changes only
Feature toggled

The title of the pull request will be included in the release notes.

It makes product grid view feature flag available to angularJS

rioug · 2026-05-28T06:07:54Z

@mariocarabotta For the product overlay, I reused the template from the product preview in the backoffice, so it's slightly different. The main difference is the close button instead of the X in the corner we have currently.
Current overlay:

It renders a mostly empty turbo-frame for now. It's going to be used to wire the product grid view to the frontend

We don't need to load the product, as they will be displayed via the ProductsController. This is a bit hacky and we might still need to load products, time will tell.

The turbo-frame will load data automatically, and it will refresh when the order cycle is changed. It nicely leverage turbo-frame so we don't have to load data via "manually" adding AJAX request.

Which incidentally makes the spec better, we can now remove the use of `__send__`

We reuse the ProductsRenderer to keep the same loading logic. For experimentation purposes, we only load one page with 10 products.

I have tried leveraging modern CSS/Sass

It re uses the template created for the product preview, which is now in its own partial.

- Make it a bit rounded - Start at the start of the parent element, so it doesn't disappear when parent element next to the modal border. shift() middleware doesn't seem to work as expected

I am not exactly sure how to test that product don't load when the feature is enabled, but I don't want to waste time trying to figure it out.

mariocarabotta · 2026-05-28T07:08:34Z

@mariocarabotta For the product overlay, I reused the template from the product preview in the backoffice, so it's slightly different. The main difference is the close button instead of the X in the corner we have currently. Current overlay:

got it! I will review better when it comes through to testing, for now it sounds good. I didn't realise you would have had to rebuild the overlay too. @chahmedejaz is also touching that part of the code for the multiple images carousel. Is that going to be an issue?

chahmedejaz · 2026-05-28T11:52:26Z

I think we may have a bit of conflict, @mariocarabotta but it shouldn't be that serious. So we should be able to handle it. 👍🏻

mkllnk

Nice commit history. And it seems to be a good entry point to choose the product rendering layout on order cycle select. Just one question about caching below.

mkllnk · 2026-05-29T00:27:55Z

@@ -1,5 +1,5 @@
 - # NOTE: make sure that any changes in this template are reflected in app/views/admin/products_v3/product_preview.turbo_stream.haml
-= cache_with_locale do
+= cache_with_locale(current_order_cycle&.id) do


Do we need to cache by feature toggle as well?

we should, now that I think about it a bit more I am not sure the order cycle is needed but I'll double check that.

I reviewed the cache key and made it feature aware, see: 24f3fbe

dacook

Great, thanks for your responses!

mariocarabotta · 2026-06-03T00:36:26Z

thanks, this is looking great already, very exciting!!

some notes, feel free to pick up only what you think is reasonable for now, and we might address some of it later:

the grid lines are a bit of a problem when there are empty tiles. I thought this was going to be easy with the grid layout, but after doing a bit of research it seems like there is no straightforward solution to that. I'd say let's keep them for now, but we'l likely have to remove them at some point, and maybe work with more white spacing instead. Let's add more elements to the tiles in here and then we'll decide

edit: adding this as a possible option to address this issue. Haven't looked into it too much but it seems to work with last row having fewer items

is it possible to grab the alt text of the image (set in the admin) and use it in the thumbnail?
if possible, it would be great to still have 2 tiles up until 360px screen size. we can also postpone this once we have more fields in the tile, grid layouts get a bit fiddly at times

in the product details overlay, I am not sure what the product properties are supposed to do when hovering/clicking. this is also not working in production either. if there's nothing they should do, then let's remove the link tag

It allows 2 tiles till 360px wide.

DRY the css a bit, and make sure to use existing variable for colours.

dacook

Change requested as there's an unnecessary html attribute.

dacook · 2026-06-03T07:01:48Z

-  %a{"data-tooltip-target": "element", href: @link, class: @link_class}
-    = @link_text 
+  - if @no_link_element
+    %span{"data-tooltip-target": "element", href: @link, class: @link_class}


If it's not a link, then href isn't needed here and could be removed.

In fact, instead of adding a new parameter no_link_element, why not just branch if @link.present?

Good catch !
There are many places where the tooltip doesn't have a link ie :

openfoodnetwork/app/views/admin/enterprises/form/_users.html.haml

Line 15 in 47cd16e

= render AdminTooltipComponent.new(text: t('.owner_tip'), link_text: %[<i class="fa fa-question-circle"></i>].html_safe, link: nil)

We could probably review that but I think that's out of scope of this PR.

So there's other tooltips that have an <a href="">? That seems like the same case that you are implementing here, so think it would be better to clean up now and unify with the existing tooltips instead of adding a parameter and code branch for a new case.

Or if we don't clean up the old ones, can this new tooltip work with the existing <a href=""> form?

Sorry to be a pain but I think it's worth avoiding too many switches on a component, because we end up with lots of different usages and more room for bugs to hide, or visual inconsistencies.

If I remember correctly, this PR makes the tooltip component available on the frontend. That's great, and in that case it would be a great opportunity to also remove "admin" from the name, which would make it nice and succinct.

I was trying to not got there, but I guess that was inevitable once I had to actually make change to the component. Anyway, it's fixed now. it starts here : ab3e1ac

Do not use a link tag if no link provided

Replace old angular tooltip by the new stimulus based one.

And fix the styling for product preview

Update all "What's this ?" by the new component on the admin enterprise form.

dacook

Cool, thanks for continuing the clean up, looks like a good end result! 👍

rioug added 2 commits May 22, 2026 16:35

Add "product_grid_view" feature toggle

bfe09ed

Inject "productGridViewFeature"

951da2f

It makes product grid view feature flag available to angularJS

github-project-automation Bot added this to OFN Delivery board May 28, 2026

github-project-automation Bot moved this to All the things 💤 in OFN Delivery board May 28, 2026

rioug added the feature toggled These pull requests' changes are invisible by default and are grouped in release notes label May 28, 2026

github-actions Bot assigned rioug May 28, 2026

rioug moved this from All the things 💤 to In Progress ⚙ in OFN Delivery board May 28, 2026

rioug marked this pull request as ready for review May 28, 2026 06:07

rioug force-pushed the 14000-grid-view branch from 5be52c1 to 6c101f0 Compare May 28, 2026 06:08

rioug moved this from In Progress ⚙ to Code review 🔎 in OFN Delivery board May 28, 2026

rioug added 14 commits May 28, 2026 16:09

Add ProductsController

bdd38c7

It renders a mostly empty turbo-frame for now. It's going to be used to wire the product grid view to the frontend

Disable product update from AngularJS when product grid view enabled

8081f42

We don't need to load the product, as they will be displayed via the ProductsController. This is a bit hacky and we might still need to load products, time will tell.

Wire the productsController to the front end

4195d1a

The turbo-frame will load data automatically, and it will refresh when the order cycle is changed. It nicely leverage turbo-frame so we don't have to load data via "manually" adding AJAX request.

Made products public

428bc4b

Which incidentally makes the spec better, we can now remove the use of `__send__`

Load products

5ee736e

We reuse the ProductsRenderer to keep the same loading logic. For experimentation purposes, we only load one page with 10 products.

Display products as a grid

e45a01a

I have tried leveraging modern CSS/Sass

Add product modal details

67316ea

It re uses the template created for the product preview, which is now in its own partial.

Add partial for the product spinner

834ddd4

Move the spinner styling to its own partial

4fd783f

Show loading spinner when changing order cycle

eaa22a4

Improve tooltip

9fdfa1a

- Make it a bit rounded - Start at the start of the parent element, so it doesn't disappear when parent element next to the modal border. shift() middleware doesn't seem to work as expected

Prettifying new scss file

409e06a

Clean up spec file

735477a

Fix angular spec

6c101f0

I am not exactly sure how to test that product don't load when the feature is enabled, but I don't want to waste time trying to figure it out.

mkllnk reviewed May 29, 2026

View reviewed changes

rioug added 2 commits May 29, 2026 11:50

Per review, make spec more deterministic

a3e46de

Per review, spimplify code

18fe7c6

dacook approved these changes Jun 2, 2026

View reviewed changes

Comment thread app/webpacker/css/darkswarm/product-grid.scss Outdated

dacook moved this from Code review 🔎 to Test Ready 🧪 in OFN Delivery board Jun 2, 2026

dacook changed the title ~~[Grid view] Diplay product as a grid~~ [Grid view] Display product as a grid Jun 2, 2026

mariocarabotta added the pr-staged-au staging.openfoodnetwork.org.au label Jun 2, 2026

mariocarabotta removed the pr-staged-au staging.openfoodnetwork.org.au label Jun 3, 2026

Reduce column witdh

95ea333

It allows 2 tiles till 360px wide.

rioug moved this from Test Ready 🧪 to Code review 🔎 in OFN Delivery board Jun 3, 2026

rioug requested review from dacook and mkllnk June 3, 2026 05:22

mkllnk approved these changes Jun 3, 2026

View reviewed changes

rioug force-pushed the 14000-grid-view branch from ba568de to ae3651c Compare June 3, 2026 05:38

rioug added 4 commits June 3, 2026 15:38

Add image title and alt

17b9717

Add ability to not have a link for tooltip

dda80ef

Prettify css

a3843e8

Remove link from propduct properties on product overlay

ae3651c

DRY the css a bit, and make sure to use existing variable for colours.

dacook requested changes Jun 3, 2026

View reviewed changes

github-project-automation Bot moved this from Code review 🔎 to In Progress ⚙ in OFN Delivery board Jun 3, 2026

Remove href from span element

42ab6c2

rioug requested a review from dacook June 5, 2026 01:37

rioug moved this from In Progress ⚙ to Code review 🔎 in OFN Delivery board Jun 5, 2026

rioug added 5 commits June 14, 2026 10:47

Refactor AdminTooltipComponent

ab3e1ac

Do not use a link tag if no link provided

Fix tooltip on enterprise use form

8918645

Replace old angular tooltip by the new stimulus based one.

Fix tooltip for product details and product preview

dd274f9

And fix the styling for product preview

Replace What's this? partial by a component

443a512

Update all "What's this ?" by the new component on the admin enterprise form.

Refactor AdminTooltipComponent to TooltipComponent

b070c3a

rioug force-pushed the 14000-grid-view branch from 405d7cf to b070c3a Compare June 14, 2026 00:48

Fix typo

a74fbb8

dacook approved these changes Jun 15, 2026

View reviewed changes

dacook moved this from Code review 🔎 to Test Ready 🧪 in OFN Delivery board Jun 15, 2026

Uh oh!

Conversation

rioug commented May 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What? Why?

What should we test?

Tooltip

Release notes

Uh oh!

rioug commented May 28, 2026

Uh oh!

mariocarabotta commented May 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

chahmedejaz commented May 28, 2026

Uh oh!

mkllnk left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

dacook left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mariocarabotta commented Jun 3, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dacook left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dacook left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

rioug commented May 28, 2026 •

edited

Loading

mariocarabotta commented May 28, 2026 •

edited

Loading

mariocarabotta commented Jun 3, 2026 •

edited

Loading