Cláudio Rosse Pandolfi, Coordenador de Integrações da Locaweb, ministrou o workshop "Preparar o e-commerce para ser exclusivo e personalizado", no DevCommerce Conference 2016.
O DevCommerce Conference 2016 aconteceu nos dias 06 e 07 de junho de 2016, no Hotel Tivoli em São Paulo-SP
http://devcommerce2016.imasters.com.br/
2. Cláudio Rosse Pandolfi
Coordenador de Integrações - Locaweb / Tray
Especialidades:
● E-commerce
● Plataformas OpenSource
https://br.linkedin.com/in/claudiopandolfi
Preparar o e-commerce para ser exclusivo e personalizado
3. O que você faz para tornar um e-
commerce exclusivo e
personalizado?
Preparar o e-commerce para ser exclusivo e personalizado
4. Exclusivo
- Incompatível com outra coisa
- Especial, privativo, restrito
Personalizado
- Que se personalizou
- Que considera cada um de forma separada
Preparar o e-commerce para ser exclusivo e personalizado
5. Campanhas de Marketing?
Preparar o e-commerce para ser exclusivo e personalizado
Divulgação em Facebook?
Indica para amigos?
Planejamento de Vendas?
Promoções Imbatíveis?
7. E como tornar um e-commerce
exclusivo e personalizado?
Preparar o e-commerce para ser exclusivo e personalizado
8. Usar a tecnologia a favor do e-commerce!
Preparar o e-commerce para ser exclusivo e personalizado
9. Como tornar Exclusivo?
Preparar o e-commerce para ser exclusivo e personalizado
Identidade visual para o e-
commerce
Melhorar a performace
Gerenciar diversos temas
para datas comemorativas
12. Preparar o e-commerce para ser exclusivo e personalizado
Pré-processamento de CSS
Conversões léxica dos
códigos SASS para CSS
sass --watch app/sass:
public/stylesheets
13. Preparar o e-commerce para ser exclusivo e personalizado
Variáveis
Utilizado para armazenar
cores, fontes e qualquer
valor de CSS
$font-stack: Helvetica,
sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
14. Preparar o e-commerce para ser exclusivo e personalizado
Aninhamento
Disponibiliza o CSS de
forma estruturada
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
15. Preparar o e-commerce para ser exclusivo e personalizado
Arquivos Fracionado e Importação
Criação de diversos
arquivos e importação
do arquivos
// _reset.scss
ul,
ol {
margin: 0;
padding: 0;
}
// base.scss
@import 'reset';
body {
font: 100% Helvetica, sans-serif;
}
16. Preparar o e-commerce para ser exclusivo e personalizado
Mixins
Grupo de declarações
(funções) para não
reescrever códigos
@mixin border-radius($radius) {
-webkit-border-radius : $radius;
-moz-border-radius : $radius;
-ms-border-radius : $radius;
border-radius: $radius;
}
.box { @include border-radius
(10px); }
17. Preparar o e-commerce para ser exclusivo e personalizado
Extensão
Compartilhamento de
propriedades com outros
seletores
.message {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}
.success {
@extend .message;
border-color: green;
}
.error {
@extend .message;
border-color: red;
}
18. Preparar o e-commerce para ser exclusivo e personalizado
Operações
Realizar cálculos
matemáticos como +, -, *,
/, and %
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary" ] {
float: right;
width: 300px / 960px * 100%;
}
19. Automatizar e melhorar o fluxo de trabalho (GULP)
Preparar o e-commerce para ser exclusivo e personalizado
20. Preparar o e-commerce para ser exclusivo e personalizado
Automação do fluxo de trabalho
CSS
- Concatenação de arquivos
- Minimização
JS
- Modularização de arquivos
- UglifyJs (analise e compressão de JS)
Imagens
- Minimização
21. Preparar o e-commerce para ser exclusivo e personalizado
Módulos
gulp-minify-css - Minimizar e limpar CSS
gulp-sass - Plugin Sass para Gulp
gulp-concat - Concatenar arquivos
gulp-imagemin - Minimizar imagens PNG, JPEG, GIF e SVG
gulp-uglify - Plugin para UglifyJS
http://gulpjs.com/plugins/
22. Preparar o e-commerce para ser exclusivo e personalizado
Task - SASS / CSS
Automatização do pré-
processamento de SASS
e minimização do
arquivo CSS
gulp.task('sass', () => {
gulp.src('sass/theme.min.scss' )
.pipe(concat('theme.min.css' ))
.pipe(minifyCSS())
.pipe(gulp.dest(CSSPATH));
});
23. Preparar o e-commerce para ser exclusivo e personalizado
Task - JS
Analise, compressão e
concatenação de arquivos
JS modularizados
gulp.task('js', () => {
gulp.src(JSPATH + "modules/*.js" )
.pipe(concat("theme.min.js" ))
.pipe(uglify({"compress":
false}))
.pipe(gulp.dest(JSPATH));
});
24. Preparar o e-commerce para ser exclusivo e personalizado
Task - Imagens
Minimizar imagens PNG,
JPEG, GIF e SVG
gulp.task('imagens', () =>
gulp.src('src/images/*' )
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
);
25. Preparar o e-commerce para ser exclusivo e personalizado
Tasks - Chamada
Automatizar através
da chamada padrão
do Gulp
gulp.task('watch', () => {
gulp.watch('sass/*', ['sass']);
gulp.watch('modules/*.js' , ['js']);
gulp.watch('src/imagens', ['imagens']);
});
gulp.task('default', [
'watch',
'sass',
'js',
'imagens'
]);
26. Gerenciar seus temas - OpenCode
Preparar o e-commerce para ser exclusivo e personalizado
< opencode >
27. Preparar o e-commerce para ser exclusivo e personalizado
As possibilidades!!!
Criação de diversos temas
- Natal
- Dia das Mães
- Dia dos Namorados
- ...
Gerenciar temas com facilidade
Realização de testes antes da publicação
< opencode >
28. Preparar o e-commerce para ser exclusivo e personalizado
Template Engine - Twig
Manipulação dos objetos e funções
Não disponível todos os recursos do Twig
Para mais informações acesse:
http://twig.sensiolabs.org/documentation
< opencode >
29. Preparar o e-commerce para ser exclusivo e personalizado
Como gerenciar os temas?
Pré requisito - Ruby Instalado
Não precisa conhecer Ruby
Disponibiliza comandos para
gerenciar diversos temas
< opencode >
GEM OpenCode
30. Preparar o e-commerce para ser exclusivo e personalizado
Comandos GEM
Possibilidade de
criar e gerenciar
todos os temas
da loja
opencode new API_KEY PASSWORD THEME_NAME
THEME_BASE
opencode clean
opencode configure API_KEY PASSWORD THEME_ID
opencode download FILE
opencode help [COMMAND]
opencode list
opencode open
opencode remove FILE
opencode systeminfo
opencode upload FILE
opencode watch
< opencode >
31. Preparar o e-commerce para ser exclusivo e personalizado
Estrutura
Páginas da loja virtual (home, produto, …)
Trechos de código e componentes reutilizáveis
Folhas de estilo e webfonts
Imagens
Estrutura do seu tema
Configurações e customizador
Plugins js
< opencode >
32. Preparar o e-commerce para ser exclusivo e personalizado
Estrutura < opencode >
layouts/ pages/
33. Preparar o e-commerce para ser exclusivo e personalizado
Estrutura < opencode >
elements/ elements/snippets/
34. Preparar o e-commerce para ser exclusivo e personalizado
Objetos < opencode >
Estruturas de dados utilizadas
para manipulação informações
da loja
Possibilita a criação de listas de
produtos, menus de categorias e
marcas, ...
35. Preparar o e-commerce para ser exclusivo e personalizado
Objetos < opencode >
banners
breadcrumb
category
categories
links
pages
paymentMethods
productFeatured
product
products
seals
search
filters
paginate
store
tags
settings
36. Preparar o e-commerce para ser exclusivo e personalizado
Objeto banner
Exibir os banners
cadastrados no painel
administrativo da loja
{{ banner.home }}
{{ banner.bottom }}
{{ banner.extra1 }}
< opencode >
37. Preparar o e-commerce para ser exclusivo e personalizado
Objeto categories
Criar um menu de
categorias
<ul>
{% for category in categories %}
<li>
<a href="{{ category.link }}">{{
category.name }}</a>
</li>
{% endfor %}
</ul>
< opencode >
38. Preparar o e-commerce para ser exclusivo e personalizado
Objeto product
Exibir os dados do
produto
<div>
Codigo do produto: <span>{{ product.id
}}</span>
<h3>{{ product.name }}</h3>
<h3>{{ product.brand }}</h3>
</div>
< opencode >
39. Preparar o e-commerce para ser exclusivo e personalizado
Funções < opencode >
Conjunto de instruções que
permitem processar as variáveis,
manipulando os resultados
exibidos em sua loja virtual
40. Preparar o e-commerce para ser exclusivo e personalizado
Funções < opencode >
asset()
Brands()
Categories()
Image()
Products()
Translation()
41. Preparar o e-commerce para ser exclusivo e personalizado
Função Product()
Consultar produtos
cadastradas com
filtros
{% set products = Products({
'filter': 'featured',
'limit': 8,
'order': {'quantity_sold': 'desc'},
'categories': [2, 3],
'brands': 'Tray'
}) %}
< opencode >
42. Conseguimos um e-commerce exclusivo
utilizando tecnologia
Preparar o e-commerce para ser exclusivo e personalizado
43. Como tornar Personalizado?
Preparar o e-commerce para ser exclusivo e personalizado
Incluir e criar novas
ferramentas para melhorar
a experiência do usuário
Melhorar o controle e
gerenciamento dos
produtos e pedidos
46. Preparar o e-commerce para ser exclusivo e personalizado
O que são APIs?
Conjunto de funcionalidades para
facilitar o desenvolvimento
Possibilidade de interações com
aplicações terceiras
49. Preparar o e-commerce para ser exclusivo e personalizado
APIs para ERPs
Interagir de forma única com o
sistema de gestão para todo o
controle de pedidos e produtos
Controle de estoque
Envio de forma eficiente e eficaz
50. Preparar o e-commerce para ser exclusivo e personalizado
APIs para Aplicações
Possibilidade de outras
aplicações se comunicarem com o
e-commerce
Criar uma aplicação personalizada
para o e-commerce
55. Preparar o e-commerce para ser exclusivo e personalizado
Tipos de APIs
Públicas Autenticadas
56. Preparar o e-commerce para ser exclusivo e personalizado
APIs Públicas
Requisições via Javascript
APIs Disponíveis:
- Busca
- Carrinho de Compra
- Categorias
- Produtos
- Variações de Produto
57. Preparar o e-commerce para ser exclusivo e personalizado
API de Produto
<script type="text/javascript">
var productId = "84";
$.ajax({
method: "GET",
url: "/web_api/products/"+productId
}).done(function( response, textStatus, jqXHR ) {
console.log(response);
}).fail(function( jqXHR, status, errorThrown ){
var response = $.parseJSON( jqXHR.responseText );
console.log(response);
});
</script>
58. Preparar o e-commerce para ser exclusivo e personalizado
APIs com Autorização
Comunicação com aplicações
externas
Gerenciar todos os recursos da
loja
Mais de 80 recursos
59. Conseguimos um e-commerce personalizado
utilizando tecnologia
Preparar o e-commerce para ser exclusivo e personalizado