feat: Added link to products in category/label/etc

[sumana2001]

What

• Added a button that links to the category/label/brand page in the Open Food Facts website.
• The button is hidden in the product-weight filter

Closes #405

Screenshots

Fixes bug(s)

• 405

[sumana2001]

@alexfauquette Does any of them look better? I think since it is an optional button and is to be clicked only in case of confusion, maybe we should put a box around it and just show it as a hyperlink. Let me know what you think?

If you like any of them, I'll commit the changes accordingly.

[alexfauquette]

@sumana2001 "See examples of this label/category" sounds good.

A nice to have is the translation of your text. You probably noticed that all text in the interface is declared by {{ $t("gameKey.translationKey") }}. This is done with VueI18n. If you never used i18n tools, this can help you:

• The doc: https://kazupon.github.io/vue-i18n/guide/formatting.html#named-formatting (for now, we do simple things)
• Files to add a translation key is ./i18n/common.json. Other translations are done by the community in Crowding

[sumana2001]

Thanks, @alexfauquette for the resources. I have never really worked with i18n tools. I'll go through the links and try to implement it

[sumana2001]

Hey @alexfauquette, I have added the translation key in common.json. But adding it only there is not working for me and showing the below output:

But when I added the translation key to en.json (the English file), it started working and showed the below output. When I changed the language to Italian, still I am getting the below output with the English text as the Italian key hasn't been added yet. So am I doing something wrong here? Or am I supposed to change the en.json file as well?

[alexfauquette]

Nothing bad

The fall back language is en so it will try to get translation from en.json https://github.com/alexfauquette/openfoodfacts-hungergames-1/blob/23ca2a0797e914497f04ef360f5e0a48a7944f46/src/main.js#L60-L64

const i18n = new VueI18n({
  locale: getLang(),
  messages,
  fallbackLocale: "en",
});

But the file common.json is the reference to let the community translate the app https://github.com/alexfauquette/openfoodfacts-hungergames-1/blob/master/crowdin.yml

project_id_env: CROWDIN_PROJECT_ID
api_token_env: CROWDIN_PERSONAL_TOKEN
#
# Files configuration
#
files:
  - source: /src/i18n/common.json
    translation: /src/i18n/%two_letters_code%.json

So it should be in en.json to work immediately, and in common.json to let others translate it in its own language

[sumana2001]

Oh, I understood now. So I am pushing the code in where I have changed both common.json and en.json. Thanks for the help.

[alexfauquette]

Nice 👍

[alexgarel]

wow kudos @sumana2001 (and @alexfauquette for the kind mentoring !)