Site da OrthoRx - Visão Geral do Desenvolvimento

OrthoRX foi um projeto de curto prazo relacionado ao Shopify. O modelo original para o site foi feito por meio do Webflow e, infelizmente, durante a migração para o Shopify, o modelo estava quebrado. A solicitação era principalmente para resolver os problemas que surgiram e atualizar alguns estilos que não foram traduzidos corretamente do Webflow para o Shopify.

Abordagem

Um dos maiores desafios durante este projeto foi consertar a funcionalidade quebrada de adicionar itens ao carrinho. Essa funcionalidade estava funcionando bem nas páginas de produtos individuais, no entanto, não estava funcionando com o botão de adição rápida ao carrinho na página da lista de produtos. Corrigir problemas como esse geralmente não é difícil em modelos normais do Shopify, mas os problemas estavam ocultos sob muito código minificado que veio da migração do Webflow e identificar onde o problema estava acabou sendo um grande incômodo.

Junto com o botão quebrado de adicionar ao carrinho, o componente do container de produto (visto acima) não estava estilizado como pretendido e a filtragem de produtos não estava funcionando corretamente. Meu trabalho aqui, depois de consertar o botão, envolveu consertar a responsividade da página (numero de containers de produto por linha da grade, tamanho do texto, etc.), adicionar estilos de estado de foco (fundo verde e seta da decoração, como visto na imagem acima) e consertar a integração do plugin responsável por renderizar a lista de produtos e opções de filtragem.

Também havia algumas páginas que não tinham sido enviadas com a migração do Webflow, como a página /pages/reset-password e a página /cart e, portanto, elas também tiveram que ser criadas.

Alêm disso, o cliente solicitou uma tabela de tamanhos e um recurso de avaliação na página do produto individual. Para estilizar dinamicamente as tabelas de tamanhos da maneira que o cliente solicitou, eu criei um novo campo do tipo JSON no Shopify para os produtos, assim possibilitando que o cliente fizesse as atualizações necessárias em todos produtos que tivessem informações de tamanho. O resultado do preenchimento dessas informações era então renderizado e estilizado como pode ser visto abaixo.

Quanto ao recurso de avaliação, configurei o site deles com o plugin Judge.me, um plugin gratuito do Shopify para coletar avaliações de usuários. Após ajustar o estilo para ficar alinhado com a marca e corrigir problemas de responsividade, o resultado final pode ser visto abaixo.

No geral, este projeto foi uma ótima desculpa para voltar a interagir com a sintaxe do Shopify e do Liquid, ferramentas que eu não usava desde meus dias trabalhando com o Dr Smood. Mais importante, serviu como um lembrete de por que eu gosto de escrever meu próprio código em vez de usar construtores de sites sem código 😅