Add rich link preview to the shop

[lucca65]

Is your feature request related to a problem? Please describe.
When users share Cambiatus links it is shown plain, without a preview

Describe the solution you'd like
Implement a preview with the product image and the community logo. Maybe with some text like "${user} is selling ${product} on Cambiatus, check it out"

Describe alternatives you've considered
N/A

Additional context
N/A

Screen shots

[henriquecbuss]

Should we use this issue to show previews on more areas of the app? I can imagine some areas where we can use specific previews:

• shop offers
• claims
• transfers
• profiles

We should also probably have a "default" preview, that's shown on all other pages (e.g. the dashboard). In that case, I see two possibilities:

• Show information about Cambiatus itself - Show Cambiatus logo, and some short description
• Show information about the community - Show the community logo, and the community description

I think this is a really interesting issue, and a great improvement, with lots of possibilities! It is pretty restrained though, we pretty much just get an image, the title and a quick description. Here is a good resource to get started on implementing this.

[lucca65]

backend requirements will be implemented on #177

[henriquecbuss]

@juramos-2020 @rafachadud With this, we now have the possibility to display the product page for guests as well! I was thinking we could show the same thing, but when the user clicks "Buy", they're redirected to the Login page. What do you think? Is that ok?

[henriquecbuss]

@lucca65 I had all the structure ready for this, and I couldn't get it to work... upon further research I found out that the Facebook, Twitter and Whatsapp crawlers don't execute JS. From there, I found two options:

1. Find a way to have server-side rendering. I've heard good things about using headless chrome for this, but we'd need to setup a server for that. I don't think there are any Elm-related solutions that aren't full-blown frameworks like elm-pages (which isn't what we want at all).
2. Check for the user-agent on NGINX and route the request to the backend as in this article and this thread

Number 1 is pretty unrealistic for us at this point IMO, it would complicate our stack by a lot, and I'm not really sure what would happen with pages that are for logged-in users only. So that leaves us with option 2... do you think that's doable, or should we put this on the icebox and maybe revisit it at a later date?

What we can do right now is just add some generic Cambiatus-related stuff (title, image, description) to the head tag in public/index-html, so that there's something to show. It wouldn't be community/product/user/anything-specific, and we won't be able to translate it, but it would be something. What do you think about that?

[juramos-2020]

@juramos-2020 @rafachadud With this, we now have the possibility to display the product page for guests as well! I was thinking we could show the same thing, but when the user clicks "Buy", they're redirected to the Login page. What do you think? Is that ok?

I think this is great. It would be more attractive for the user to enter and be part of the 😉👍

[henriquecbuss]

@lucca65 did you get a chance to read my comment above? How should we proceed?

[lucca65]

I think we should go for the second solution, with a preview on Elixir and a redirect on Nginx! Maybe we should transfer this to the backend? looks like the frontend will do nothing

[henriquecbuss]

+1 on transferring to the backend!

[juramos-2020]

Olá pessoal!
tudo bem? @NeoVier @MatheusBuss

vocês já tem tudo o que precisam de Design para essa implementação? Vocês vão precisar das telas?

[lucca65]

Ju acho que essa funcionalidade não tem nenhuma tela. você tinha pensado em alguma coisa?

[juramos-2020]

Tinha pensado em algo assim, mas tranquilo se já fizeram 😉👍

Se precisarem de alguma ajuda para as telas de compartilhamento de perfis é só falar 😉👍

[lucca65]

Ju não tenho permissão pra ver esse link

[juramos-2020]

Ops, tranquilo.

Acabei de mandar um convite para vocês e expliquei ainda pouco no Slack (aqui nessa conversa) sobre a migração de projetos que estamos fazendo no Figma. 😉👍

[lucca65]

Ju tem um elemento que não colocamos na loja, de ter o preço depois da descrição. @MatheusBuss pode criar uma issue pra colocarmos isso?

[MatheusBuss]

Acho que isso é algo que vamos tratar na cambiatus/lambda-functions#2. Lá já tem alguma descrição do que pensamos em fazer. É legal já pensar em como vão ficar as imagens sim 👍.

[lucca65]

não vamos tratar da imagem? pq aqui acho que é mais colocar o preço após a descrição do produto mesmo

[MatheusBuss]

Ju tem um elemento que não colocamos na loja, de ter o preço depois da descrição. @MatheusBuss pode criar uma issue pra colocarmos isso?

Podemos fazer isso sim, só teria que ver se o preço não precisaria vir antes da descrição, por que se for no final pode ficar cortado.

[MatheusBuss]

Criado #245

[lucca65]

Podemos fazer isso sim, só teria que ver se o preço não precisaria vir antes da descrição, por que se for no final pode ficar cortado.

@juramos-2020 oq acha? Realmente é bem comum os celulares cortarem por falta de espaço

[juramos-2020]

Poderia ter uma quebra de linha?
No máximo duas linhas que nem nessa proposta. Será que funciona?

[lucca65]

Não dá Ju, infelizmente só podemos ter uma linha que é gerenciada pelo app que for mostrar (Instagram, zap, etc)

Uma outra ideia seria colocar o preço na frente da descrição, acho que inclusive podemos colocá-la em negrito, certo @MatheusBuss?

[MatheusBuss]

Imaginava que funcionaria bem o negrito, mas pelo jeito nem sempre. O negrito pode fucionar, mas depende mais da plataforma que vai mostrar a preview pro usuário. Pelo menos é o que falaram nessa thread. Podemos dar uma testada nisso.

[lucca65]

entendi obrigado pela pesquisa @MatheusBuss! O que acha @juramos-2020? Com ou sem negrito, a proposta seria colocar o preço antes da descrição

[juramos-2020]

Tudo bem sim se o preço vir antes. Também fica interessante nesse formato 😉👍