Release Notes Versao 2.0

of 72/72
Versão 2.0
  • date post

    02-Aug-2015
  • Category

    Software

  • view

    67
  • download

    3

Embed Size (px)

Transcript of Release Notes Versao 2.0

1. Verso 2.0 2. Veja algumas melhorias e novidades da verso 2.0: Apresentar promoes na tela do pedido Apresentar lista de preo no pedido Login em modal (Lista de desejos, One Click Buy) Permitir ordenar as variaes de um produto Pesquisar produtos selecionados na lista de produtos Reference Store Monitoramentos Melhorias na arquitetura e infraestrutura da aplicao Performance Client-Side APIs AJAX no Checkout NOVO NOVO NOVO NOVO NOVO NOVO MELHORIA MELHORIA MELHORIA MELHORIA 3. APRESENTAR PROMOES NA TELA DO PEDIDO Release Notes Verso 2.0 NOVO 4. Contedo Apresentao Utilizao 1. Sistema Administrativo 1.1. Edio do Pedido Verso 2.0 Apresentar promoes na tela do pedido 5. Apresentao Na rea administrativa, entrando na edio do pedido, podero ser visualizadas todas as promoes vinculadas aos pedidos, bem como as promoes associadas aos itens dos pedidos. Apresentar promoes na tela do pedidoVerso 2.0 6. 1. Sistema Administrativo Atravs do menu Backoffice opo Pedidos possvel verificar as promoes associadas a cada pedido, caso existam. 1.1. Edio do Pedido Na lista que ser exibida, entre na edio do pedido. Utilizao Verso 2.0 Apresentar promoes na tela do pedido 7. Utilizao Na tela de edio do pedido, aba Geral, foram adicionadas as sees Promoes e Promoes por Item, que informam as promoes vinculadas ao pedido em questo no momento do seu fechamento. Verso 2.0 Apresentar promoes na tela do pedido 8. Utilizao Por padro, as listas de promoes vm fechadas. Para exibi-las, clique na seta que encontra-se ao lado da respectiva seo. Verso 2.0 Clicando no nome de cada promoo, ser aberta a tela com a descrio da promoo. Caso o pedido no possua nenhuma promoo associada, as sees Promoes e Promoes por Item no sero exibidas na tela. Apresentar promoes na tela do pedido 9. APRESENTAR LISTA DE PREO NO PEDIDO Release Notes Verso 2.0 NOVO 10. Contedo Apresentao Utilizao 1. Sistema Administrativo 1.1. Visualizando qual a lista de preo 1.2. Link para o log de alteraes de preo Verso 2.0 Apresentar lista de preo no pedido 11. Apresentao A partir desta alterao no detalhe do pedido no admin ser possvel visualizar a lista de preo que foi aplicada para o produto comprado. Isto importante, pois quando o lojista muda a lista de preo no site podem estar ocorrendo um fechamento de compras no momento e produtos podem ter preos de listas diferentes at tudo ser replicado. Apresentar lista de preo no pedidoVerso 2.0 12. 1. Sistema Administrativo Atravs do menu Backoffice opo Pedidos iro aparecer os pedidos da loja. Entrando em um pedido, no seu detalhe, na coluna preo ter um cone de lista. Utilizao Apresentar lista de preo no pedidoVerso 2.0 No painel do sistema administrativo: Backoffice -> Pedidos 13. Utilizao 1.1. Visualizando qual a lista de preo Passando o mouse no preo ou no cone ao lado ir aparecer qual lista foi utilizada para o clculo do preo do produto. Apresentar lista de preo no pedidoVerso 2.0 No painel do sistema administrativo: Backoffice -> Pedidos 14. 1.2. Link para o log de alteraes de preo Ao clicar no link no detalhe do pedido ir para o log de alteraes. Utilizao Apresentar lista de preo no pedidoVerso 2.0 15. LOGIN EM MODAL (LISTA DE DESEJOS, ONE CLICK BUY) Release Notes Verso 2.0 NOVO 16. Contedo Apresentao Instalao / Ativao 1. Sistema Administrativo 1.1 Lista de Desejos 1.2 One Click Buy Utilizao 1. Loja 1.1 Lista de Desejos 1.2 One Click Buy Verso 2.0 Login em modal (Lista de desejos, One Click Buy) 17. Apresentao A funcionalidade de Login em modal permite ao cliente efetuar o login de forma no obstrutiva, sendo possvel completar a ao que necessite estar autenticado sem ser redirecionado para a pgina de login. Esta funcionalidade foi implementada nos widgets de Lista de Desejos (product_wishlist) e One Click Buy (product_buybutton), ambos para o detalhe de produto, podendo ser ativada ou desativada quando necessrio. Login em modal (Lista de desejos, One Click Buy)Verso 2.0 18. 1. Sistema Administrativo 1.1 Lista de Desejos Para habilitar a funcionalidade de Login em modal no widget de Lista de desejos(product_wishlist) via cdigo liquid no template, necessrio que seja inserido o parmetro LoginInSameModal como true na chamada do widget, conforme imagem abaixo. Instalao / Ativao Login em modal (Lista de desejos, One Click Buy)Verso 2.0 No template do detalhe do produto: 19. Para habilitar a funcionalidade de Login em modal no widget de Lista de desejos(product_wishlist) via editor de contedo necessrio marcar a opo Habilitar a opo de logar sem redirecionarcom o sim na aba Campos do template, conforme imagem abaixo. Login em modal (Lista de desejos, One Click Buy)Verso 2.0 20. 1.2 One Click Buy Para habilitar a funcionalidade de Login em modal no widget de One Click Buy(product_buybutton) necessrio inserir o parmetro ButtonOneClickBuyAvailable como true, como na imagem abaixo. Por padro, quando no for passado este parmetro false. Login em modal (Lista de desejos, One Click Buy)Verso 2.0 No painel do sistema administrativo: No template do detalhe do produto: 21. Utilizao Login em modal (Lista de desejos, One Click Buy)Verso 2.0 1. Loja 1.1 Lista de desejos Ao clicar no boto de Adicionar lista de desejos a opo de logar aberta em uma modal quando o cliente no estiver logado. 22. Login em modal (Lista de desejos, One Click Buy)Verso 2.0 1.2 One Click Buy Ao clicar no no boto de One Click Buy a opo de logar aberta em uma modal quando o cliente estiver deslogado. 23. PERMITIR ORDENAR AS VARIAES DE UM PRODUTO Release Notes Verso 2.0 NOVO 24. Contedo Apresentao Utilizao 1. Sistema Administrativo 1.1. Ordenando os Skus do Produto 1.2. Configurando os Widgets 2. Site 2.1. Exibindo os SKUs no detalhe do produto Verso 2.0 Permitir ordenar as variaes de um produto 25. Apresentao Agora, na sistema administrativo, ser possvel realizar a ordenao dos SKUs de um produto, para definir a ordem de exibio dos mesmos no site, no momento que o cliente entrar no seu detalhamento. Essa funcionalidade poder ser habilitada ou desabilitada, conforme o desejo do cliente, nos widgets utilizados para exibio dos SKUs de um produto no site. Permitir ordenar as variaes de um produtoVerso 2.00 26. 1. Sistema Administrativo Atravs do menu Catlogo, opo Produtos, iro aparecer todos os produtos da loja. Entrando em um produto, na aba SKUs, na coluna Aes agora existem dois novos botes, para movimentar o respectivo sku para cima ou para baixo na lista. Utilizao Permitir ordenar as variaes de um produtoVerso 2.0 No painel do sistema administrativo: Catlogo -> Produtos -> Editando um produto -> SKUs 27. Utilizao 1.1. Ordenando os SKUs do Produto Clicando no boto que move o sku para baixo, ele estar trocando de posio com o sku imediatamente abaixo na listagem. Caso o boto clicado seja o que move para cima, o sku trocar de posio com o que est posicionado logo acima. As ordenaes realizadas devero esperar at que a replicao dos dados seja disparada e as alteraes possam ser visualizadas no site. As alteraes somente tero efeito caso a ordenao esteja habilitada no widget de exibio de skus. Permitir ordenar as variaes de um produtoVerso 2.0 Obs.: A ordenao est disponvel somente para as lojas que utilizam o widget product_buy_lot 28. 1.2. Configurando os Widgets Para que as ordenaes de skus possam ser visualizadas no site, necessrio habilitar no widget a configurao indicando que deve ser utilizada essa ordenao. Por padro, essa configurao vem desabilitada. Utilizao Permitir ordenar as variaes de um produtoVerso 2.0 Para habilitar a ordenao por skus, v no menu Aparncia, opo Configurar design e selecione na rvore de rotas Detalhe do Produto. Obs.: A ordenao est disponvel somente para as lojas que utilizam o widget product_buy_lot 29. 1.2. Configurando os Widgets Na sesso Contedo, clique em Editar Widgets e, posteriormente, entre na edio do arquivo product.detail.template. Procure pela chamada ao widget product_buy_lot e adicione o parmetro SortSkus. Utilizao Permitir ordenar as variaes de um produtoVerso 2.0 Obs.: A ordenao est disponvel somente para as lojas que utilizam o widget product_buy_lot 30. PESQUISAR PRODUTOS SELECIONADOS NA LISTA DE PRODUTOS Release Notes Verso 2.0 NOVO 31. Contedo Apresentao Utilizao 1. Sistema Administrativo 1.1. Lista de Produtos 1.2. Modal Verso 2.0 Pesquisar produtos selecionados na lista de produtos 32. Apresentao Na tela de lista de produtos, possvel realizar uma pesquisa na lista de produtos selecionados, para que os produtos adicionados determinada lista possam ser facilmente encontrados. Pesquisar produtos selecionados na lista de produtosVerso 2.0 33. 1. Sistema Administrativo Atravs do menu Catlogo opo Listas de produtos, criando uma lista nova ou editando uma j existente, possvel verificar a pesquisa nos produtos selecionados. 1.1. Lista de Produtos Caso queira adicionar uma nova lista de produtos, clique em . Caso contrrio, selecione uma lista de produtos e entre na sua edio. Utilizao Pesquisar produtos selecionados na lista de produtosVerso 2.0 34. Utilizao Informe o termo que deseja pesquisar e clique em ou tecle . Os produtos que respeitam o termo informado sero exibidos na lista abaixo. Pesquisar produtos selecionados na lista de produtosVerso 2.0 35. Utilizao Para retornar os produtos anteriores, somente remova o termo informado e clique novamente em ou tecle . Pesquisar produtos selecionados na lista de produtosVerso 2.0 36. Utilizao 1.2. Modal O mesmo comportamento explicado anteriormente pode ser encontrado na tela modal da lista de produtos, que encontrada em diferentes pontos do sistema para a seleo ou criao de uma lista de produtos. Pesquisar produtos selecionados na lista de produtosVerso 2.0 37. REFERENCE STORE Release Notes Verso 2.0 NOVO 38. Contedo Apresentao Amostras Design Guide Loja Referncia Verso 2.0 Reference Store 39. Apresentao A Reference Store um trabalho interno que est sendo realizado para a criao de uma nova loja referncia, a qual conter todos os padres de design, usabilidade e melhores prticas que sero utilizados no desenvolvimento de novos componentes do Core. Este trabalho levar em considerao estudos de mercado e melhores prticas no desenvolvimento de uma plataforma de e-commerce, trazendo os conceitos de reaproveitamento, responsividade, boas prticas de SEO, organizao de contedo, padronizao e melhorias de performance. Reference StoreVerso 2.0 40. Amostra : Design Guide Reference StoreVerso 2.0 41. Amostra : Design Guide Reference StoreVerso 2.0 42. Amostra : Loja Referncia Reference StoreVerso 2.0 43. Amostra : Loja Referncia Reference StoreVerso 2.0 44. MONITORAMENTOS Release Notes Verso 2.0 MELHORIA 45. Contedo Apresentao Tela de Monitoramento da Loja Verso 2.0 Monitoramentos 46. Apresentao Foram criados novos monitoramentos dentro da ferramenta de monitoramento do CORE para termos um controle melhor sobre o comportamento das vendas nas lojas, assim ofereceremos uma melhor qualidade de servio, monitorando os seguintes aspectos: Boto Comprar : Ser verificado continuamente se este est ativo, clicvel e em perfeito funcionamento (sem erros de javascript/html no lado do cliente, ou erros no servidor, assim teremos garantia de que as vendas iro ocorrer normalmente neste ponto do sistema. Pedidos : Ser verificado se a loja est tendo pedidos, dentro da mdia dos pedidos realizados ser verificado se a loja no est vendendo conforme sua mdia, sendo assim a equipe de suporte poder receber alertas para tomar alguma providncia caso a loja tenha algum problema. MonitoramentosVerso 2.0 47. Tela de Monitoramento da Loja MonitoramentosVerso 2.0 Sistema de Monitoramento do Core: 48. MELHORIAS NA ARQUITETURA E INFRAESTRUTURA DA APLICAO Release Notes Verso 2.0 MELHORIA 49. Contedo Apresentao Desenvolvimentos 1. Balanceamento no acesso a informaes em cache (Redis) 2. Invalidao do cache de output (Varnish) pela aplicao 3. Reviso de ndices do banco de dados 4. Armazenamento das informaes de preo e estoques pelo servidor de busca (Sorl) 5. Troca de servidor de banco de dados (Amazon RDS Amazon EC2 SQL Server) Verso 2.0 Melhorias na arquitetura e infraestrutura da aplicao 50. Apresentao Este documento apresenta um descritivo de desenvolvimentos realizados com o intuito de melhorar partes da arquitetura da aplicao, bem como a infraestrutura, visando uma maior estabilidade e performance de todas as aplicaes. Melhorias na arquitetura e infraestrutura da aplicaoVerso 2.0 51. 1. Balanceamento no acesso a informaes em cache (Redis) O balanceamento permite que a carga de acessos as informaes no servidor de cache distribudo seja dividida entre os servidores. A topologia para estes servidores mestre-escravo, sendo que as leituras so realizadas no escravo, enquanto que as escritas so realizadas no mestre. Apenas os dados de sesso so sempre escritos e lidos no servidor mestre. Desenvolvimentos Melhorias na arquitetura e infraestrutura da aplicaoVerso 2.0 Leitura Leitura Escrita Leitura 52. 2. Invalidao do cache de output (Varnish) pela aplicao A invalidao do cache de output permite que o tempo de vida (TTL) das pginas cacheadas pelo servidor de sada possam ser aumentados, diminuindo o hit nos servidores entregam o contedo mais atual. A invalidao monitora alteraes em templates, replicao de produtos e outras informaes pertinentes. Ex.: caso o produto 1 fique sem estoque, apenas os caches onde o produto 1 estava presente sero invalidados. A invalidao pode levar 30 a 60 segundos para ter efeito. Desenvolvimentos Melhorias na arquitetura e infraestrutura da aplicaoVerso 2.0 53. 3. Reviso de ndices do banco de dados Foi realizada manuteno preventiva nos ndices do banco de dados. Diariamente ser feita uma reorganizao dos ndices, conforme sua fragmentao e semanalmente ser feita uma recriao dos ndices. Desenvolvimentos Melhorias na arquitetura e infraestrutura da aplicaoVerso 2.0 54. 4. Armazenamento das informaes de preo e estoques pelo servidor de busca (Sorl) Foram estudados algoritmos de serializao e compresso de dados para os dados de preo e estoque, diminuindo o espao necessrio para armazenamento no servidor de busca, diminuindo o tempo de trafego da informao entre servidores. Por fim, utilizou-se gzip* para compresso e protobuf** para serializao. * http://en.wikipedia.org/wiki/Gzip ** http://en.wikipedia.org/wiki/Protocol_Buffers Desenvolvimentos Melhorias na arquitetura e infraestrutura da aplicaoVerso 2.0 55. 5. Troca de servidor de banco de dados (Amazon RDS Amazon EC2 SQL Server) Para uma maior performance e gerenciamento do servidor de banco de dados aps pesquisas, coleta de resultados de performance dos bancos atuais e consultoria com a prpria Amazon decidimos optar pela troca da tecnologia RDS pela EC2, sendo assim continuamos com o SQL Server, porm agora temos mais opes disponveis o que trar uma melhoria na parte de performance e escalabilidade do banco de dados. Desenvolvimentos Melhorias na arquitetura e infraestrutura da aplicaoVerso 2.0 56. PERFORMANCE CLIENT-SIDE Release Notes Verso 2.0 MELHORIA 57. Contedo Apresentao Melhorias Ordem de carregamento de scripts externos Escolha do modo de carregamento de recursos Permitir desabilitar widgets que no so utilizados Melhorias de repaint, lazyload e scripts de terceiros Melhorias Gerais Verso 2.0 Melhorias de performance client-side 58. Apresentao Foram desenvolvidas melhorias que afetam a performance client-side do Core como um todo de forma a melhorar e facilitar o desenvolvimento das customizaes e de widgets da plataforma. Este manual ir orienta-lo como implementar os recursos na sua loja, mantendo o baixo tempo de carregamento do site. Algumas tcnicas auxiliam os navegadores priorizar os elementos carregados no site, sendo assim, aquilo que mais importante em sua loja ira ser carregado primeiro. Utilize estes recursos para manter a boa experincia do usurio durante a compra. Melhorias de performance client-sideVerso 2.0 59. Dentro dos templates, existem chamadas de scripts externos que podem resultar em uma espera para o carregamento de toda pgina. Desenvolvemos uma tag dentro do liquid para incluir scripts externos de forma performtica. Exemplo de utilizao: Quando utilizada essa tag, garantimos que o script ir ser executado sempre no final da requisio, sem que a pgina fique aguardando para que seja carregada. Ordem de carregamento de scripts externos Melhorias de performance client-sideVerso 2.0 {% page_assets Include with src:/Custom/Content/Themes/Default/Scripts/test.js %} 60. Escolha do modo de carregamento de recursos Dentro dos manifestos dos widgets, podemos escolher agora se o recurso (js ou css) vai ser carregado sempre ou somente quando o widget estiver presente na pgina. Tipos: Always (sempre carregado) ou OnDemand (somente quando estiver na tela) Exemplo de utilizao dentro do manifesto: Por padro, todos os .css de widgets tem o tipo de carregamento Always e todos os .js tem o tipo de carregamento OnDemand. Melhorias de performance client-sideVerso 2.0 61. Permitir desabilitar widgets que no so utilizados Por vezes possumos widgets dentro da pgina que no so utilizados. Temos a opo agora de desativ-los a partir da tela de gerenciamento de widgets. Melhorias de performance client-sideVerso 2.0 No painel do sistema administrativo: Aparncia -> Gerenciador de Widgets Dentro de aes, existe a possibilidade de inativar ou ativar os widgets necessrios. 62. Permitir desabilitar widgets que no so utilizados Aps a ao de desabilitar necessrio limpar o cache da loja para as alteraes surtirem efeito, para isso: Melhorias de performance client-sideVerso 2.0 Abra o navegador e digite o seguinte endereo: www.sualoja.com.br/app/info/clearallcache 63. Melhorias de repaint, lazyload e scripts de terceiros Aqui apresentaremos algumas boas prticas as quais so um conjunto de tcnicas e procedimentos que orientam os desenvolvedores a terem um melhor uso da ferramenta. O conjunto de prticas a seguir tem por objetivo a melhora da performance da loja para o client-side (carregamento e navegao feita pelo cliente/usurio/navegador): Melhorias de performance client-sideVerso 2.0 64. Melhorias de repaint, lazyload e scripts de terceiros Melhorias de performance client-sideVerso 2.0 Repaint e Lazyload: Em uma traduo livre, lazyload o carregamento preguioso: esta tcnica utilizada para reduzir o tempo de carregamento de um site. Os navegadores mostram o site apenas quando todas as imagens do site forem carregadas, desta forma o lazyload permite que o site seja renderizado (repaint) antes das imagens. O lazyload utilizado da seguinte forma: 1. Na tag IMG o atributo src vir com a referencia uma imagem em branco ou at mesmo sem a presena do atributo. 2. Um atributo data-src deve ser includo ao tag, este atributo dever ter a referencia real da imagem a ser carregada. 3. Na tag a classe lazyload indica que a imagem ser carregada desta forma. 4. Exemplo: 65. Melhorias de repaint, lazyload e scripts de terceiros Melhorias de performance client-sideVerso 2.0 Scripts de terceiros: O carregamento de scripts fora do sistema de gerenciamento de recursos do Core, aumenta o tempo de carregamento do site. Foi desenvolvido um novo recurso para as templates da loja (liquid). Desta forma garante-se que os scripts sejam carregados ao trmino do carregamento da loja. A forma de se carregar os script feito da seguinte forma: Caso seja necessrio a incluso de um tag {% page_assets Include with src:/Custom/Content/Themes/Default/Scripts/test.js %} 66. Melhorias de repaint, lazyload e scripts de terceiros Melhorias de performance client-sideVerso 2.0 Scripts de terceiros: Exemplo: Script de carregamento do plugin do facebook: 67. Melhorias Gerais Alm das melhorias citadas acima, fizemos tambm as seguintes melhorias tcnicas: Reviso de verses minificadas dos .js e .css dos widgets Melhoras de performance nos widgets: system.login.impersonation browsing.welcome.shopper (profile.welcome.shopper) checkout.basket.summaryheader Melhorias de performance client-sideVerso 2.0 68. APIS AJAX NO CHECKOUT Release Notes Verso 2.0 MELHORIA 69. Contedo Apresentao Utilizao Verso 2.0 APIs AJAX no Checkout 70. Apresentao Durante o checkout agora ser possvel ter as informaes do carrinho em uma nica requisio. Sendo assim, fica facilitada a utilizao de chamadas AJAX durante o processo de compra e est poder ser utilizada tambm por uma aplicao externa. APIs AJAX no CheckoutVerso 2.0 71. 1. Via JSON Atravs de chamada AJAX na url: /checkout/.json?context=basket Obrigatrio passar o parmetro contexto=basket se quiser as informaes de basket na mesma chamada. Exemplos: /checkout/endereco-de-entrega.json?context=basket /checkout/pagamento.json?context=basket Utilizao APIs AJAX no CheckoutVerso 2.0 72. Utilizao Exemplo de retorno: APIs AJAX no CheckoutVerso 2.0