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

88 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
88
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×