Versão 2.0
Veja algumas melhorias e novidades da versão 2.0:
Apresentar promoções na tela do pedido
Apresentar lista de preço no pedi...
APRESENTAR PROMOÇÕES NA TELA DO
PEDIDO
Release Notes Versão 2.0 NOVO
Conteúdo
 Apresentação
 Utilização
1. Sistema Administrativo
1.1. Edição do Pedido
Versão 2.0 Apresentar promoções na te...
Apresentação
Na área administrativa, entrando na edição do pedido, poderão ser visualizadas todas
as promoções vinculadas ...
1. Sistema Administrativo
Através do menu “Backoffice” opção “Pedidos” é possível verificar as promoções
associadas a cada...
Utilização
Na tela de edição do pedido, aba “Geral”, foram adicionadas as seções “Promoções” e
“Promoções por Item”, que i...
Utilização
Por padrão, as listas de promoções vêm fechadas. Para exibi-las, clique na seta que
encontra-se ao lado da resp...
APRESENTAR LISTA DE PREÇO NO
PEDIDO
Release Notes Versão 2.0 NOVO
Conteúdo
 Apresentação
 Utilização
1. Sistema Administrativo
1.1. Visualizando qual é a lista de preço
1.2. Link para o ...
Apresentação
A partir desta alteração no detalhe do pedido no admin será possível visualizar a lista
de preço que foi apli...
1. Sistema Administrativo
Através do menu “Backoffice” opção “Pedidos” irão aparecer os pedidos da loja.
Entrando em um pe...
Utilização
1.1. Visualizando qual é a lista de preço
Passando o mouse no preço ou no ícone ao lado irá aparecer qual lista...
1.2. Link para o log de alterações de preço
Ao clicar no link no detalhe do pedido irá para o log de alterações.
Utilizaçã...
LOGIN EM MODAL (LISTA DE
DESEJOS, ONE CLICK BUY)
Release Notes Versão 2.0 NOVO
Conteúdo
 Apresentação
 Instalação / Ativação
1. Sistema Administrativo
1.1 Lista de Desejos
1.2 One Click Buy
 Utiliza...
Apresentação
A funcionalidade de “Login em modal” permite ao cliente efetuar o login de forma não
obstrutiva, sendo possív...
1. Sistema Administrativo
1.1 Lista de Desejos
Para habilitar a funcionalidade de “Login em modal” no widget de “Lista de
...
Para habilitar a funcionalidade de “Login em modal” no widget de “Lista de
desejos”(product_wishlist) via editor de conteú...
1.2 One Click Buy
Para habilitar a funcionalidade de “Login em modal” no widget de “One Click
Buy”(product_buybutton) é ne...
Utilização
Login em modal (Lista de desejos, One Click Buy)Versão 2.0
1. Loja
1.1 Lista de desejos
Ao clicar no botão de “...
Login em modal (Lista de desejos, One Click Buy)Versão 2.0
1.2 One Click Buy
Ao clicar no no botão de “One Click Buy” a op...
PERMITIR ORDENAR AS VARIAÇÕES
DE UM PRODUTO
Release Notes Versão 2.0 NOVO
Conteúdo
 Apresentação
 Utilização
1. Sistema Administrativo
1.1. Ordenando os Skus do Produto
1.2. Configurando os Widg...
Apresentação
Agora, na sistema administrativo, será possível realizar a ordenação dos SKUs de um
produto, para definir a o...
1. Sistema Administrativo
Através do menu “Catálogo”, opção “Produtos”, irão aparecer todos os produtos da
loja. Entrando ...
Utilização
1.1. Ordenando os SKUs do Produto
Clicando no botão que move o sku para baixo, ele estará trocando de posição c...
1.2. Configurando os Widgets
Para que as ordenações de skus possam ser visualizadas no site, é necessário habilitar
no wid...
1.2. Configurando os Widgets
Na sessão “Conteúdo”, clique em “Editar Widgets” e, posteriormente, entre na edição
do arquiv...
PESQUISAR PRODUTOS SELECIONADOS
NA LISTA DE PRODUTOS
Release Notes Versão 2.0 NOVO
Conteúdo
 Apresentação
 Utilização
