ecomplus / storefront

Modern and high performant headless eCommerce Storefront. PWA & JAMstack architecture ready for E-Com Plus APIs. Built with Vue.js, extensible through widgets and editable with Netlify CMS.

Home Page:https://developers.e-com.plus/storefront/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

[RFC] ECom.Beauty fine tune

leomp12 opened this issue · comments

O que ainda falta ou pode ser melhorado para o tema seguindo o protótipo?
https://xd.adobe.com/view/a6ede39e-9ce6-4cf7-aa10-f5cbea3d2c49-f3be/screen/b263e48d-cf5a-422c-83b9-756b79572378/

Algumas coisas não dependem apenas de CSS e serão possíveis depois de #705 e improves de alguns widgets.

Fiz este deploy usando o tema e os banners e produtos para tentar chegar o mais próximo possível do design feito.

Sugestões para ficar mais fiel ao design:

  • Na top-bar__countdown o tamanho da fonte do design é um pouco menor, pelo que testei fica mais próximo como 0.7rem;

  • O font-weight do tema está maior que o do design em alguns pontos como na top-bar__page-links e info-bar__item. O font-weight nesses casos é 700 e pelo que testei com 500 ficaria mais próximo;

  • O card de blog posts no design exibe imagem e título que hoje mostram junto com data de criação e um link "continitue lendo" escondendo o card-text;

design: image
atual:
image

Não tem a ver com o tema, mas acho interessante indicar qual o pacote de ícones do tema de alguma forma, talvez no nome dele no CMS para que o cliente configure e fique mais parecido possível com o exemplo

@sameoldcarlos dá uma olhada nas sugestões por favor? O deploy https://ecombeauty.netlify.app/ deve ajudar bastante, source aí https://github.com/ecomplus-stores/beauty-theme/tree/master/content caso você queira copiar pra testar localmente.


Não tem a ver com o tema, mas acho interessante indicar qual o pacote de ícones do tema de alguma forma, talvez no nome dele no CMS para que o cliente configure e fique mais parecido possível com o exemplo

@vitorrgg é line-awesome nesse caso, mas tem a opção no CMS de padrão do tema nos ícones:

Screenshot 2022-05-17 at 22-04-39 My Shop

Um field no CMS mudar o outro não é trivial, tem que criar um widget (React component) compondo os dois campos só pra isso, nesse momento é um trabalho que não vale a pena.

A mesma coisa acontece com fontes, o padrão do usuário na verdade não está forçando padrão do sistema (acho que deveria) quando há tema, nesse caso usa a fonte do tema, talvez depois adicionamos nele um padrão do tema separado do padrão do usuário (que nesse caso vai forçar o uso da fonte do sistema) também.

Inclusive o padrão do tema é a opção que fica selecionada por padrão https://github.com/ecomplus/storefront-starter/blob/master/content/settings.json#L9-L10 , se o usuário não forçar outra fonte e escolher um tema, a loja vai usar as fontes de ícones e texto do tema.

Pro próximo então @sameoldcarlos ? 😄