Criando layouts
personalizados
Desde mudanças sem abrir o FTP até criar uma nova funcionalidade
| Julho 2019
Federico
Product Designer
Nuvemshop
Apresentador:
federico@nuvemshop.com
Agenda
MÓDULO 1
MÓDULO 2
MÓDULO 3
sli.do
#nswebinar
| Julho 2019
Layout
Base
Vou basear todo o webinar no nosso design "esqueleto" chamado de Base:
00
Intro
Layout
Ferramentas
00
Intro
Ferramentas
Como personalizar o layout no admin
01
Como personalizar o layout no admin
Tela de personalização
01
Como personalizar o layout no admin
Logos, Fontes e Cores
01
Como personalizar o layout no admin
Cabeçalho e Rodapé
01
Como personalizar o layout no admin
Fluxo de compras
01
Como personalizar o layout no admin
Edição de css avançada
01
Mudanças sem ter que abrir o FTP
02
Mudanças de CSS
Mudanças sem ter que abrir o FTP
Mudanças de CSS
02
Algumas coisas que podem mudar são:
Resumindo, tudo o que tem a ver com CSS pode ser mudado.
Mudanças sem ter que abrir o FTP
Mudanças de CSS
02
Mudanças sem ter que abrir o FTP
Mudanças de CSS
02
Mudanças sem ter que abrir o FTP
Mudanças de CSS
02
Padding�Posição�Cores de fundo�Cores de texto�Bordas�Opacidade�Tamanho e peso do texto�Conteúdo
Mudanças sem ter que abrir o FTP
Mudanças de HTML com JS
02
Mudanças sem ter que abrir o FTP
Mudanças de HTML com JS
02
Mudanças sem ter que abrir o FTP
Mudanças de HTML com JS
02
Como abrir e mudar o FTP
03
Código privado
Código público
Como abrir e mudar o FTP
Código privado vs código público
03
PHP
Finalizar compra
TWIG
Como abrir e mudar o FTP
Abrindo o FTP e conectando com Filezilla
03
Finalizar compra
Como abrir e mudar o FTP
Abrindo o FTP e conectando com Filezilla
03
Finalizar compra
Como abrir e mudar o FTP
Abrindo o FTP e conectando com Filezilla
03
Finalizar compra
Como abrir e mudar o FTP
Abrindo o FTP e conectando com Filezilla
03
Finalizar compra
Como abrir e mudar o FTP
Abrindo o FTP e conectando com Filezilla
03
Criar a nova pasta no seu computador na coluna esquerda
Remover os arquivos do layout na coluna direita
Como abrir e mudar o FTP
Abrindo o FTP e conectando com Filezilla
03
Descarregar os arquivos do layout base na pasta vazia criada no nosso computador
Atualizar os arquivos no FTP com o layout Base
Como abrir e mudar o FTP
Mudando os arquivos com o editor de texto
03
Como abrir e mudar o FTP
Mudando os arquivos com o editor de texto
03
Alternativa 1 para mudar os arquivos
Como abrir e mudar o FTP
Mudando os arquivos com o editor de texto
03
Alternativa 2 para mudar os arquivos
Como abrir e mudar o FTP
Mudando os arquivos com o editor de texto
03
Alternativa 3 (Opcional) para mudar os arquivos
Como abrir e mudar o FTP
Mudando os arquivos com o editor de texto
03
Alternativa 3 (Opcional) para mudar os arquivos
sli.do
#nswebinar
| Módulo 1
Agenda
MÓDULO 1
MÓDULO 2
MÓDULO 3
Estrutura de arquivos de um layout
04
Estrutura de arquivos de um layout
Pastas
04
Estrutura de arquivos de um layout
config
04
Estrutura de arquivos de um layout
config/settings.txt
04
Estrutura de arquivos de um layout
config/settings.txt
04
section title
Estrutura de arquivos de um layout
config/settings.txt
04
collapse
Estrutura de arquivos de um layout
config/settings.txt
04
subtitle
description
i18n_input
Estrutura de arquivos de um layout
config/settings.txt
04
textarea
css_code
checkbox
Estrutura de arquivos de um layout
config/settings.txt
04
dropdown
css_code
menu
Estrutura de arquivos de um layout
config/settings.txt
04
image
gallery
Estrutura de arquivos de um layout
config/settings.txt
04
color
palettes
Estrutura de arquivos de um layout
config/settings.txt
04
font
Estrutura de arquivos de um layout
config/defaults.txt
04
Estrutura de arquivos de um layout
Config/translations.txt
04
Estrutura de arquivos de um layout
layout/layout.tpl
04
Estrutura de arquivos de um layout
templates
04
Estrutura de arquivos de um layout
snipplets
04
Não mudar o nome ou ubicação de: product_grid.tpl, shipping_options.tpl, cart-item-ajax.tpl e shipping_suboptions
Estrutura de arquivos de um layout
static/css
04
Estrutura de arquivos de um layout
static/js
04
Estrutura de arquivos de um layout
static/images & checkout.scss.tpl
04
sli.do
#nswebinar
| Módulo 2
Agenda
MÓDULO 1
MÓDULO 2
MÓDULO 3
CSS e JS de um layout
05
CSS e JS de um layout
CSS/Bootstrap
05
CSS e JS de um layout
CSS/Sintaxe
05
CSS e JS de um layout
CSS/Componentes vs Helpers/Utilities
05
CSS e JS de um layout
CSS/SASS
05
CSS e JS de um layout
CSS/CSS Crítico
05
CSS e JS de um layout
CSS/Dicas
05
Componentes genéricos
CSS e JS de um layout
CSS/Dicas
05
margin-bottom na separação de componentes
Utilizar opacidade e tentar evitar “darken” ou “lighten”
Índice e comentários CSS
�
�
CSS e JS de um layout
JS
05
async
Classes “js-”
Índice e comentários JS
O que é TWIG e como usá-lo?
06
O que é TWIG e como usá-lo?
Intro
06
Tudo o que tem “{{ }}” ou “{% %}” dentro do arquivo “.tpl”
TWIG
O que é TWIG e como usá-lo?
Objetos e Metodos
06
Objetos
Métodos
O que é TWIG e como usá-lo?
Condições
06
Condições simples
Condições combinadas
O que é TWIG e como usá-lo?
Fors e Loops
06
For
For + condição
For + loop + condição
O que é TWIG e como usá-lo?
Snipplets, Includes e Embeds
06
{% snipplet %}
{% include %}
{% embed %}
O que é TWIG e como usá-lo?
Includes
06
{% Include %} com condições personalizadas
O que é TWIG e como usá-lo?
Includes
06
O que é TWIG e como usá-lo?
Embeds
06
O que é TWIG e como usá-lo?
Embeds
06
Classes personalizadas
Condições personalizadas como no {% include %}
{% block %} para adicionar conteúdo personalizado
O que é TWIG e como usá-lo?
Embeds
06
Exemplo 1: Conteúdo estático
Exemplo 1: Conteúdo dinámico
Condição
Texto dinámico
Texto estático
sli.do
#nswebinar
| Módulo 3
Criando uma nova funcionalidade
07
Criando uma nova funcionalidade
Intro
07
Criando uma nova funcionalidade
Settings e defaults
07
defaults.txt
Criando uma nova funcionalidade
Translations
07
Criando uma nova funcionalidade
HTML
07
Criar o tpl “home-popup.tpl” na pasta snipplets/home
Fazer o include conectando com as settings no home.tpl
Criando uma nova funcionalidade
HTML
07
Criando uma nova funcionalidade
HTML
07
Criando uma nova funcionalidade
JS
07
Pop up JS
Criando uma nova funcionalidade
CSS
07
sli.do
#nswebinar
| Módulo 3
Artigos recomendados
Obrigado!
federico@nuvemshop.com