DevCommerce Conference 2016 - Workshop: Preparar o e-commerce para ser exclusivo e personalizado

Preparar o e-commerce
para ser exclusivo e
personalizado

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

O que você faz para tornar um e-
commerce exclusivo e
personalizado?

Exclusivo
- Incompatível com outra coisa
- Especial, privativo, restrito
Personalizado
- Que se personalizou
- Que considera cada um de forma separada

Campanhas de Marketing?
Divulgação em Facebook?
Indica para amigos?
Planejamento de Vendas?
Promoções Imbatíveis?

Desenvolvedores

E como tornar um e-commerce
exclusivo e personalizado?

Usar a tecnologia a favor do e-commerce!

Como tornar Exclusivo?
Identidade visual para o e-
commerce
Melhorar a performace
Gerenciar diversos temas
para datas comemorativas

Syntactically Awesome Style Sheets (SASS)

Pré-processamento de CSS
Conversões léxica dos
códigos SASS para CSS
sass --watch app/sass:
public/stylesheets

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

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

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

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); }

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

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

Automatizar e melhorar o fluxo de trabalho (GULP)

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

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/

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));
});

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));
});

Task - Imagens
Minimizar imagens PNG,
JPEG, GIF e SVG
gulp.task('imagens', () =>
gulp.src('src/images/*' )
.pipe(imagemin())
.pipe(gulp.dest('dist/images'))
);

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'
]);

Gerenciar seus temas - OpenCode
< opencode >

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 >

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 >

Como gerenciar os temas?
Pré requisito - Ruby Instalado
Não precisa conhecer Ruby
Disponibiliza comandos para
gerenciar diversos temas
< opencode >
GEM OpenCode

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 >

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 >

Estrutura < opencode >
layouts/ pages/

Estrutura < opencode >
elements/ elements/snippets/

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

Objetos < opencode >
banners
breadcrumb
category
categories
links
pages
paymentMethods
productFeatured
product
products
seals
search
filters
paginate
store
tags
settings

Objeto banner
Exibir os banners
cadastrados no painel
administrativo da loja
{{ banner.home }}
{{ banner.bottom }}
{{ banner.extra1 }}
< opencode >

Objeto categories
Criar um menu de
categorias
<ul>
{% for category in categories %}
<li>
<a href="{{ category.link }}">{{
category.name }}</a>
</li>
{% endfor %}
</ul>
< opencode >

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 >

Funções < opencode >
Conjunto de instruções que
permitem processar as variáveis,
manipulando os resultados
exibidos em sua loja virtual

Funções < opencode >
asset()
Brands()
Categories()
Image()
Products()
Translation()

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 >

Conseguimos um e-commerce exclusivo
utilizando tecnologia

Como tornar Personalizado?
Incluir e criar novas
ferramentas para melhorar
a experiência do usuário
Melhorar o controle e
gerenciamento dos
produtos e pedidos

Comunicação através de APIs

O que são APIs?
Conjunto de funcionalidades para
facilitar o desenvolvimento
Possibilidade de interações com
aplicações terceiras

APIs de Marketplace

APIs para Pagamento

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

APIs para Aplicações
Possibilidade de outras
aplicações se comunicarem com o
e-commerce
Criar uma aplicação personalizada
para o e-commerce

APIs Restful Tray

Parceiros

Layout Personalizado

Criar Aplicações

Tipos de APIs
Públicas Autenticadas

APIs Públicas
Requisições via Javascript
APIs Disponíveis:
- Busca
- Carrinho de Compra
- Categorias
- Produtos
- Variações de Produto

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>

APIs com Autorização
Comunicação com aplicações
externas
Gerenciar todos os recursos da
loja
Mais de 80 recursos

Conseguimos um e-commerce personalizado
utilizando tecnologia

Obrigado
Cláudio Rosse Pandolfi
cpandolfi@tray.net.br
https://br.linkedin.com/in/claudiopandolfi

DevCommerce Conference 2016 - Workshop: Preparar o e-commerce para ser exclusivo e personalizado

Recomendados

Recomendados

Mais conteúdo relacionado

Mais de iMasters

Mais de iMasters (20)

Último

Último (20)

DevCommerce Conference 2016 - Workshop: Preparar o e-commerce para ser exclusivo e personalizado