release notes versao 2.0

Post on 02-Aug-2015

68 Views

Category:

Software

3 Downloads

Preview:

Click to see full reader

TRANSCRIPT

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 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

APRESENTAR PROMOÇÕES NA TELA DO PEDIDO

Release Notes Versão 2.0 NOVO

Apresentar promoções na tela do pedido

Conteúdo

Apresentação Utilização

1. Sistema Administrativo1.1. Edição do Pedido

Versão 2.0

Apresentar promoções na tela do pedido

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.

Versão 2.0

1. Sistema AdministrativoAtravés do menu “Backoffice” opção “Pedidos” é possível verificar as promoções associadas a cada pedido, caso existam.

1.1. Edição do PedidoNa lista que será exibida, entre na edição do pedido.

Utilização

Versão 2.0 Apresentar promoções na tela do pedido

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

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

APRESENTAR LISTA DE PREÇO NO PEDIDO

Release Notes Versão 2.0 NOVO

Apresentar lista de preço no pedido

Conteúdo

Apresentação Utilização

1. Sistema Administrativo1.1. Visualizando qual é a lista de preço1.2. Link para o log de alterações de preço

Versão 2.0

Apresentar lista de preço no pedido

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.

Versão 2.0

Apresentar lista de preço no pedido

1. Sistema AdministrativoAtravé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

Versão 2.0

No painel do sistema administrativo:Backoffice -> Pedidos

Apresentar lista de preço no pedido

Utilização

1.1. Visualizando qual é a lista de preçoPassando 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.

Versão 2.0

No painel do sistema administrativo:Backoffice -> Pedidos

Apresentar lista de preço no pedido

1.2. Link para o log de alterações de preçoAo clicar no link no detalhe do pedido irá para o log de alterações.

Utilização

Versão 2.0

LOGIN EM MODAL (LISTA DE DESEJOS, ONE CLICK BUY)

Release Notes Versão 2.0 NOVO

Login em modal (Lista de desejos, One Click Buy)

Conteúdo

Apresentação Instalação / Ativação

1. Sistema Administrativo1.1 Lista de Desejos1.2 One Click Buy

Utilização1. Loja

1.1 Lista de Desejos1.2 One Click Buy

Versão 2.0

Login em modal (Lista de desejos, One Click Buy)

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.

Versão 2.0

Login em modal (Lista de desejos, One Click Buy)

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

Versão 2.0

No template do detalhe do produto:

Login em modal (Lista de desejos, One Click Buy)

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.

Versão 2.0

Login em modal (Lista de desejos, One Click Buy)

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.

Versão 2.0

No painel do sistema administrativo:No template do detalhe do produto:

Login em modal (Lista de desejos, One Click Buy)

Utilização

Versão 2.0

1. Loja

1.1 Lista de desejosAo 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.

Login em modal (Lista de desejos, One Click Buy)Versão 2.0

1.2 One Click BuyAo clicar no no botão de “One Click Buy” a opção de logar é aberta em uma modal quando o cliente estiver deslogado.

PERMITIR ORDENAR AS VARIAÇÕES DE UM PRODUTO

Release Notes Versão 2.0 NOVO

Permitir ordenar as variações de um produto

Conteúdo

Apresentação Utilização

1. Sistema Administrativo1.1. Ordenando os Skus do Produto1.2. Configurando os Widgets

2. Site2.1. Exibindo os SKUs no detalhe do produto

Versão 2.0

Permitir ordenar as variações de um produto

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.

Versão 2.00

Permitir ordenar as variações de um produto

1. Sistema AdministrativoAtravé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

Versão 2.0

No painel do sistema administrativo:Catálogo -> Produtos -> Editando um produto -> SKUs

Permitir ordenar as variações de um produto

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.

Versão 2.0

Obs.: A ordenação está disponível somente para as lojas que utilizam o widget product_buy_lot

Permitir ordenar as variações de um produto

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

Versã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

Permitir ordenar as variações de um produto

1.2. Configurando os WidgetsNa 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

Versão 2.0

Obs.: A ordenação está disponível somente para as lojas que utilizam o widget product_buy_lot

