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