Release Notes Versao 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

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

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

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

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.

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

Conteúdo
 Apresentação
 Utilização
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

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

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
No painel do sistema administrativo:
Backoffice -> Pedidos

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

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

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

Conteúdo
 Apresentação
 Instalação / Ativação
1.1 Lista de Desejos
1.2 One Click Buy
 Utilização
1. Loja
1.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.
Login em modal (Lista de desejos, One Click Buy)Versão 2.0

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
No template do detalhe do produto:

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.

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.
No template do detalhe do produto:

Utilização
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.

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.

PERMITIR ORDENAR AS VARIAÇÕES
DE UM PRODUTO

Conteúdo
 Apresentação
 Utilização
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

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

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
Catálogo -> Produtos -> Editando um produto -> SKUs

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.
Obs.: A ordenação está disponível somente para as lojas que utilizam o widget
product_buy_lot

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

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
product_buy_lot

PESQUISAR PRODUTOS SELECIONADOS
NA LISTA DE PRODUTOS

Conteúdo
 Apresentação
 Utilização
1.1. Lista de Produtos
1.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.
Pesquisar produtos selecionados na lista de produtosVersão 2.0

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

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.

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

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.

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.
Reference StoreVersão 2.0

Amostra : Design Guide

Amostra : Loja Referência

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

Tela de Monitoramento da Loja
MonitoramentosVersão 2.0
Sistema de Monitoramento do Core:

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

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

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

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

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

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

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

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.
Melhorias de performance client-sideVersão 2.0

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
{% page_assets ‘Include’ with src:‘/Custom/Content/Themes/Default/Scripts/test.js’ %}

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’.
<include type=“StyleSheet" relativePath="Styles/wd.browsing.wishlist.css" load="Always"/>
<include type="StyleSheet" relativePath="Styles/wd.browsing.wishlist.css" load=“OnDemand"/>

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.
Aparência -> Gerenciador de Widgets
Dentro de ações,
existe a
possibilidade
de inativar ou
ativar os widgets
necessários.

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:
Abra o navegador e digite o seguinte endereço:
www.sualoja.com.br/app/info/clearallcache

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

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

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

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

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.
APIs AJAX no CheckoutVersão 2.0

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

Utilização
Exemplo de retorno:

Release Notes Versao 2.0

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Release Notes Versao 2.0

Mais de Plataforma CORE

Release Notes Versao 2.0