Meu primeiro tema

Você está pronto para criar um novo tema e está se perguntando como configurar rapidamente seu ambiente de desenvolvimento e começar a codificar? Neste tutorial, te mostrarei o que você precisa!

O que você vai aprender

Depois de terminar este tutorial, você conseguirá realizar o seguinte:

• Configurar seu ambiente de desenvolvimento local

• Criar um novo tema sincronizado entre o seu ambiente de desenvolvimento e a plataforma.

• Personalizar o seu tema com o Tray CLI em execução no terminal

Antes de começar

Antes de começar a desenvolver temas, faça o seguinte:

• Para obter uma loja de desenvolvimento e criar um tema, você precisará se tornar um Parceiro Tray, começando pelo preenchimento do formulário no site: Quero ser Parceiro

• Com o cadastro aprovado crie sua loja na plataforma.

• Depois entre em contato com o suporte a parceiros para que eles desabilitem o faturamento da loja e ela não seja bloqueada por falta de pagamento.

Atenção: Essa loja não poderá receber pedidos reais. Caso isso aconteça, ela será desabilitada.

Passo 1: Instale o Tray CLI

Para desenvolver nossos temas e fazer a conexão da nossa plataforma com seu ambiente de desenvolvimento você precisará utilizar nossa interface de linha de comando disponibilizada.

O nome dessa interface é o Tray CLI, para saber mais sobre como instala-la e utilizá-la acesse o link abaixo:

Instalação

Passo 2: Gere o Token

1. Faça o login no painel administrativo pela URL da sua loja.

2. Acesse a aba Configurações > Minha Loja > Editar layout (de acordo com o painel da sua loja)

3. Acesse a Lista de desenvolvedores

4. Clique em Adicionar desenvolvedor

5. Insira um Nome da agencia e E-mail, depois clique em Salvar que o Token de acesso será gerado automaticamente.

6. Copie o Token gerado, ele é importante para sincronizar o seu ambiente de desenvolvimento com a plataforma. De preferencia, salve-o em um arquivo de fácil acesso que o utilizaremos nos próximos passos.

Passo 3: Crie um novo tema

1. No seu computador de desenvolvimento crie uma nova pasta para o tema que será desenvolvido.

2. Na pasta abra o terminal para utilizar o Tray CLI

Recomendamos o uso do Visual Studio Code com o terminal Bash instalado, devido a facilidade de manuseio do mesmo para o desenvolvimento.

3. Digite o comando com o Token gerado para criar um novo tema base, será um tema "limpo" somente com os arquivos de base, da seguinte forma:

tray create [options] [token]

Para mais informações sobre o uso do comando acesse o link: download.

Em seguida digite o comando para criar o arquivo de configuração do tema.

tray configure [options] [token] [theme_id]

Quando o comando for concluído, na pasta do seu computador será gerado um arquivo config.json com as informações necessárias para sincronizar seu ambiente, e na plataforma um novo tema será exibido.

O arquivo config.json só existirá no seu computador, para que ele faça a conexão do seu ambiente de desenvolvimento com a plataforma. Não modifique este arquivo para não prejudicar o funcionamento do Tray CLI. Saiba mais no link: Arquivo de configuração.

Passo 4: Personalize o layout do tema

Com a pasta no seu computador configurado, você precisará baixar o tema base criado na plataforma para começar a editá-lo.

1. Na pasta do tema abra o terminal e use o comando tray download para baixar todos os arquivos do tema da plataforma para o seu computador, da seguinte forma:

tray download

Para mais informações sobre o uso do comando acesse o link: download.

Após conclusão do download siga para os próximos passos.

2. Para começar a personalizar o tema e as alterações serem enviadas automaticamente para a plataforma, no terminal utilize o comando tray watch, da seguinte forma:

tray watch

Para parar a execução do comando no terminal utilize as teclas CTRL + C.

Atenção

Arquivos SASS / SCSS não são mais suportados.

3. Para visualizar as modificações aplicadas na loja utilize o comando tray open, da seguinte forma:

tray open