1. Sistema Administrativo
1.1. Lista de Produtos
1.2. Modal
Versão 2.0 Pesquisar prod...
Apresentação
Na tela de lista de produtos, é possível realizar uma pesquisa na lista de produtos
selecionados, para que os...
1. Sistema Administrativo
Através do menu “Catálogo” opção “Listas de produtos”, criando uma lista nova ou
editando uma já...
Utilização
Informe o termo que deseja pesquisar e clique em <Pesquisar> ou tecle <Enter>. Os
produtos que respeitam o term...
Utilização
Para retornar os produtos anteriores, somente remova o termo informado e clique
novamente em <Pesquisar> ou tec...
Utilização
1.2. Modal
O mesmo comportamento explicado anteriormente pode ser encontrado na tela
modal da lista de produtos...
REFERENCE STORE
Release Notes Versão 2.0 NOVO
Conteúdo
 Apresentação
 Amostras
 Design Guide
 Loja Referência
Versão 2.0 Reference Store
Apresentação
A Reference Store é um trabalho interno que está sendo realizado para a criação de
uma nova loja referência, ...
Amostra : Design Guide
Reference StoreVersão 2.0
Amostra : Design Guide
Reference StoreVersão 2.0
Amostra : Loja Referência
Reference StoreVersão 2.0
Amostra : Loja Referência
Reference StoreVersão 2.0
MONITORAMENTOS
Release Notes Versão 2.0 MELHORIA
Conteúdo
 Apresentação
 Tela de Monitoramento da Loja
Versão 2.0 Monitoramentos
Apresentação
Foram criados novos monitoramentos dentro da ferramenta de monitoramento do
CORE para termos um controle melh...
Tela de Monitoramento da Loja
MonitoramentosVersão 2.0
Sistema de Monitoramento do Core:
MELHORIAS NA ARQUITETURA E
INFRAESTRUTURA DA APLICAÇÃO
Release Notes Versão 2.0 MELHORIA
Conteúdo
 Apresentação
 Desenvolvimentos