PESQUISAR PRODUTOS SELECIONADOS NA LISTA DE PRODUTOS

Release Notes Versão 2.0 NOVO

Pesquisar produtos selecionados na lista de produtos

Conteúdo

Apresentação Utilização

1. Sistema Administrativo1.1. Lista de Produtos1.2. Modal

Versão 2.0

Pesquisar produtos selecionados na lista de produtos

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.

Versão 2.0

Pesquisar produtos selecionados na lista de produtos

1. Sistema AdministrativoAtravé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 ProdutosCaso 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

Versão 2.0

Pesquisar produtos selecionados na lista de produtos

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.

Versão 2.0

Pesquisar produtos selecionados na lista de produtos

Utilização

Para retornar os produtos anteriores, somente remova o termo informado e clique novamente em <Pesquisar> ou tecle <Enter>.

Versão 2.0

Pesquisar produtos selecionados na lista de produtos

Utilização

1.2. ModalO 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.

Versão 2.0

REFERENCE STORERelease Notes Versão 2.0 NOVO

Reference Store

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, 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.

Versão 2.0

Reference Store

Amostra : Design Guide

Versão 2.0

Reference Store

Amostra : Design Guide

Versão 2.0

Reference Store

Amostra : Loja Referência

Versão 2.0

Reference Store

Amostra : Loja Referência

Versão 2.0

MONITORAMENTOSRelease Notes Versão 2.0 MELHORIA

Monitoramentos

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 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.

Versão 2.0

Monitoramentos

Tela de Monitoramento da Loja

Versão 2.0

Sistema de Monitoramento do Core:

MELHORIAS NA ARQUITETURA E INFRAESTRUTURA DA APLICAÇÃO

Release Notes Versão 2.0 MELHORIA

Melhorias na arquitetura e infraestrutura da aplicação

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ção3. Revisão de índices do banco de dados4. 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

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.

Versão 2.0

Melhorias na arquitetura e infraestrutura da aplicação

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

Versão 2.0

Leitura

Leitura

Escrita

Leitura

Melhorias na arquitetura e infraestrutura da aplicação

2. Invalidação do cache de output (Varnish) pela aplicaçãoA 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

Versão 2.0

Melhorias na arquitetura e infraestrutura da aplicação

3. Revisão de índices do banco de dadosFoi 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

Versão 2.0

Melhorias na arquitetura e infraestrutura da aplicação

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

Versão 2.0

Melhorias na arquitetura e infraestrutura da aplicação

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

Versão 2.0

PERFORMANCE CLIENT-SIDERelease Notes Versão 2.0 MELHORIA

Melhorias de performance client-side

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

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.

Versão 2.0

Melhorias de performance client-side

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

Versão 2.0

{% page_assets ‘Include’ with src:‘/Custom/Content/Themes/Default/Scripts/test.js’ %}

Melhorias de performance client-side

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’.

Versã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"/>

Melhorias de performance client-side

Permitir desabilitar widgets que não são utilizadosPor 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.

Versã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 widgetsnecessários.

Melhorias de performance client-side

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:

Versão 2.0

Abra o navegador e digite o seguinte endereço:www.sualoja.com.br/app/info/clearallcache

Melhorias de performance client-side

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):

Versão 2.0

Melhorias de performance client-side

Melhorias de repaint, lazyload e scripts de terceiros

Versã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”>

Melhorias de performance client-side

Melhorias de repaint, lazyload e scripts de terceiros

Versã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’ %}

Melhorias de performance client-side

Melhorias de repaint, lazyload e scripts de terceiros

Versã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:

Melhorias de performance client-side

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

Versão 2.0

APIS AJAX NO CHECKOUTRelease Notes Versão 2.0 MELHORIA

APIs AJAX no Checkout

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, 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.

Versão 2.0

APIs AJAX no Checkout

1. Via JSON

Através de chamada AJAX na url: <endereço da loja>/checkout/<passo do checkout>.json?context=basketObrigató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

Versão 2.0

APIs AJAX no Checkout

UtilizaçãoExemplo de retorno:

Versão 2.0

top related