[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

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! 👍

mariocarabotta · 2026-06-19T01:24:34Z

thanks for continuing the work on this. Please find below some feedback, I think apart from those 2 things it's pretty much good to go from a visual point of view.

description links in the overlay should be styled as links. See this shop, Shiitake for an example. All the other elements seem to be working well.
when there is a lot of content (see shiitake) scrolling within the overlay doesn't get to the Close button. Maybe there's something related to this fix from Ahmed.

Lastly, search and filters don't work, but I have created a separate issue to address that.
Same for pagination (displaying all products and not just 10) here.

Thank you!

rioug · 2026-06-19T05:29:48Z

2. when there is a lot of content (see shiitake) scrolling within the overlay doesn't get to the Close button. Maybe there's something related to this fix from Ahmed.

It's probably unrelated, as the overlay for the grid uses different code.

It was originally added to fix some issue with the product properties, but product properties don't use link anymore so we can remove the styling.

This is to make sure the close button doesn't get cut off on mobile devices.

rioug · 2026-06-19T06:15:12Z

@mariocarabotta I fixed the last 2 design issue, reading for testing.

mariocarabotta · 2026-06-23T04:46:32Z

@mariocarabotta I fixed the last 2 design issue, reading for testing.

good to go from my side!

something I've noticed in scrolling behaviour in the overlay: the position gets retained as I close and then re-open the overlay. I would say it's not a problem, just letting testers know.

I will still leave testers review this as well.

Thanks!

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

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

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

mariocarabotta mentioned this pull request Jun 19, 2026

Pagination for grid view #14441

Open

rioug moved this from Test Ready 🧪 to In Progress ⚙ in OFN Delivery board Jun 19, 2026

rioug added no-staging-AU A tag which does not trigger deployments, indicating a server is being used and removed pr-staged-au staging.openfoodnetwork.org.au labels Jun 19, 2026

Remove link styling

65150ce

It was originally added to fix some issue with the product properties, but product properties don't use link anymore so we can remove the styling.

rioug added pr-staged-au staging.openfoodnetwork.org.au and removed no-staging-AU A tag which does not trigger deployments, indicating a server is being used labels Jun 19, 2026

Use % for the modal max height

a997d0b

This is to make sure the close button doesn't get cut off on mobile devices.

rioug removed the pr-staged-au staging.openfoodnetwork.org.au label Jun 19, 2026

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

dacook approved these changes Jun 22, 2026

View reviewed changes

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

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

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

rioug mentioned this pull request Jun 30, 2026

[Product Grid view ] Add product to cart #14427

Open

4 tasks

Uh oh!

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!

mkllnk May 29, 2026

Choose a reason for hiding this comment

Uh oh!

rioug May 29, 2026

Choose a reason for hiding this comment

Uh oh!

rioug May 30, 2026

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!

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

Uh oh!

Uh oh!

rioug commented Jun 19, 2026

Uh oh!

rioug commented Jun 19, 2026

Uh oh!

mariocarabotta commented Jun 23, 2026

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 19, 2026 •

edited

Loading