Add support for the new server controlled product page layout

[teolemon]

What is this ??

Product Attributes offer a flexible way to show product information without having to update the app whenever we want to add a new attribute or translation. The server sends a JSON with all the images, translated info that's necessary

What will it look like ?

How to implement this ?

Looking at the iOS code

We have a 1st implementation of attributes for iPhones if you want to study the code
API binding: https://github.com/openfoodfacts/openfoodfacts-ios/pull/748/files
Frontend: openfoodfacts/openfoodfacts-ios#780

Wiki

For more background and details, you can also see https://wiki.openfoodfacts.org/Product_Attributes
To retrieve the attributes, they need to be explicitly requested in the query ( so we need to suffix &fields=attributes_en to the queries we're currently making).

Sample output

https://fr.openfoodfacts.org/api/v0/produit/3596710364015/creme-entiere-fluide-bio-30-mg-auchan?fields=product_name,code,attribute_groups
https://fr.openfoodfacts.org/api/v0/produit/3596710364015/creme-entiere-fluide-bio-30-mg-auchan?fields=product_name,code,attribute_groups_en
https://fr.openfoodfacts.org/api/v0/produit/3596710364015/creme-entiere-fluide-bio-30-mg-auchan?fields=product_name,code,attribute_groups_fr

{
product: {
product_name: "Chocolat noir Pérou 90% fruité et boisé",
code: "3700214614266",
attributes_en: [
{
id: "labels",
name: "Labels",
attributes: [
{
status: "known",
id: "labels_organic",
description_short: "Promotes ecological sustainability and biodiversity.",
title: "Organic product",
description: "Organic farming aims to protect the environment and to conserve biodiversity by prohibiting or limiting the use of synthetic fertilizers, pesticides and food additives.",
name: "Organic product",
match: 100
},
{
status: "known",
description_short: "Fair trade products help producers in developping countries.",
id: "labels_fair_trade",
title: "Fair trade product",
description: "When you buy fair trade products, producers in developing countries are paid an higher and fairer price, which helps them improve and sustain higher social and often environmental standards.",
name: "Fair trade product",
match: 100
}
]
}
]
},
code: "3700214614266",
status: 1,
status_verbose: "product found"
}

openfoodfacts/openfoodfacts-server#4113

What should we do with the existing fields ?

Option 1: We could move all the raw data currently on the summary tab to a secondary tab for power users (like the full list of labels), enabled or disabled from the settings
Option 2: put it at the bottom of the summary tab
Option 3: dispatch it by theme to various tabs (some may actually be redundant, and fully deleted)

[teolemon]

@VaiTon is suggesting we split the issues into 2 parts:

• 1 part to update the API call
• 1 part to prepare the matching layout

[elizabethqiu]

I have some Java experience, but this looks like a challenge to me. Nevertheless, may I have an attempt at helping with this? Thank you!

[VaiTon]

Sure you can @elizabethqiu! You should first try to implement the API side via retrofit, then try to integrate it into the database to make the product available offline after first scan (this can be postponed, let's create a new issue for this).

[elizabethqiu]

I actually changed my mind-- unfortunately I will not be able to help out with this. Thank you for understanding!

[teolemon]

Do we have a chance to ship a first version of this before Jan 7th?
That's the date of the Eco-Score press conference.