Transcrições
1. Introdução: Oi, meu nome é Gavin. Sou o fundador da Disco, uma empresa que ajuda os proprietários de lojas da Shopify a aproveitar ao máximo
suas lojas por meio do desenvolvimento de temas de clientes e do desenvolvimento de aplicativos de clientes. Também lancei alguns produtos em torno do desenvolvimento da Shopify, incluindo masterização de temas da Shopify e masterização de aplicativos da Shopify. Há também alguns projetos de código aberto em que trabalhei. Todas essas coisas têm o objetivo de ajudar desenvolvedores como você a desenvolver temas da Shopify em um mapa realmente eficiente e fácil. Estar envolvido em todas as diferentes partes da Shopify significa que eu tenho que aprender e
reaprender constantemente muitas coisas sobre o desenvolvimento do tema da Shopify, e é isso que estou tentando compartilhar com você neste curso, as melhores práticas, as dicas, truques e técnicas que desenvolvi ao longo dos anos. O título deste curso é Advanced Shopify Theme Development, e segue a introdução de Kurt Elster ao Shopify Theme Development. Esse curso também está disponível aqui no Skillshare. Este curso é baseado em você não só ter habilidades de desenvolvimento da web existentes, mas também ter um pouco de familiaridade de trabalho com a Shopify. Então, se ainda não for esse o caso, sugiro que volte e tome o curso do Kurt antes de voltar a este. Supondo que você esteja confortável com os conceitos básicos do desenvolvimento da Shopify
, esse curso se concentrará em aumentar o nível de suas habilidades em duas áreas-chave. A primeira será a melhoria do processo que usamos para desenvolver temas. Então, olhando para as ferramentas e técnicas em torno desse tipo de coisa. A segunda parte, para ter certeza de que não estamos apenas falando sobre essas coisas em um vácuo, é mergulhar em alguns cenários do mundo real, e olhar para o código e as práticas de desenvolvimento que vamos realmente usar em um cenário real. Fazer este curso deve lhe dar as habilidades e a confiança de que você precisa para lidar projetos
maiores de desenvolvimento da Shopify e solicitações recebidas de clientes. Isso significa que você estará fora para oferecer mais valor aos seus clientes e à sua empresa. Por sua vez, isso significa que você pode cobrar mais pelo valor que está criando
2. Visão geral do projeto do curso: Tal como acontece com muitas coisas, a melhor maneira de aprender desenvolvimento do tema da
Shopify na minha opinião, pelo menos é fazendo isso, e é por isso que este curso contém um projeto de classe. Eu realmente encorajo você a tomar uma rachadura em que uma vez que você assistiu através do vídeo pela primeira vez. O projeto começará com você baixando o tema base. É funcional, mas é muito simples. Em seguida, pedimos que você aplique algumas das técnicas que você aprenderá ao longo deste curso através desse tema. Então, coisas como adicionar filtragem dinâmica e classificação, algumas funcionalidades do Ajax, adicionar ao carrinho coisas assim. Então você também tem a chance se você realmente queria adicionar seus próprios pequenos pedaços de estilo com CSS e SASS. Trabalhar nesse projeto deve levar apenas algumas horas e nós lhe daremos alguma exposição ao que eu acho que é um cenário prático de mundos reais para o desenvolvimento do tema da Shopify. As únicas coisas que você realmente precisa para o projeto são uma loja de desenvolvimento e um editor de texto de sua escolha. Você precisará estar familiarizado com como configurar um repositório de desenvolvimento. Se você não estiver familiarizado com isso, volte para o curso Kurtz sobre Introdução aos temas da Shopify para se atualizar. Se você ficar preso em qualquer fase com o projeto, então você pode verificar o repositório do GitHub que tem exemplos para cada etapa dos projetos ou você pode sempre entrar em contato comigo como a classe mais tarde e eu vou tentar e ajudá-lo. Depois de concluir o projeto, seria ótimo se você pudesse compartilhá-lo comigo
e com outros alunos e você pode fazer isso através da plataforma Skillshare. Tudo bem. Vamos começar.
3. Fluxo de trabalho aprimorado de desenvolvimento: O primeiro tópico que vamos abordar é o fluxo de trabalho de desenvolvimento. Então, o processo que usamos para desenvolver, testar e implantar nossos temas. A razão pela qual eu acho que isso é uma coisa importante para resolver é porque quanto mais esforço gastamos em nosso fluxo de trabalho, mais fácil é para nós desenvolver esses temas e quanto mais tempo podemos dedicar a construir coisas que os clientes realmente preocupar-se. O objetivo aqui é entregar as coisas de forma mais rápida e profissional, podemos evitar repetir-nos em etapas manuais e também torna um pouco mais fácil colaborar com outros desenvolvedores quando estamos trabalhando juntos em uma equipe. Então, vamos começar do início e ver o que obtemos com o editor online padrão da Shopify. Então, chegamos a isso do Admin da Shopify e, uma vez que o
abrimos, vemos que realmente temos uma boa visão geral da nossa estrutura de temas à esquerda aqui e quando realmente abrimos arquivos, obtemos recursos agradáveis como sintaxe líquida destacando e há uma versão limitada do controle de revisão. Em que podemos fazer alterações e salvar e, em seguida, esperar para voltar para versões mais antigas. Mas ainda há algumas limitações bastante severas com essa abordagem. Então estamos desenvolvendo a nuvem. Então, se nós temos um editor local preferido, nós realmente não temos a vantagem de ser capaz de usar isso. Nós realmente não temos um histórico de mudanças em todos os arquivos diferentes. Em nosso tema, não é muito fácil reverter alterações em grandes grupos e é claro que é muito difícil
colaborar com outras pessoas usando esse fluxo de trabalho porque não sabemos quem está editando quais arquivos e se vamos sobrescrever alterações. Dado esses problemas, vamos começar a procurar maneiras de corrigi-los ou contorná-los e tornar esse processo de desenvolvimento fácil. A primeira coisa que vamos fazer para ajudá-lo
com isso é olhando para o Theme Gem. Agora, o Theme Gem é um pequeno utilitário de linha de comando que automatiza o processo de upload e download de arquivos entre sua máquina de desenvolvimento local e um tema da Shopify com o qual você está trabalhando. Vamos ver como se configurar com o Theme Gem. Então, a primeira coisa que você quer fazer é ter certeza de que você tem Ruby instalado, pois é um RubyGem. Se você não tem certeza de como colocar o Ruby em execução em sua plataforma, então você pode Google para obter instruções sobre como configurar essa configuração. Depois de fazer isso, basta executar um comando de instalação de gem com o tema da Shopify. Gem é o argumento que vai instalar o Gem e em seguida, temos acesso a uma opção de linha de comando tema, que se nós apenas digitar em nossa linha de comando vamos dizer que temos um monte de instruções de uso. Como o Shopify Theme Gem usa a API da Shopify para carregar e baixar ativos para
nós, precisaremos configurá-lo com algumas credenciais de API para trabalhar com um tema atual. Então, é isso que vou fazer aqui. Estou criando um novo aplicativo privado a partir do Admin da Shopify. Eu só vou dar-lhe um nome algo como Theme Gem e, em seguida, podemos usar as credenciais geradas aqui e passar isso para o Theme Gem. Então, você verá que uma vez que você criou um aplicativo, você terá essa chave de API e uma senha de API. Então, para se configurar com um novo tema, o que vamos fazer é voltar para a linha de comando, criar um diretório para o nosso tema e, em seguida, uma vez que sudo nele, podemos usar o comando theme configure para configurar a configuração para nós. Então, vamos apenas usar as informações que temos em nosso administrador passar para fora para configurar. Então, passamos a chave de API,
a senha e, em seguida, também vamos passar
no domínio da loja que estamos trabalhando com. Então, esta é apenas a conta.myshopify.com e, em seguida, uma vez que apertamos enter, isso irá criar um arquivo config.yaml. Olhando para o conteúdo desse arquivo, podemos ver que ele adicionou a chave e senha que passamos a este arquivo de configuração e não precisamos nos preocupar com as outras opções de configuração para o momento. Como você pode ver, agora executei um comando de download de tema e isso basicamente usará a API da Shopify para obter uma lista de todos os ativos em nosso tema atual em nossa loja da Shopify e baixá-los localmente. Então, se abrirmos um editor de texto como Sublime Text e
olharmos isso localmente, podemos ver que copiamos todos os arquivos do nosso tema para nossa máquina local. Então, agora podemos fazer uso de um dos melhores recursos do Theme Gem que é tema relógio comando. Então, se executarmos isso dentro de um diretório onde temos um tema, podemos usar um editor local para fazer alterações nesses arquivos e fazer com que eles sejam automaticamente carregados na loja da Shopify com a qual estamos trabalhando. Então, para ver um exemplo aqui, vou apenas alterar o título da minha página e, depois que eu salvar essas alterações, verei que isso é automaticamente carregado para a loja da Shopify. Então, é assim que trazemos desenvolvimento local e evitamos esse problema que estávamos falando antes com o editor on-line padrão, onde não podemos usar nosso editor preferido ou usar métodos de desenvolvimento local. A segunda ferramenta que vamos olhar para nos ajudar com nosso piso de desenvolvimento de temas é Git e se você não o usou Git antes é um sistema de controle de revisão que é usado muito comumente em um monte de desenvolvimento de software incluindo desenvolvimento web e lhe dá muitas vantagens na medida em que torna muito mais fácil colaborar com outras pessoas, ele lhe dá uma maneira de manter
um histórico de revisões para que você possa ver quem fez as mudanças quando com seus temas e também joga muito fortemente em algumas
das estratégias avançadas de implantação que vamos analisar em lições posteriores. Vamos dar uma olhada em como iríamos colocar um tema que temos localmente sob controle de revisão do Git. Então, a primeira coisa a fazer é verificar se realmente temos o cliente de linha de comando Git e fazemos isso apenas digitando git—version. Se você estiver executando um sistema Mac ou Linux, então você terá isso por padrão, talvez seja necessário instalar isso manualmente no Windows. Depois de fazer isso, você pode executar o comando git init
no diretório local e que irá configurar seu repositório Git. A primeira coisa que faço quando crio um novo repositório Git para um tema da Shopify é
criar o que é chamado de arquivo gitignore e adicionar o arquivo config.yaml a ele. Então isso apenas diz ao Git que nós não queremos rastrear alterações no arquivo
config.yaml e isso é porque ele contém credenciais de API para nossa loja, então nós realmente não queremos estar submetendo-as em um repositório e potencialmente expor eles para o público. Então, uma vez que eu tenha configurado esse arquivo ignore, eu posso adicionar todos os arquivos no meu tema com o
comando git add e, em seguida, confirmá-los usando o
comando git commit e veremos que todos os arquivos no diretório que eu tenho foi submetido ao repositório do Git. Então, este git tudo vai ser muito familiar se você já usou o Git antes. Se você não usou Git antes, então eu realmente encorajo você a cabeça para fora e encontrar um dos excelentes tutoriais disponíveis on-line sobre como usá-lo. É uma ferramenta muito útil que vamos usá-lo muito durante este curso Para lhe dar uma idéia de como o fluxo de trabalho funciona com o Git. Então, uma vez que tenhamos configurado nosso repositório, como acabamos de fazer, e então eu faria alterações em nosso tema. Então, por exemplo, aqui estou apenas mudando o título da página. Salvamos essas alterações e, em seguida, de volta da linha de comando, podemos obter uma visão geral do que foi alterado usando o comando Git status e , em seguida, podemos executar git add para adicionar essa alteração ao nosso próximo commit. Então, finalmente, podemos executar o
comando git commit para realmente finalizar esse commit e existem ferramentas
GUI em torno que irão ajudá-lo com este fluxo de trabalho se você preferir usar isso em vez da linha de comando. Mas depois de adicionar todas essas alterações, você verá que é capaz de executar o log do git e obter um histórico de quem fez as alterações e quando no seu tema. Agora vimos duas maneiras de melhorar nosso fluxo de trabalho de desenvolvimento, trouxemos nosso desenvolvimento de temas local através do Theme Gem e também colocamos nossos temas sob controle de revisão usando o Git. Vamos olhar para algumas técnicas de processo de desenvolvimento mais tarde no curso quando
olharmos para a implantação avançada de temas e também para a automação de fluxo de trabalho. Mas por enquanto, eu realmente quero ficar preso em algumas coisas mais práticas. Então, algum código real, o que podemos ver em um cenário de desenvolvimento de temas da Shopify do mundo real. Mas à medida que começamos a abordar isso, você pode usar as coisas que acabamos aprender neste curso para seguir adiante.
4. Customizações de produto: Hora de mergulhar em alguma edição de tema real, e vamos começar olhando para a personalização do produto. Então, como podemos permitir que os visitantes personalizem seus produtos a partir da página do produto. Esta é uma funcionalidade bastante comum. Você provavelmente já viu isso em muitos temas na Loja de Temas da Shopify, no Mosaic em seus sites na Web. Mas a abordagem que vamos adotar é começar observando o básico e ver como a funcionalidade em uma loja da Shopify é construída a partir desses componentes básicos. Ao fazer isso, vamos nos concentrar
nas três coisas mais importantes quando você está construindo uma página de produto. A primeira delas é certificar-se de que você está se comunicando com o cliente, informando quais opções estão disponíveis, o que eles podem fazer para configurar seu produto para fazer seleções diferentes. A segunda coisa é certificar-se de que é fácil para eles fazer suas seleções,
então, dependendo do tipo de escolhas que eles precisam fazer, você é capaz de fornecer a entrada e os controles apropriados para que eles façam isso. Então a última coisa é fornecer feedback, modo que se eles fizerem uma seleção, eles mudem a cor de um produto ou algo assim,
essa mudança é refletida na página, para que eu possa ver que isso foi recebido e ver o efeito que ele tem em sua compra. Vamos começar apresentando a loja Candle, que é a loja de demonstração que usaremos ao longo deste curso para trabalhar. Então, esta é a página do produto em que estamos interessados. Temos um conjunto de variantes. As opções de variante que podemos escolher entre para este produto específico
da vela é a cor da vela, e se a vela vem com uma tampa ou não. Nós também somos capazes de adicionar uma propriedade
personalizada, propriedade de item de linha personalizada para a vela que é uma mensagem gravada,
e, finalmente, temos esses pequenos bits adicionais de metadados que são o preço exibido e a imagem exibida. O preço e a imagem dependem de qual variante particular escolhemos. Antes de começarmos a analisar como melhorar esta página do produto, vamos dar uma olhada no que temos no momento. Então, temos uma página de produto padrão com um menu suspenso seleto com todas as opções de variante possíveis. Sob os preços, podemos inserir uma propriedade personalizada para uma mensagem
e, em seguida, quando adicionamos ao carrinho, somos levados para a página do carrinho como de costume, e tudo isso está funcionando sem JavaScript. Então, para dar uma olhada no HTML real por trás desta página do produto no momento, vamos dizer que é escrito muito simples. Temos um título do produto. Temos uma seção que contém todas as imagens do produto que vimos no lado esquerdo, onde usando um pouco de lógica líquida para descobrir o que a imagem em destaque deve ser baseada na primeira variante ou selecionada. Em seguida, temos uma seção que é o formulário do produto, que contém o formulário HTML real que vimos, o preço do produto. Ele também inclui que selecionar com as diferentes variantes e preços nele. Temos uma seção que contém as propriedades personalizadas para os produtos ou onde estávamos adicionando essa mensagem gravada e, em seguida, na parte inferior do formulário, temos o botão adicionar ao carrinho. Então, tudo em tudo uma abordagem bastante padrão para uma página de produto. Então, pensando em maneiras que podemos melhorar esta página do produto, uma das primeiras coisas que salta para fora sobre sua página para mim é a caixa de seleção, ter todas as opções no único menu suspenso realmente não mostra ao usuário o que os diferentes são e o que eles podem selecionar. Então, vamos ver como podemos mudar isso. Então, saltando para o theme.liquid, vamos adicionar um pouco de JavaScript e vamos voltar e passar exatamente o que isso está fazendo em um segundo. Mas se eu fizer essa alteração, salve o arquivo, e vamos apenas verificar se o tema, o relógio está sendo executado e carregando nossas alterações automaticamente para a loja de temas. Se atualizarmos, veremos que realmente dividimos essas opções, que
fique mais claro para o usuário quais são as opções. Voltando ao JavaScript que você escreveu, apenas passando por isso, podemos dizer linha 20 que estamos verificando para ter certeza que estamos apenas incluindo isso nas páginas de produtos, linha 21 estamos incluindo a seleção de opções JavaScript que é uma biblioteca fornecida pela Shopify que faz realmente a maior parte dessa magia para nós, e então o resto deste JavaScript está configurando isso basicamente. Então, ele está chamando esse novo shopify.OptionSelectors e ele está passando o ID da caixa de seleção original. Então, ele está dizendo, meta essa caixa de seleção e isso é o que eu quero dividir nessas caixas de seleção separadas, e então passamos algumas opções para esse inicializador. Isso basicamente faz tudo o que acabamos de ver. Então, isso é bom, mas se voltarmos para nossa página, você verá que não recebemos muito feedback quando alterarmos essas opções. Então, na barra de URL na parte superior, podemos ver que o URL está mudando, mas não estamos realmente vendo essa alteração refletida na página. Então, a imagem não está mudando, o preço não está mudando à medida que alteramos essas opções. Então, vamos ver como podemos resolver isso. Então, a chave para isso vai ser
a função de retorno de chamada OnVariantSelected que nós piscou fora como sendo apenas uma função vazia anteriormente. Então, esta é uma função que é chamada sempre as opções em sua página mudam e uma nova variante é selecionada, e passou a variante como objeto adjacente e também o selecionado que realmente acionou essa mudança, então esta caixa de seleção. Então, o que vamos fazer aqui é apenas atualizar esta função para alterar a cúpula de nossa página, para atualizá-la com base na variante que foi selecionada. Então, você pode ver aqui o código que adicionei, estamos atualizando o preço exibido e estamos usando o preço da variante
e a função de dinheiro do formato da Shopify para fazer isso, então nós apenas encontramos o elemento de preço e atualizá-lo conforme necessário. Também estamos ativando ou desabilitando o botão Adicionar ao carrinho. Então, às vezes podemos estar selecionando uma variante que não está realmente disponível e precisamos desativar o botão. Então, finalmente, estamos atualizando a imagem em destaque na página, então estamos verificando se a variante tem uma imagem em destaque vinculada a ela
e, em seguida, usando o método GetSizeImageUrl da Shopify para obter o URL adequado para esse imagem em destaque, em seguida, apenas encontrar o elemento dome imagem em destaque na página e alterar sua fonte. Então, salve isso e verifique o upload para a Shopify. Se eu atualizar a página agora, veremos que a página está sendo atualizada à medida que alteramos essas opções. Então, estamos dizendo que a imagem em destaque está mudando, o preço está mudando para refletir a variante que acabamos de selecionar. Então, esse é um bom recurso que dá aos nossos clientes mais feedback sobre as escolhas que estão fazendo e permite que eles entendam as diferenças nas opções de produtos que estão escolhendo. A próxima coisa que vamos abordar é o comportamento das imagens em miniatura. Então, no momento, se eu clicar em uma imagem em miniatura, eu obtenho uma versão maior dessa abertura em uma nova guia, como esta, que não é necessariamente um resultado ruim, mas como cliente, eu espero que se eu clicar em uma miniatura vermelha eu obtenho uma versão maior dessa abertura em uma nova guia, como esta,
que não é necessariamente um resultado ruim, mas como cliente,
eu espero que se eu clicar em uma miniatura vermelha
deseja que as opções aqui sejam alteradas para corresponder à miniatura em que cliquei. Então, em termos de como vamos implementar isso, vamos fazê-lo em duas etapas, e o primeiro passo será adicionar alguma marcação aos próprios links de miniatura. Então, se encontrarmos os links de miniatura aqui, vamos adicionar um atributo de dados especial à própria imagem em miniatura. Então, vamos chamar essa variante de alteração de dados. Em seguida, vamos especificar o ID da variante à qual esta miniatura está vinculada
e, portanto, cada imagem na Shopify tem uma lista de variantes às quais ela pode estar relacionada. Vamos pegar o primeiro deles e retornar o ID da variante para isso. Então, para ver como isso realmente se parece em nossa página, vamos voltar para o navegador, atualizar
e, em seguida, inspecionar esses links de miniaturas individuais usando a ferramenta Inspetor do Chrome, e podemos dizer que cada um desses links tem um variante de alteração de dados, atributo de dados e ele está vinculado a uma determinada ID de variante. Apenas adicionar esses atributos de dados não alterou o comportamento de nossas miniaturas, então é isso que vamos fazer agora e configurar um manipulador de eventos para lidar com eventos de clique nessas miniaturas. Então, vamos fazer isso dentro do tema. Líquido. Mergulhando nisso, a primeira coisa que vamos fazer é, na verdade quando estamos inicializando essas optionsSelectors, vamos manter uma referência a essa opção select e veremos por que em um segundo. Mas uma vez que tenhamos feito isso, agora vamos adicionar um manipulador de eventos para eventos de clique
em quaisquer elementos com esse atributo de variante de alteração de dados que configuramos antes. No método para esse manipulador, vamos impedir o comportamento padrão, então abrir em uma nova guia, e então o que vamos fazer em vez disso é usar essa referência para a opção select, é que vamos chamar o método select variant e passe a ele o ID da variante à qual esta miniatura específica está vinculada. Então, vamos salvar e dar uma olhada em como isso funciona. Atualizando a página, e agora, se clicarmos em uma miniatura, veremos que a opção selecionada está mudando para refletir os valores da variante à qual essa miniatura está vinculada. Então, este é exatamente o tipo de comportamento que queremos. É importante notar que nós realmente não precisávamos especificar manualmente, no manipulador de cliques na miniatura, nós não precisávamos dizer, e agora você precisa atualizar a imagem em destaque, ou agora você precisa atualizar o preço, ele realmente apenas flui como uma conseqüência de como nós configuramos nosso manipulador de seleção variante. Isto para mim demonstra o poder da abordagem de construir coisas em torno desta opção de base simples selecionar é, em primeiro lugar, a criação de um bom variantes. Selecione chamada de backup, eles visualizam uma página conforme necessário, porque então, podemos adicionar componentes extras mais tarde como essas seleções de miniaturas, e tudo o que eles precisam fazer essencialmente, é enviar uma mensagem para a opção select, dizendo: “Eu gostaria de selecionar esta variante agora.” A lógica que já implementamos
tratará de todas as outras atualizações da página. Pressionando, vamos pensar sobre o que mais podemos fazer para tornar esta página melhor para os usuários. Uma das coisas que eu identificaria é a lista suspensa de seleção para a opção de cor. Então, selecione a lista suspensa é boa quando você tem muitas opções, e um usuário sabe o que deseja escolher, por exemplo, um país. Mas para cores, você provavelmente é melhor
exibir essas cores para os usuários na forma de uma amostra ou algo assim. Então, o que vamos fazer agora, vamos ver como podemos lidar com isso. Então, mergulhando no modelo do produto, vamos adicionar um pouco de líquido para fazer isso, e quando digo um pouco, quero dizer muito. Infelizmente, isso é um pouco típico de um líquido. Então, não vamos mergulhar muito nos detalhes disso, mas para dar a vocês uma idéia geral, o que estamos fazendo é iterar todas as opções que este produto tem. Então, se sua cor ou tamanho, encontrar aqueles que estão relacionados à cor,
e, em seguida, com base em que iteração através de todas as variantes que esse produto definiu todas as cores diferentes que estão disponíveis. Em seguida, para cada cor que está disponível, nós produzimos um link que tem uma amostra dentro dele. Então, isso é o que este link aqui é, e podemos dizer que ele está produzindo um atributo de estilo que inclui essa cor, e então muito parecido com o atributo de variante de alteração de dados em nossas imagens de miniatura, agora
temos uma opção de alteração de dados e valor de alteração de dados, atributo de dados. Então, nossa abordagem aqui é realmente vai ser bastante semelhante às miniaturas, e que vamos configurar um ouvinte de eventos
para ouvir cliques neste tipo específico de link,
mas em vez de alterar toda a variante, o que vamos fazer é usar a opção de alteração de dados e o valor de alteração de
dados, atributos de dados em nossos links de amostra para alterar apenas a cor específica que estamos selecionando em vez de toda a variante. Então, logo antes de visualizarmos como as mudanças líquidas que
acabamos de implementar se parecem, vamos adicionar um pouco de estilo à nossa folha de estilos para garantir que nossas amostras sejam renderizadas corretamente, e então vamos salvar isso, e, em seguida, confira o que acontece quando atualizamos nossa página,
e veremos que as amostras são renderizadas como esperávamos. Agora, porque nós configuramos estes como links apontando para variância
particular como uma espécie de queda para trás, isso vai realmente semi-trabalho. Se clicarmos nesses links agora, você verá que a variante está sendo atualizada no URL. Mas para que isso funcione totalmente da maneira que queremos, vamos ter
que configurar esse ouvinte de eventos JavaScript de forma semelhante à variância. Então, voltando para o theme.liquid onde temos todo o nosso JavaScript para o momento, vamos adicionar um segundo ouvinte de evento que é muito semelhante a adicionar data change variant listener. Mas desta vez estamos ouvindo um clique em nossa opção de mudança de dados. Na verdade, sinto muito. Na manipulação real para isso, novamente estamos impedindo a ação padrão
e, em seguida, estamos extraindo o tipo e o valor da opção. Então, se é uma opção de cor, e então se é vermelho, verde ou azul, e então olhamos dentro das listas suspensas de seleção existentes que geramos para ver se esse valor existe
e, em caso afirmativo, vamos altere essa caixa de seleção para esse valor fornecido. Para ver como isso realmente funciona, voltamos para a página e atualizamos. Agora, quando selecionamos opções de cores diferentes, devemos ver que apenas a opção de cor está atualizando e que está sendo atualizada dinamicamente através de JavaScript. Então, agora que temos isso funcionando, porque pode ser que não fez sentido ter a opção lead como um estilo de amostra também. Porque, há apenas duas opções e ser útil para permitir que os usuários apenas selecionem entre esses dois. Então, vamos fazer isso basicamente generalizando o snippet líquido que adicionamos à nossa página de produto para as amostras de cores, e apenas fazendo com que ele funcione com opções que não sejam de cor também. Então, vamos fazer isso criando uma pasta de trechos e criando um novo snippet. Então, isso é basicamente, exatamente o mesmo que o líquido que adicionamos ao modelo
do produto com essas pequenas modificações, sendo que
as modificações serão renderizadas para todos os tipos de opções, não apenas opções de cores mas há um check-in lá para dizer se a opção é uma opção de cor ou não. Se for uma opção de cor, então ele irá renderizar este link de bloco com a amostra, caso contrário, ele vai apenas renderizar um link de texto normal. Agora é provavelmente um bom momento para reiterar, para não ficar muito estressado se você não está seguindo junto com cada pequeno detalhe do código. No momento, estamos focados na abordagem geral e nas ideias, e você sempre pode ler o código real muito mais detalhes no repositório do GitHub. Vamos terminar aqui, e agora que temos nosso snippet configurado, podemos substituir o código em nosso modelo líquido do produto por apenas uma inclusão desse snippet. Então, isso funcionará tanto para a cor quanto para a opção não-cor. Então, agora podemos salvar que irá carregar automaticamente para a nossa loja e, em seguida, quando
atualizarmos, podemos ver que a opção tampa agora é igual a amostra também. Assim, os usuários agora podem obter uma boa visão geral de todas as diferentes opções que estão disponíveis para este produto, e trabalhar em conjunto entre a cor e a seleção de tampa para ser exatamente o que eles querem. Então, estamos muito perto de ser feito agora, mas provavelmente são apenas duas pequenas coisas que
gostaríamos de limpar antes do final. A primeira é que, nós só queremos estar mostrando as amostras ou as seleções drop-down, não ambas ao mesmo tempo, e precisamos levar em conta o fato de que as amostras não vão funcionar quando têm o JavaScript habilitado ,
portanto, precisamos pensar sobre o que vai acontecer quando o JavaScript não estiver habilitado em nosso site. Então, o que vamos fazer para lidar com isso, é um padrão bastante comum, vamos adicionar uma classe CSS ao corpo de nossa página, e remover essa classe quando temos JavaScript habilitado, e com base em se essa classe estiver presente ou não, vamos ser capazes de mostrar ou ocultar os diferentes métodos de seleção. Então, nós adicionamos a classe ao nosso corpo, e agora nós só precisamos adicionar um pouco de JavaScript para remover essa classe. Depois que fizermos isso, podemos saltar para a nossa folha de estilos e simplesmente adicionar um pouco de estilo para ocultar elementos específicos quando não temos JavaScript habilitado. Então, atualizando a página agora, podemos ver que com JavaScript habilitado, essas caixas de seleção estão ocultas, e nós somos capazes de usar as amostras como normal, se JavaScript não estiver habilitado, então nós temos esta boa queda de volta para a caixa de seleção simples que é um bonito, mas ele funciona. Está bem. Então, havia muita coisa acontecendo nesse exemplo. Mas não se preocupe se você não conseguiu tudo na primeira ou segunda vez. A coisa realmente importante para sair da lição é ver como a página do produto é construída na Shopify e também entender a vantagem de adotar essa abordagem de aprimoramento progressivo. Então, construindo cada componente em cima um do outro, uma forma independente, que seja mais fácil manter e raciocinar sobre o que está acontecendo, na página. Essa abordagem de aprimoramento progressivo de pegar esses pequenos blocos de construção, e empilhá-los uns sobre os outros para que eles sejam independentes, e que obtemos uma página que funciona sem JavaScript, e depois adicione lentamente funcionalidade. Esta é uma abordagem que vamos tomar na próxima lição
quando começarmos a olhar para as páginas da coleção.
5. Como filtrar, classificar e visualizar coleções: Nesta lição, vamos continuar nosso trabalho com a loja de velas de demonstração. Mas desta vez vamos estar focados nas páginas
da coleção, em vez de nas páginas do produto. Mas ainda vamos fazer o mesmo tipo de coisa, ainda
vamos tentar ajudar nossos clientes a fazer suas escolhas de forma mais eficaz e eficiente. Proporcionando uma melhor experiência ao usuário. Mais uma vez, vamos fazer isso de uma maneira que acumule nosso conhecimento e compreensão de como as páginas da Shopify são montadas do zero. Este é um exemplo de página de coleção da nossa loja de velas de demonstração e o que vamos fazer nesta lição é adicionar maneiras
para os clientes analisarem e encontrarem os produtos nos quais estão realmente interessados. Então, coisas que você já viu em um monte de lojas Eagle Nest antes, coisas como, ser capaz de mudar a forma como visualizamos produtos, ser capaz de vender produtos, ser capaz de filtrá-los. Enquanto estamos fazendo tudo isso, acho importante ter em mente que o objetivo dessas páginas de coleção é sempre tornar as coisas mais fáceis para o usuário, detalhar e encontrar o que ele está procurando. Então, vamos começar permitindo que os clientes mudem a maneira como visualizam esses produtos. Seja como uma grade ou em uma lista onde eles possam ver mais detalhes. Vamos dar uma olhada no HTML com o qual estamos começando. Se abrirmos o modelo de coleções, veremos que é bastante simples, temos um título, temos uma seção chamada produtos de coleção que é onde os produtos reais estão sendo exibidos, e, em seguida, temos uma seção vazia chamada controles de coleta, que será onde colocamos os elementos que
permitirão ao nosso usuário controlar o que eles estão dizendo. Então, vamos começar a dar ao usuário a capacidade de controlar a exibição envolvendo a página inteira em um formulário e veremos por que estamos fazendo isso em um segundo, e então vamos adicionar alguns HTML aos controles de coleção, e isso é vai consistir em um menu suspenso seleto, que nos dá a capacidade de escolher o que vista, e então temos um botão enviar, que chama uma atualização. Então, para ver o efeito que realmente tem em nossa página, vamos dizer que agora temos esse controle de seleção muito simples, e podemos mudar entre um ListView e um GridView. Então, que nós não estamos realmente mudando nada em nossa página, mas você vai ver que ele está mudando o URL e adicionando este parâmetro de consulta vista. Para realmente fazer qualquer coisa com esse parâmetro de consulta, teremos que usar um recurso na Shopify chamado de modelos de visualização alternativos. Então, para fazer isso em nosso diretório de modelos, vamos criar um novo modelo e vamos chamá-lo de collection.list.liquid, e então vamos apenas adicionar algum conteúdo HTML aleatório aqui para ver como isso funciona. Salve isso, e então se voltarmos para o nosso navegador, podemos dizer que se o nosso parâmetro view for deixado como grade, então obtemos o que tínhamos originalmente, mas se alterarmos para listar, o modelo final é renderizado com o conteúdo que acabamos de criar. Vamos fazer algo um pouco mais útil do que isso. Então, para começar, vamos ter algumas funcionalidades comuns entre nossas exibições de grade e lista. Então, vamos extrair a página da coleção atual em um trecho. Vamos chamar essa exibição de coleção, e vamos apenas copiar sobre o que temos em nosso modelo de coleção existente para lá. Agora em nossa collection.liquid, vamos incluir esse snippet e vamos dizer que nossa visão padrão deve ser uma visualização em grade. Então, vamos incluí-lo com grade como um parâmetro para esse snippet. Em seguida, na nossa lista alternativa, vamos incluir exatamente a mesma coisa, mas basta alterar o parâmetro para listar. Então, agora que nosso snippet está sendo incluído em ambos os modelos, podemos ajustá-lo para lidar com as exibições de grade e lista e vamos fazer isso adicionando uma classe CSS e agora colocando o nome do snippet de exibição de coleção, que será preenchido com lista ou grade, dependendo de onde estamos incluindo-o, e configuramos alguns estilos CSS para renderizá-lo de forma diferente com base no valor disso. Então, agora atualizando nossa página, você verá que se tivermos o identificador de exibição de lista, vamos ver os produtos como uma lista, e se deixarmos como grade, então vamos vê-los renderizados como uma grade. Então, essa é uma implementação de visão simples. Agora, vamos voltar para a classificação e é aqui que vamos ver a vantagem de ter essa abordagem baseada em formulário para atualizar nossos parâmetros de consulta, porque tudo o que realmente precisamos fazer para adicionar classificação em nosso formulário é adicionar este elemento select com estes valores de opção aqui. Então, basta nomear o valor de seleção, selecionar o elemento classificar por e as opções que colocamos nele são
os parâmetros de classificação predefinidos nos quais a Shopify nos permite classificar nossos produtos. Então, simplesmente salvando isso e pulando para o navegador novamente, podemos dizer que agora temos uma classificação por seleção suspensa, bem
como a exibição e podemos misturar e combinar nossos valores aqui para mudar a maneira como estamos olhando para nossos produtos. Então, essa abordagem baseada em formulários é legal porque significa que não precisamos JavaScript para atualizar a maneira como estamos olhando para os produtos, e isso também significa que todas as informações que precisamos para recriar a exibição que estamos olhando estão lá em cima no o URL. Nosso próximo passo será deixar nossos clientes
reduzirem os produtos nos quais estão interessados através do uso de filtros. Agora é importante observar que, na Shopify, realmente
temos dois níveis de filtragem. Temos filtragem de nível de coleta e filtragem de nível de tag. Então, vamos pegar a filtragem de nível de coleta primeiro e isso é basicamente, apenas reduzindo os produtos nos quais estamos interessados
com base em qual coleção eles estão. Vamos adotar a abordagem mais simples para implementar isso, que é simplesmente fornecer uma lista de links para cada coleção que gostaríamos de filtrar. Então, acabamos de adicionar este elemento de lista aos nossos controles de coleção e no topo, temos um elemento de lista que contém um link para a coleção antiga, que é um caso especial,
e, em seguida, para cada outra coleção em nossa loja, vamos renderizar um novo elemento de lista e dentro desse elemento de lista, vamos renderizar um link para a coleção ou se for a coleção atual, vamos apenas renderizar um span. Vendo isso na prática, atualizaremos nossa página e veremos que, conforme esperado, temos uma lista de links para todas as nossas coleções diferentes. Então, clicar nelas vai nos levar para a URL dessa coleção, como você pode ver aqui em cima, e além disso nós somos capazes de mudar nossos
parâmetros de exibição e classificação para ajustar a exibição adequadamente. Para permitir que os usuários detalhem ainda mais especificamente nossas coleções, podemos permitir que eles filtrem com base nas tags que os produtos possuem. Mais uma vez a implementação sábia, vamos manter isso muito simples. Então, como tivemos com nossa filtragem de coleção, vamos ter uma lista de links que podemos usar para filtrar tags. Então, você pode ver aqui, temos nossa lista não ordenada
e, em seguida, vamos iterar sobre cada tag dentro da coleção, e para cada uma dessas tags, vamos renderizar um link usando o link da Shopify para remove tag ou link para adicionar filtros de tag. Estes são auxiliares líquidos úteis que a Shopify fornece são exatamente para esse propósito. Vendo como isso parece na frente da nossa loja, veremos que depois de atualizar, agora
temos nossas tags listadas como links e
podemos ativá-las e desativá-las conforme necessário para filtrar a coleção ainda mais. Você também notará que a lista de tags disponíveis muda com base em quais tags estão presentes dentro da categoria. Então, isso ajuda os clientes a reduzirem-se apenas a tags relevantes. Como antes, podemos aplicar
ajustes de visualização e classificação e tudo é obtido para nós na URL. Então, temos apenas mais alguns recursos para adicionar antes de termos uma página de coleção bastante funcional e um
desses recursos que estamos faltando ainda é paginação. Felizmente, nossa abordagem simples baseada em formulários fará com que a adição seja relativamente fácil. Olhando para o HTML para a nossa página de coleção no momento. Para paginar qualquer coisa, precisamos envolvê-lo nesta tag paginate que, em seguida passar a lista de itens que queremos paginar que, neste caso, são os produtos na coleção,
e, em seguida, um número de itens que gostaríamos por página. Então, vamos começar com três. Normalmente, você teria algo um pouco mais alto em uma página real, mas isso nos permitirá ver a paginação em ação. Eu também vou incluir este trecho de paginação aqui e que irá renderizar os controles que usamos para paginar. Não vou entrar em muitos detalhes sobre o conteúdo real desse código, pois você pode encontrá-lo tanto nos exemplos do GitHub para esta lição quanto na documentação da Shopify. Dando uma olhada no resultado do nosso trabalho, você pode ver que fomos imediatamente reduzidos para três resultados na página e nós
temos esta paginação que na parte inferior aqui, e nós podemos mover através das páginas em nossos resultados e o URL é mantido atualizado de acordo com isso. Quero ressaltar aqui que todas as informações de estado sobre nossa página, então qual coleção, quais filtros aplicamos, qual estado de exibição estamos, como estamos classificando os produtos está tudo na URL. O que significa, não só que podemos copiar e colar esse URL para voltar para exatamente a mesma posição, podemos atualizar a página e voltar para exatamente a mesma posição. Mas também, se desativarmos o JavaScript, nossa página funciona exatamente da mesma maneira. Eu acho que essa propriedade é realmente importante nos temas da Shopify porque mesmo que muitas pessoas não estejam navegando na web sem JavaScript atualmente, há situações em que o JavaScript não é carregado por causa de um erro. Ou ele não é executado devido a um erro, mas também para usuários em conexões móveis lentas, digamos, muitas vezes eles podem estar interagindo com sua página antes que o JavaScript tenha a chance de iniciar. Então, ter essa experiência básica, certificando-se de que nossas páginas são progressivamente aprimoradas, realmente melhora a experiência do usuário e evita perder vendas. Agora, isso não quer dizer que não haja maneiras de usar JavaScript para
tornar a experiência do cliente melhor para aqueles que o estão usando. Então, por exemplo, no momento, precisamos apertar o botão de atualização depois de selecionar nossa exibição e nossas opções de classificação, vamos melhorar essa experiência fazendo o formulário
enviar automaticamente quando uma caixa de seleção é alterada. Para fazer isso, vamos adicionar algum JavaScript à parte inferior do nosso theme.liquid. Então normalmente, você colocaria isso em um arquivo JavaScript separado. Mas por causa da discussão, vamos colocar isso aqui. E assim este bit de JavaScript tem uma verificação para se certificar de que ele só é executado em páginas de coleção. E então estamos configurando um ouvinte de evento em um evento de alteração em qualquer elemento com uma coleta de atualização de dados, atributo de dados. E, em seguida, no manipulador para esse evento, estamos simplesmente enviando a forma em que o elemento vive. Então, vamos nos certificar de que nossos elementos selecionados
realmente têm essa coleta de atualização de dados, atributo de dados, e uma vez que salvamos isso e atualizando nossa página, devemos ver agora que se alterarmos as caixas de seleção, estamos enviando automaticamente o formulário e nossa visão está mudando. Isso é ótimo, mas também significa que agora temos esse botão de atualização inútil, ou pelo menos é inútil quando temos JavaScript habilitado. Então o que vamos fazer é usar um padrão comum para ocultar este botão quando temos JavaScript habilitado, e só torná-lo visível quando não temos JavaScript disponível, e nós realmente precisávamos enviar o formulário. Então, você pode ver aqui na folha de estilo tema que temos esta classe js-hide que vai esconder as coisas se tivermos JavaScript habilitado. Mas então, mostre se não o fizermos. Então, para ter certeza de que as classes certas são aplicadas, tivemos a classe no js para o corpo por padrão, e então nós simplesmente removemos isso usando JavaScript. Então, na parte inferior da página, vamos apenas adicionar um pouco de código para desativar essa classe se realmente tivermos JavaScript habilitado. Então, olhando para isso em ação, vamos salvar, atualizar esse navegador, e temos JavaScript habilitado no momento e veremos que esse botão está realmente oculto, mas ainda posso alterar minha exibição e minhas opções de classificação. Isso está funcionando bem. Mas então, se eu desativar o JavaScript, agora
temos esse botão, e somos capazes de usá-lo normalmente. Então, enquanto estamos no processo de adicionar funcionalidade
JavaScript às nossas páginas de coleção, vamos dar uma olhada na adição de ajax para que os clientes possam se mover através de nossas páginas de coleção sem ter que fazer uma atualização de página inteira. Pessoalmente, acho que as vantagens percebidas de ajax alimentado páginas um pouco exageradas. Especialmente quando você leva em consideração a complexidade extra na implementação deles. Mas pode haver algumas vantagens e, felizmente, no nosso caso, a forma como construímos nossos formulários até o momento significa que adicionar funcionalidade ajax é realmente razoavelmente simples. Então, nossa abordagem para isso vai começar com a adição de um ID para o formulário que estamos usando, e isso é para que possamos nos referir a ele em JavaScript. Nossa estratégia é basicamente vai interceptar os eventos de submissão
neste formulário e fazer esse evento de submissão de formulário regular em um pedido ajax. Então, isso é o que vamos fazer com este JavaScript aqui e caminhando através dele, podemos ver, como eu mencionei, estamos capturando o evento de envio nesse formulário de coleta. Estamos impedindo a ação padrão nesse formulário que é enviar como um formulário regular, e então estamos usando o método de carregamento do jQuery que é uma conveniência em torno enviar uma solicitação ajax buscar algum conteúdo HTML e substituí-lo em nossa página atual. Então, neste caso, ele estará substituindo o conteúdo da nossa página por nossa exibição de coleção atualizada, e também temos um pouco de código aqui que é acionado na renderização bem-sucedida
desse conteúdo usando para manter a barra de URL do nosso navegador atualizada. Então, esta abordagem simples é tudo o que precisamos para realmente usar ajax com nossas páginas de coleção. Então, se eu atualizar a página aqui, e agora sempre que eu executar uma ação que reenviar esses formulários, como alterar minha exibição. Minha página está realmente recarregando via ajax. Então, podemos verificar se isso está realmente acontecendo abrindo as ferramentas de desenvolvedor do Chrome, verificando o painel de rede e, em seguida, veremos se isso à medida que eu alterar essas caixas de seleção. Ele está, de fato, executando uma única solicitação ajax e não uma recarga de página inteira. Agora, o astuto entre vocês pode ter notado que, enquanto isso vai funcionar para qualquer ação que aciona um formulário atualizado como mutação das caixas de seleção, como links de coleção enquanto eles ainda vão trabalhar área de
trabalho executando uma atualização de página inteira cada vez que clicamos neles. Então, há realmente uma solução para isso também, e é bastante semelhante à forma como lidamos com a submissão do formulário. Então você verá, nosso filtro vinculado aqui já tem um atributo de coleta de link de dados, e então nossa solução aqui será simplesmente adicionar um ouvinte ao evento clique para qualquer coisa com um atributo de coleta de link de dados. Novamente, evite a ação difícil que é seguir o link e, em seguida, use o método novamente para carregar no destino desse link como nosso conteúdo da página e novamente usando o estado push para manter nossa URL atualizada. Então, para dar uma olhada em como isso funciona, novamente, podemos abrir o painel de desenvolvedores do Chrome para verificar se estamos realmente fazendo solicitações ajax, e agora podemos dizer que quando estamos clicando nesses links, estamos de fato executando uma única solicitação ajax em vez de uma recarga de página inteira. Claro, graças à forma como construímos isso com aprimoramento progressivo, podemos desativar o JavaScript e ainda ter uma página de coleção totalmente funcional e
muito, muito utilizável para nossos clientes. uma vez, havia muita coisa acontecendo naquela lição. Mas eu realmente quero me estressar. Não se preocupe se você não conseguiu alguns dos aspectos mais técnicos lá. Você sempre pode acessar o repositório do GitHub. Você pode conferir os exemplos de código lá. Eles são bem comentados, e isso deve torná-lo um pouco mais fácil de entender. O importante a entender é como as páginas da Shopify são montadas de um nível básico e como podemos usar esses componentes individuais juntos para criar uma página realmente funcional e utilizável.
6. Como adicionar Ajax ao seu tema: Se feito corretamente, adicionar a funcionalidade Ajax alimentada ao seu tema pode ser uma ótima maneira de torná-lo um pouco mais responsivo e mais fácil de usar para os clientes. E é provavelmente algo que você já viu em muitos temas nos dias de hoje. Nesta lição, vamos olhar para a melhor maneira de começar a adicionar a funcionalidade
Ajax powered add ao carrinho às nossas páginas de coleção. Então, estamos de volta à página do produto e desta vez, estamos procurando tornar a nossa experiência do cliente um pouco melhor,
adicionando a funcionalidade do carrinho do Ajax ao nosso botão adicionar ao carrinho. funcionalidade do Ajax pode fazer com que nossas páginas de produtos se sintam um pouco mais responsivas e eles também podem evitar que nossos clientes tenham que executar tarefas repetitivas, como reconfigurar um produto, se quiserem encomendar várias versões do mesmo. Como fizemos em nossa lição anterior com páginas de coleção, queremos fazer esse aprimoramento progressivo. Então, vamos dar uma olhada no que está acontecendo com nossas páginas de produtos no momento. Assim, podemos selecionar nossas opções de produto, adicionar uma mensagem personalizada
e, quando clicamos em “Adicionar ao carrinho”, estamos fazendo uma solicitação de postagem padrão para adicionar esse produto ao nosso carrinho e somos redirecionados para a página do carrinho. Então, o que nós vamos estar olhando nesta lição é como
alterar essa interação para que quando clicamos no botão “Adicionar ao carrinho”, nós estamos realmente fazendo uma solicitação Ajax para adicionar o produto ao carrinho com a escolha e as opções sem redirecionar o usuário para longe da página do produto. Então, vamos começar olhando a documentação da Shopify para o Ajax ou API que eles disponibilizam para ver uma idéia do que é possível com ele. Então, você verá na documentação que eles têm algumas informações úteis sobre isso, mas estamos mais interessados aqui são essas possíveis solicitações. Então, você pode ver aqui que podemos buscar informações sobre produtos, podemos adicionar novos itens ao carrinho, obter informações de deserção sobre o carrinho atual e podemos fazer solicitações de postagem para atualizar itens existentes dentro O carrinho. Então, nossa estratégia para melhorar progressivamente essa interação vai ser interceptar o envio do formulário quando clicamos na página “Adicionar ao carrinho” usando consulta Dae e, em seguida, em vez de uma solicitação de postagem regular, vamos tomar o mesmo dados nesse formulário e faça uma solicitação Ajax para adicionar os itens ao carrinho. Vamos investigar o código do nosso tema. Então, se abrirmos nosso modelo de produto, veremos que temos nosso formulário que vamos enviar o envio de. Ele tem uma idéia de forma de produto e vamos usar isso em nosso JavaScript. No JavaScript real, vamos usar para transformar isso em um pedido Ajax, vamos adicionar à parte inferior do tema LIQUID, que é onde temos colocado a maior parte do JavaScript até à data. Em um tema real, como eu acho que já mencionei antes, gostaríamos de colocar isso em um arquivo JavaScript separado aqui no diretório de ativos. Mas, por enquanto, vamos manter tudo aqui para que seja mais fácil manter um controle mental. Então, quando se trata do JavaScripts real, vamos como
mencionamos, vamos adicionar um ouvinte de evento para o evento de envio para esse formulário e vamos impedir a ação padrão, que é enviar que forma normal. Emulando o post de formulário é feito com o método $.post nosso endpoint é /cart/add.json e vamos passet o parâmetro de dados que é obtido de serializar o formulário. Então, $ (isto) refere-se ao próprio formulário nesta instância. Então isso deve ser realmente tudo o que precisamos para as partes iniciais e funcionalidade. Então, se eu voltar para a página do meu carrinho e atualizar e fazer algumas seleções e enviar mensagens meus produtos e clicar em “Adicionar ao carrinho”,
vai parecer que nada realmente acontece, mas isso é porque o envio do formulário foi interceptado. Então, se eu for ao meu carrinho, você verá que este produto foi realmente adicionado com sucesso. Então, se quisermos verificar se isso aconteceu através do Ajax e não através de alguma outra forma ou magia, podemos usar as ferramentas de desenvolvedor do Chrome para inspecionar as solicitações de rede que estão sendo feitas. Então, se fizermos outra seleção perfurando uma mensagem e, em seguida, quando apertamos “Adicionar ao carrinho”, veremos o pedido de adição Ajax
real chegando e fomos
capazes de inspecionar os detalhes do que através desse painel, podemos ver o dados de formulário que está sendo passado, e também vemos que a resposta que retorna é uma representação JSON do item de linha que acabou de ser adicionado. Claro, toda a nossa motivação em adicionar Ajax é tornar isso mais utilizável para nossos clientes. E o que realmente fizemos foi torná-lo menos utilizável porque agora estamos fornecendo praticamente zero feedback sobre o fato de que algo está sendo adicionado ao carrinho. Então, vamos dar uma olhada em como podemos corrigir isso. Vamos usar um padrão bastante comum aqui e que é para alterar o texto do botão “Adicionar ao carrinho” e desativá-lo quando começarmos a fazer nosso pedido Ajax, e então quando estiver feito, vamos mudar isso de volta. Para fazer isso, vamos usar esses callbacks que jQuery nos dá acesso. Temos feito, fracassado e sempre. Estes são parte da interface jQuery promessas. Então, feito o callback feito, será executado sempre que uma solicitação Ajax for bem-sucedida. Falha será executado e isso é uma vez que quando recebemos uma resposta de erro e sempre o retorno de chamada lá sempre será executado no final de uma solicitação ajax. Então, em nosso caso de uso, sempre queremos restaurar o botão “Adicionar ao carrinho” ao seu estado original. Então, vamos colocar isso no retorno sempre. Então, isso será executado não importa se a solicitação é um sucesso ou uma falha. Então, salvando isso vamos ver o impacto que isso tem em nossas páginas. Então, atualizando nossa página e configurando nossas opções de produtos. Agora, observe cuidadosamente quando pressionamos “Adicionar ao carrinho” aqui e você pode ver que o comportamento é o esperado. Este é um bom começo, mas ainda precisamos dar um pouco mais de feedback quando as coisas adicionam ao carrinho. Assim, por exemplo, o total do carrinho no canto superior direito não está sendo atualizado. Então, não temos 100% de certeza de que algo foi adicionado
com sucesso e também seria bom fazer um link de check-out aparecer assim que o adicionarmos ao carrinho. Então, apenas para tranquilizar os usuários que sua mudança foi registrada, bem como incentivá-los a dar um próximo passo. Lidar primeiro com a atualização das informações do carrinho na barra norte. Quando adicionamos algo ao carrinho com sucesso. Então, no retorno de chamada feito, nós estamos realmente indo para fazer uma segunda solicitação Ajax para o
endpoint /cart.json que nos dá uma versão atualizada de tudo o que está no carrinho no momento. Quando essa solicitação Ajax for concluída, vamos usar essa informação do carrinho para atualizar o elemento HTML do carrinho da barra de navegação que podemos ver está aqui em cima no nosso cabeçalho e vamos atualizar isso com este texto, a palavra e, em seguida, uma versão formatada do preço total do carrinho. Isso lida com nosso problema de atualização. Enquanto estamos aqui, também vamos adicionar rapidamente um pouco de manipulação de erros no caso de falha. Então, isso será muito básico apenas adicionar uma mensagem de alerta com o erro desse retorno da Shopify. Em um cenário real, você gostaria de inspecioná-los um pouco mais e fornecer uma mensagem útil para o usuário. Deixe-os saber exatamente o que deu errado. Em nossa próxima tarefa, que é fazer com que o link de finalização da compra apareça quando adicionamos um item com sucesso. Então, vamos adicionar a esse link de check-out como um elemento HTML abaixo do nosso botão “Adicionar ao carrinho”. Você pode ver que é uma identificação do link de check-out. Ele aponta para o check-out e nós vamos torná-lo inicialmente escondido com estilo display none. Voltar ao nosso teme.liquid JavaScript e nós vamos apenas adicionar a lógica aqui para tornar esse link de check-out visível na conclusão de uma operação de adição ao carrinho bem-sucedida. Então podemos testar e ver se as coisas estão um pouco melhores. Então, atualizando nossa página. Então, quando passamos pelo processo de seleção de nossas opções, adicionando uma mensagem. Como você pode ver, tanto o carrinho na barra de navegação é atualizado e nós também temos que check-out agora link aparecendo. Essa é uma maneira muito fácil de adicionar um carrinho Ajax progressivamente aprimorado para suas páginas de produtos, como mencionamos antes em um cenário real, você provavelmente gostaria de fornecer aos usuários um pouco de feedback extra tanto em cenários de erro e deixá-los saber exatamente o que está errado se algo der errado. Mas também no caso de sucesso talvez torná-lo um pouco mais óbvio aqui que algo foi adicionado com sucesso ao seu carrinho e sempre pensando nos próximos passos que você deseja usuário para tomar se isso é adicionar outro produto, reconfigure um produto ou para iniciar o processo de finalização da compra. Tendo passado pelo processo de ver como nós configuramos manualmente a funcionalidade do carrinho do Ajax, agora
vamos olhar para uma biblioteca que faz a maior parte do trabalho para nós que é Cart.js. Agora eu tenho que oferecer um pouco de isenção de responsabilidade aqui que Cart.js é um projeto que eu
próprio criei, mas é 100 por cento open source e livre para usar para todos os desenvolvedores de temas. Voltar à nossa página do produto, que redefinimos para o comportamento pré-Ajax. Ainda estamos passando pelo fluxo regular de redirecionamento post para carrinho aqui e vamos dar uma olhada em como implementar a funcionalidade Ajax usando Cart.js. primeiro passo é ir para cartjs.org e baixar a versão mais recente da biblioteca. Podemos fazer isso como um arquivo zip. Então, uma vez que tenhamos feito isso, nós só queremos extrair o arquivo zip e, em seguida, pegar a biblioteca como um arquivo javascript, arquivo javascript
minificado e vamos soltá-lo no diretório de ativos do nosso tema. Então, se nós apenas verificar em nosso editor de texto, nós podemos ver que ele foi copiado através. Para realmente começar a usar cartjs em nosso tema, precisamos adicionar algum JavaScript de inicialização para a parte inferior do nosso theme.liquid e também precisamos incluir a biblioteca também. Então, vamos fazer isso usando um URL de ativo e uma tag de script e, em seguida, chamamos essa função de inicialização e passá-lo o estado inicial do nosso carrinho. A partir daqui, só precisamos adicionar um pouco de marcação ao nosso tema para indicar o que gostaríamos de fazer com cartjs. Então, podemos adicionar um carrinho de dados enviar atributo a um formulário e que vai
emular a funcionalidade de envio de formulário que implementamos manualmente anteriormente. Em seguida, também podemos envolver um elemento de exibição com um atributo de renderização carrinho de dados. Vamos apenas emular a função de atualização que tínhamos na barra de navegação. Então, com a adição de apenas esses dois atributos, nós realmente replicamos uma grande parte da funcionalidade que acabamos de criar manualmente. Então, podemos ver aqui o envio do formulário é capturado e estamos atualizando
automaticamente o carrinho na barra de navegação. Foi uma bela turnê de Cartjs. Há um pouco mais na biblioteca do que isso , mas é para isso que realmente temos tempo nesta lição. Então, vamos deixá-lo lá e se você estiver interessado nele, você pode conferir na página inicial do cartjs. Isso é tudo para esta lição. Espero que você tenha uma boa compreensão de como começar a aplicar essas técnicas Ajax ao seu tema e também que você entenda a importância de tomar essa abordagem de aprimoramento progressivo onde
construímos a funcionalidade básica primeiro e depois o Ajax em cima disso.
7. Melhores práticas: Agora é hora de falar sobre o tópico favorito de todos, Melhores Práticas. Eu sei que não é o mais sexy dos tópicos, mas pode ser muito importante construir seus temas de uma forma que facilite a manutenção de si mesmo e dos outros. Então, se outro desenvolvedor entrar em seus projetos mais tarde, eles querem construir uma integração com seu tema, ou mesmo apenas se você voltar para o seu tema seis meses depois, e você não tem nenhuma lembrança de o que seu tema estava fazendo ou o que seu código estava fazendo, seguir essas práticas recomendadas torna as coisas muito mais fáceis de pegar e começar. Vamos começar analisando o líquido, que é um dos recursos mais exclusivos e definitivos da Shopify. Neste exemplo, o tema com o qual estamos trabalhando tem uma página de produto que está escrita em líquido como todos os nossos modelos estão. Na parte inferior desta página do produto, temos uma seção de produtos relacionados, e que usa um monte de líquido para gerar uma lista de produtos relacionados. Uma coisa útil a fazer quando temos muito líquido complicado grande, é extraí-lo em um trecho separado. Isso o mantém um pouco mais gerenciável para nós e também nos permite reutilizar esse código em outras seções. Então podemos querer reutilizar este snippet líquido em outro lugar. Então, aqui nós o cortamos fora do nosso modelo de produto, e estamos incluindo esse snippet, e vamos despejá-lo de volta no snippet de produtos relacionados aqui. Agora, quando se trata do código líquido real em si, uma coisa que eu vejo que as pessoas simplesmente não conseguem
fazer com líquido muitas vezes é adicionar comentários. Eu realmente não posso enfatizar o suficiente quão útil adicionar comentários em líquido é especialmente quando você tem coisas complicadas acontecendo. Não é apenas útil para futuros desenvolvedores que podem pegar um projeto depois de você mas também para o seu futuro eu porque em dois meses, se você voltar e olhar para o código líquido que
você escreveu, você não vai se lembrar do detalhes do mesmo. Dois, pontos rápidos finais. É realmente útil certificar-se de que seu código está formatado bem, tão recuado, fácil de ler novamente pelo mesmo motivo que adicionar comentários é realmente útil. Só uma nota final e isso é sobre trechos de nidificação. Então, como você pode ver na parte inferior deste snippet, estamos realmente incluindo outro snippet, o snippet do produto. Eu diria que dois níveis é quase o máximo que você deseja usar com um tema da Shopify e trechos aninhados. Mais do que isso e torna-se um pouco difícil raciocinar mentalmente sobre o que está acontecendo em seu código, e isso se torna um pouco complicado problema de manutenção. Seguindo em frente, vamos falar sobre Stylesheets. Muitas das melhores práticas para as folhas de estilo
da Shopify serão exatamente as mesmas que seriam no desenvolvimento normal da Web. Então, adicionando comentários sempre úteis tanto para você quanto para outros desenvolvedores futuros. Algo que é exclusivo da Shopify, no entanto, é o suporte para o pré-processador Sass. Portanto, vale a pena estar familiarizado com alguns dos truques e métodos que você pode usar nesse idioma. Então, por exemplo, a diretiva @extend como estamos vendo aqui. Outra coisa única para os contextos da Shopify é que podemos usar líquido para produzir valores de nossas configurações de tema dentro de nossos arquivos de folha de estilo como estamos fazendo aqui. No entanto, podemos ter um pequeno problema com o líquido aqui
porque as etiquetas líquidas em si não são realmente válidas Sass. Então isso pode causar problemas se estamos usando o
pré-processamento externo ou se estamos simplesmente usando a validação de sintaxe. Então, o que podemos fazer é o que eu estou fazendo aqui e que é
adicionar uma função de escape string que é válido Sass, mas também ainda renderizar suas variáveis de modelo líquido dentro de seu arquivo de folha de estilo;. Isso deve evitar os problemas que acabei de identificar. Vamos agora ao JavaScript, que é na verdade uma das áreas com as quais vejo mais problemas em termos de manutenção e desempenho nos temas da Shopify. Então, se você se lembra de como escrevemos a maior parte do JavaScript em lições anteriores, colocamos a maior parte diretamente na parte inferior do nosso tema.liquid. Essa não é a melhor prática. Então, o que você realmente quer fazer é extrair o máximo de JavaScript
possível e colocá-lo em arquivos JavaScript separados em seu diretório de ativos. Isso é melhor para manutenção e também significa que os navegadores são capazes de armazenar em cache seu JavaScript em vez de ter que carregá-lo com cada carga de página. Isso também significa que seus arquivos JavaScript estão disponíveis para executar o pré-processamento, você pode querer minificá-los ou concatená-los antes de entregá-los em produção. Agora, a desvantagem de extrair seu JavaScript em arquivos de ativos é que você não é mais capaz acessar o código líquido que está disponível para você de dentro de seus modelos de tema. A melhor maneira que encontrei em torno desse problema é criar funções de inicialização dentro seu JavaScript e passar seus objetos líquidos em configurações através de seus arquivos de modelo. Então, para ver como podemos fazer isso aqui, vamos criar uma configuração uma função de inicialização de página de produto que espera objeto json de
um produto que não podemos mais renderizar a partir de líquido dentro deste arquivo JavaScript, e então nós vai apenas fazer um pouco de limpeza de código para fazer isso funcionar com nossa nova função de inicialização. Podemos ver aqui o código líquido que estávamos usando que não podemos mais usar, então vamos apenas passar a variável do produto para ele lá. Vamos apenas limpar os que estão neste código um pouco para que seja um pouco mais legível. A partir daqui, a tarefa é simplesmente ser capaz de passar essa variável de produto para essa função de configuração a partir do líquido tema. Então, podemos fazer isso certificando-se de que primeiro incluímos nosso novo arquivo JavaScript que acabamos de criar. Uma vez que tenhamos feito isso, podemos apenas usar esta linha de JavaScript aqui em agora modelos líquidos para passar esse objeto líquido através de nossa função de inicialização. Infelizmente, não temos o tempo necessário neste curso para
aprofundar o que torna o JavaScript de práticas recomendadas para um tema da Shopify. Mas eu acho que há três coisas importantes que você pode pensar sobre que irão ajudá-lo a escrever JavaScript que é fácil de manter e muito profissionalmente conhecido. O primeiro deles é escrever seu JavaScript defensivamente. O que quero dizer com isso é escrevê-lo de uma forma que não faça suposições sobre a página em que está sendo carregada. Então, não suponha que um elemento DOM vai existir
na página porque seu script pode ser carregado na página do produto,
ou na página da coleção, ou em uma página de índice, e você pode não necessariamente ter controle sobre isso . O outro aspecto de escrever JavaScript defensivo é certificar-se de que seu script funciona bem com outras coisas de terceiros que podem ser instaladas na página. Se algo der errado com outro script, então espero que você possa contornar isso e escrever seu JavaScript de uma forma que não dependa do trabalho de outras pessoas corretamente 100 por cento do tempo, porque ele simplesmente não acontecer. A segunda coisa que eu acho que é realmente importante é escrever seu JavaScript de forma modular. Então, divida seu JavaScript em componentes
modulares que têm suas próprias áreas de responsabilidade individuais. Dessa forma, eles não dependem uns dos outros, é muito mais fácil de manter, é muito mais fácil para outros desenvolvedores aparecerem, entender o que está acontecendo, raciocinar e, em seguida, desenvolver esses módulos. A terceira coisa sobre a qual eu queria falar em torno seu JavaScript é ter certeza de que ele está escrito de uma forma orientada por eventos. O que eu quero dizer com isso é que quando, por exemplo, você está mudando
variantes em uma página de produto em
vez de ter uma função longa que tem uma receita para todas as coisas diferentes para atualizar na página, em vez acionar um evento alterado variante e, em seguida, você pode fazer com que
todos os outros componentes se conectem a esses eventos e atualizar sua própria área de responsabilidade de forma independente. Assim, por exemplo, você pode acionar um evento atualizado de variante e pode ter um componente que atualiza o preço do produto, outro que atualiza a imagem em destaque do produto. Dessa forma, você mantém as coisas muito separadas como vantagens
semelhantes às quando você está dividindo seu JavaScript em módulos. Este último ponto, este evento em JavaScript, torna-se realmente importante quando você começa a obter temas
realmente complexos que podem lidar com coisas como diferentes moedas, diferentes idiomas, diferentes localidades, porque você pode ter um monte de entradas diferentes e isso torna muito mais fácil se você só precisa se preocupar com a atualização de componentes individuais em uma página, você pode raciocinar sobre isso muito mais fácil. Outro tópico que não temos tempo para abordar em profundidade é o desempenho do tema. Isso é um pouco de vergonha, porque acho que o desempenho é um tópico que realmente não tem destaque
suficiente quando estamos falando sobre temas da Shopify. Sim, percebi a ironia de dizer que não temos tempo suficiente para falar sobre isso quando acho que é uma pena não falarmos sobre isso o suficiente. O fato é que o desempenho realmente afeta suas taxas de conversão. Assim, o Google fez um estudo e um aumento de um segundo nos tempos de carregamento da página pode resultar em queda de até sete por cento na conversão. Portanto, é algo realmente importante. A questão então se torna, o que podemos nós, como desenvolvedores de temas, fazer sobre isso? A primeira coisa que eu acho que é realmente importante ter é uma maneira de medir o desempenho do seu tema para que você tenha alguma idéia de se qualquer coisa que você está fazendo está realmente fazendo a diferença. Existem duas ferramentas que eu acho que são realmente ótimas para isso. O primeiro é o Google PageSpeed Insights. Essa é uma ferramenta muito simples que o Google oferece a você. Você pode conectar um URL, você obterá um detalhamento sobre onde os grandes itens de desempenho de ticket ou grandes problemas de ticket são para você. A segunda ferramenta que é realmente grande é WebPageTest.org. Vai para muito mais profundidade. Você obtém gráficos em cascata, ele dá-lhe um detalhamento em todos os diferentes componentes individuais em sua página, e também tem essa coisa chamada índice de velocidade. O índice de velocidade é uma medida da rapidez com que uma página se torna utilizável para um cliente em vez do tempo gasto para a página inteira carregar, e isso geralmente é uma coisa mais importante porque o que os clientes realmente se importam é com a rapidez com que eles são capazes de interagir com sua página em vez de quando o último widget JavaScript é carregado. Agora, em termos do que você pode realmente fazer praticamente para melhorar o desempenho do seu tema, há alguns grandes pontos que eu começaria por abordar primeiro. O primeiro deles é o JavaScript carregado no topo. Então, uma grande parte do tempo se você olhar para temas, eles carregam um monte de bibliotecas incluindo dizer jQuery na cabeça do tema. Mover essas bibliotecas daqui para
a parte inferior do corpo da página pode ter um enorme impacto nos tempos de
carregamento, já que o navegador não precisa baixar a análise e executar todo o JavaScript antes mesmo de começar a mostrar o conteúdo na parte superior da página. Outro assassino de grande desempenho é imagens não otimizadas. Então, se você tiver JPEGS ou GIFS ou PNGs em seu tema que não foram otimizados corretamente, você pode estar enviando muitas mordidas inúteis. Você pode usar ferramentas como ImageOptim ou ImageAlpha para otimizar essas imagens antes que elas passem para seu tema, e você também pode agrupá-las em um processo de desenvolvimento de temas automatizado, como veremos mais adiante. Outra coisa a procurar é certificar-se de que você está servindo a imagem de tamanho certo para o tipo certo de dispositivos. Portanto, não há nenhum ponto de carregar uma imagem de retina 3X para um telefone celular que não será capaz de exibir esses pixels, e da mesma forma, não há nenhum ponto de servir uma imagem de alta resolução para um dispositivo desktop que não tem um exibição de resolução. Então, há algumas coisas que você pode fazer para ter certeza de que você está fazendo a coisa certa lá. Você pode usar bibliotecas JavaScript para se certificar de que o tipo certo de imagem está selecionado, e para navegadores mais recentes que é onde isso é mais aplicável, você pode usar o novo atributo de conjunto de código-fonte em imagens. Finalmente, e esta é realmente a coisa mais difícil de fazer com o seu tema, mas também o mais útil, e isso é apenas para remover coisas. Então, se houver componentes na página que são realmente lentos para carregar ou ocupando muito download ou largura de banda, basta considerar se você pode substituí-los por algo que é um pouco mais leve. Um grande exemplo disso que eu digo o tempo todo são carrosséis. Então os carrosséis são horríveis do ponto de vista da usabilidade. Os usuários simplesmente não tendem a mover para o segundo ou terceiro slide, ou eles ficam frustrados com eles quando querem ir para o primeiro item no slide, e ele desliza além disso e então eles querem tentar voltar para ele. Então, carrosséis são apenas má usabilidade, mas eles também carregam mais imagens do que você pode realmente precisar. Então, substituir um carrossel JavaScript por uma única imagem pode ser uma ótima maneira de melhorar a usabilidade do tema, mas também
reduzir drasticamente a quantidade que precisa ser baixada para o seu tema em primeiro lugar. O 're são as minhas principais dicas para o desempenho e certificando-se de que seus temas carregar um pouco mais rápido. Se você está realmente interessado neste tópico, escrevi um pouco sobre isso no meu blog,
gavinballard.com, onde eu mergulho especificamente nos casos de uso em torno de temas
da Shopify e otimização de desempenho.
8. Como automatizar seu fluxo de trabalho: Nesta lição, vamos falar sobre automação de fluxo de trabalho. Assim, o processo de tomar tarefas repetitivas e automatizá-las. Temos muitos benefícios ao fazer isso. A mais óbvia, é que nos poupamos muito tempo. Então, não precisamos executar a mesma etapa manual de novo e de novo. Mas há um par de outros também. Temos mais flexibilidade na forma como podemos estruturar nossos projetos. Então, em vez de ter que empacotar as coisas, como a Shopify espera que o tema final seja, podemos estruturar as coisas de forma a facilitar a manutenção, dividir nossos arquivos JavaScript, por exemplo, e compilá-los juntos. Também tornamos nosso processo de implantação muito mais confiável, pois é automatizado, não precisamos nos
preocupar em esquecer de uma etapa se estivermos fazendo as coisas manualmente. Então, a vantagem final que obtemos com isso, é que temos alguma forma de documentação do nosso processo de implantação. Então, enquanto, antes nós realmente não tínhamos nenhuma maneira de
comunicar nosso processo de implantação em outro desenvolvedor, por exemplo. Pode ter sido escrito em um Google Doc ou estamos apenas tentando lembrar. Ao automatizar o processo, temos alguma forma de documentação desse processo no próprio código. Nesta lição, vamos estar olhando para uma ferramenta específica para automação de fluxo de trabalho chamada Grunt. Grunt é baseado em Node.js, é um quadro bastante popular e comum e eu gosto,
porque tem um ecossistema realmente grande de plugins. Então, se houver algum tipo de tarefa que você queira fazer com seu tema da Shopify, seja concatenando arquivos, comprimir folhas de estilo ou otimizar imagens, provavelmente já
existe um plugin para Grunt que faz isso. Vamos levar o Grunt nesta lição e ver como podemos aplicá-lo ao processo de criação de temas da Shopify. A primeira coisa a verificar, é que nós temos ambos nó e nó pacote manager instalado em nossas máquinas. Se você não tiver essa configuração, então, você pode procurar no nó e no site npm sobre como obter isso classificado. Uma vez que fizemos isso, podemos executar este
comando de instalação npm para instalar a biblioteca cliente Grunt. Isso nos dará acesso às ferramentas de linha de comando com Grunt. Uma vez, isso é configurado, estamos em nosso diretório de temas. A primeira coisa que queremos fazer é executar o npm, no qual cria um arquivo.json package.json. Se você estiver familiarizado com projetos de nó, você já viu isso antes. Caso contrário, é basicamente apenas uma maneira de listar todas
as dependências do nosso projeto em particular. Então, é onde vamos puxar todos os nossos plug-ins Grunt e coisas assim. Então, eu estou movendo as etapas de configuração bastante rapidamente. Se você não está acompanhando 100 por cento, não se estresse muito. Você sempre pode ler mais sobre isso
no site Grunt e também nos materiais do curso. Então, nesta fase com o nosso tema de demonstração, temos nossas dependências para Grunt instaladas. Temos Grunt e um pacote. JSON pronto. Agora, só precisamos procurar algo para realmente fazer com isso. Nosso tema de demonstração para esta lição é o tema LaunchPad, que vem por padrão com todas as lojas da Shopify. Se mergulharmos no diretório de ativos para este tema, podemos ver que há muitos plugins jquery que este tema puxa por padrão e isso é uma coisa bastante comum de se ver em muitos temas da Shopify. Mas o problema com isso, é que nós temos que carregar todos esses arquivos JavaScript individualmente, então estamos fazendo solicitações HTTP extras. Então, o que vamos analisar nesta lição, é como podemos usar a automação de fluxo de trabalho para manter esses arquivos separados no desenvolvimento, para facilitar o gerenciamento. Mas juntar todos eles, concatená-los todos juntos, que só tenhamos que entregar um arquivo real para o navegador. Felizmente, para nós, Grunt tem um plugin, que faz o que queremos praticamente direto do bastão. Chama-se grunt-contrib-concat. Então, instalamos plugins Grunt usando o comando de instalação npm. Se eu tivesse save-dev no final como um argumento lá, isso vai certificar-se de que ele é adicionado ao nosso package.json, modo que, nossas dependências estão claramente listadas. Então, só precisamos esperar um pouco para que a instalação ocorra. Então, se realmente inspecionarmos o conteúdo do nosso package.json, veremos que esse novo plugin foi adicionado à nossa lista de dependências. Agora, se inspecionarmos o conteúdo da nossa pasta tema, podemos ver que a instalação de npm e nó no Grunt
adicionou este diretório node_modules ao nosso tema. Se executarmos um status do git, veremos que o git está pegando como um diretório que podemos querer adicionar ao nosso projeto. Nós realmente não precisamos da pasta de módulos de nó em nosso projeto, porque tudo o que ele contém são as dependências que estão listadas em package.json. Então, não é realmente um código relevante para nossos projetos, então, devemos adicionar isso ao nosso gitignore. Então, que não estamos cometendo coisas acidentalmente, que realmente não precisamos ser. Nós, no entanto, queremos ter certeza de que as alterações no gitignore e no próprio
package.json estão documentadas no nosso gitrepository. Então, vamos fazer isso agora. Agora, temos todos os componentes para executar tarefas Grunt juntos. Mas ainda precisamos de uma maneira de definir quais são
essas tarefas reais e como elas devem operar nos arquivos em nosso tema. Fazemos isso usando um arquivo Grunt. Um arquivo Grunt é um arquivo JavaScript que fica no nível superior do nosso diretório de temas e é onde definimos todas as tarefas automatizadas, que gostaríamos de executar em nosso tema. Então, se dermos uma olhada neste arquivo Grunt exemplo, podemos ver que é um arquivo JavaScript. Então, ele só usa sintaxe JavaScript regular. Então, ele tem uma linha de exportação na parte superior e, em seguida, definimos nossas tarefas dentro desta chamada grunt.initConfig. Então, você pode ver aqui, estou passando um hash que define algumas tarefas incluindo esta tarefa concat. Estou dando um nome a essa tarefa e, em seguida, estou definindo os arquivos de origem que eu quero concatenar juntos, e o arquivo de destino para onde eu quero que tudo termine. Aqui em baixo, tenho duas linhas. Um para carregar o plugin concat
e, em seguida, o segundo simplesmente registra essa tarefa concat que definimos como a tarefa padrão. Então, como isso realmente funciona quando queremos executar essas tarefas? Se voltarmos para a linha de comando, podemos executar Grunt Concat. Como você pode ver, ele vai nos dizer que é executar essa tarefa e que ele é criado este arquivo plugins jquery. Então, se quisermos dar uma olhada no que isso parece, podemos ver que o arquivo plugins foi criado e, como esperado, é uma concatenação desses outros arquivos plugins jquery que definimos. Então agora, tudo o que temos a fazer, é substituir essas importações individuais desses plugins jquery individuais com a única importação da chamada única para uma tag de script para o arquivo concatenado juntos. Assim que fizermos isso, podemos remover essas chamadas existentes. O que fizemos foi um caso de uso muito simples para Grunt apenas concatenando arquivos. Mas poderíamos ter feito muito mais, poderíamos estar difamando esses arquivos antes de serem empurrados para a produção. Poderíamos estar fazendo alguma verificação de sintaxe no JavaScript, para ter certeza de que tudo estava bem e livre de erros antes de entrar em produção. Poderíamos estar otimizando imagens e, além disso, poderíamos estar fazendo isso de uma maneira diferente dependendo do ambiente em que estávamos. Então, se estávamos em desenvolvimento ou em produção. Mas é claro, Grunt não é a única ferramenta que podemos usar através deste tipo de coisa. Existem outras ferramentas, coisas como Gulp ou CodeKit, que efetivamente executam o mesmo processo. Mas a escolha real da ferramenta que você usa, não é realmente o importante aqui. É que você tem alguma forma de automação de fluxo de trabalho, para obter todos os benefícios que listamos no início da lição.
9. Como implementar temas na Shopify: Como na lição anterior, essa lição final é toda sobre nosso processo de implantação e, especificamente, falaremos sobre implantação, como colocamos nosso código de nossas máquinas de desenvolvimento em produção, na Shopify em um maneira profissional e eficiente. Vamos começar obtendo uma visão geral dos métodos de implantação e como temos feito as coisas até o momento. Quando configuramos o gem do tema nas lições anteriores deste curso, estávamos usando-o para essencialmente implantar diretamente em nosso tema ao vivo em nossa loja da Shopify. Isso funciona bem para o desenvolvimento, mas há alguns problemas quando isso se torna uma loja
de produção ao vivo. A primeira é que seus desenvolvedores estão empurrando mudanças diretamente para produção sem quaisquer medidas preventivas reais para evitar acidentes. Você não está realmente tendo nenhuma maneira de testar novos recursos. Você também tem dificuldades em saber em que tipo de estado seu tema ao vivo está em seu site de produção e você realmente não sabe qual versão do código está sendo executado, e usar esse tipo de método também torna muito difícil colaborar com outras pessoas no seu tema da Shopify, porque é muito fácil para vários desenvolvedores substituírem as alterações uns dos outros e é muito difícil reverter para um estado anterior se algo der errado com isso. Então, uma maneira de tentar resolver alguns
desses problemas é ter dois temas rodando na mesma loja, uma versão live e uma versão de desenvolvimento. Então, ainda estamos usando o gem do tema para atualizar as alterações diretamente no tema de desenvolvimento enquanto estamos desenvolvendo e, depois que estivermos satisfeitos com as alterações que fizemos, conseguimos implantar essas alterações no tema ao vivo. Uma maneira de fazer isso seria duplicar a versão mais recente do nosso tema de desenvolvimento e publicá-la como um tema ao vivo na loja da Shopify e fazer isso por meio do admin da Shopify. Mas há alguns problemas com isso. Em primeiro lugar, ainda é um processo muito manual, então, há espaço para erro humano. Também é muito difícil saber em que estado está a nossa loja dinâmica, por isso não temos a certeza de qual das versões de desenvolvimento mais recentes foi publicada e isso não resolve os nossos problemas de colaboração. Então, imagine que a melhor abordagem é continuar usando o gem tema para fazer upload diretamente para a loja de desenvolvimento,
mas, em seguida, usar também o gem tema para implantar no tema ao vivo uma vez que estamos satisfeitos com o estado do tema em nosso máquina de desenvolvimento. Isso evita um pouco de confusão com o processo de implantação de admin da Shopify. Mas, novamente, ainda temos esses problemas em que ainda estamos usando um processo manual e
ainda temos problemas com a colaboração como onde carregar nosso tema diretamente da máquina de um desenvolvedor para a loja ao vivo. Uma abordagem muito melhor que podemos usar é continuar usando o gem do tema para fazer upload para a loja de desenvolvimento, já que essa é realmente a maneira mais instantânea de obter feedback sobre o desenvolvimento enquanto estamos fazendo isso. Mas, em seguida, para introduzir o conceito de um repositório de terceiros. Então, este seria um serviço de repositório de código, então algo como GitHub ou Bitbucket ou GitLab ou seu próprio servidor Git hospedado internamente. Assim que estivermos satisfeitos com as alterações que fizemos com o nosso tema localmente, podemos apenas fazer um push do Git para esse repositório. Em seguida, podemos usar um serviço de implantação para pegar a versão mais recente do nosso código de tema e enviá-la para o tema ao vivo em nossa loja Shopify. Então, trazer este conceito de um repositório de terceiros entre os desenvolvedores e o ambiente de produção nos dá muitas vantagens. Então, nós instantaneamente obtemos todos os benefícios de colaboração de usar um repositório central do Git, então coisas como ter a resolução de conflitos tratada para nós. Podemos usar quaisquer mecanismos específicos Git serviço de hospedagem tem assim, por exemplo. Solicitações de pull, solicitações de pool emergentes e levantando problemas e coisas assim. Estamos separando os desenvolvedores da implantação diretamente no ambiente de produção, o que minimiza o risco de ter erros, e fazendo com que isso
implante a etapa de serviço seja implantada automaticamente a partir de nosso para o site ativo. Abrimos o portal para coisas como testes automatizados durante esse estágio e somente implantando se todos esses testes tiverem passado. Então, de forma realista, provavelmente teríamos três ou mais temas em nossa loja da Shopify. Então, um tema de preparação e, em seguida, um tema de desenvolvimento para cada desenvolvedor não são os mesmos,
e, em seguida, nosso serviço de implantação estaria implantando automaticamente a versão mais recente do nosso código para o tema de teste onde ele pode ser testado e, em seguida, uma vez ele passou um processo de controle de qualidade, podemos acionar uma implantação manual através desse negócio de serviço de implantação para o tema em tempo real que os clientes estão dizendo. Dar um passo final adiante em um cenário realista. Porque é uma prática ruim ter seu site de produção em execução
na mesma loja da Shopify que seus temas de preparação e desenvolvimento, porque você não pode separar dados como pedidos e clientes. O que você realmente deseja fazer é executar duas lojas separadas da Shopify e, portanto, seu serviço de implantações ainda pode ser
implantado automaticamente no tema de preparação em sua loja de desenvolvimento e, quando você estiver acionando essa implantação manual, que vai para o tema ao vivo na loja de produção. Há uma grande quantidade de serviços que permitem que você implante código de um repositório Git para um tema da Shopify
e, claro, se você tiver algumas lojas de desenvolvimento de sistemas back-end, você sempre pode rolar o seu próprio. Hoje vamos estar olhando para uma ferramenta específica e é a que eu gosto de usar, é chamada DeployBot. Você pode encontrá-lo em deploybot.com. A razão pela qual eu gosto da implantação do tema da Shopify é que ele tem suporte nativo interno para temas da Shopify. Então, é realmente fácil começar a funcionar e também tem suporte para alguns recursos mais avançados, como executar um script de compilação como parte do processo de implantação. Vamos ver como podemos implementar um tema usando DeployBot. Então, estamos de volta ao nosso tema demo e se saltarmos para nossa foto podemos ver que eu tenho um jogo de configuração. Então, eu tenho a configuração GM tema para carregar para
a loja e eu também coloquei este tema sob controle de revisão do Git. Como primeiro passo para este exemplo, eu também empurrei esse tema para o GitHub, então eu o hospedei em um repositório central. Agora, vamos ver como o DeployBot se encaixa na mistura. Você pode criar uma conta gratuitamente com o DeployBot e usar até um repositório com esse plano e, depois de fazer login na sua conta, você é apresentado com isso, que basicamente o leva através do processo de conexão um repositório para sua loja da Shopify. Então, como você pode ver aqui, você pode conectar GitHub, Bitbucket ou seu próprio repositório Git auto-hospedado. Vou selecionar o repositório para este tema de demonstração e clicar em Connect. Então, do outro lado das coisas, eu preciso criar um ambiente, então isso é conectar-se ao local onde estamos implantando
no qual, neste caso, será uma loja da Shopify. Então, eu só preciso dar um rótulo a isso, especificar como eu quero ser implantado nesse ambiente. Neste caso, vou deixar este manual. Vou implantar o ramo mestre, e então podemos ver que nos perguntam em um servidor. Então, temos essa opção de vincular indiretamente à Shopify. Então, escolhendo isso, eu apenas dou um nome e o URL à minha loja da Shopify. Então, podemos nos conectar diretamente. Então, o webhook basicamente se configura como um aplicativo personalizado dentro de nossa loja Shopify. Só precisa dar um nome e, em seguida, podemos escolher qual tema queremos implantar. Então, temos um lá chamado Personalização do Produto que vamos usar. Temos um monte de opções avançadas que ainda não estávamos investigando. Então, essa é na verdade toda a configuração que precisamos
configurar para que um serviço básico de implantação operacional. Agora podemos apertar o botão DeployBot e DeployBot vai buscar a versão mais recente do nosso código do GitHub. Isso dá a você a chance de revisar quais alterações realmente serão implantadas e, em seguida, podemos pressionar o botão Iniciar Implantar para pressionar essas informações e empurrar esse tema e esses arquivos para nossa loja da Shopify. Agora, se atualizarmos nossa loja da Shopify no momento, não
veremos nenhuma alteração porque, é claro, estávamos enviando a versão mais recente de qualquer maneira. Mas vamos ver como passamos pelo processo se fizermos uma mudança. Então, vamos decidir que queremos mudar
a cor da nossa barra de navegação e então fazemos esse ajuste nossa folha de estilo. Salve essas alterações e passe pelo processo de adicioná-lo ao Git. Uma vez feito isso, podemos empurrar essas alterações para nosso repositório do GitHub e vamos apenas verificar e ver que realmente essa mudança foi empurrada, que podemos ver que ela tem. Então, se soltarmos o DeployBot, veremos que, se apertarmos o botão Implantar novamente, ele verificará se há alterações recentes mais uma vez e nos
dará uma visão geral do que ele vai mudar e implantar. Então, novamente, em questão de apenas iniciar a implantação e o DeployBot enviará essas alterações para o nosso tema da Shopify. Agora, se atualizarmos, veremos que essa mudança realmente ocorreu. Agora, uma das vantagens de usar um serviço de implantação é que, se forçarmos algo errado ou que não gostamos, conseguimos reverter com bastante facilidade e o Deploybot, como você pode ver, torna este um processo bastante simples. Podemos revisar novamente o que estamos revertendo e instantaneamente recuo muda se algo der errado. Essa foi a introdução realmente rápida de cinco minutos à implantação, que é o tópico final para este curso. Mas pouco antes de
terminarmos, vamos dar uma olhada em
um cenário final de implantação que traz algumas técnicas mais avançadas especificamente, algumas das coisas de automação de fluxo de trabalho que falamos na última lição. Então, estamos de volta olhando para o tema de desenvolvimento da loja de velas. Mas desta vez, tenho dois temas na minha loja. Eu tenho um tema ao vivo e um tema Desenvolvimento. Então, nós carregamos indiretamente para o tema Desenvolvimento. Em Desenvolvimento ou usando o tema [inaudível] e, em seguida estaremos implantando para a versão Live do tema usando Deploybot e eu já configurei esse fluxo DeployBot de forma semelhante ao que fizemos com o screencast anterior. Agora, eu também fiz algumas alterações bastante significativas na estrutura do nosso diretório de temas
também e isso é para se encaixar com algumas
das coisas de automação de fluxo de trabalho que discutimos anteriormente. Então, você pode ver agora que eu tenho um diretório tema que contém todos os arquivos fonte para o meu tema, e eu também adicionei um Gruntfile que está executando um monte de tarefas de compilação, então minificação e concatenação, e construindo todos esses arquivos de origem no meu tema em um diretório.build, aqui no nível superior. Para ver isso em ação, vamos saltar para o console e executar uma compilação Grunt, e vamos ver que compila o nosso tema no diretório.build. Então, se eu abrir agora, podemos dizer uma versão final pronta para implantação em uma loja da Shopify. Agora, observe que o arquivo config.yml está dentro desse diretório de compilação, para que eu possa executar uma observação de tema aqui e carregar minhas alterações em Desenvolvimento diretamente para a versão Desenvolvimento do tema na loja da Shopify. Então, se eu mudar o diretório para o diretório de compilação e executar tema assistir. Em seguida, volte ao meu tema, faça uma alteração nos arquivos fonte originais desses temas. Então, mudando o título da minha página, por exemplo, e, em seguida, executar essa etapa de construção novamente usando Grunt, podemos dizer Grunt será inteligente o suficiente para reconstruir apenas coisas que precisam mudar e, em seguida, o meu upload de tema pega essa mudança e uploads para a loja. Agora, se eu atualizar em nosso navegador, imediatamente não vou ver essa alteração porque estamos visualizando a versão Live da loja e estávamos carregando para a versão Development. Mas podemos, é claro, visualizar isso como fizemos aqui e vocês podem ver que essa mudança foi realmente feita. Agora, não queremos ter que executar uma compilação Grunt manualmente cada vez que fizermos uma alteração em nosso tema, mas felizmente também temos uma configuração de tarefa de observação em nosso Gruntfile. Então, isso significa que agora podemos ir para nossos arquivos de tema fonte, fazer alterações como quisermos e, em seguida, assim que salvarmos, Grunts vai colher, compilar o que precisamos e, por sua vez, o relógio tema vai carregar essa mudança para a loja. Assim que estivermos satisfeitos com as alterações que fizemos no Desenvolvimento, queremos enviar essas alterações para o Git, para que
possamos implantá-las em nosso site Live. Então, para fazer isso, passamos pelo processo padrão de adição do Git, e eu vou mudar isso para um Commit e, em seguida, empurrar isso para o nosso repositório GitHub. Podemos então passar pelo processo de execução de um
Deploybot com Deploybot de forma semelhante ao que fizemos em nosso screencast anterior. Então, apertando o botão Implantar, revisando as alterações que precisam ser feitas e, em seguida, executando essa implantação. Se voltarmos ao nosso navegador e agora, podemos ver que essa mudança foi implantada no site Live. Vamos voltar para nossos arquivos de tema por um segundo para revisar o que esse Gruntfile está realmente fazendo por nós e como isso funciona com DeployBot. Então, dentro de nossos arquivos de origem do tema, você pode ver que não estamos usando a estrutura de diretórios padrão da Shopify. Na verdade, dividimos nosso JavaScript e nossas folhas de estilo em arquivos separados, o que nos
ajuda com o Desenvolvimento e mantém tudo um pouco mais modular e fácil de raciocinar. No diretório do Build, há esses arquivos são compilados juntos. O que é mais, na verdade, é que se entrarmos em
nosso site Live em nosso navegador e investigarmos um pouco o CSS, veremos que os ativos que estão sendo servidos do site Live não são apenas compilados juntos, mas eles também são minificados. Isso é possível porque o DeployBot suporta comandos Build. Então, se entrarmos nas configurações configuradas para o nosso tema da Shopify, veremos que o DeployBot é realmente capaz de executar uma compilação do Grunt para nós antes de implantar nosso tema na loja da Shopify. Você também notará que estamos passando um sinalizador de produção para a tarefa Construir, e isso é dizer ao Grunt para executar algumas tarefas que não
acharíamos úteis ou muito caras para serem executadas no Desenvolvimento. Assim, por exemplo, comprimir essas folhas de estilo, nós também usá-lo aqui para minificar nossos JavaScripts e nós também usá-lo para minificar e otimizar nossas imagens, o que é uma tarefa bastante cara. Demora um pouco de tempo que realmente não podemos ser incomodados esperando em Desenvolvimento, mas gostaríamos de executá-lo antes de realmente empurrar nosso tema para a produção. Felizmente, agora você tem uma idéia de algumas boas técnicas para usar para colocar seu código de sua máquina de desenvolvimento em uma loja da Shopify em produção e evitando todos os problemas que identificamos no início de uma lição.
10. Conclusão: Bem, é isso. Estamos acabados. Muito obrigado por se juntar a mim neste curso. Espero que tenha sido útil para você, espero que você tenha aprendido algo que não sabia antes
e, se achar que pode lidar com algo mais avançado da Shopify, desenvolva agora. Fico sempre muito feliz em falar com alunos ou qualquer pessoa em geral sobre a Shopify, passo muito tempo pensando e falando sobre a Shopify. Então, se você quiser entrar em contato ou fazer perguntas, me dê algum feedback. Se você ficar preso nos projetos, então entre em contato. Meus detalhes de contato aqui na página do curso SkillShare. Além disso, eu acho que tudo o que resta é para mim dizer boa sorte em seu desenvolvimento coisa Shopify e Kirti feliz.