1. Balanceamento no acesso a informações em cache (Redis)
2. Invalidação do cac...
Apresentação
Este documento apresenta um descritivo de desenvolvimentos realizados com o
intuito de melhorar partes da arq...
1. Balanceamento no acesso a informações em cache (Redis)
O balanceamento permite que a carga de acessos as informações no...
2. Invalidação do cache de output (Varnish) pela aplicação
A invalidação do cache de output permite que o tempo de vida (T...
3. Revisão de índices do banco de dados
Foi realizada manutenção preventiva nos índices do banco de dados. Diariamente
ser...
4. Armazenamento das informações de preço e estoques pelo servidor de busca (Sorl)
Foram estudados algoritmos de serializa...
5. Troca de servidor de banco de dados (Amazon RDS » Amazon EC2 SQL Server)
Para uma maior performance e gerenciamento do ...
PERFORMANCE CLIENT-SIDE
Release Notes Versão 2.0 MELHORIA
Conteúdo
 Apresentação
 Melhorias
 Ordem de carregamento de scripts externos
 Escolha do modo de carregamento de recur...
Apresentação
Foram desenvolvidas melhorias que afetam a performance client-side do Core como
um todo de forma a melhorar e...
Dentro dos templates, existem chamadas de scripts externos que podem resultar em
uma espera para o carregamento de toda pá...
Escolha do modo de carregamento de recursos
Dentro dos manifestos dos widgets, podemos escolher agora se o recurso (js ou ...
Permitir desabilitar widgets que não são utilizados
Por vezes possuímos widgets dentro da página que não são utilizados. T...
Permitir desabilitar widgets que não são utilizados
Após a ação de desabilitar é necessário limpar o cache da loja para as...
Melhorias de repaint, lazyload e scripts de terceiros
Aqui apresentaremos algumas boas práticas as quais são um conjunto d...
Melhorias de repaint, lazyload e scripts de terceiros
Melhorias de performance client-sideVersão 2.0
Repaint e Lazyload:
E...
Melhorias de repaint, lazyload e scripts de terceiros
Melhorias de performance client-sideVersão 2.0
Scripts de terceiros:...
Melhorias de repaint, lazyload e scripts de terceiros
Melhorias de performance client-sideVersão 2.0
Scripts de terceiros:...
Melhorias Gerais
Além das melhorias citadas acima, fizemos também as seguintes melhorias técnicas:
• Revisão de versões mi...
APIS AJAX NO CHECKOUT
Release Notes Versão 2.0 MELHORIA
Conteúdo
 Apresentação
 Utilização
Versão 2.0 APIs AJAX no Checkout
Apresentação
Durante o checkout agora será possível ter as informações do carrinho em uma única
requisição. Sendo assim, f...
1. Via JSON
Através de chamada AJAX na url:
<endereço da loja>/checkout/<passo do checkout>.json?context=basket
Obrigatóri...
Utilização
Exemplo de retorno:
APIs AJAX no CheckoutVersão 2.0
Próximos SlideShares
Carregando em…5
×

Release Notes Versao 2.0

313 visualizações

Publicada em

Release Notes Versão 2.0 - Novas Funcionalidades e Melhorias

Publicada em: Software
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
313
No SlideShare
0
A partir de incorporações
0
Número de incorporações
48
Ações
Compartilhamentos
0
Downloads
4
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Release Notes Versao 2.0

  1. 1. Versão 2.0
  2. 2. Veja algumas melhorias e novidades da versão 2.0: Apresentar promoções na tela do pedido Apresentar lista de preço no pedido Login em modal (Lista de desejos, One Click Buy) Permitir ordenar as variações de um produto Pesquisar produtos selecionados na lista de produtos Reference Store Monitoramentos Melhorias na arquitetura e infraestrutura da aplicação Performance Client-Side APIs AJAX no Checkout NOVO NOVO NOVO NOVO NOVO NOVO MELHORIA MELHORIA MELHORIA MELHORIA
  3. 3. APRESENTAR PROMOÇÕES NA TELA DO PEDIDO Release Notes Versão 2.0 NOVO
  4. 4. Conteúdo  Apresentação  Utilização 1. Sistema Administrativo 1.1. Edição do Pedido Versão 2.0 Apresentar promoções na tela do pedido
  5. 5. Apresentação Na área administrativa, entrando na edição do pedido, poderão ser visualizadas todas as promoções vinculadas aos pedidos, bem como as promoções associadas aos itens dos pedidos. Apresentar promoções na tela do pedidoVersão 2.0
  6. 6. 1. Sistema Administrativo Através do menu “Backoffice” opção “Pedidos” é possível verificar as promoções associadas a cada pedido, caso existam. 1.1. Edição do Pedido Na lista que será exibida, entre na edição do pedido. Utilização Versão 2.0 Apresentar promoções na tela do pedido
  7. 7. Utilização Na tela de edição do pedido, aba “Geral”, foram adicionadas as seções “Promoções” e “Promoções por Item”, que informam as promoções vinculadas ao pedido em questão no momento do seu fechamento. Versão 2.0 Apresentar promoções na tela do pedido
  8. 8. Utilização Por padrão, as listas de promoções vêm fechadas. Para exibi-las, clique na seta que encontra-se ao lado da respectiva seção. Versão 2.0 Clicando no nome de cada promoção, será aberta a tela com a descrição da promoção. Caso o pedido não possua nenhuma promoção associada, as seções “Promoções” e “Promoções por Item” não serão exibidas na tela. Apresentar promoções na tela do pedido
  9. 9. APRESENTAR LISTA DE PREÇO NO PEDIDO Release Notes Versão 2.0 NOVO
  10. 10. Conteúdo  Apresentação  Utilização 1. Sistema Administrativo 1.1. Visualizando qual é a lista de preço 1.2. Link para o log de alterações de preço Versão 2.0 Apresentar lista de preço no pedido
  11. 11. Apresentação A partir desta alteração no detalhe do pedido no admin será possível visualizar a lista de preço que foi aplicada para o produto comprado. Isto é importante, pois quando o lojista muda a lista de preço no site podem estar ocorrendo um fechamento de compras no momento e produtos podem ter preços de listas diferentes até tudo ser replicado. Apresentar lista de preço no pedidoVersão 2.0
  12. 12. 1. Sistema Administrativo Através do menu “Backoffice” opção “Pedidos” irão aparecer os pedidos da loja. Entrando em um pedido, no seu detalhe, na coluna preço terá um ícone de lista. Utilização Apresentar lista de preço no pedidoVersão 2.0 No painel do sistema administrativo: Backoffice -> Pedidos
  13. 13. Utilização 1.1. Visualizando qual é a lista de preço Passando o mouse no preço ou no ícone ao lado irá aparecer qual lista foi utilizada para o cálculo do preço do produto. Apresentar lista de preço no pedidoVersão 2.0 No painel do sistema administrativo: Backoffice -> Pedidos
  14. 14. 1.2. Link para o log de alterações de preço Ao clicar no link no detalhe do pedido irá para o log de alterações. Utilização Apresentar lista de preço no pedidoVersão 2.0
  15. 15. LOGIN EM MODAL (LISTA DE DESEJOS, ONE CLICK BUY) Release Notes Versão 2.0 NOVO
  16. 16. Conteúdo  Apresentação  Instalação / Ativação 1. Sistema Administrativo 1.1 Lista de Desejos 1.2 One Click Buy  Utilização 1. Loja 1.1 Lista de Desejos 1.2 One Click Buy Versão 2.0 Login em modal (Lista de desejos, One Click Buy)
  17. 17. Apresentação A funcionalidade de “Login em modal” permite ao cliente efetuar o login de forma não obstrutiva, sendo possível completar a ação que necessite estar autenticado sem ser redirecionado para a página 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 necessário. Login em modal (Lista de desejos, One Click Buy)Versão 2.0
  18. 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 código liquid no template, é necessário que seja inserido o parâmetro LoginInSameModal como true na chamada do widget, conforme imagem abaixo. Instalação / Ativação Login em modal (Lista de desejos, One Click Buy)Versão 2.0 No template do detalhe do produto:
  19. 19. Para habilitar a funcionalidade de “Login em modal” no widget de “Lista de desejos”(product_wishlist) via editor de conteúdo é necessário marcar a opção “Habilitar a opção de logar sem redirecionar”com o sim na aba “Campos do template”, conforme imagem abaixo. Login em modal (Lista de desejos, One Click Buy)Versão 2.0
  20. 20. 1.2 One Click Buy Para habilitar a funcionalidade de “Login em modal” no widget de “One Click Buy”(product_buybutton) é necessário inserir o parâmetro ButtonOneClickBuyAvailable como true, como na imagem abaixo. Por padrão, quando não for passado este parâmetro é false. Login em modal (Lista de desejos, One Click Buy)Versão 2.0 No painel do sistema administrativo: No template do detalhe do produto:
  21. 21. Utilização Login em modal (Lista de desejos, One Click Buy)Versão 2.0 1. Loja 1.1 Lista de desejos Ao clicar no botão de “Adicionar à lista de desejos” a opção de logar é aberta em uma modal quando o cliente não estiver logado.
  22. 22. Login em modal (Lista de desejos, One Click Buy)Versão 2.0 1.2 One Click Buy Ao clicar no no botão de “One Click Buy” a opção de logar é aberta em uma modal quando o cliente estiver deslogado.
  23. 23. PERMITIR ORDENAR AS VARIAÇÕES DE UM PRODUTO Release Notes Versão 2.0 NOVO
  24. 24. Conteúdo  Apresentação  Utilização 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 Versão 2.0 Permitir ordenar as variações de um produto
  25. 25. Apresentação Agora, na sistema administrativo, será possível realizar a ordenação dos SKUs de um produto, para definir a ordem de exibição 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 exibição dos SKUs de um produto no site. Permitir ordenar as variações de um produtoVersão 2.00
  26. 26. 1. Sistema Administrativo Através do menu “Catálogo”, opção “Produtos”, irão aparecer todos os produtos da loja. Entrando em um produto, na aba “SKUs”, na coluna “Ações” agora existem dois novos botões, para movimentar o respectivo sku para cima ou para baixo na lista. Utilização Permitir ordenar as variações de um produtoVersão 2.0 No painel do sistema administrativo: Catálogo -> Produtos -> Editando um produto -> SKUs
  27. 27. Utilização 1.1. Ordenando os SKUs do Produto Clicando no botão que move o sku para baixo, ele estará trocando de posição com o sku imediatamente abaixo na listagem. Caso o botão clicado seja o que move para cima, o sku trocará de posição com o que está posicionado logo acima. As ordenações realizadas deverão esperar até que a replicação dos dados seja disparada e as alterações possam ser visualizadas no site. As alterações somente terão efeito caso a ordenação esteja habilitada no widget de exibição de skus. Permitir ordenar as variações de um produtoVersão 2.0 Obs.: A ordenação está disponível somente para as lojas que utilizam o widget product_buy_lot
  28. 28. 1.2. Configurando os Widgets Para que as ordenações de skus possam ser visualizadas no site, é necessário habilitar no widget a configuração indicando que deve ser utilizada essa ordenação. Por padrão, essa configuração vem desabilitada. Utilização Permitir ordenar as variações de um produtoVersão 2.0 Para habilitar a ordenação por skus, vá no menu “Aparência”, opção “Configurar design” e selecione na árvore de rotas “Detalhe do Produto”. Obs.: A ordenação está disponível somente para as lojas que utilizam o widget product_buy_lot
  29. 29. 1.2. Configurando os Widgets Na sessão “Conteúdo”, clique em “Editar Widgets” e, posteriormente, entre na edição do arquivo “product.detail.template”. Procure pela chamada ao widget product_buy_lot e adicione o parâmetro SortSkus. Utilização Permitir ordenar as variações de um produtoVersão 2.0 Obs.: A ordenação está disponível somente para as lojas que utilizam o widget product_buy_lot
  30. 30. PESQUISAR PRODUTOS SELECIONADOS NA LISTA DE PRODUTOS Release Notes Versão 2.0 NOVO
  31. 31. Conteúdo  Apresentação  Utilização 1. Sistema Administrativo 1.1. Lista de Produtos 1.2. Modal Versão 2.0 Pesquisar produtos selecionados na lista de produtos
  32. 32. Apresentação Na tela de lista de produtos, é possível 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 produtosVersão 2.0
  33. 33. 1. Sistema Administrativo Através do menu “Catálogo” opção “Listas de produtos”, criando uma lista nova ou editando uma já existente, é possível verificar a pesquisa nos produtos selecionados. 1.1. Lista de Produtos Caso queira adicionar uma nova lista de produtos, clique em <Adicionar Lista>. Caso contrário, selecione uma lista de produtos e entre na sua edição. Utilização Pesquisar produtos selecionados na lista de produtosVersão 2.0
  34. 34. Utilização Informe o termo que deseja pesquisar e clique em <Pesquisar> ou tecle <Enter>. Os produtos que respeitam o termo informado serão exibidos na lista abaixo. Pesquisar produtos selecionados na lista de produtosVersão 2.0
  35. 35. Utilização Para retornar os produtos anteriores, somente remova o termo informado e clique novamente em <Pesquisar> ou tecle <Enter>. Pesquisar produtos selecionados na lista de produtosVersão 2.0
  36. 36. Utilização 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 seleção ou criação de uma lista de produtos. Pesquisar produtos selecionados na lista de produtosVersão 2.0
  37. 37. REFERENCE STORE Release Notes Versão 2.0 NOVO
  38. 38. Conteúdo  Apresentação  Amostras  Design Guide  Loja Referência Versão 2.0 Reference Store
  39. 39. Apresentação A Reference Store é um trabalho interno que está sendo realizado para a criação de uma nova loja referência, a qual conterá todos os padrões de design, usabilidade e melhores práticas que serão utilizados no desenvolvimento de novos componentes do Core. Este trabalho levará em consideração estudos de mercado e melhores práticas no desenvolvimento de uma plataforma de e-commerce, trazendo os conceitos de reaproveitamento, responsividade, boas práticas de SEO, organização de conteúdo, padronização e melhorias de performance. Reference StoreVersão 2.0
  40. 40. Amostra : Design Guide Reference StoreVersão 2.0
  41. 41. Amostra : Design Guide Reference StoreVersão 2.0
  42. 42. Amostra : Loja Referência Reference StoreVersão 2.0
  43. 43. Amostra : Loja Referência Reference StoreVersão 2.0
  44. 44. MONITORAMENTOS Release Notes Versão 2.0 MELHORIA
  45. 45. Conteúdo  Apresentação  Tela de Monitoramento da Loja Versão 2.0 Monitoramentos
  46. 46. Apresentação 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 serviço, monitorando os seguintes aspectos:  Botão Comprar : Será verificado continuamente se este está ativo, clicável e em perfeito funcionamento (sem erros de javascript/html no lado do cliente, ou erros no servidor, assim teremos garantia de que as vendas irão ocorrer normalmente neste ponto do sistema.  Pedidos : Será verificado se a loja está tendo pedidos, dentro da média dos pedidos realizados será verificado se a loja não está vendendo conforme sua média, sendo assim a equipe de suporte poderá receber alertas para tomar alguma providência caso a loja tenha algum problema. MonitoramentosVersão 2.0
  47. 47. Tela de Monitoramento da Loja MonitoramentosVersão 2.0 Sistema de Monitoramento do Core:
  48. 48. MELHORIAS NA ARQUITETURA E INFRAESTRUTURA DA APLICAÇÃO Release Notes Versão 2.0 MELHORIA
  49. 49. Conteúdo  Apresentação  Desenvolvimentos 1. Balanceamento no acesso a informações em cache (Redis) 2. Invalidação do cache de output (Varnish) pela aplicação 3. Revisão de índices do banco de dados 4. Armazenamento das informações de preço e estoques pelo servidor de busca (Sorl) 5. Troca de servidor de banco de dados (Amazon RDS » Amazon EC2 SQL Server) Versão 2.0 Melhorias na arquitetura e infraestrutura da aplicação
  50. 50. Apresentação Este documento apresenta um descritivo de desenvolvimentos realizados com o intuito de melhorar partes da arquitetura da aplicação, bem como a infraestrutura, visando uma maior estabilidade e performance de todas as aplicações. Melhorias na arquitetura e infraestrutura da aplicaçãoVersão 2.0
  51. 51. 1. Balanceamento no acesso a informações em cache (Redis) O balanceamento permite que a carga de acessos as informações no servidor de cache distribuído seja dividida entre os servidores. A topologia para estes servidores é mestre-escravo, sendo que as leituras são realizadas no escravo, enquanto que as escritas são realizadas no mestre. Apenas os dados de sessão são sempre escritos e lidos no servidor mestre. Desenvolvimentos Melhorias na arquitetura e infraestrutura da aplicaçãoVersão 2.0 Leitura Leitura Escrita Leitura
  52. 52. 2. Invalidação do cache de output (Varnish) pela aplicação A invalidação do cache de output permite que o tempo de vida (TTL) das páginas cacheadas pelo servidor de saída possam ser aumentados, diminuindo o hit nos servidores entregam o conteúdo mais atual. A invalidação monitora alterações em templates, replicação de produtos e outras informações pertinentes. Ex.: caso o produto 1 fique sem estoque, apenas os caches onde o produto 1 estava presente serão invalidados. A invalidação pode levar 30 a 60 segundos para ter efeito. Desenvolvimentos Melhorias na arquitetura e infraestrutura da aplicaçãoVersão 2.0
  53. 53. 3. Revisão de índices do banco de dados Foi realizada manutenção preventiva nos índices do banco de dados. Diariamente será feita uma reorganização dos índices, conforme sua fragmentação e semanalmente será feita uma recriação dos índices. Desenvolvimentos Melhorias na arquitetura e infraestrutura da aplicaçãoVersão 2.0
  54. 54. 4. Armazenamento das informações de preço e estoques pelo servidor de busca (Sorl) Foram estudados algoritmos de serialização e compressão de dados para os dados de preço e estoque, diminuindo o espaço necessário para armazenamento no servidor de busca, diminuindo o tempo de trafego da informação entre servidores. Por fim, utilizou-se gzip* para compressão e protobuf** para serialização. * http://en.wikipedia.org/wiki/Gzip ** http://en.wikipedia.org/wiki/Protocol_Buffers Desenvolvimentos Melhorias na arquitetura e infraestrutura da aplicaçãoVersão 2.0
  55. 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 após pesquisas, coleta de resultados de performance dos bancos atuais e consultoria com a própria Amazon decidimos optar pela troca da tecnologia RDS pela EC2, sendo assim continuamos com o SQL Server, porém agora temos mais opções disponíveis o que trará uma melhoria na parte de performance e escalabilidade do banco de dados. Desenvolvimentos Melhorias na arquitetura e infraestrutura da aplicaçãoVersão 2.0
  56. 56. PERFORMANCE CLIENT-SIDE Release Notes Versão 2.0 MELHORIA
  57. 57. Conteúdo  Apresentação  Melhorias  Ordem de carregamento de scripts externos  Escolha do modo de carregamento de recursos  Permitir desabilitar widgets que não são utilizados  Melhorias de repaint, lazyload e scripts de terceiros  Melhorias Gerais Versão 2.0 Melhorias de performance client-side
  58. 58. Apresentação Foram desenvolvidas melhorias que afetam a performance client-side do Core como um todo de forma a melhorar e facilitar o desenvolvimento das customizações 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 técnicas 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 experiência do usuário durante a compra. Melhorias de performance client-sideVersão 2.0
  59. 59. Dentro dos templates, existem chamadas de scripts externos que podem resultar em uma espera para o carregamento de toda página. Desenvolvemos uma tag dentro do liquid para incluir scripts externos de forma performática. Exemplo de utilização: Quando utilizada essa tag, garantimos que o script irá ser executado sempre no final da requisição, sem que a página fique aguardando para que seja carregada. Ordem de carregamento de scripts externos Melhorias de performance client-sideVersão 2.0 {% page_assets ‘Include’ with src:‘/Custom/Content/Themes/Default/Scripts/test.js’ %}
  60. 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 página. Tipos: Always (sempre carregado) ou OnDemand (somente quando estiver na tela) Exemplo de utilização dentro do manifesto: Por padrão, 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-sideVersão 2.0 <include type=“StyleSheet" relativePath="Styles/wd.browsing.wishlist.css" load="Always"/> <include type="StyleSheet" relativePath="Styles/wd.browsing.wishlist.css" load=“OnDemand"/>
  61. 61. Permitir desabilitar widgets que não são utilizados Por vezes possuímos widgets dentro da página que não são utilizados. Temos a opção agora de desativá-los a partir da tela de gerenciamento de widgets. Melhorias de performance client-sideVersão 2.0 No painel do sistema administrativo: Aparência -> Gerenciador de Widgets Dentro de ações, existe a possibilidade de inativar ou ativar os widgets necessários.
  62. 62. Permitir desabilitar widgets que não são utilizados Após a ação de desabilitar é necessário limpar o cache da loja para as alterações surtirem efeito, para isso: Melhorias de performance client-sideVersão 2.0 Abra o navegador e digite o seguinte endereço: www.sualoja.com.br/app/info/clearallcache
  63. 63. Melhorias de repaint, lazyload e scripts de terceiros Aqui apresentaremos algumas boas práticas as quais são um conjunto de técnicas e procedimentos que orientam os desenvolvedores a terem um melhor uso da ferramenta. O conjunto de práticas a seguir tem por objetivo a melhora da performance da loja para o client-side (carregamento e navegação feita pelo cliente/usuário/navegador): Melhorias de performance client-sideVersão 2.0
  64. 64. Melhorias de repaint, lazyload e scripts de terceiros Melhorias de performance client-sideVersão 2.0 Repaint e Lazyload: Em uma tradução livre, lazyload é o carregamento preguiçoso: esta técnica é 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 presença do atributo. 2. Um atributo data-src deve ser incluído 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: <img src=“/blank.gif” data-src=“caminho real da imagem” class=“lazyload”>
  65. 65. Melhorias de repaint, lazyload e scripts de terceiros Melhorias de performance client-sideVersão 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 término do carregamento da loja. A forma de se carregar os script é feito da seguinte forma: Caso seja necessário a inclusão de um tag <script> em seu template é indicado que seja utilizado o parâmetro async. • No HTML 5 foi criado um recurso para o carregamento assíncrono de scripts. Este recurso consiste apenas na adição de um atributo na tag <script> chamado "async". Exemplo: • Fazendo isso, o navegador não aguarda o carregamento do script e continua o processo de leitura e renderização do HTML. Quando isso não é feito o navegador bloqueia o print da página até obter o recurso. Após receber o js o navegador o interpreta e só então continua a renderização do html. Isso torna a exibição do conteúdo visível mais rapidamente melhorando a experiência do usuário. <script src=“caminho para o script” async ></script> {% page_assets ‘Include’ with src:‘/Custom/Content/Themes/Default/Scripts/test.js’ %}
  66. 66. Melhorias de repaint, lazyload e scripts de terceiros Melhorias de performance client-sideVersão 2.0 Scripts de terceiros: <script> (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; // chamada assíncrona: js.async = true; js.src = "//connect.facebook.net/pt_BR/all.js#xfbml=1&appId=118693954905343"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); </script> • Exemplo: – Script de carregamento do plugin do facebook:
  67. 67. Melhorias Gerais Além das melhorias citadas acima, fizemos também as seguintes melhorias técnicas: • Revisão de versões 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-sideVersão 2.0
  68. 68. APIS AJAX NO CHECKOUT Release Notes Versão 2.0 MELHORIA
  69. 69. Conteúdo  Apresentação  Utilização Versão 2.0 APIs AJAX no Checkout
  70. 70. Apresentação Durante o checkout agora será possível ter as informações do carrinho em uma única requisição. Sendo assim, fica facilitada a utilização de chamadas AJAX durante o processo de compra e está poderá ser utilizada também por uma aplicação externa. APIs AJAX no CheckoutVersão 2.0
  71. 71. 1. Via JSON Através de chamada AJAX na url: <endereço da loja>/checkout/<passo do checkout>.json?context=basket Obrigatório passar o parâmetro “contexto=basket” se quiser as informações de basket na mesma chamada. Exemplos: <endereço da loja>/checkout/endereco-de-entrega.json?context=basket <endereço da loja>/checkout/pagamento.json?context=basket Utilização APIs AJAX no CheckoutVersão 2.0
  72. 72. Utilização Exemplo de retorno: APIs AJAX no CheckoutVersão 2.0

×