Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Preparar o e-commerce
para ser exclusivo e
personalizado
Cláudio Rosse Pandolfi
Coordenador de Integrações - Locaweb / Tray
Especialidades:
● E-commerce
● Plataformas OpenSource
h...
O que você faz para tornar um e-
commerce exclusivo e
personalizado?
Preparar o e-commerce para ser exclusivo e personaliz...
Exclusivo
- Incompatível com outra coisa
- Especial, privativo, restrito
Personalizado
- Que se personalizou
- Que conside...
Campanhas de Marketing?
Preparar o e-commerce para ser exclusivo e personalizado
Divulgação em Facebook?
Indica para amigo...
Desenvolvedores
Preparar o e-commerce para ser exclusivo e personalizado
E como tornar um e-commerce
exclusivo e personalizado?
Preparar o e-commerce para ser exclusivo e personalizado
Usar a tecnologia a favor do e-commerce!
Preparar o e-commerce para ser exclusivo e personalizado
Como tornar Exclusivo?
Preparar o e-commerce para ser exclusivo e personalizado
Identidade visual para o e-
commerce
Melho...
Preparar o e-commerce para ser exclusivo e personalizado
Syntactically Awesome Style Sheets (SASS)
Preparar o e-commerce para ser exclusivo e personalizado
Preparar o e-commerce para ser exclusivo e personalizado
Pré-processamento de CSS
Conversões léxica dos
códigos SASS para ...
Preparar o e-commerce para ser exclusivo e personalizado
Variáveis
Utilizado para armazenar
cores, fontes e qualquer
valor...
Preparar o e-commerce para ser exclusivo e personalizado
Aninhamento
Disponibiliza o CSS de
forma estruturada
nav {
ul {
m...
Preparar o e-commerce para ser exclusivo e personalizado
Arquivos Fracionado e Importação
Criação de diversos
arquivos e i...
Preparar o e-commerce para ser exclusivo e personalizado
Mixins
Grupo de declarações
(funções) para não
reescrever códigos...
Preparar o e-commerce para ser exclusivo e personalizado
Extensão
Compartilhamento de
propriedades com outros
seletores
.m...
Preparar o e-commerce para ser exclusivo e personalizado
Operações
Realizar cálculos
matemáticos como +, -, *,
/, and %
.c...
Automatizar e melhorar o fluxo de trabalho (GULP)
Preparar o e-commerce para ser exclusivo e personalizado
Preparar o e-commerce para ser exclusivo e personalizado
Automação do fluxo de trabalho
CSS
- Concatenação de arquivos
- M...
Preparar o e-commerce para ser exclusivo e personalizado
Módulos
gulp-minify-css - Minimizar e limpar CSS
gulp-sass - Plug...
Preparar o e-commerce para ser exclusivo e personalizado
Task - SASS / CSS
Automatização do pré-
processamento de SASS
e m...
Preparar o e-commerce para ser exclusivo e personalizado
Task - JS
Analise, compressão e
concatenação de arquivos
JS modul...
Preparar o e-commerce para ser exclusivo e personalizado
Task - Imagens
Minimizar imagens PNG,
JPEG, GIF e SVG
gulp.task('...
Preparar o e-commerce para ser exclusivo e personalizado
Tasks - Chamada
Automatizar através
da chamada padrão
do Gulp
gul...
Gerenciar seus temas - OpenCode
Preparar o e-commerce para ser exclusivo e personalizado
< opencode >
Preparar o e-commerce para ser exclusivo e personalizado
As possibilidades!!!
Criação de diversos temas
- Natal
- Dia das ...
Preparar o e-commerce para ser exclusivo e personalizado
Template Engine - Twig
Manipulação dos objetos e funções
Não disp...
Preparar o e-commerce para ser exclusivo e personalizado
Como gerenciar os temas?
Pré requisito - Ruby Instalado
Não preci...
Preparar o e-commerce para ser exclusivo e personalizado
Comandos GEM
Possibilidade de
criar e gerenciar
todos os temas
da...
Preparar o e-commerce para ser exclusivo e personalizado
Estrutura
Páginas da loja virtual (home, produto, …)
Trechos de c...
Preparar o e-commerce para ser exclusivo e personalizado
Estrutura < opencode >
layouts/ pages/
Preparar o e-commerce para ser exclusivo e personalizado
Estrutura < opencode >
elements/ elements/snippets/
Preparar o e-commerce para ser exclusivo e personalizado
Objetos < opencode >
Estruturas de dados utilizadas
para manipula...
Preparar o e-commerce para ser exclusivo e personalizado
Objetos < opencode >
banners
breadcrumb
category
categories
links...
Preparar o e-commerce para ser exclusivo e personalizado
Objeto banner
Exibir os banners
cadastrados no painel
administrat...
Preparar o e-commerce para ser exclusivo e personalizado
Objeto categories
Criar um menu de
categorias
<ul>
{% for categor...
Preparar o e-commerce para ser exclusivo e personalizado
Objeto product
Exibir os dados do
produto
<div>
Codigo do produto...
Preparar o e-commerce para ser exclusivo e personalizado
Funções < opencode >
Conjunto de instruções que
permitem processa...
Preparar o e-commerce para ser exclusivo e personalizado
Funções < opencode >
asset()
Brands()
Categories()
Image()
Produc...
Preparar o e-commerce para ser exclusivo e personalizado
Função Product()
Consultar produtos
cadastradas com
filtros
{% se...
Conseguimos um e-commerce exclusivo
utilizando tecnologia
Preparar o e-commerce para ser exclusivo e personalizado
Como tornar Personalizado?
Preparar o e-commerce para ser exclusivo e personalizado
Incluir e criar novas
ferramentas para...
Preparar o e-commerce para ser exclusivo e personalizado
Comunicação através de APIs
Preparar o e-commerce para ser exclusivo e personalizado
Preparar o e-commerce para ser exclusivo e personalizado
O que são APIs?
Conjunto de funcionalidades para
facilitar o dese...
Preparar o e-commerce para ser exclusivo e personalizado
APIs de Marketplace
Preparar o e-commerce para ser exclusivo e personalizado
APIs para Pagamento
Preparar o e-commerce para ser exclusivo e personalizado
APIs para ERPs
Interagir de forma única com o
sistema de gestão p...
Preparar o e-commerce para ser exclusivo e personalizado
APIs para Aplicações
Possibilidade de outras
aplicações se comuni...
APIs Restful Tray
Preparar o e-commerce para ser exclusivo e personalizado
Preparar o e-commerce para ser exclusivo e personalizado
Parceiros
Preparar o e-commerce para ser exclusivo e personalizado
Layout Personalizado
Preparar o e-commerce para ser exclusivo e personalizado
Criar Aplicações
Preparar o e-commerce para ser exclusivo e personalizado
Tipos de APIs
Públicas Autenticadas
Preparar o e-commerce para ser exclusivo e personalizado
APIs Públicas
Requisições via Javascript
APIs Disponíveis:
- Busc...
Preparar o e-commerce para ser exclusivo e personalizado
API de Produto
<script type="text/javascript">
var productId = "8...
Preparar o e-commerce para ser exclusivo e personalizado
APIs com Autorização
Comunicação com aplicações
externas
Gerencia...
Conseguimos um e-commerce personalizado
utilizando tecnologia
Preparar o e-commerce para ser exclusivo e personalizado
Obrigado
Cláudio Rosse Pandolfi
cpandolfi@tray.net.br
https://br.linkedin.com/in/claudiopandolfi
Preparar o e-commerce par...
Upcoming SlideShare
Loading in …5
×

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

228 views

Published on

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/

Published in: Education
  • Be the first to comment

  • Be the first to like this

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

  1. 1. Preparar o e-commerce para ser exclusivo e personalizado
  2. 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. 3. O que você faz para tornar um e- commerce exclusivo e personalizado? Preparar o e-commerce para ser exclusivo e personalizado
  4. 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. 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?
  6. 6. Desenvolvedores Preparar o e-commerce para ser exclusivo e personalizado
  7. 7. E como tornar um e-commerce exclusivo e personalizado? Preparar o e-commerce para ser exclusivo e personalizado
  8. 8. Usar a tecnologia a favor do e-commerce! Preparar o e-commerce para ser exclusivo e personalizado
  9. 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
  10. 10. Preparar o e-commerce para ser exclusivo e personalizado
  11. 11. Syntactically Awesome Style Sheets (SASS) Preparar o e-commerce para ser exclusivo e personalizado
  12. 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. 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. 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. 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. 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. 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. 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. 19. Automatizar e melhorar o fluxo de trabalho (GULP) Preparar o e-commerce para ser exclusivo e personalizado
  20. 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. 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. 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. 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. 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. 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. 26. Gerenciar seus temas - OpenCode Preparar o e-commerce para ser exclusivo e personalizado < opencode >
  27. 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. 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. 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. 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. 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. 32. Preparar o e-commerce para ser exclusivo e personalizado Estrutura < opencode > layouts/ pages/
  33. 33. Preparar o e-commerce para ser exclusivo e personalizado Estrutura < opencode > elements/ elements/snippets/
  34. 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. 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. 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. 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. 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. 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. 40. Preparar o e-commerce para ser exclusivo e personalizado Funções < opencode > asset() Brands() Categories() Image() Products() Translation()
  41. 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. 42. Conseguimos um e-commerce exclusivo utilizando tecnologia Preparar o e-commerce para ser exclusivo e personalizado
  43. 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
  44. 44. Preparar o e-commerce para ser exclusivo e personalizado
  45. 45. Comunicação através de APIs Preparar o e-commerce para ser exclusivo e personalizado
  46. 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
  47. 47. Preparar o e-commerce para ser exclusivo e personalizado APIs de Marketplace
  48. 48. Preparar o e-commerce para ser exclusivo e personalizado APIs para Pagamento
  49. 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. 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
  51. 51. APIs Restful Tray Preparar o e-commerce para ser exclusivo e personalizado
  52. 52. Preparar o e-commerce para ser exclusivo e personalizado Parceiros
  53. 53. Preparar o e-commerce para ser exclusivo e personalizado Layout Personalizado
  54. 54. Preparar o e-commerce para ser exclusivo e personalizado Criar Aplicações
  55. 55. Preparar o e-commerce para ser exclusivo e personalizado Tipos de APIs Públicas Autenticadas
  56. 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. 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. 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. 59. Conseguimos um e-commerce personalizado utilizando tecnologia Preparar o e-commerce para ser exclusivo e personalizado
  60. 60. Obrigado Cláudio Rosse Pandolfi cpandolfi@tray.net.br https://br.linkedin.com/in/claudiopandolfi Preparar o e-commerce para ser exclusivo e personalizado

×