Programação de temas no Shopify: Liquid, JSON e Javascript

1. Introdução: Olá. Bem-vindo ao Shopify Theme Programming: Liquid, JSON e JavaScript. Esta classe é a continuação da minha classe anterior, Shopify Theme Development, como criar e personalizar sua própria loja online. Se esta é sua primeira vez aprendendo comigo, meu nome é Chris, e eu sou um professor de topo aqui em skillshare.com cobrindo tópicos como desenvolvimento web e freelancing on-line. Minha primeira aula sobre desenvolvimento de temas da Shopify abordou tópicos como criar uma loja de desenvolvimento, usar o Theme Kit e entender a estrutura do tema. Esses são os fundamentos importantes para o desenvolvimento do tema da Shopify. Mas nesta classe, vamos aprofundar o código do tema real, e obter uma melhor compreensão de como os temas são programados. Analisaremos mais de perto a linguagem de modelos por trás dos temas da Shopify, discutiremos como criar suas próprias personalizações usando esquemas JSON e aprenderemos sobre algumas APIs que ajudam você a acessar dados armazenados, sem precisar recarregar a página. No final da aula, você tem uma sólida compreensão de como programar temas da Shopify e a capacidade de criar suas próprias seções e trechos para acessar o escopo completo do que pode ser alcançado com o desenvolvimento do tema da Shopify. Se você estiver pronto para levar suas habilidades de desenvolvimento de temas da Shopify para o próximo nível, clique no próximo vídeo e eu o verei por dentro. 2. Ferramentas e conhecimentos necessários: Como esta classe é o desenvolvimento do tema SQL para Shopify, como criar e personalizar sua própria loja online, é aconselhável que você tome essa classe primeiro, pois essa classe assume que você entende o que é uma história de desenvolvimento, como O themekit funciona e a estrutura de pastas do seu tema da Shopify. Compreender a estrutura do tema é especialmente importante para esta classe, pois entraremos diretamente nos arquivos sem falar muito sobre onde todos eles se encaixam na estrutura dos temas da Shopify. O foco deste curso é exclusivamente nos aspectos de programação dos temas da Shopify. Claro, se você precisar de mais desse conhecimento teórico em torno de temas, definitivamente confira a primeira aula. Agora, como esta classe é toda sobre código, você vai precisar de um bom editor de código. O que usarei nesta classe será o editor online no admin da Shopify, mas é altamente recomendável que você use seu próprio editor de código e use o themekit para baixar seu código de tema. Em segundo lugar, você obviamente precisa de um navegador da Web e, em terceiro lugar, precisará de sua própria loja da Shopify. Esta loja não precisa ser uma loja de verdade. Claro, pode ser uma loja de desenvolvimento. Você não precisa pagar a Shopify para trabalhar em temas. Se você não sabe do que eu estou falando, check-out lição 3 da classe anterior. Agora, eu mencionei antes, themekit, se você ainda não tiver, vá para shopify.github.io/themekit e pegue isso agora, eu recomendo muito. Isso é basicamente para as ferramentas. Mas em termos de conhecimento, além de saber sobre temas, você precisará ter uma compreensão básica de HTML, CSS e JavaScript. Estas são as três línguas importantes que compõem a web, e nós não vamos estar cobrindo-os especificamente nesta classe então se você precisa obter uma compreensão de qualquer um desses, basta verificar algumas das minhas outras aulas primeiro. Essa era uma lista e tanto. Vamos resumir rapidamente antes de seguirmos em frente. Em termos de conhecimento, você precisará ter pelo menos uma compreensão básica da Plataforma Shopify, da estrutura dos temas da Shopify, estou falando sobre layouts, modelos, seções etc., e, finalmente, HTML, CSS e JavaScript. Para as ferramentas, você precisará de um editor de código, um navegador da Web e uma loja da Shopify para trabalhar e do Shopify Themekit se estiver trabalhando com seu código localmente. Se você tem tudo isso, agora você está pronto para pular direto para a próxima lição, então eu vou te ver lá. 3. Atualizações da loja online 2.0: Ei, estudantes, eu só queria entrar aqui antes de começarmos e ter certeza de que vocês estão cientes de algo que a Shopify está chamando de Loja Online 2.0. Como você provavelmente pode dizer, este vídeo foi gravado alguns anos depois que a aula original foi postada, mas eu pensei que era importante entrar aqui e informá-lo sobre algumas atualizações. Se você sabe do que estou falando aqui com a Loja Online 2.0, sinta-se à vontade para pular este vídeo. Mas para o resto de vocês, eu só preciso atualizá-los sobre algumas mudanças experiência da loja online desde que esta aula foi lançada pela primeira vez. Apenas para abordar alguns de seus alunos preocupação, o conteúdo desta classe ainda é relevante. O líquido ainda está na mesma forma. JSON ainda é usado para esquemas de seção e localidades. As APIs JavaScript que eu falo nesta classe ainda existem no momento da gravação, mas nós apenas temos um novo formato para arquivos de modelo. Então agora os modelos podem ser de Liquid ou JSON. Vamos nos aprofundar na aula. Você provavelmente já deve saber o que é um modelo. Mas anteriormente, os modelos foram codificados como apenas Liquid e você tinha que esconder programa nas seções. Agora, para permitir seções em todos os lugares, Shopify habilitou o uso de modelos JSON. Então agora, em vez de armazenar Liquid diretamente em seu modelo, você armazena um objeto JSON em seu modelo, e esse objeto JSON tem a lista de seções que você pode reordenar em seu editor de temas, e isso permite que você criar seções reordenáveis em todos os seus modelos, não apenas na sua página inicial. Se você quiser saber mais sobre os modelos JSON, vou aprofundar isso na Lição 11 da classe anterior. Acabei de adicionar um novo vídeo nessa aula para vocês, para que possam aprender o que são modelos JSON e como usá-los. Dito isto, ele vai mudar sua ferramenta de desenvolvimento agora se você quiser usar modelos JSON. No próximo vídeo, mencionei Slate. Não recomendo que use o Slate a menos que esteja pegando um projeto legado. A ardósia já expirou. A Shopify encerrou oficialmente o suporte para a Shopify Slate em janeiro de 2020. Eu não recomendo que você o use a menos que, claro, você precisa porque você está assumindo um projeto legado. Mas mesmo assim, eu recomendaria a migração de Slate. No último vídeo, mencionei uma ferramenta chamada Theme Kit, mas também há uma nova ferramenta agora chamada Shopify CLI, e é importante observar a CLI da Shopify aqui porque é a ferramenta que você terá que usar se quiser para usar modelos JSON. Por qualquer motivo, o Theme Kit não foi adaptado para trabalhar com os novos modelos JSON. Então, se você quiser usar modelos JSON, terá que usar a CLI da Shopify. Essas são as principais mudanças a observar antes de entrarmos na aula. Como eu disse, Liquid ainda é o mesmo, JSON ainda é o mesmo, JavaScript API ainda existe. A última alteração da Shopify é que os arquivos de modelo agora podem ser do Liquid ou do JSON. Novamente, para saber mais sobre a Loja Online 2.0, você pode conferir os três novos vídeos que adicionei à aula de desenvolvimento de temas da Shopify, mencionei o JSON Schemas. Se você quiser aprender sobre a CLI, isso está na Lição 6, eu acredito, então a Lição 6 da minha classe anterior, e também há uma introdução à Loja Online 2.0 nessa classe. Eu também tenho uma playlist da Loja Online 2.0 no YouTube que você pode conferir para obter mais informações sobre a Loja Online 2.0. Mas com isso dito, vamos voltar à aula e aprender como podemos programar no desenvolvimento do tema da Shopify. 4. Visão geral da programação de temas: Para a maioria desta classe sobre programação de temas da Shopify, vamos falar sobre líquido. Liquid é a linguagem de modelos dos temas da Shopify, você pode pensar nela como a linguagem de programação back-end do seu tema da Shopify e, portanto, sua vitrine online. Claro, podemos criar vitrines online vinculadas à Shopify como dados de outras maneiras. Mas a maioria das vezes quando alguém está usando a Shopify para hospedar uma loja online, ele está usando esse canal de vendas da loja online da maneira que você personaliza a aparência da sua loja online é por meio de um tema. Você deve estar bem familiarizado com isso se você precisa aprender mais sobre desenvolvimento de temas, o que é um tema, e onde ele se situa no contexto de sua loja? Tenho uma série no YouTube e uma aula anterior sobre desenvolvimento de temas da Shopify aqui no Skill Share. Então, essa classe vai se preocupar principalmente com a programação de temas da Shopify, como o nome sugere, e então vamos aprender mais sobre patentes de programação, então vamos trabalhar muito com o Liquid. Dito isto, última aula, trabalhamos diretamente com o tema Debut, que é um tema já construído que se parece com este, se você não está familiarizado, é um tema já construído. Você realmente não precisa entrar e criar recursos básicos, menos que você precise criar algo que ainda não existe. Porque se você olhar para o código deste tema, ele já está bastante cheio, então se eu olhar para qualquer seção, você verá que ele está bastante cheio de código. Nesta aula, o que eu vou fazer, é em vez de começar do ponto de um tema real, que é mais prático se você estiver realmente fazendo o desenvolvimento do tema da Shopify, vou começar com um tema muito bare-bones chamado New Theme. Este tema aqui você pode ver é muito nu. A página inicial não tem nada nela, se eu clicar em Catálogo, ela me leva para a coleção onde vejo todos os produtos, e está paginando por dois produtos de cada vez. Lembre-se de que, para que você teste e programe um tema da Shopify, você precisará de alguns dados da loja, então já coloquei esses dados fictícios. Você também precisará colocar alguns produtos de teste se quiser exibir alguma coisa. Se eu clicar no Blog, você pode ver que copiei algumas postagens do blog do site oficial da Shopify. Agora, se você quiser codificar junto, e usar esse tema exato, a maneira como eu gerei esse tema, e a razão pela qual ele é chamado de Novo Tema é, porque eu usei um comando no Kit de Temas, chamado, Tema Novo, então para aqueles de vocês que não estão familiarizados com o Kit de Temas, não vamos entrar em grandes detalhes, eu tenho uma lição de 20 minutos na minha última aula aqui sobre desenvolvimento de temas da Shopify, tudo sobre como configurá-lo e configurá-lo, mas é isso que eu estou falando sobre quando eu falo sobre o Shopify Theme Kit. É basicamente uma ferramenta de linha de comando que você pode usar para baixar seu tema, e então você pode editá-lo com seu próprio computador. Eu recomendo que, se você estiver fazendo o desenvolvimento de temas da Shopify seriamente, use o Kit de temas. Mas como esta classe não é realmente sobre fluxo de trabalho de desenvolvimento e apenas sobre programação, eu vou estar usando o editor de código on-line, então eu vou apenas clicar em Editar código aqui, e nós vamos editá-lo diretamente a partir daqui. Agora devo mencionar uma outra estrutura e ferramenta que você pode usar para criar temas da Shopify, é chamado de ardósia, então, se eu digitar o Shopify Slate no Google, você pode aprender mais sobre isso. Como você pode ler nesta página do GitHub, ardósia está em baixa manutenção. Slate é um projeto que a Shopify criou, mas eles não estão realmente mantendo no momento, que pode mudar no futuro, e a ardósia é muito mais técnica e difícil de configurar, então não vamos nos concentrar em ardósia nesta classe também. Eu só pensei que seria negligente de mim para não mencionar, e novamente, se você quiser aprender mais sobre ardósia, há um vídeo bônus na classe anterior sobre o desenvolvimento do tema da Shopify, vá conferir. É o segundo último vídeo. Agora, me livrando dessa guia lá e voltando para o nosso Novo Tema aqui, a razão pela qual eu queria começar com o Novo Tema é que ele é silencioso nu, então podemos ver aqui não há muito código Liquid, há apenas 10 linhas no arquivo de índice, há apenas um layout, e se formos até aqui para seções e trechos, eles estão completamente vazios. Há apenas um arquivo de idioma e um arquivo CSS, e um arquivo JavaScript. Isso é muito bare-bones, e vai nos permitir aprender os conceitos de programação Liquid mais fácil sem ter que peneirar através de um monte de HTML e CSS que existiriam em um tema totalmente construído. Como mencionei anteriormente, você pode considerar Liquid a linguagem de programação back-end dos temas da Shopify. O que eu quero dizer com isso é que todo esse código é gerado no lado do servidor, e então ele vem através do lado do cliente em HTML e CSS. Só para demonstrar que para aqueles de vocês que o conceito não é particularmente claro, olhem para todas essas tags líquidas, estas não vão passar no front-end, é tudo gerado no lado do servidor, e então ele vem através do front-end como apenas HTML e CSS, por isso, se eu clicar nesta página, que me leva ao modelo de coleção, e eu inspecionar o que está acontecendo aqui, eu não vou ver nenhum código Liquid de qualquer forma. O código Liquid está todo no lado do servidor, então a razão pela qual isso é importante é, porque qualquer coisa que eu queira fazer que eu queira no lado do cliente, ainda tem que ser feito com JavaScript, e isso se torna um problema do como acessamos esses dados usando JavaScript e, em seguida, trabalhamos com eles no front-end sem ter que recarregar a página. Você deve estar familiarizado com a diferença entre o lado do servidor e o lado do cliente, se não, confira minha primeira classe em Compartilhamento de habilidades, Eu tenho um vídeo sobre a diferença entre front-end e back-end. Mas isso é apenas algo a notar. Liquid cobre a maior parte da programação da Shopify, mas, claro , se você quiser mais recursos interativos , se quiser evitar recarregar a página, terá que usar JavaScript. Voltando ao código, você pode ver um monte de tags Liquid, e você pode ver que eles até começam com um colchete e um sinal de porcentagem, e terminam com um sinal de porcentagem, ou há apenas duas chaves, e a diferença entre essas duas tags é, isso é para lógica, e isso é para saída. O que eu quero dizer com isso é, se eu apenas jogar o título do ponto da coleção entre essas tags chaves duplas, ele vai apenas produzir o título da coleção. Não há nenhuma operação ou lógica acontecendo nele, a menos, é claro, que eu use um filtro que está aqui embaixo. Obviamente, há muitos conceitos e sintaxe dentro do Liquid, e para isso, eu criei minha própria documentação para isso. Esta é a minha postagem de blog que ainda não está fora, mas estará fora quando você estiver assistindo este vídeo, então eu ainda estou trabalhando nele. Mas, essencialmente, este vai ser o livro didático ou referência para esta classe, então é um artigo muito longo, eu abordo todos os objetos, todos os filtros, todas as tags dentro do Liquid, então para esta classe, Eu pensei em passar por toda a teoria, mas eu pensei que seria muito melhor para você realmente ler sobre essas coisas, e então nós podemos realmente praticar e vê-lo em ação em nosso tema, então eu vou criar esses padrões e quebrar isso, mas para referência, vamos usar este documento. Este artigo vai ser em christhefreelancer.com/shopify_liquid_guide, então definitivamente abra isso , leia, você não precisa ler a coisa toda. Eu definitivamente recomendo que você ler skim-uma vez que chega aos objetos, mas esta vai ser sua referência. Além disso, há dois outros recursos que eu quero vinculá-los, e eles estão realmente ligados no artigo, a documentação oficial real, então em áreas onde ele fica em profundidade a partir de nós falamos sobre a lista de atributos, a referência Liquid ainda será um ótimo lugar para você aprender tudo sobre os diferentes objetos, tags e filtros dentro do Liquid, então ele tem uma quantidade incrível de detalhes, por exemplo, se eu entrar, digamos que o objeto do produto, você verá todos os atributos, e você pode aprender tudo sobre eles, então este artigo não se destina a substituir a documentação, mas é um bom ponto de partida, e eu acho que um boa visão geral de como tudo funciona, e ele links para a documentação numerosos lugares. Há também a famosa Folha de Cheat, então abra isso em outra aba, e isso aqui está todos os objetos, tags e filtros na mesma página, por exemplo, se eu quisesse descobrir como obter o título de um produto, eu poderia Control-F produto, e então eu encontrar este pequeno acordeão aqui para o objeto do produto, me dá todas as mesmas coisas que estávamos olhando antes na documentação, mas neste pequeno acordeão apertado, e, em seguida, ele me dá um pouco de informação sobre isso, então eu posso clicar em Saiba mais e ele vai me levar de volta para a documentação. Estes são os recursos que eu recomendo ter aberto, ou ter pronto enquanto você tomar esta classe, a Folha de Cheat para referência rápida, obteve a documentação para qualquer coisa detalhada, e, claro, meu artigo como uma visão geral da Shopify Liquid, e se você está lutando para entender o que é uma dessas coisas, onde você pode encontrar esses objetos, meu guia é o que pretende ajudar nisso. Como escrevi aqui no início do artigo, “Embora o Liquid Reference da Shopify e a famosa Folha de Cheat sejam ótimos, sinto que faltam muitos detalhes e é por isso decidi escrever minha própria documentação”. Então, como mencionei, há algumas coisas sobre as quais a Shopify realmente não fala, os diferentes tipos de objetos e onde eles estão disponíveis no escopo do seu tema da Shopify, essa é a principal razão pela qual escrevi este artigo, você pode ver aqui, não só você pode aprender mais sobre objetos, mas você também pode aprender, eles contêm vários objetos? Onde você pode acessá-los? Você pode passar por eles? Então, só uma referência extra para você. Se você tiver alguma dúvida, perguntas específicas sobre o Liquid, por favor, verifique primeiro a postagem do blog e, em seguida, se você ainda estiver lutando, definitivamente deixe um comentário na caixa de discussão. Agora, mencionamos o JavaScript antes como a maneira de fazer qualquer coisa interativa em nosso tema da Shopify, e uma maneira pela qual a Shopify nos permite acessar e manipular dados do nosso tema da Shopify usando JavaScript é, por meio da API do Ajax, então, se eu procurar, API do Shopify Ajax, você pode saber mais sobre isso aqui. Mas vamos ter uma lição completa ou duas sobre a API do Ajax. Não se preocupe. Apenas informando que temos uma API para fazer a solicitação do lado do cliente também. O outro código que você vai escrever quando estiver programando temas do shopify é CSS ou SCSS. Você deve estar familiarizado com CSS. Se você não está familiarizado com SCSS, é uma forma de SASS, que é basicamente uma linguagem de programação para CSS. Não é necessário conhecer a sintaxe do SASS. SASS é compatível com CSS e, de fato, uma vez que o código chega ao front-end, ele é sempre compilado para CSS de qualquer maneira. Se você quiser colocar em CSS especificamente aqui, você pode fazê-lo normalmente, mas, se você sabe como usar SASS, você pode usá-lo também. Para aqueles que sabem como usar o SASS, um aviso é que a shopify usa uma versão mais antiga do SASS. Acredito que seja 3.3 ou algo assim. Isso significa apenas que todos os recursos da versão mais recente do SASS não estarão disponíveis para você quando você estiver desenvolvendo temas do shopify. Se você encontrar algo um pouco estranho, que está quebrando, que é perfeitamente sintaxe fina, pode ser porque você está usando uma versão mais antiga do SASS. Outro aviso ali. Não se preocupe. Se você não sabe nada sobre SASS, CSS é totalmente bom. A sintaxe final que você terá que se acostumar com temas shopify, é claro que temos Liquid, temos JavaScripts e temos CSS/SCSS. Mas você também verá aqui que temos arquivos JSON. Se eu abrir settings_schema.json, isso é JavaScript Object Notation, também conhecido como JSON. É apenas uma forma de apresentar dados facilmente. Ele imita a estrutura de um objeto JavaScript, mas tem algumas diferenças. Você pode ler mais sobre JSON no Google, mas é bastante simples de entender. Bem aqui temos uma matriz se abrindo, e então dentro temos um objeto. Se quiséssemos escrever outro objeto aqui, faríamos assim e podemos dar-lhe chaves e valores aqui. Todas as chaves precisam ser com aspas duplas. Essa é uma das principais diferenças com JSON e quaisquer strings obviamente com aspas, bem como a menos que estamos colocando em um número que não precisamos de aspas para. Tudo bem. As áreas que você verá JSON nesses arquivos settings_schema.json, o arquivo settings_ data.json e seus arquivos de localidade, en.default.json. Novamente, vamos rever JSON e como tudo isso funciona com esses vários arquivos em um vídeo posterior. Não se preocupe com isso. Só te dando uma visão geral antes de saltarmos para o líquido. Isso abrange praticamente todas as áreas do seu tema da Shopify. Você deve saber sobre a estrutura de temas da última classe. Temos layout, modelos, seções e trechos para estruturar nosso tema da shopify. Então temos nossos ativos que contêm o CSS e JavaScript, config que contém dados e as configurações que somos capazes de alterar e localidades para armazenar linguagem. A última coisa que eu preciso mencionar neste vídeo introdutório é algo que é muito importante para a Programação de Temas da Shopify, e essa é a idéia de modelos e escopo. Se formos visualizar nosso tema e navegar para determinadas páginas, você pode ver nossa estrutura de modelo na estrutura de URL. Agora estamos no domínio raiz. Não se confunda com esse pequeno atributo extra. Mas estamos no domínio raiz, que é o modelo de índice. Se formos para aqui, você pode ver que o URL muda para coleções/todos. Isso significa que estamos no modelo de coleção. Se eu mudar a coleção real que estamos olhando para um que eu tenho na minha loja chamado coleção em destaque, você pode ver tudo parece o mesmo, É apenas o título da coleção que é exibido aqui e os produtos reais que aparecem na página são diferentes. Tudo isso é controlado pelo modelo de uma coleção. Se eu clicar em qualquer um desses produtos, você verá que nós obtemos produtos e, em seguida, o nome do produto em forma de identificador, vamos falar mais sobre identificadores mais tarde, é adicionado ao URL. Agora sabemos onde no modelo do produto. Se eu voltar para a minha página de coleção e clicar neste produto, você verá que ele aparece exatamente da mesma maneira que o outro produto porque ele usa o mesmo modelo. Como isso parece em nosso código é, entramos em nossos modelos aqui, e aqui está o código que aparecerá para cada página de coleção única. A referência à coleção aqui realmente depende de qual coleção você está. Mas é completamente dinâmico para que qualquer coleção que você está em é alimentado aqui através do objeto de coleção e você pode manipular qualquer coleção é passada da mesma maneira que você faria outra coleção. Quando você está na página do produto, você está no modelo do produto. É o mesmo código para cada produto que exibido em seu site, a menos que você use modelos alternativos, sobre os quais falamos na última classe, mas essencialmente, tudo o que vai mudar na página é o conteúdo dinâmico e que é trazido aqui com este objeto de produto. Eu falo sobre isso no artigo que eu chamo modelos escopo específico. Se rolarmos para baixo, falo sobre os objetos que podem ser acessados de qualquer lugar no seu tema como objetos globais. Se você souber o nome real do seu produto, você pode acessá-lo de qualquer lugar do seu tema usando seu identificador. O mesmo pode ser dito para páginas, blogs, artigos, imagens. Imagens é através do nome do arquivo lá. Mas, em seguida, você começa a modelar variáveis específicas se você rolar para baixo, modelo objetos específicos em vez disso. Esses objetos estão disponíveis quando você está no respectivo modelo. Se você estiver no modelo de produto, terá acesso ao objeto de produto e esse objeto de produto será qualquer produto que você estiver visualizando, e você poderá ver isso na URL. Estamos olhando para uma bolsa de couro preta. Quando fazemos coisas com o objeto do produto no modelo do produto, estamos olhando para essa bolsa de couro preta. Os modelos que temos aqui todos têm seus próprios objetos que devem ser rotulados da mesma forma. No modelo de coleção, temos acesso ao objeto de coleção. No modelo de blog temos acesso ao objeto de blog. Modelos aqui, e isso é algo que vamos obter mais em modelos de codificação e layouts no próximo vídeo, mas modelos são basicamente os diferentes grupos de páginas que aparecem em seu site. Seções muito poderosas e trechos ótimos para reutilizar código. Falaremos sobre eles na lição depois da próxima. Mas acho que já falei longamente sobre o Shopify Liquid. Mais uma vez, estas são óptimas referências. Não quero ver o documento inteiro porque é enorme. Mas no próximo vídeo, vamos direto para codificar um padrão comum no shopify e aprender como usar layouts alternativos. Vejo-te no próximo. 5. Layouts e modelos de programação: Nesta lição vamos nos concentrar em arquivos de programação, layout e modelo. O modelo em que vamos focar é o modelo collection.liquid. A razão pela qual eu decidi usar este é porque os produtos são centrais para qualquer loja da Shopify, ou pelo menos deveriam ser, porque essencialmente uma loja de comércio eletrônico está configurada para vender produtos. Os produtos são o recurso mais importante em sua loja da Shopify, provavelmente. Uma das maneiras pelas quais as pessoas podem navegar através de diferentes produtos é através de uma coleção. Podemos ver aqui um loop bastante simples aqui para o modelo de coleção, mas ainda há um pouco acontecendo aqui. O que quero fazer é simplificar esta situação e abordar esta linha por linha. Primeiro de tudo, eu vou pré-visualizar isso em uma nova guia. Podemos ir para aqui e podemos ter certeza de que estamos em um modelo de coleção, verificando que coleções está na URL. Agora temos o nosso front-end, como fica com o nosso modelo que estamos editando. A primeira coisa que vou fazer é remover a paginação e tirar isso para um simples loop. Paginação é útil, mas não quero confundi-lo, então vamos removê-lo por enquanto. Vamos ver o que acontece quando fazemos isso. Se eu atualizar a página, você verá agora todos os produtos em nossa loja estão sendo exibidos em uma página. Normalmente você não quer fazer isso porque você pode ter centenas ou milhares de produtos e que levaria uma eternidade para carregar uma página. paginação é muito útil, apenas removendo-a por causa da simplicidade. Agora, para torná-lo ainda mais simples, vou remover esse código e retirá-lo ainda mais. Acabamos de receber esse loop agora e vamos dar uma olhada em como isso fica na frente. Atualizando a página. Você pode ver que agora temos apenas uma lista de produtos com um link para visualizá-los. Se eu clicar no primeiro, tênis incríveis, estou agora no modelo de produto olhando para este produto, tênis incríveis. Mas estamos focados neste ciclo de coleções aqui. Vamos quebrar o que está acontecendo aqui. Em líquido, como já mencionei antes, temos dois tipos de etiquetas. Na verdade, há três, e nós podemos colocar em um traço aqui e aqui e isso apenas reduz espaços em branco, ele realmente não altera a funcionalidade em tudo. Não me preocuparei muito com isso. Mas, essencialmente, temos apenas dois tipos diferentes de tags, a tag de saída e a tag lógica. Quando queremos apenas direcionar algo de saída para a página, basta usar a tag de saída. Agora estamos tomando um atributo no objeto de coleção do título. Aqui você pode ver, este é o título das coleções. Agora é um pouco diferente com a coleção antiga porque é uma coleção gerada automaticamente pela Shopify, mas se formos para uma coleção real que eu criei, coleção em destaque, agora você pode ver que o título dessa coleção está aqui. Se eu fosse voltar ao meu back-end, mudar isso, mudaria aqui e em qualquer outro lugar que referenciamos collection.title. Em seguida, entrando em um loop agora, o que eu estou fazendo é que eu estou tomando o atributo produtos da coleção, que me dá acesso a todos os produtos dentro dessa coleção e eu estou looping através deles usando a palavra produto como meu gancho, a fim acessar os diferentes atributos desse produto em particular. Esta palavra pode ser qualquer palavra que eu quisesse que fosse, mas produto faz sentido. Torna-o mais legível. Para produtos em collection.products, vamos fazer isso para cada produto. Agora, algo que existe em for loops in Liquid, que eu não sei se ele existe em qualquer outra língua, é que você pode realmente ter uma outra declaração. Isto é, se collection.products estiver vazio, ele não fará loop através dele e, em vez disso, ele irá produzir isso. O mais nesta instância é para quando os objetos que você está fazendo loop estão vazios. É apenas uma abreviação para se eu colocasse uma declaração if aqui em cima, verificando se o comprimento disto era maior que zero, e então se não colocar isso para fora, podemos salvar algum código e escrevê-lo desta forma. Para cada produto em collection.products vamos começar um div e dentro deste div vamos ter um link. Para o endereço real desse link, vamos colocar no product.url, então o link para o produto real. Então temos este cachimbo aqui. Este tubo aqui é o que define um filtro em Liquid. Podemos remover isso, vai funcionar muito bem sem isso. Primeiro de tudo, vamos olhar para ele com esse filtro. Se eu ir e inspecionar aqui e eu olhar para o URL, você pode ver que o URL tem recursos-coleção e, em seguida, nas extremidades, produtos/incríveis tênis. Mas se removermos esse código e apertarmos Salvar, esse filtro não se aplicará e a URL que obteremos em vez disso é apenas produtos/tênis incríveis. Este filtro que temos aqui dentro da coleção, ele apenas faz o URL do produto anexar ao URL que estamos atualmente em para esta coleção em vez de cortar a coleção. Isso é útil para se queremos ter lógica no modelo de produto e podemos referenciar a coleção que navegamos porque um produto pode fazer parte de muitas coleções diferentes. Voltando para a página da coleção aqui, a próxima parte, muito simples. Acabamos de emitir o título do produto. Você pode ver que aqui, temos um link e dentro dele está o título do produto e o a href é o link para esse produto. Coisas muito simples. Vamos adicionar na próxima linha que tivemos aqui. Eu vou adicionar em todos eles, remover todos eles, exceto um, e apertar Salvar sobre isso. O que temos aqui é que estamos produzindo o preço também. Produto muito básico. Preço e estamos usando outro filtro chamado dinheiro, que formata em um formato de moeda agradável. Se eu fosse remover o filtro de novo, você verá que ele ainda funcionará. Vamos atualizar a página. Você terá o preço de todos esses produtos chegando na forma de número puro. Na Shopify, a forma de número puro de um preço inclui os centavos. Você pode ver aqui isso vai ser 8.000 centavos, isso é 11.000 centavos assim por diante, assim por diante. Obviamente isso não vai parecer tão bom para o usuário final, então o que normalmente fazemos é filtrá-lo com o filtro de dinheiro e isso vai transformar esse número em um formato de moeda formatado muito mais agradável. Agora podemos ver que 8 mil centavos se tornam 80 dólares e temos aqueles decimais. Podemos usar outros filtros de dinheiro para filtrar os decimais se quisermos, mas o dinheiro é o padrão. Vamos adicionar na próxima linha e remover a linha final. Agora nós adicionamos uma declaração a menos. A tag a menos é basicamente o oposto da tag if. Ele lê de uma maneira diferente. A menos que o produto esteja disponível, vamos fazer isso. Podemos facilmente transformar isso em uma declaração se, só temos que mudar a condição aqui. Eu acho que, neste caso, faz mais sentido que em termos de compreensão do código para fazer isso uma afirmação if. Vou remover a menos que palavras e o que precisamos fazer aqui, se o produto disponível é falso, ou também podemos fazer se o produto disponível não é verdade. Vamos apenas fazer falso. Precisamos fazer para comparação sinais de igualdade duplos ou triplos sinais de igual, porque um único sinal de igual é para atribuição, não para comparação. Lembrem-se que é um erro básico comum de iniciantes. Eu acho que isso lê muito melhor se o produto disponível é falso, como no produto não está disponível, queremos mostrar esgotado, e isso funcionará exatamente da mesma maneira. Se eu for até aqui, você verá nenhum desses realmente esgotado, então nada vai aparecer de qualquer maneira. Mas se eu voltar para a antiga coleção, eu criei um produto que está esgotado. Eu só chamei de produto sem imagem e sem estoque e você pode ver aqui que está esgotado. Se eu voltar a colocar isto como era antes e eu apertar Salvar nisso, você vai ver que temos exatamente o mesmo resultado. A menos que seja apenas uma maneira de tornar seu código mais legível. Neste caso, eu acho que faz mais sentido usar se, mas eles decidiram usar a menos que aqui. Poupa-os de ter que escrever um operador de comparação. Acho que foi por isso que fizeram isso. A linha final dentro deste loop é esta tag link. Estamos novamente criando um link com a mesma tag e filtro como acima aqui. Isso irá vincular ao URL do produto, o produto real. Vamos incluir a imagem. A coisa real para olhar aqui é a linha oito, porque estamos construindo uma tag de imagem aqui com alguns atributos e alguns filtros. Eu vou apertar “Salvar” e vamos rapidamente ver como isso parece. Agora você verá que temos as imagens incluídas aqui como antes. Vamos quebrar isso. Vamos primeiro remover este filtro aqui e ver o que acontece. Agora estamos apenas carregando a fonte de imagem em destaque do produto nesta tag de origem. A imagem é um objeto também. É por isso que podemos encadear outro ponto aqui para obter o src real da imagem. Você pode ver aqui nós estamos recebendo um atributo diferente da imagem aqui, a tag alt, mas nós vamos chegar a isso em apenas um segundo. Se eu salvar e voltar para a página da coleção. Agora você verá que todos os links estão quebrados. Se eu inspecionar um deles, você verá que temos um URL relativo, mas não funcionará na Shopify. O que precisamos fazer passar essa imagem através de um filtro. O filtro que tínhamos é a URL da imagem. Aqui você pode ver um parâmetro de grande, mas podemos remover esse parâmetro e apenas ter a tag URL de imagem sem parâmetro. Se voltarmos para trás, atualizarmos a página, você verá que as imagens aparecem, mas todas elas aparecem com 100 pixels de largura. Esse é o comportamento padrão. Mas podemos mudar isso para o que você quiser. Talvez queiramos que seja 200 por 200. Podemos fazer algo assim, ou se quisermos que seja da mesma largura e altura. Na verdade, não precisamos colocar o valor depois de x. podemos apertar “Salvar” nisso. Agora devemos ver que nossa imagem está sendo duas vezes maior. Lá vai você. Eu acho que é um bom meio termo entre essas imagens realmente grandes e as que saem por padrão, que é um 100. Agora, isso é realmente útil para ter isso, pois você pode colocar uma imagem realmente grande em seu painel da Shopify, mas desde que você escreva um código que limita o tamanho dessa imagem, então é o tamanho que a imagem será carregada no navegador. O que eu quero dizer com isso é se nós realmente ir e clicar na imagem aberta em nova guia. Se a imagem original que carregamos tinha 1.000 pixels de largura ou 200 pixels de largura. Ele só será servido dos servidores da Shopify como uma imagem de 200 pixels por 200 pixels. Isso é bom para otimização de imagem. Então, regra geral aqui, se você estiver incluindo uma imagem, sempre use o parâmetro aqui e especifique as dimensões máximas que você acha que a imagem precisa ser. Porque não adianta servir uma imagem que é muito maior do que aquilo que você precisa dela. Esta tag final é para o atributo alt da sua imagem. Deve estar familiarizado com atributos alt. Eles descrevem a imagem para robôs e pessoas que podem realmente ver a imagem. Aqui você pode ver sapatilhas alt impressionante Se eu remover o filtro de escape aqui, você provavelmente não foi notado uma diferença. Volte, atualize a página. Verá que ainda temos o mesmo resultado. Mas o que o filtro de escape faz é que, se houver algum HTML neste atributo, ele se certifica de escapar dele. Isso é algo que pode pegar você em qualquer momento com a programação de temas da Shopify e desenvolvimento de temas da Shopify é HTML proveniente de objetos na Shopify, sendo injetado em seu código e quebrando tudo. Só uma dica se você vir algo realmente estranho, você está páginas inteiras quebrando e você não escreveu nenhum código para que isso acontecesse. O código pode vir de um valor que você está trazendo e líquido. Boa prática só para ser seguro, escapar. Agora eu não acho que vai haver HTML em sua tag alt tipicamente. Mas apenas uma pequena opção segura lá. Você não quer qualquer HTML vindo através deste atributo alt. Agora, não é estilo bem. Precisamos ainda estilizado com CSS. Mas temos os principais pontos a chegar. Nós temos o título, o preço e a imagem, e a imagem e o título link para o produto real para nós irmos conferir. Vamos voltar para a página da coleção. Agora só precisamos apresentar de volta o objeto paginado. Por isso, porque eu não sei como fazer isso porque já está escrito para nós a maior parte do tempo na Shopify. Vou acessar o final dos documentos. Esta é uma boa oportunidade para acompanhar também porque é isso que você vai estar fazendo também. Se eu apenas digitar o líquido da Shopify, o que estou procurando é a referência do líquido, digamos aqui. O que estamos procurando? Estamos procurando a etiqueta do paginate. Vou entrar em etiquetas. Eu acho que seria fechado como uma tag tema, e é. Você pode clicar aqui, e lá vai você. Tudo que você tem que fazer é enrolar essas etiquetas em torno de um loop for-loop e você recebe paginação. Bastante simples. Paginação é um pé no saco para muitas outras programações, mas a Shopify torna as coisas muito fáceis para nós. Estamos no modelo de coleção para que possamos apenas copiar este exemplo. Eu posso voltar aqui. Acho que cinco por página é um número certo para nós. Podemos codificar a etiqueta final de ressonância magnética também aqui e paginar. Vou acertar em “Save” nisso. Volte para aqui, atualize a página e verá que apenas cinco itens aparecem por página. Agora, o que isso não nos dá é a navegação para realmente paginar. Porque estamos faltando um pedaço de código desde o início daqui. Para verificar se podemos realmente ir e clicar aqui e olhar para versões mais antigas. Vejamos o original antes de fazermos qualquer alteração. Podemos ver aqui, temos isso condicional. Vou copiar isto e voltar para a nossa corrente. No final do loop for-loop, vou colar o código que tirei do código original. Agora podemos acessar o objeto paginate, que está disponível dentro da tag paginate. Este é um objeto auxiliar que a Shopify nos fornece para que possamos realmente verificar quantas páginas há nesta paginação. Você verifica as páginas de código de atributo e verificamos se há mais de uma página. Agora podemos usar o objeto paginate novamente com um filtro fácil de usar, que irá transformar o objeto paginate em uma paginação padrão. Muita magia está acontecendo nos bastidores aqui. Se você quiser personalizar sua paginação, você pode acessar os atributos nesses objetos paginados e manipulá-los como quiser. Mas para os nossos propósitos, vamos apenas usar a paginação padrão. Eu atualizo a página aqui depois de salvar, e agora você pode ver que temos essa paginação padrão. Normalmente, o que você faria, porque você provavelmente não estaria usando a paginação padrão em um tema apropriado porque você gostaria de olhar bonito e de acordo com seu estilo. Normalmente, você criaria um trecho de paginação e o incluiria aqui. No próximo vídeo, falaremos sobre seções e trechos. Não muito tempo para aprender sobre trechos, mas para terminar esta lição, preciso falar com vocês sobre layouts. Poderíamos ter começado com um layout, mas eu queria começar com o arquivo de linha 18 em vez deste que é 43 linhas. Para aqueles de vocês que precisam de uma pequena recapitulação sobre o que é um layout, isso é o que é servido como um wrapper em todos os seus templates. A menos que você especifique um layout alternativo em um modelo, este será o wrapper que percorre cada modelo em sua loja. Assumindo que temos apenas um layout aqui, e ele está usando o nome padrão theme.liquid, este vai ser o wrapper que envolve cada template, e o ponto que ele envolve é bem aqui. Esta tag especial, content_for_layout é onde seu modelo é carregado. Quero mostrar-lhe isso no treino agora. Podemos ver que essa tag principal vem no arquivo de layout e, em seguida, dentro disso, estamos carregando o modelo. Vamos para o nosso modelo de coleção novamente, e veremos que começa com um h1. Se eu olhar aqui e inspecionar o código, eu já tenho o inspetor aberto, mas você vai ver que temos o h1 do modelo de coleções, e então temos main. Tudo acima aqui será o mesmo, além do conteúdo dinâmico que é carregado em cada página. Se eu for para a página do blog, você verá a cabeça e o início do corpo é o mesmo, e você sempre tem este principal aqui, então dentro do principal, você tem todo o código do modelo. Voltando para a página de coleções. CONTENT_FOR_Layout, é onde o modelo da página que você está vendo está carregado. Mas é claro, temos todo esse outro conteúdo em torno dele. Aqui está uma navegação. Aqui está um link para um carrinho. Se as contas de cliente estiverem ativadas e um cliente estiver conectado, mostraremos um link para acessar suas contas. Se eles não estiverem conectados, mas as contas estiverem ativadas, nós forneceremos um link de login. Vamos mover isso para sua própria seção no próximo vídeo. Há uma boa razão para isso, mas isso compõe toda a seção do corpo do seu layout. Então você tem a seção principal, que você só precisa se preocupar se você vai incluir ativos extras. Você pode ver todas as coisas padrão que você teria em uma cabeça HTML. O título, meta tags, esses objetos para SEO. O título da página é qualquer que seja o título da página, não é o mesmo que page.title porque não é uma página da Shopify que as que você personalizaria aqui, é qualquer página que você esteja, o site, isso é o título da página. Então page_description é sua descrição de SEO, você adiciona seus dados de SEO aqui e então você tem essa tag especial chamada content_for_header. Como diz aqui, este é simplesmente um gancho de cabeçalho para plugins. Este é um ponto que plugins e eu acredito código que você coloca ou preferências que você coloca aqui. Se eu entrar em preferências, basicamente qualquer coisa que você quiser adicionar à sua cabeça dinamicamente, ele será inserido onde essa etiqueta está. Eu acredito que um pouco disso, se você adicioná-lo em um Pixel ou um Google Analytics, e o lugar onde ele iria inseri-lo na cabeça está bem aqui, mas você não precisa editar isso em tudo. Na verdade, eu acho que o editor irá errar, se você tentar mudar isso, isso é o que content_for_header é. Não precisa mudar, apenas deixe onde está. Então aqui é quando trazemos nossos bens. Temos alguns filtros aqui, e vou mostrar-lhe o que estes fazem rapidamente. Nós temos este application.scss.css e se nós apenas produzir isso no layout por si só, número um ele vai quebrar qualquer estilo que nós criamos, mas você vai ver aqui, ele apenas literalmente emite esse texto para a tela. Se você criar uma tag de saída e simplesmente colocar uma string lá, você basicamente não está fazendo nada. Você pode remover isso de ambos os lados e será o mesmo resultado. Mas o que estamos fazendo aqui é pegar isso e estamos filtrando, estamos encontrando o URL completo do ativo desse ativo. Vamos fazer isso primeiro. Atualize a página e agora você pode ver que isso se torna um URL completo gerado pelo servidor da Shopify que o vinculará ao ativo. Então, finalmente, com o último filtro lá, ele transforma esse URL em uma tag de folha de estilo totalmente construída. Se eu pressionar Salvar, atualize a página, você verá que o URL não aparece agora porque está encapsulado em uma tag HTML. Se eu olhar aqui em baixo, há um monte de tags geradas lá dentro. Você pode ver que um agora trazê-lo nosso projeto para uma tag de link e não apenas enviá-lo na tela. Podemos copiar essa palavra HTML por palavra, colocá-la aqui assim. Então, se removermos isso, que gera a tag stylesheet e apenas substituir o href por esse valor, devemos obter o mesmo resultado. Agora devemos vê-lo aparecer duas vezes, na verdade. Claro, porque tirei a etiqueta da folha de estilo desta. Este está apenas mostrando o URL do ativo e este é o link totalmente formado para o ativo. O que eu acabei de fazer isso com esta linha é essencialmente a mesma coisa que se eu usasse o filtro tag stylesheet lá. Não é importante para você entender em termos de edição isso porque você provavelmente não quer tocar nisso, mas é importante saber como ele funciona você não está confuso quando, por exemplo, você quer incluir outra folha de estilo tag, você teria apenas que duplicar isso, colocá-lo sob, e então talvez seu próximo arquivo seja chamado apenas styles.css. É assim que você incluiria um novo recurso que você incluiu aqui no seu tema da Shopify em todos os lugares em que esse layout esteja incluído. Mas em termos de transformar isso em um URL de ativo completo e, em seguida, criar uma tag fora dele, você realmente não precisa mexer com isso. O mesmo está acontecendo aqui com o JavaScript, onde pegar o nome do arquivo, criar um URL de ativo completo da Shopify e depois transformá-lo em uma tag de script. Vou guardar isso. Isto é mais uma coisa de estruturação de temas. Mas só para demonstrar, vou mostrar-lhe como fazer um modelo alternativo. Aqui podemos criar, vou chamá-lo de alternativo. Pode chamá-lo do que quiser. Vamos apenas remover todo esse conteúdo de navegação e clicar em Salvar. Agora temos esse layout alternativo que podemos usar. Como nós realmente fazer esse layout se aplicar a um determinado modelo é podemos ir para a linha inicial de qualquer modelo e usar a tag layout. Em vez de theme.liquid, agora ele vai ser tema alternativo e se eu colocar essa tag no início do nosso template, atualizar a página, agora você vai ver que não há navegação. Tudo bem. Se eu removê-lo e pressionar Salvar, agora você verá que temos o mesmo tema de antes. Na maioria das vezes, não é importante ter um segundo layout, mas ele está lá como uma opção. Eu só vou excluir esse porque nós não queremos ter que fazer alterações vários layouts de tema para este projeto e para esta classe, nós realmente precisamos apenas de um arquivo de layout, mas a opção está lá para criar layouts diferentes. Talvez você queira uma página com menos conteúdo nela. Talvez não queiramos o cabeçalho ou rodapé, por exemplo. Podemos remover isso de um layout alternativo e, em seguida, usar esse layout no modelo. Felizmente, isso deixou muito claro o que está acontecendo em um modelo básico como aqui para a coleção e seu arquivo de layout. O que quero deixar com vocês antes de entrarmos em seções e trechos, é essa parte da minha documentação, que é objetos específicos do modelo. Falei um pouco sobre isso no vídeo anterior. Mas eu só quero ter certeza que você entenda isso completamente. Começamos com o arquivo de layout e, em seguida, o modelo para a página onde atualmente olhando é carregado dentro deste contêiner aqui porque nós colocamos esta tag content_for_layout aqui. Agora temos acesso aos objetos específicos que vai com esse modelo. O que eu quero que você entenda aqui é que quando estamos no modelo de coleção, nós não temos acesso a um produto porque nós não temos qualquer conceito de qual produto estamos procurando. A menos que nós loop através de uma coleção e acessar seus produtos, então nós podemos afetar um determinado produto de dentro de um loop. O mesmo pode ser dito se estamos em um blog. Quando estamos em um modelo de blog, estamos olhando para um blog específico. Podemos usar o objeto do blog, mas não podemos realmente acessar um artigo a menos que percorremos os artigos nesse blog. A mesma coisa com coleções e produtos. Mas quando entramos no produto ou na página do artigo, já vimos a página do produto ou o modelo do produto. Vejamos o modelo do artigo. Podemos acessar o objeto artigo especificamente porque este é o modelo que é carregado quando um artigo está sendo visualizado. Só queria deixar isso bem claro. Se ainda não fizer sentido, me dê um comentário na caixa de discussão abaixo, mas esse é o escopo do modelo e objetos específicos de modelos. É por isso que os modelos são realmente importantes. Mas, ao mesmo tempo, você pode não querer incluir muito código no seu modelo. Você pode querer vincular diretamente a uma seção e há uma boa razão para isso, que vamos falar no próximo vídeo. 6. Seções, snippets e locais: Nesta lição, falaremos sobre seções e trechos. Snippets é bastante básico e fácil de entender. Basicamente, se colocarmos código em um trecho, podemos incluí-lo em vários lugares em nosso tema. Ele nos permite reutilizar código, mas também organizar melhor nosso código. As seções, por outro lado, são um pouco mais inteligentes e vamos ver por que isso está nesta lição. Se voltarmos ao nosso tema. layout líquido, podemos ver uma necessidade realmente óbvia de uma seção aqui. Ou seja, temos todo esse conteúdo de cabeçalho dentro do nosso layout. Agora, o que você costuma fazer em um tema da Shopify é ter uma seção de cabeçalho e rodapé. O que eu vou fazer é cortar tudo isso para que fique na minha prancheta. Eu não quero perdê-lo, e então eu vou substituir isso por uma chamada para uma seção. Indo para escrever cabeçalho da seção. Agora, quando eu apertar Salvar, ele vai ligar para aquela seção que nós ainda não criamos. Vamos entrar, criar uma seção com o mesmo nome, cabeçalho. O editor adicionará automaticamente a extensão do dot liquid para nós, então não precisamos fazer isso, e também adiciona automaticamente um esquema, folha de estilo e tags JavaScript, muito útil. Ok, vamos entrar em esquemas em profundidade na próxima lição, mas por enquanto, o que eu vou fazer é colar esse código líquido e HTML diretamente aqui. Se eu pressionar Salvar, atualizar qualquer página porque cada página em um tema agora usa o mesmo layout, veremos que nada mudou, ok? Na verdade, algo mudou, e é que agora temos tudo isso encapsulado em uma tag div gerada pela Shopify. Ele fornece um ID do traço de seção da Shopify e, em seguida, o nome da seção. Ele também oferece uma classe da seção Shopify. Vamos criar outra seção, e vamos chamá-la de rodapé. Após o conteúdo principal, geralmente temos um rodapé e podemos colocar isso em sua própria seção. Se eu salvar isso, ele será vinculado a um rodapé que ainda não existe, então precisamos criá-lo. Vou criar este ficheiro rodapé.liquid nas minhas secções. Vou até aqui e vamos abrir uma etiqueta de rodapé. Feche a etiqueta do rodapé, e talvez coloque algumas informações de direitos autorais lá, Christopher Dodd. Há uma coisa que eu esqueci de fazer e que é realmente nomear a seção no esquema. Queremos alterar isso para rodapé e, em seguida, em nosso cabeçalho, queremos que o nome da seção seja cabeçalho. Isto é o que vai aparecer no personalizador. Como eu disse, vamos entrar mais em esquemas, mas basicamente tudo isso é para o personalizador. Se eu voltar para qualquer página porque todos usam o mesmo layout, podemos ver que temos uma tag semelhante gerada para o rodapé também. Shopify traço, seção, traço e o nome da seção que é rodapé e, claro, a seção Shopify da classe. Agora você pode ver aqui, não está bem formatado, mas dentro você tem a etiqueta de rodapé com direitos autorais Christopher Dodd. Agora o que eu quero mostrar a vocês é como isso fica no personalizador. Esta é uma boa representação visual do que está acontecendo aqui. Tudo o que eu fiz lá foi clicar com o botão direito do mouse em personalizar tema para ir para o personalizador para este tema. Agora você verá na página inicial que temos cabeçalho e rodapé. Estas são as seções como eles aparecem enact tema personalizador. Se formos para qualquer página, qualquer modelo, porque estamos usando o mesmo arquivo de layout, vamos obter cabeçalho e rodapé em cada página. Volte para a página inicial. Eu estou realmente indo para remover rodapé do nosso arquivo theme.liquid. Só para mostrar como isso apareceria no personalizador. Se eu for para o personalizador, atualize a página, então só vemos o cabeçalho. Isso é algo que eu cobri na última aula , então isso deve ser apenas uma recapitulação para a maioria de vocês. Mas como você pode ver o que este tema realmente suportar, criamos todas as seções que existem neste tema. Se formos para qualquer outra página, não há nenhuma seção entre cabeçalho e rodapé para este tema ainda. Se formos para configurações de tema, só temos a lista padrão de checkout de personalizações aqui. Podemos acrescentar a isso também. Aqui você pode ver a versão oficial deste. É o kit de tema, tema de modelo. Novamente, este é apenas o que você começa executando tema novo no kit tema. Tudo bem, então para criar nossa próxima seção, uma coisa que podemos modificar, e isso é algo que é bastante comum é pegar todo o código dentro de um modelo e movê-lo para uma seção. Isso pode soar um pouco estranho no começo, mas vamos explicar por que isso é em apenas um segundo. Eu vou chamar este modelo de coleção seção porque isso é essencialmente o que é. Então eu vou criar essa seção. Agora e aqui temos um esquema, e eu só vou colar exatamente o mesmo código que tínhamos em nosso modelo de coleção. Eu vou chamar este modelo de coleção no esquema real. Esse é o nome que aparecerá no personalizador. Se formos para a nossa página de coleção, agora vamos ver modelo de coleção, que é o nome que definimos no esquema para ser uma seção aqui. Como você percebe, porque não temos configurações em nosso esquema, ele diz aqui nenhum conteúdo ou configurações. Podemos personalizar isso. A razão pela qual nós teríamos um arquivo de modelo de coleção basicamente vazio e link direto para uma seção com todo o código para esse modelo lá, é porque agora podemos personalizá-lo usando o personalizador. Se deixássemos esse código aqui, ele ficaria fora de uma seção e então não teríamos acesso a um esquema para o qual podemos editar. Isso não é necessariamente verdade no sentido de que há um esquema de configurações para o tema como um todo, mas queremos seção as configurações para este modelo específico. Queremos movê-lo para sua própria seção. Ok, agora nós realmente não fizemos nada porque nós não definimos nenhuma configuração. Talvez eu queira criar uma configuração aqui e nós fazemos isso no objeto settings. O que é algo que eu poderia querer personalizar como o usuário sobre esta página. Bem, talvez eu queira controlar a paginação. Lembre-se quando eu digo usuário, eu estou falando sobre o administrador da loja que está usando este personalizador neste caso. Talvez eu queira controlar a paginação. O que eu vou fazer é abrir um objeto, e dentro deste objeto eu vou estar escrevendo, isso é tudo formato JSON a propósito, então vamos estar abrindo uma aspas duplas, e o que precisamos fazer aqui é inserir uma entrada. O lugar onde você pode saber mais sobre isso é se apenas as configurações de entrada do Google Shopify. Eu acredito que é na configuração de configurações de tema bem aqui. Se eu procurar configurações de entrada, aqui podemos ver as configurações básicas de entrada. Texto, por exemplo, esta é a configuração de entrada que colocaríamos. Também podemos colocar como um seletor de imagem, podemos colocar em um conjunto de botões de opção, um menu suspenso, todas as coisas, caixa de seleção. Para paginação, acho que faz sentido usar um controle deslizante de intervalo. Vai aparecer assim. A razão pela qual um controle deslizante de intervalo seria bom neste caso, é porque queremos restringir a entrada do usuário para algo razoável. Não queremos paginar menos do que dizer dois, e não queremos paginar mais do que 25. Caso contrário, levará muito tempo para carregar a página. O que podemos fazer é copiar este exemplo aqui, voltar ao nosso código. Que conta era essa? Ok, aqui vamos nós. Em vez de escrever esta palavra por palavra, vou apenas copiar e colar. Agora temos um objeto que representa nossa configuração. A primeira coisa que precisamos é o tipo, e isso define que isso vai ser uma entrada de intervalo. O ID é o que podemos usar para acessá-lo em líquido. Precisamos mudar isso para algo que faça mais sentido. Vou chamar-lhe paginação. Então aqui, precisamos inserir um valor mínimo. Porque este é um número, eu vou me livrar das aspas duplas e colocar em, digamos, cinco. O máximo que eles podem paginar por, eu vou dizer é 25. A etapa é o incremento que eles podem usar. Eu só quero que eles sejam capazes de fazer uma seleção em incrementos de cinco etapas. Unidades, podemos colocar aqui como produtos por página, mas infelizmente este atributo de unidade tem um limite de três caracteres. Então eu não vou usar a unidade neste caso. Rótulo é o que é mostrado para o usuário. Nós vamos escrever aqui produtos por página, e o valor padrão que eu vou fazer é cinco. Se eu apertar salvar aqui, não há erros, felizmente, e então eu posso atualizar a página. Então, uma vez que eu entrar nessa seção, podemos realmente encontrar nosso controle deslizante de alcance aqui e atualizá-lo. Agora, é claro, nós criamos esta seleção, mas nós realmente não fizemos nada com ela. Vamos precisar voltar para nossa seção, e fazer referência a esse valor de configuração por seu ID. Em vez de aqui onde diz às cinco, o que vou fazer é fazer referência a essa identificação. A maneira como fazemos isso é através do objeto de seção. Como estamos em uma seção, podemos acessar os dados dentro de um esquema de uma seção através deste objeto seção. Eu começo pegando esse objeto de seção, e agora eu essencialmente tenho acesso a isso e nós queremos entrar aqui. O que eu vou fazer, colocar. Settings. Agora, eu tenho acesso a todas as configurações, e dentro eu quero acessar este, que o ID é paginação. Vou digitar paginação, e isso deve ser tudo o que precisamos para fazer isso funcionar. Voltando, atualizando a página. Se eu entrar em modelo de coleção agora, e eu configurá-lo para 10, deve ser 10 aparecendo por página. Esta coleção tem apenas cerca de 10 produtos. Vamos para a velha coleção. Agora estamos em uma coleção que tem mais de 10 produtos. Você pode ver aqui, é padrão para cinco, 1, 2, 3, 4, 5, mas eu posso mudar para 10, aperte “Salvar”. A página será atualizada, e agora vamos paginar por 10 em vez de cinco. Então 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. Essa é uma maneira de tornar nosso modelo de coleção personalizável, usando uma seção e dando-lhe uma configuração de entrada em seu esquema. Em termos desta seção, o modelo de coleção, vou deixá-lo lá, porque vamos falar mais sobre esquemas, e adicionar mais algumas opções em vídeos posteriores. Mas o que eu quero mostrar é como podemos criar uma lista dinâmica de seções em nossa página inicial, usando o conteúdo de tag especial para índice. Agora, primeiro de tudo, vamos ter que criar uma seção que gostaríamos de colocar na página inicial. Uma boa ideia, algo muito comum em muitos temas. Vamos para a página inicial, podermos dar uma olhada. Atualmente não há nada aqui, então talvez seja bom ter uma linha de produtos aparecendo como uma coleção em destaque na página inicial. Vamos realmente criar essa seção agora. Voltando ao nosso editor, vou criar uma nova seção, e vou chamá-la de coleção de recursos. A extensão líquida de ponto é adicionada automaticamente, é claro. A primeira coisa que vou querer fazer é mudar o nome da seção para “Coleção em Destaque”. Agora, com esta seção, não vamos incluí-la especificamente em nenhum modelo, ou layout como fizemos aqui. Mas nós vamos ser capazes de incluí-lo na página inicial, através deste conteúdo dinâmico para tag index. Verá o que quero dizer em um segundo. O que eu vou fazer é eu vou montar um loop. Vamos copiar o loop daqui, para nossa coleção em destaque. O que precisamos fazer porque não vamos mais colocar isso no modelo de coleção, é especificar uma coleção específica, e é aí que vemos agora a tag de atribuição. Atribuir nos permite criar nossas próprias variáveis. O que eu vou fazer aqui, é selecionar qual coleção eu quero ser os objetos de coleção para isso. Novamente, não estamos mais no modelo de coleção. Não sabemos qual coleção passar. Vamos especificar isso e podemos fazer isso usando o objeto coleções globais, e acessando seu identificador. Vou acessar a Coleção em Destaque, e vamos terminar com essa etiqueta. Indo para “Salvar”, e agora devemos ter uma coleção em destaque que nos permite mostrar a coleção em destaque onde quer que a incluamos. Infelizmente, não podemos incluí-lo em nosso conteúdo para seção de índice, sem o que é chamado de predefinição. Precisamos escrever uma matriz predefinida aqui. Para isso, vou voltar para a documentação da Shopify. Acho que pode estar numa página diferente desta. Há duas páginas que acabo alternando o tempo todo quando estou programando seções. Não é este, vamos digitar, “Predefinições”. Eu acredito que é neste, seções de tema, este deve ser ele, se eu digitar em presets, aqui podemos encontrar os detalhes para presets. O que podemos ver aqui é quando uma seção tem uma ou mais predefinições, cada predefinição se torna uma seção dinâmica emergente pode adicionar à sua página inicial do tema, se o conteúdo do objeto index foi incluído em index.liquid, então eles dizem que direito aqui, precisamos definir uma predefinição pelo menos uma predefinição, que possamos usá-lo em nosso conteúdo para índice. Eu só vou copiar esta matriz que eles estabeleceram aqui, nós não precisamos de todos esses detalhes. O objetivo principal por trás das predefinições é que podemos definir algumas configurações padrão para a seção quando ela é incluída em uma página, mas para nossos propósitos nós só queremos atender ao requisito para que possamos realmente usá-lo em nossa página inicial. Eu vou me livrar do objeto de configurações, nós só realmente precisamos categoria e nome para este, e agora estamos faltando colchete final eu acredito, e estamos faltando tag de matriz final também. Aqui na categoria, vou deixar isso como conteúdo personalizado, e vou nomear essa coleção em destaque, e você verá onde esse nome aparece mais tarde. Tudo bem então agora que criamos esta seção e ela tem uma predefinição, podemos agora incluí-la em nosso conteúdo para índice, então precisamos criar essa tag, eu vou para a página index.liquid, substituir todos esses com esse objeto especial, content_for_index, salve isso, e agora, quando formos para nossa página inicial no personalizador, talvez precise atualizar a página. Agora podemos ver este botão para adicionar uma seção, interessante, vamos clicar nela e vamos ver aqui nossa categoria e nosso nome de nossa seção aparece neste pequeno menu, então se voltarmos para a coleção em destaque, Isso é o que escrevemos aqui, a categoria e o nome aparecem aqui, então agora podemos clicar nele, visualizá-lo, parece bom, e então podemos adicioná-lo diretamente. Mais uma vez não temos nenhuma configuração para isso ainda vamos configurar algumas configurações no próximo vídeo, mas agora temos essa coleção de recursos e podemos adicionar várias delas, agora tivemos codificado a coleção que queremos usar, mas nós também podemos reordenar estes, desligar e ligar isso, e isso é realmente fácil de usar para a pessoa que vai estar trabalhando com o tema e eles não precisam realmente tocar no código, então é por isso que seções são super poderosos, eu vou apertar “Salvar” em que para que ele definitivamente fica incluído na página, que deve encerrar esta pequena introdução para seções. Vamos remover tudo isso por enquanto e vamos falar sobre trechos. Um trecho, como eu disse antes, é um pedaço de código reutilizável, algo que é comum no desenvolvimento de temas da Shopify para reutilizar várias vezes é um produto que é mostrado em uma lista de produtos, então fizemos isso duas vezes em nosso tema até agora, podemos entrar nesta coleção em destaque aqui, e dentro deste loop podemos realmente fazer isso um trecho, e dessa forma quando estamos looping através de produtos, talvez não em uma coleção em destaque, talvez em outro lugar e nós quer usar o mesmo código, nós podemos apenas incluir este snippet sem ter que escrever isso todas as vezes, então eu vou cortar isso para que ele vá para a minha área de transferência, e eu vou escrever a tag para incluir um snippet, ele vai ser produto item, eu acho que posso chamá-lo, e eu vou apertar “Salvar”, agora eu vou entrar em snippets e criar produto-item, vamos colar esse código diretamente, e agora em qualquer lugar onde este snippet seja incluído, ele incluirá este código aqui. Agora, uma coisa importante a ser observado com trechos e seções, é que ele ainda obtém acesso aos objetos do produto e também terá acesso às configurações dentro do esquema aqui, de modo que o aninhamento funciona na Shopify é que ele alimenta de layouts até modelos, até seções, até snippets, mas snippets podem ser incluídos em qualquer lugar. O que quero dizer com isso é, se eu definir uma variável aqui em theme.liquid, eu poderia acessar isso em qualquer lugar no meu tema que usa esse layout. Se eu estiver em um modelo para página, por exemplo, e eu incluísse uma seção que eu pretendia incluir somente em páginas, eu poderia referenciar os objetos da página especificamente nessa seção, e o mesmo acontece com trechos, então para este snippet, sabemos que podemos usar o objeto do produto em qualquer lugar onde tenhamos acesso a ele, portanto, se incluirmos um item de produto aqui no loop onde demos acesso a um produto específico, então ele será alimentado diretamente no snippet, ok, então se você incluir este snippet em um lugar que não tem um objeto de produto especificado ele vai quebrar, ele não vai funcionar, mas contanto que possamos confiar que este snippet está sendo usado em um lugar onde há um objeto de produto, ele funcionará bem, assim como em seções em que podemos confiar que terão acesso a uma coleção se estiver no modelo de coleção, ou podemos fazer o que fizemos aqui e atribuir a coleção especificamente, modo que é sobre ele para trechos e um boa introdução às seções, bem espero. Eu só quero falar sobre mais algumas coisas para fundamentar a programação do tema da Shopify, e isto é, falamos sobre CSS e JavaScript em vídeo anterior, mas vamos apenas demonstrar como adicionaríamos algum JavaScript ao nosso aplicativo, Eu posso apenas lançar um alerta irritante aqui, “Você carregou a página”, apertar “Salvar” nisso, agora qualquer página que eu vá no meu tema vai carregar esse JavaScript, obviamente não é o melhor exemplo, mas você começa o ponto, este JavaScript é carregado em cada página, apenas que eu demo rapidamente, e a mesma coisa para CSS, se você quiser uma regra para aplicar em todos os lugares dentro do seu tema, você pode colocá-la aqui, então talvez queiramos o tamanho da fonte de tudo, o tamanho da fonte do corpo para ser algo ridículo, digamos 40 pixels, é muito ridículo se você me perguntar, atualizar a página, nada aconteceu, vamos ver o que está acontecendo aqui em nosso console, nós realmente não temos acesso ao nosso application.css.scss, vamos dar uma olhada nisso, eu acho que é porque o nome errado foi definido, parece um bug com o novo tema, vamos entrar em theme.liquid e altere o pedido aqui, então é suposto ser css.scss, salve isso, atualize a página, agora você verá que todo o nosso tamanho de fonte fica muito maior, obviamente esse é um exemplo muito tolo, então eu vou remover esse estilo. Falamos sobre layouts, falamos sobre modelos, falamos sobre seções, e falamos sobre trechos, e depois falamos sobre ativos. Config vamos falar no próximo vídeo quando mergulharmos mais fundo em JSON, mas locales, apenas para mencionar brevemente o que é isso, como você pode ver o título deste arquivo é en.default.json, eo que este arquivo faz é manter linguagem específica para usuários em inglês, podemos criar outras localidades e, em seguida, podemos chamar a palavra certa que precisamos usar em uma instância específica. Nós podemos realmente editar isso em uma interface de usuário também, nós podemos ir aqui e clicar em “Editar idiomas”, e vamos ver as mesmas opções não em forma JSON, mas em uma interface de usuário, veja aqui, se eu fosse realmente entrar e mudar isso, talvez eu diga, “Página não encontrada”, pressione “Salvar” sobre isso, e eu vou aqui notar como isso vai mudar, estes são os dados reais do que nós definimos nessa interface de usuário, lá vamos nós, página não encontrada, e funciona em ambos os sentidos, se eu fosse editá-lo aqui no arquivo de dados, pressionar “Salvar” nisso, voltar para a interface do usuário, atualizar isso, você verá que é o valor para o qual mudamos. Agora, por que isso é importante para nós entender é quando vemos esses atributos ou esses objetos sendo chamados no código do tema real, então este é para a página 404, e define a linguagem que estará na página 404, Então vamos para a página 404, e podemos ver aqui que temos essas tags especiais que são filtradas com este filtro t, então se eu remover isso, o que você acha que vai acontecer? Vamos dar uma olhada, geralmente a página 404 aparece se você digitar um endereço que não existe então eu vou apenas digitar em ha ha ha ha ha ha ha ha, e agora em vez de ver a versão traduzida do que você só verá o código, assim como eu disse, se você apenas colocar em uma string em uma tag de saída com aspas, é a mesma coisa é apenas literalmente colocar isso na página, então precisamos dessa tag t e o que isso vai fazer é dizer, “Ei, procure este objeto e então obtenha o valor dele e colocá-lo na tela”, por isso, se vemos geral.404.title, entramos aqui, começamos com geral, então cavamos em 404 objeto, e então obtemos a propriedade do título, então agora se eu atualizar a página agora que substituímos ou colocamos de volta na tag t, você pode ver que o valor vem através. Isto é importante notar quando você está passando por editar seu tema e você se deparar com uma dessas variáveis de linguagem, talvez você queira criar o seu próprio que é totalmente legal, você apenas atualizar este arquivo JSON aqui, mas é importante notar que quando você está programando temas da Shopify. Eu acho que esta foi uma lição bastante longa, algumas dessas provavelmente serão longas lições, então eu vou terminar lá. No próximo vídeo, vamos aprofundar o JSON, então você vai aprender mais sobre como isso funciona e como trabalhar com JSON no próximo vídeo, então eu vou vê-lo lá. 7. Esquemas de JSON: Nesta lição, vamos aprender tudo sobre JSON. JSON é uma maneira popular de representar dados e temas da Shopify, a maneira como você representa todos os seus dados e seu tema da Shopify é por meio de arquivos JSON. Vimos no último vídeo que temos um arquivo de idioma aqui, que é armazenado no JSON. Também podemos editar isso através do editor de idiomas do tema, que também vimos no último vídeo. Isto é bastante básico. Temos acesso às chaves e atributos dentro desse objeto, e podemos editar isso diretamente por aqui, ou podemos editá-lo no próprio arquivo de dados. O que eu quero discutir mais em profundidade nesta lição é JSON Schemas. Se eu clicar para fora para isso e eu entrar em settings_schema, podemos ver o esquema para todo o nosso site. Agora, eu sei que nós ainda não olhamos para isso, mas nós temos, claro, olhamos para esquemas brevemente como se relaciona com seções individuais. Aqui mesmo, o esquema que vemos aqui é muito semelhante à forma como ele opera aqui em nosso Setings_schema.json. Se você quiser saber mais sobre JSON em si, significa JavaScript Object Notation. É uma maneira de representar dados que se parecem com a forma como você representaria dados em JavaScript, mas não é exatamente a mesma coisa. Algumas diferenças importantes incluem ter aspas duplas em torno dos nomes das propriedades. Mas se você quiser saber mais sobre JSON, uma pesquisa rápida no Google, é apenas J-S-O-N, e você tem um mundo de informações abertas para você sobre JSON. É bem simples. Não é resumir estudar um curso inteiro a menos que você realmente queira se aprofundar com ele. Mas para os nossos propósitos, tudo o que precisamos entender no esquema JSON temos matrizes como faríamos em JavaScript, e então um objeto é representado por esses colchetes. Então, como vimos com o arquivo de idioma, este é o objeto geral. Então, dentro deste objeto, podemos visar o objeto geral. Então, quando estamos dentro do objeto geral, podemos pegar o objeto “404" e, em seguida, pegar atributos ou objetos aninhados dentro dele. Vimos isso entrando em nossa saída aqui. Indo para as localidades, escolhendo o objeto geral, entrando no objeto “404" aninhado e pegando o título disso. Tudo bem, então isso é um pouco sobre JSON e a sintaxe por trás disso. Mas vamos falar mais sobre esquemas e como tudo funciona na Shopify. Vimos o esquema como ele se relaciona com seções específicas em vídeos anteriores. Mas eu quero mostrar-lhe Setings_schema.json. Se voltarmos ao nosso personalizador e entrarmos em qualquer página, você verá que temos seções na primeira guia aqui. Podemos ver nossas seções como vimos antes, e quaisquer esquemas dentro dessas seções gerarão essas entradas. Mas há também um outro menu chamado configurações de tema. Aqui podemos colocar grupos de configurações que podemos acessar em todo o nosso tema. entanto, existem algumas limitações. Uma das características de uma configuração em seções é que podemos ter blocos que veremos muito em breve nas configurações gerais do tema. Não podemos fazer bloqueios. Isso é uma limitação, mas de outra forma eles funcionam praticamente da mesma forma. Vamos entrar e mostrar-lhe um exemplo. Depois deste objeto, eu vou criar um novo objeto e dar a este um nome de, digamos, estilos gerais. Isto é como você definiria uma seção também. Então, assim como faríamos em um esquema de seções, definimos uma matriz de configurações. Dentro desta matriz de configurações, podemos criar qualquer tipo de entradas que queremos. Para este vídeo, já carrego as duas áreas da documentação da Shopify que o ajudarão a criar esses esquemas JSON. O primeiro é: @themes /development/sections. O título é seções temáticas. Este é útil para aprender sobre como estruturar seu esquema. Você tem as diferentes tags que vimos predefinições em um vídeo anterior. Nós também aprenderemos sobre blocos aqui hoje também. Aqui na configuração de configurações de tema, é frustrante que eles coloquem em uma página separada. Mas esta é a página onde você vai aprender sobre todas as configurações de entrada diferentes, então texto, área de texto, seletor de imagem, rádio, selecione intervalo de caixa de seleção. Esses são os básicos e, em seguida, eles têm alguns avançados aqui em baixo, eu acredito, sim. Podemos criar entradas para cores, fontes, coleções, produtos, blogs, páginas, links, listas, URLs, muitas coisas diferentes. Se você quiser ver se há algo que você pode fazer uma entrada de usuário, as chances são que ele vai estar aqui. Voltando para aqui, precisamos criar uma configuração. O que eu vou fazer apenas para fins de demonstração é criar uma configuração para a cor dos links. Vamos apenas dizer. Vou usar o seletor de cores. Vamos apenas copiar o exemplo. Vou entrar aqui e substituir meu objeto vazio pelo objeto da documentação. O tipo já está definido vai ser cor. Só precisamos dar uma identificação a isso. Vou chamar essa cor do link, e o rótulo é o que é mostrado para o usuário. Vou chamá-lo de cor do link. Estou usando a ortografia americana só para ser consistente e o valor padrão, vamos dizer azul. Esta informação aqui permite-nos colocar um pouco mais de texto. Eu não acho que seja necessário neste caso, mas só para mostrar o que ele faz para quando você precisa, eu vou escrever uma descrição aqui. Isto é para a cor do link. Se eu salvar isso, você pode ver que temos um erro. A configuração com padrão de cor do link deve ser uma cor CSS. Não podemos usar azul, tem que ser um valor HEX, então deixe-me fazer preto. Experimente isso. Deve ser uma cor CSS. Lá vamos nós. Não é o melhor em executar códigos hexadecimais. Costumo procurá-los. Tudo bem, mas agora temos esse código hexadecimal que representa preto. Se entrarmos em nosso personalizador agora e atualizarmos a página tudo parece o mesmo, mas podemos entrar aqui. Agora temos esta seção para estilos gerais. Clique nisso, e temos a cor do link. O valor padrão foi definido como #000 e é preenchido com os outros zeros. Podemos entrar, mudar isso para aquela cor azul e clicar em “salvar”. Agora, assim como fizemos com as configurações no esquema de seção, isso não vai fazer nada a menos que realmente referenciemos esse valor. É para isso, claro que é a identificação. Vamos em frente e fazer todos os links em nosso tema de acordo com esta cor do link. Agora, onde devemos colocar um estilo que vai estar em cada página do nosso tema está em nosso arquivo CSS global. Mas o que queremos fazer é referenciar líquido neste caso porque vamos precisar acessar o objeto de configurações em líquido para acessar esse valor. Um recurso dos temas da Shopify que você pode não perceber é que você também pode usar líquido em seus arquivos CSS. O que eu vou fazer é mudar o nome do arquivo e adicionar. liquid no final dele. Então, eu vou apertar “Concluído”. Agora vai ter uma extensão ridiculamente longa, mas, oh, bem. Agora o que eu vou fazer é direcionar todos os links usando CSS, e alterar o atributo de cor com base no que está definido aqui. Como acabei de mencionar, a maneira de fazer isso é através do objeto de configurações globais. Posso criar uma tag de saída, acessar meu objeto de configurações e, em seguida, vou entrar na configuração com o ID da cor do link. Eu vou colocar na cor do link aqui, e então eu vou fechá-lo com um ponto-e-vírgula. Agora, nós podemos realmente ter que mudar o nome deste tema interno. Liquid, mas vamos dar uma olhada e ver se isso funciona agora. Vou trazer as DevTools. Não há erros no console. Vamos até onde trouxemos o link. Se eu abrir o arquivo CSS, abrir em uma nova guia, você verá que temos nosso CSS, mas em vez da tag líquida, que se lembra fica tudo gerado no lado do servidor, temos a saída real. Assim como calculamos o líquido no back-end com tudo isso, e ele apenas cospe HTML e CSS, temos a mesma coisa acontecendo aqui. Podemos colocar um.liquid no final disso, depois Shopify aqueles para pausar qualquer líquido aqui dentro. Então, quando ele chega ao front-end, como vimos, é apenas um arquivo css.scss. Não há extensão líquida, e calcula todo o líquido e coloca o valor real. Muito legal. Assim, podemos afetar programaticamente nossa folha de estilos. Eu vou voltar para o personalizador aqui e vamos ver se conseguimos mudar nossas tags de link. Vou atualizar a página para ter certeza de que tudo está atualizado. Entre em estilos gerais, e mude isso para algo realmente óbvio, como vermelho. Vou clicar em “Salvar”, e agora ele não está atualizando. Vamos dar uma olhada no tema, oh, espere. Aqui vamos nós. Agora podemos ver que, por padrão, todos os links são vermelhos, porque nós apenas definimos isso aqui em nossas configurações gerais. Se atualizarmos o personalizador, devemos obter o mesmo resultado aqui também. Talvez esteja armazenando um pouco em cache. Não sei por que ele não está afetando no personalizador, mas está definitivamente afetando-o no front-end aqui. Esse é um ótimo exemplo de criar configurações de tema e colocá-lo aqui. Isto é para qualquer coisa geral, cores de link, cores de cabeçalho , fontes, qualquer coisa assim que você deseja afetar todo o tema iria em configurações de tema. Mas, mais comumente, você estará definindo configurações em sua seção. Eu vou voltar e mudar isso porque não parece muito bom ser vermelho. Clique em “Salvar” nisso, e entre aqui e atualize a página. Lá vamos nós. Agora temos a cor que definimos. Legal. Tudo bem. Agora vamos para uma de nossas seções e vamos olhar para a seção de coleção de recursos. A primeira coisa que queremos fazer é permitir que o usuário realmente escolha a coleção que é destaque em vez de codificá-lo em difícil. Eu vou entrar em minhas configurações aqui, abrir isso. Como sempre, vou entrar e verificar quais entradas tenho disponíveis. Lembra-te que vimos um para a colecção. Vou clicar nesse. Aqui temos um exemplo que eu posso apenas copiar palavra por palavra. Estou fazendo isso rápido, porque não quero me envolver na teoria. Mas se você quiser ler sobre o que estamos fazendo aqui, está tudo na documentação. Volte, substitua o nosso objeto vazio aqui pelos atributos que precisamos editar. O tipo já está definido para nós. Vou mudar a identificação para coleção porque faz mais sentido. Ligue para a coleção de etiquetas, e nós realmente não precisamos de uma linha de informação aqui, porque é bem simples. Então aqui em cima, podemos definir a coleção para, em vez de featured-collection, podemos realmente referenciar as configurações. Então eu vou pegar este objeto seção, entrar em suas configurações e encontrar coleção. Então eu vou salvar. Agora, isso vai quebrá-lo porque nós não temos um conjunto padrão que então nós podemos facilmente ir e atualizá-lo. Se eu entrar na página inicial onde esta seção de coleção em destaque é, ele diz que não corresponde porque nós realmente não inserimos nada. Agora o conteúdo não está aparecendo. Vamos dar uma olhada. O que fizemos de errado aqui? Tudo parece bem. Talvez tenhamos esquecido de atualizar ou atualizar nosso personalizador. Vamos fazer isso agora mesmo. Ainda não devemos ter fósforos porque ainda não marcamos uma coleção. Mas agora podemos ver que a coleção é agora uma entrada. Agora podemos, como usuário, ter essa interface de usuário encantadora para selecionar uma coleção que queremos trazer aqui. Então, à medida que o selecionamos, ele deve ser usado por nossa seção. Então eu vou apertar “Salvar” e ainda temos um problema. Deixe-me ir e verificar na frente se está errando também. Sem fósforos. Então vamos voltar de novo, dar uma olhada. O que eu acho que estamos enfrentando aqui é um problema que eu encontro com os temas da Shopify, em que chamar um objeto de recurso nos dá seu nome, mas não o objeto em si. Só para confirmar isso, eu vou criar uma tag de saída e ver se nós apenas obter o nome da coleção se eu colocar nossa coleção. Suspeito que este será definitivamente o caso. Se eu atualizar a página, você pode ver o identificador da coleção aparece. Se estivéssemos realmente acessando o objeto de coleção, obteríamos um resultado diferente. Isso é uma coisa frustrante dentro da Shopify. Você pensaria que se nós vinculássemos uma coleção aqui e então nós codificá-lo, obteríamos o objeto de coleção, mas em vez disso, nós obtemos o identificador de coleção. A maneira como podemos contornar isso é usando as coleções globais. Eu estou indo para ir “coleções” e então eu posso usar este valor dinâmico como o identificador. Talvez isso pareça um pouco complicado, mas acredite, não é tão complicado quanto você pensa. Isto é essencialmente a mesma coisa que fazer coleção de recursos, que é exatamente o que tínhamos antes. Acabamos de substituir essa alça com a alça que recebemos do usuário aqui em baixo. Vou apertar “Salvar” e ver se conseguimos um resultado diferente. Agora você pode ver que estamos realmente recebendo o objeto de coleção e nós somos capazes de percorrer os produtos nesse objeto de coleção. Agora estou muito feliz por termos enfrentado esse problema, porque isso é algo que não é particularmente óbvio na programação do tema da Shopify, e é algo que me desviou porque isso é algo que não é particularmente óbvio na programação do tema da Shopify, um pouco também. Mas por experiência própria, eu sabia que às vezes você espera um objeto, mas recebe outra coisa de volta na Shopify. Lembra quando apagamos isso antes de pegarmos o cabo da coleta. Vamos agora colocar para fora a coleção e ver o que temos em vez disso. Isto é o que estávamos esperando para obter quando lançamos este objeto ou o que pensávamos ser um objeto. Se voltarmos e atualizar a página, podemos ver palavras surgirem chamadas CollectionDrop. Agora esta é terminologia especial em líquido, que basicamente diz que este é o objeto de coleta. Então, se fosse um objeto vazio, diria “gota vazia”. Se fosse um objeto de produto , diria queda de produto. Infelizmente, não podemos produzir todo o objeto como poderíamos talvez em JavaScript. Ele só nos diz que este é um objeto de coleção. Então agora sabemos porque antes, lembre-se que pegamos a coleção aqui de nossas configurações de seção e nós produzimos isso também. Se eu dividi-los com uma tag break, você pode ver que o primeiro é o identificador da coleção e o segundo é o objeto de coleção real. Ok, eu provavelmente fui muito fora em uma tangente lá, mas algo que realmente te perturba na programação de temas da Shopify e algo que eu aprendi da maneira mais difícil é quando você seleciona recursos em seu personalizador, às vezes você apenas obtém o identificador e não o objeto real. Nesse ponto, você tem que realmente usar um global, referenciar o identificador e, em seguida, retirá-lo do objeto global real. Então foi isso que fizemos aqui, e temos tudo funcionando. Então, agora o usuário pode selecionar qual coleção é mostrada na seção de coleção em destaque. Está bem. Se eu atualizar a página aqui, devemos obter o mesmo resultado. - Sim. Então eu poderia adicionar qualquer tipo de outras configurações aqui. Eu poderia mostrar o preço de venda, mostrar onde quer que esteja esgotado, não, vendedor do show. Basicamente personalizar praticamente qualquer coisa sobre esta seção para essas configurações de seção. Então é isso que fazemos aqui. Está bem. Agora, a última coisa a cobrir com esquemas é a questão de onde os dados realmente são armazenados? Lembre-se que eu disse que todos os dados na Shopify são armazenados nos temas da Shopify especificamente são armazenados no formato JSO N. Então, onde encontramos isso? Bem, todos os dados do seu tema da Shopify são armazenados em settings_data.json, independentemente de onde vem, settings_schema ou vem de uma seção específica. Então aqui temos esquemas, e cada um deles. O valor real que é armazenado, tudo vai aqui. Então você pode ver este objeto atual no topo, e em nosso objeto atual temos a cor do link armazenada. Está bem. Então, se eu fosse entrar, mude a cor do link novamente. Tudo bem. Eu quero que você note que este valor aqui é o mesmo que aquele valor lá. Agora, se eu mudá-lo para vermelho novamente, eu acho que este é um tom ligeiramente diferente de vermelho, e nós atualizamos este arquivo de dados. Quero que veja o que acontece com o arquivo de dados. Como você pode ver, o valor da cor do link mudou no arquivo de dados, e assim como fizemos no arquivo de idioma, podemos realmente alterar esse valor e ele mudará na interface do usuário também. Estes são os dados de back-end que estão sendo vinculados à interface do usuário. Então isso irá mudá-lo no personalizador e alterar o valor onde quer que esteja frio no tema. Então, se você entrar aqui, a cor do link volta a preto porque eu mudei isso nesses dados. Agora isso é importante porque sempre que você estiver migrando temas ou copiando temas ou tentando mesclar dois temas juntos, você precisa cuidar desse arquivo de dados. Eu não vou falar muito sobre encenação porque eu tenho um vídeo no YouTube sobre isso. Basta procurar o desenvolvimento do tema da Shopify no YouTube e espero que você encontre meu canal. Se estou a fazer o meu SEO, certo. Mas isso é algo apenas para estar ciente com seu arquivo de dados. Tudo fica armazenado aqui, então tenha muito cuidado com o arquivo de dados. Tente evitar tocar nisso. Mas se você precisar mesclar dados de dois temas, é assim que você faria. Tudo bem, com essa nota lateral fora do caminho, eu quero chamar sua atenção para mais algumas coisas neste documento settings_json, e isto é, nós temos o objeto desta seção aqui. Agora você pode ver todas as seções que temos. Temos cabeçalho, modelo de coleção, rodapé e este é referenciado por seu ID. Eu não tenho certeza porque ele é referenciado por seu ID em vez de seu nome, mas independentemente disso, nós temos uma coleção em destaque aqui, e você pode ver em nossas configurações, nós temos um valor-chave de coleção com o identificador de coleção em destaque. Então, se eu entrar e mudar isso para uma alça diferente, isso iria atualizá-lo na seleção que eu tenho aqui para a minha coleção em destaque. Tudo bem, novamente, esta é apenas uma interface de usuário adorável para mudar o que está escrito aqui. A outra coisa que eu quero que você perceba é o conteúdo para a matriz de índice. Ele pega todos os IDs das seções que estão em uso e o coloca aqui. Então, se eu remover esse ID e apertar “Salvar”. Agora, quando vamos para a nossa “Homepage”, essa seção que o ID referenciado está faltando agora em nossa página inicial. Está bem. Mas podemos sempre adicioná-lo de volta. Adicione a coleção em destaque. Escolha uma coleção que queremos apresentar. Acabei de ligar para a minha coleção de destaque. Salve isso novamente, e se atualizarmos o arquivo de dados, você verá que esse arquivo de dados no conteúdo da matriz de índice está de volta lá. Está bem. Então settings_data.json armazena todos os dados que são gerados de todos os seus esquemas em um único lugar. Há, claro, sua foto locales, mas isso é tudo apenas para locales. Isto é separado dos esquemas, está bem? Todas as configurações que você configurou em seu settings_schema.json e os esquemas dentro de suas seções individuais. Todas essas seleções, a seleção em si vai para este arquivo bem aqui, settings_data.json, e isso é basicamente para esquemas JSON. Você viu como adicionar uma configuração em suas configurações gerais de tema. Então vimos isso aqui, e vimos outro exemplo de inserir uma configuração específica em uma seção bem aqui, permitindo que o usuário escolha qual coleção será destaque. Ok? Além disso, só para recapitular, aprendemos sobre um pouco de uma pegadinha no Shopify Liquid. Se você selecionar um recurso como uma coleção, o valor do objeto será apenas um identificador, não o próprio objeto. Então ainda precisamos procurar isso usando um objeto global como coleções, como todos os produtos, todos os objetos globais que você pode encontrar aqui na postagem do blog. Veja como, se eu rolar para baixo até “Coleções”. Este só mostra como você pode fazer loop através de coleções, mas nós acessamos uma coleção particular através de seu identificador. Você pode fazer o mesmo com o objeto de produtos antigos. Você pode acessar um produto através seu identificador específico e, em seguida, ele se torna o objeto do produto. Está bem. Então devemos ser bastante claros sobre JSON Schemas. Lembre-se, você provavelmente não vai saber de cor quais configurações colocar aqui. Portanto, certifique-se de que você faz referência à documentação. Esta página tem todas as configurações de entrada diferentes que você pode colocar lá dentro. Nesta página, seções de tema, você pode aprender sobre coisas como predefinições e blocos. Blocos é algo que vamos aprender no próximo vídeo onde realmente criamos nossa própria seção. Então, estou ansioso por esse vídeo. Vejo-te no próximo. 8. Seções personalizadas de programação: Muito bem, pessoal, nesta lição vamos reunir tudo o que aprendemos até agora sobre Shopify Liquid e JSON Schemas para praticar a criação de nossa própria seção. O que eu vou fazer é criar uma seção de galeria, que será uma seção que podemos incluir na página inicial para conteúdo, para índice ou em uma página específica e ele vai apenas mostrar uma galeria de imagens que o usuário no personalizador especifica. O que eu vou fazer, passar por cima das seções, adicionar uma nova seção, e eu vou chamá-la de galeria. Como de costume, a Shopify nos dá um esquema e só precisamos alterar o nome da seção para galeria. Aperte “Salvar” nisso. Vou montar um div com uma classe de galeria e lá vai você. Agora, como esta galeria vai funcionar é, eu vou permitir que o usuário especifique quantas colunas eles querem por linha, e então também a altura da imagem, e então eu vou permitir que eles insiram blocos que são vai ser as imagens que vamos incluir. Passando para a documentação e olhando para a seção sobre blocos dentro do documento sobre seções de tema, vamos rolar para baixo novamente lá para baixo em busca de blocos. Você pode ver aqui que podemos colocar em blocos que são contêineres de configurações e conteúdo, que podem ser adicionados, removidos e reordenados com interseção, e isso é ideal para o que estamos fazendo aqui. Queremos que eles sejam capazes de adicionar quantas imagens quiserem e reordená-las, e só precisamos das mesmas configurações para cada uma delas. Eu vou pular a matriz de configurações por agora e criar uma matriz de blocos, e nesta matriz de blocos, eu vou abrir um bloco. Agora, para um bloco, o que precisamos é de um tipo e um nome, como diz aqui, um bloco deve ter um nome e um tipo. O tipo de bloco pode ser qualquer valor definido pelo desenvolvedor do tema. Então, o tipo não é algo específico na Shopify, é apenas algo que definimos. Eu vou fazer o tipo e imagem, e você verá mais tarde podemos adicionar em diferentes tipos e, em seguida, verificar o tipo dentro da nossa seção. Vou dar-lhe um nome e chamá-lo de bloco de imagem. Este vai ser o rótulo que é mostrado para o usuário. Agora, eu acredito que podemos apenas criar uma matriz de configurações assim como faríamos no objeto pai aqui. Vou adicionar uma matriz de configurações, abrir essa e começar dentro com o primeiro objeto, que vai ser uma entrada de imagem. Para isso, vamos trocar para esta parte da documentação chamada configuração de configurações de tema e eu vou procurar imagem. O tipo de configuração de entrada para uma imagem é seletor de sublinhado de imagem e podemos simplesmente copiar o valor de configuração aqui. Vai ser seletor de imagem, só precisamos de um tipo, ID e o rótulo. Voltando ao nosso código aqui, colando isso, vamos mudar o ID para imagem, e vamos colocar a imagem aqui, muito básica. Então essas são as configurações que teremos para cada bloco. Se eu apertar “Salvar” nisso, vamos ver se há algum erro, não, não há. O que eu posso fazer agora é que eu posso criar um loop através de todos os blocos na seção OWL. Eu vou criar esse loop e eu vou dizer, “para bloco na section.blocks”, e então eu vou entrar no loop. Vamos formatar isso, fazer isso parecer um pouco mais agradável em um pouco, mas por enquanto vamos apenas colocar esse conteúdo na página. Agora, podemos referenciar o bloco diretamente e eu vou apenas criar uma tag de imagem com a imagem que é definida, então block.settings.image. Lembre-se de como acessamos diferentes atributos é apenas navegar neste objeto JSON. Então, no topo aqui, encontramos blocos no objeto de seção e agora estamos percorrendo um bloco individual e, em seguida, temos acesso ao que está aqui, o objeto de configurações, e, em seguida, dentro disso, podemos acessar o usando seu ID. Isso é o que está acontecendo aqui. Se eu apenas enviar isso, o que eu vou conseguir é apenas o endereço da imagem. Antes que possamos realmente olhar para ele, no entanto, precisamos incluí-lo em algum lugar e o que eu vou fazer para isso é criar um modelo alternativo para modelo de página, e então vamos usar o modelo final para exibir esta seção. Felizmente, há alguns passos envolvidos em fazer isso. Precisamos primeiro entrar em nossa pasta de modelos e adicionar um modelo de página alternativo. Eu só vou chamar esta galeria, criar o modelo. Uma coisa que é frustrante com a Shopify é que teremos que criar isso também no tema atual. Então, se você está trabalhando no tema que você está visualizando e não está realmente ao vivo em seu site, você tem que criar o mesmo modelo em seu tema atual, bem como, caso contrário, você não será capaz de selecioná-lo. Mas, por enquanto, o que vou fazer é incluir esta seção aqui. Então eu vou tirar tudo isso e neste modelo de página personalizada, basta chamar a seção da galeria, e eu vou apertar “Salvar”. Agora, como eu disse, para que possamos selecioná-lo da lista, eu vou ter que ir para o tema ao vivo atual, que é estrear e criar o mesmo modelo que eu posso já ter feito aqui. Já existe um modelo com o nome da página.gallery. Se isso não existisse, eu posso simplesmente excluir esse, ir para adicionar página, exatamente da mesma maneira que fizemos antes para o outro tema, e o que vamos fazer irá inserir o mesmo conteúdo que o modelo de página normal. Então você não precisa se preocupar se você mudar isso dentro da página, ele ainda vai mostrar o mesmo modelo de página sobre este tema, se isso faz sentido. Agora, se eu entrar em páginas e adicionar uma página, chamá-la de galeria, posso usar esse modelo específico que acabamos de criar selecionando-o aqui. Se eu salvar a página, agora podemos ver qual é o endereço dela. Vai ser @pages /gallery. Então vamos voltar para o código. Como vimos, já incluímos a seção nesse modelo alternativo. Agora, só precisamos ir para a página que acabamos de configurar. Galeria de páginas. No momento, não adicionamos nenhum conteúdo, então nada vai aparecer. O que queremos fazer é abrir esta página no personalizador. Vamos ter que atualizar primeiro porque fizemos alterações em nossos códigos de tema desde que tivemos isso aberto e agora devemos ser capazes de ver que podemos editar o modelo da galeria. Pegando nisso. Agora podemos ver a seção para Galeria. Basta levá-lo um pouco mais lento, estamos na página para galeria e como ele está usando este modelo alternativo específico, ele vai vincular diretamente a esta seção e seguida, dentro dessa página agora para o personalizador, podemos ver a seção que aparece aqui. Então, na galeria, agora você pode ver que vai haver esta seção de conteúdo e você pode adicionar um bloco de imagem. Isso é tudo a partir das configurações que configuramos em nossa seção de galeria. Então não precisamos mais disso, só precisamos dessa etiqueta. Podemos começar a trabalhar diretamente da seção da galeria aqui. Mas lembre-se, nós o chamamos de bloco de imagem e aqui no personalizador, é adicionar bloco de imagem. Se houver vários tipos, poderíamos clicar nisso e ele nos dará opções diferentes, mas nós só temos uma opção por enquanto. Como você pode ver, há nossa configuração de imagem que temos aqui. Agora podemos adicionar uma imagem. Temos homens na frente e podemos adicionar outra imagem, bloquear, o cara com o terno e você pode ver aqui o que acontece quando eu faço isso. Em vez da imagem real, temos uma seção URL. O que está acontecendo aqui é que a imagem que está sendo selecionada não vai realmente lhe dar uma tag de imagem. Então, a fim de obter a tag de imagem, o que eu vou fazer é usar o filtro de tag de imagem bem aqui. Agora, podemos precisar especificar um caminho distinto também, vamos dar uma olhada, então lá vai você, eles estão aparecendo e porque nós não adicionamos um parâmetro eles estão aparecendo muito pequeno, isso deve ser 100 por 100. Se tivermos um olhar, então a largura é um 100 e seguida, a altura é relativa à largura em termos de sua relação de aspecto. Vamos precisar torná-los um pouco maiores. Vou adicionar um parâmetro para esta tag de imagem de, digamos 500x. Então agora eles vão ser cinco vezes maiores, cinco vezes mais grandes, em vez disso. Eu cometi um erro aqui e vejo que o parâmetro, ele realmente representa a tag alt. Se você quiser colocar em valor alt, é aí que você colocá-lo. O que eu preciso fazer é encadear outro filtro aqui. Eu vou filtrar isso para URL de imagem como antes e é onde eu posso especificar a dimensão da imagem. Vou guardar isso, atualizar a página, e agora a imagem é cinco vezes maior. O que temos aqui é que temos, se eu apenas atualizar a página no personalizador, nós temos esta galeria. Então podemos adicionar outro bloco de imagem. Se a imagem ainda não estiver definida, Shopify apenas inserirá um suporte de lugar , o que não é muito bonito, mas nos mostra que há pelo menos uma imagem lá e eu posso adicionar outra imagem, e basicamente o que vai acontecer é que todos eles vão ter 500 largura e eles estão apenas indo para empilhar através do espaço horizontal e vertical de nossa página. Se eu atualizar a página, talvez isso seja bom o suficiente para sua galeria, mas eu quero tornar isso mais responsivo. O que eu vou fazer é dar a isso uma largura responsiva e criar uma altura que o usuário pode mudar. O que eu vou fazer é aqui, em vez de apenas produzir uma imagem, o que eu vou fazer é criar um wrap de imagem e nesta tag de quebra de imagem, eu vou dar-lhe uma imagem de fundo da imagem que definimos aqui. O benefício de fazer isso se você não estiver familiarizado, é que podemos controlar a altura e a largura da div e, em seguida, a imagem vai caber dentro disso e vai cortar com base nas dimensões desta tag div aqui. O que eu vou fazer é adicionar em um atributo de estilo e ter URL de imagem de fundo e eu não preciso mais da tag de imagem, e eu posso inserir isso aqui. Agora precisamos dar algumas dimensões. Só para dar algo imediatamente, vou dar-lhe uma largura de 500 pixels e uma altura de 500 pixels, e então eu vou dar-lhe um [inaudível], criar algum espaço aqui. Aqui vamos nós. Então eu vou dar-lhe um tamanho de fundo de cobertura. Guarde isso. Veja o que acontece quando atualizamos a página. Você vai ver agora, se tivermos um olhar, estes não são tags de imagem mais, eles são realmente divs, e é por isso que eles estão empilhando em cima do outro porque estes são definidos como padrão para exibir bloco, como você pode ver aqui nos valores calculados. Queremos que eles sejam exibidos um ao lado do outro, então inline-block. Agora, podemos configurá-lo em nosso arquivo CSS principal ou podemos fazê-lo na seção real refatoração isso para estilo, não folha de estilo e colocar em nossos estilos aqui. Agora, neste caso, vou colocá-lo na seção real e há uma boa razão para isso, porque quando usamos essas tags de estilo, podemos ver as coisas atualizadas ao vivo no personalizador. Poderíamos sempre jogar estilos usando HTML. Mas se fizermos isso, se houver um estilo gerado pelo usuário aqui, como algo que eles definiram no personalizador e mudamos isso. Não vai aparecer imediatamente. Então, usando essas tags líquidas, podemos realmente armazenar nossos estilos na seção e isso vai tornar mais fácil de encontrar. Mas também vamos ter a capacidade de ver essas atualizações ao vivo se usarmos personalizar um dado aqui. Então eu vou mostrar a vocês o que eu quero dizer com isso em apenas um segundo, mas primeiro eu vou criar uma regra de estilo aqui para rap de imagem e o que eu vou fazer é definir todos os wraps de imagem para exibir bloco inline e se formos para a nossa página, até mesmo o personalizador ou aqui e atualizar a página. Veremos que eles estão agora empilhados um ao lado do outro. Se formos até aqui, veremos que temos um bloco de exibição em linha. Isso é um pouco melhor porque se redimensionarmos a janela, então eu vou mover isso para o lado e ver como a janela se redimensiona. Vai derrubá-lo para a nova linha se não houver espaço. Mas para torná-lo um pouco mais responsivo, o que eu vou fazer é definir a largura para um valor relativo. Voltando para aqui, vamos definir o rap de imagem para 33 por cento. Assim temos três seguidas. Então eu vou remover este valor aqui e na verdade vamos mover esses valores para a classe apenas para torná-lo um pouco mais limpo. Bem aqui, estes serão os mesmos para cada rap de imagem, então vamos colocar isso aqui na linha de estilo real aqui. Atualize a página e agora você pode ver nossas imagens estão responsivas. Então, novamente, se eu fosse redimensionar, você pode ver que sempre haverá três em uma fileira e eles vão redimensionar para conseguir isso em qualquer tamanho de tela. Agora, para o usuário, ele pode querer escolher quantas imagens eles estão prontos para uma linha e eles também podem querer ser capazes de mudar a altura das imagens, porque, como eu disse, com imagens responsivas, elas cortam automaticamente. Como vimos antes, se eu reduzir isso, eles sempre serão três em cada linha, então agora estamos perdendo partes da imagem. Então talvez queiramos fazer isso menos alto se estivermos usando muitas imagens por linha. De qualquer forma. Então eu quero dar a opção para o usuário ser capaz afetar esse valor e também a capacidade de afetar esse valor. Porque isso vai acontecer com toda a grade, isso vai ser uma configuração aqui, não em um bloco específico. A primeira configuração que eu quero fazer é que eu acho que eu vou ter um seleto. Nós não usamos select antes. Então vamos para os diferentes tipos de entrada que temos disponíveis para nós e olhar para selecionar. Vou pegar o exemplo como um ponto de partida e substituir esses objetos vazios pelo exemplo. Então nós temos o tipo de seleção, eu vou definir isso como, por linha e ele vai mostrar para os produtos do usuário, oh desculpe, imagens por linha, e então para nossas opções, nós não precisamos de um grupo, nós só precisa de um valor e um rótulo. Em nossa matriz de opções, eu vou ter três valores diferentes e isso vai ser as larguras. Se escolherem dois por linha, será de 50%. Então, dois por linha e se eles escolherem três por linha, vai ser 33 por cento, três por linha. Precisamos duplicar isso através, termina este 44 por linha, vai ser 25 por cento. Vamos apenas fazer cinco por linha também. Adicione outra opção e faremos este cinco por linha. O padrão, tem que ser um desses. Vamos fazer o padrão três por linha. Isso vai ser 33% e a informação que não precisamos realmente. Vou clicar em “Salvar” aqui e adicionei deliberadamente um erro, ou deixei um erro deliberadamente no meu esquema JSON. Agora, infelizmente, na Shopify em seu editor de código e quando você está usando o kit de temas, eles apenas dizem erro inválido JSON e se você tiver um esquema grande, pode levar uma eternidade para descobrir qual é o problema. Sei o que fiz de errado, mas talvez não possa escolher agora. Felizmente, porque é apenas um objeto JSON, podemos realmente colocá-lo através de um JSONLinta e ver qual é a questão. Então eu só quero mostrar a vocês como fazer isso agora. Eu sei que o problema aqui é que nós temos uma vírgula no final aqui. Lembrem-se que removemos esse valor. O último valor não pode ter uma vírgula depois dele, mas podemos não saber disso, então uma coisa que podemos fazer é usar um JSONlInta on-line, então eu acabei de copiar todo o objeto JSON e eu estou indo para um site chamado jsonlint.com eu acredito. Vou colar em nosso objeto JSON, não importa que ele represente os dados da Shopify. Tudo isso faz é pegar o formato do JSON e verificar se ele está corretamente formatado. Então aqui, temos uma mensagem de erro muito mais detalhada, que é que temos um erro na linha 24. Esperava uma string que tinha um colchete de fechamento. Então isso ainda pode levar um pouco de decifração para descobrir qual é o problema aqui. Mas pelo menos temos um número de linha específico e podemos dizer, oh, eu tenho essa vírgula aqui. Então, se eu voltar, tirar essa vírgula, apertar Salvar, agora você verá que não temos erros. Então a próxima coisa que eu preciso fazer é realmente referenciar esse valor que foi definido no personalizador aqui. Então, em vez de 33%, eu vou, como já fizemos várias vezes ao longo desta classe, referência ao objeto de seção, entrar em suas configurações e agarrar por linha. Eu vou bater em salvar sobre isso e vamos voltar para o nosso personalizador e atualizar. Tudo bem, então agora eu vou para a seção da galeria e você pode ver que agora temos um menu suspenso para selecionar quantas imagens por linha. Se eu mudar isso para dois, ele não funciona com 50 infelizmente, mas se eu mudar isso para quatro, você pode ver esta atualização ao vivo. Infelizmente, existem algumas margens que estão afetando quantas podem caber por linha, então só precisamos mudar isso. Mas você pode ver que isso é uma atualização ao vivo. Então, indo para salvar isso, você pode ver se olharmos para isso no navegador, cada um vai ser 50 por cento. Isso é um pouco de um problema com o bloco inline-, mas se reduzirmos em 0,5 por cento, isso deve contornar a questão das margens e agora você pode ver que temos uma grade de dois por dois. Então eu vou voltar para o nosso código aqui. Troque dois por linha, dê uma porcentagem de espaço de manobra. A mesma coisa aqui, e a mesma coisa aqui. Espero que isso resolva essa questão. Agora, se atualizarmos a página em ambos, vamos fazê-lo no personalizador para que possamos realmente atualizar isso ao vivo. Mude para três por linha, mude para dois por linha, quatro por linha e não temos cinco, mas se tivéssemos um quinto, ele aparecerá aqui. Tudo bem, muito legal. Agora, como eu mencionei, se estamos mostrando dois por linha, então nós temos uma boa proporção acontecendo aqui. Mas se o definirmos para quatro por linha, vamos perder muita imagem porque lembre-se que eles cortam automaticamente para permanecer responsivo. Então eu também quero dar ao usuário a capacidade de especificar a altura de todas essas imagens. Então vamos adicionar isso agora. Vou adicioná-lo como outro seletor. Então, whoops, vamos copiar esse exemplo novamente da documentação e substituir este objeto vazio por isso. Esta vai ser a altura, e vou chamar-lhe altura da imagem. Nós não precisamos de grupo, como eu mencionei antes, o valor padrão será, digamos, o que temos agora, 500 pixels. Digamos que serão 500 pixels. Não preciso de informações. Então vamos fazer os últimos 1500 pixels e esses 1300 pixels. Agora, provavelmente queremos fazer mais opções. Então vamos apenas criar uma opção extra, você provavelmente quer mais alguns também, mas é o mesmo processo para cada um. Então vamos colocar isso em algum lugar entre 400. Agora, antes que eu aperte salvar nisso, eu vou realmente inseri-lo. Então, assim como eu fiz aqui, em vez de codificar ou codificar em uma altura, eu vou fazer referência a essa configuração então colocá-lo lá como altura. Novamente, temos um erro no esquema JSON. Eu sei que desde o último que temos a mesma era temos esta vírgula aqui. Se você não pegou isso, você sempre pode colocá-lo para o JsonLinta. Então, agora, se eu olhar para isso no personalizador, nós temos um problema aqui. Vamos dar uma olhada no que podemos estar fazendo errado aqui. Esqueci de colocar o ponto-e-vírgula no final, atualizar a página. Então agora devemos ser capazes de, como o usuário no personalizador, alterar a altura da imagem. Lá vai você. Então, se estamos fazendo quatro imagens por linha, provavelmente queremos que a altura da imagem fique menor também. Assim, podemos definir uma altura de imagem menor. Podemos ajustá-lo para 400, é 500, então uma boa combinação, talvez em dois por linha tenhamos definido para 500. Mas se estamos fazendo quatro por linha, nós ajustamos para algo um pouco mais curto, como 300. Agora, eu sei que este vídeo provavelmente já é muito longo, mas eu quero mostrar uma outra coisa, que é, nós podemos adicionar diferentes tipos de conteúdo nesta galeria. Não precisa ser apenas fotos, podemos realmente adicionar vídeos incorporados também. Para isso, eu não quero estar escrevendo um monte de códigos, eu vou estar copiando através de algo, mas deve ser bem simples de entender independentemente, o que eu vou fazer primeiro porque nós vamos usar um tipo diferente, é colocado em um condicional. Eu vou dizer tipo de bloco, lembre-se, agora temos acesso ao bloco individual porque estamos fazendo loop, e se o tipo de bloco é imagem, então eu sei que vou ter uma configuração de imagem. Vou fechar isso, e se agora porque todo o nosso bloco até agora, o tipo de imagem, nada deve mudar quando atualizar a página. Agora, tudo está normal, mas podemos adicionar um tipo diferente aqui. Em vez de onde quer que chegamos aqui, vou adicionar outro bloco para uma incorporação de vídeo. Eu só vou copiar e colar para tornar isso um pouco mais rápido, e este em vez de imagem vai ser um bloco de vídeo, e este vai ser o rótulo que aparece para o usuário, e para as configurações, eu Eu acredito que é chamado de URL de vídeo, e assim o ID do que vai ser URL de vídeo é que é apenas chamado de URL de vídeo, bem como, e o rótulo vai ser URL de vídeo. Eu acho que há mais alguns atributos que eu tenho aqui para olhar, nós podemos colocar no que ele aceita também. Podemos fazer isso, exceto o YouTube e o Vimeo. Vamos precisar remover essa vírgula do fim, caso contrário, teremos um erro. Se eu pressionar Salvar sobre isso, espero que nenhum erro, e agora quando eu atualizar a página e nosso personalizador, e eu ir para a galeria, em vez de adicionar bloco de imagem, ele só vai dizer adicionar conteúdo. A razão é que quando eu clicar nisso, ele agora vai me dar a opção de adicionar nos diferentes tipos. Posso adicionar em outro bloco de imagem como antes, ou posso adicionar em um bloco de vídeo. Aqui posso colar um link do YouTube ou do Vimeo. Para isso, eu só preciso encontrar um vídeo do YouTube, eu vou encontrar rapidamente um do meu próprio canal do YouTube. Que melhor vídeo usar então, um dos meus vídeos da minha série no desenvolvimento de temas da Shopify, vamos usar isso como exemplo de vídeo aqui, e vamos clicar em Salvar. Agora, mesmo que tenhamos salvo este bloco de vídeo, precisamos realmente mostrar algo para a tela. O que eu vou fazer é copiar através de alguma lógica aqui, mas o que eu vou fazer é porque ele vai ser um código diferente para o bloco de vídeo em vez do bloco de imagem é que eu vou colocar o condicional em imediatamente. Este valor aqui é o que criamos aqui, então temos tipo, imagem, tipo de vídeo, isso é o que estamos verificando agora. Agora, eu vou copiar e colar em algum código, para nos poupar um pouco de tempo. Para explicar brevemente este código, o que temos acontecendo aqui é se o tipo de bloco é vídeo, sabemos que este é um bloco de vídeo, e se o URL estiver em branco, vamos colocar em um espaço reservado vídeo com estes diferentes atributos. Se não estiver em branco, então ele definitivamente tem um valor, então nós apenas verificar se o tipo é YouTube, se sim, nós usamos o link de incorporação do YouTube, se não, nós verificamos o Vimeo, e se for Vimeo, usamos o link de incorporação do Vimeo e, em seguida, pegamos o ID do URL do vídeo. Este é um pouco mais complicado porque nós realmente obter um objeto fora deste URL de vídeo, e então nós temos um ID e um tipo nesse objeto. É por isso que eu copiei e colei este código porque é um pouco mais complexo e não é muito comum que você usaria isso de qualquer maneira, mas este é um bom exemplo aqui de ter tipos diferentes. O que vamos precisar fazer para terminar isso é também ter esse efeito no nosso iframe. Em cada um desses cenários, o iframe vai conter o vídeo, então eu acabei de adicionar o iframe aqui também. Ele vai ter exibição inline-block largura e altura que definimos no personalizador. Este não vai fazer qualquer sentido para o iframe, mas espero que ainda funcione, se eu entrar agora, vamos dar uma olhada no personalizador. Você verá que meu vídeo está aparecendo, infelizmente, a largura não está correta, então vamos atualizar a página, ver o que está acontecendo. Aqui temos nossos wraps de imagem, wraps de imagem, wraps de imagem, e então temos o iframe aqui, que não tem nenhum estilo atribuído a ele, então ele está apenas fazendo largura e altura. Deixe-me ver o que eu poderia ter feito de errado aqui, e eu posso ver que eu coloquei um ponto na frente do iframe, presumindo que é uma classe, mas eu estou mirando o próprio elemento, então eu não preciso usar esse ponto. Se eu atualizar a página, você verá que ela está em conformidade com a grade que configuramos. Vamos personalizar isso no personalizador, talvez vamos definir para cinco por linha. Vamos fazer cinco por linha, e agora você pode ver que a incorporação de vídeo é o quinto item nesta linha e podemos realmente reordenar o conteúdo. Agora, o usuário pode entrar, adicionar qualquer número de blocos de imagem e blocos de vídeo, talvez alguns vídeos de moda feminina e fotos, e isso vai para a nova linha. Podemos precisar brincar com estilos móveis, mudar a grade para ser diferente no celular, então vamos precisar de algumas consultas de mídia, mas isso é talvez um projeto para você mesmo assumir, eu só queria dar nos alguma prática com esquemas e líquido, e que melhor maneira de fazer isso é através de uma seção. Se queremos ser capazes de colocar isso na página inicial, não se esqueça, precisamos inserir uma predefinição aqui. Vamos apenas fazer isso para terminar a lição, então vamos colocar uma matriz Presets, e novamente, eu vou voltar para a referência várias vezes predefinições aqui, só precisamos de um com uma categoria e um nome. Voltando aqui, colocar um objeto, eu coloquei esse objeto. Temos categoria do que chamamos ao outro. Eu acho que foi conteúdo personalizado, então você pode fazê-lo aparecer na mesma categoria, e nós vamos dar a isso um nome de galeria, clique em Salvar sobre isso. Agora, esta seção poderá ser incluída na página inicial também. Se eu for para a página inicial, adicionar uma seção, temos um problema aqui. Isso é certo. Eu não recarreguei, um personalizador ainda, lembre-se sempre de fazer isso caras. Agora, quando eu adicionar em uma seção, você verá que a galeria está aqui, e ela não manterá os mesmos dados que o lugar aqui, porque toda vez que uma seção é incluída, ela tem seus próprios dados. Podemos entrar e criar galerias diferentes. Lá vamos nós, vamos colocá-lo em outro bloco de imagem, a moda da mulher, e vamos fazer o último um vídeo, vamos ver se eu tenho o somatório. Não tenho o link de vídeo, mas lá você pode ver o espaço reservado lá. Temos nossa seção de galeria personalizada, podemos colocá-la em nossa página inicial agora, podemos usá-la em páginas específicas, e agora você deve ter uma compreensão sólida de um líquido e esquemas da Shopify. Agora, é claro, quanto mais experiência você ganhar com o líquido da Shopify, melhor você conseguirá, mas acredito que essa deve ser uma boa base para vocês. Lembre-se da documentação, a referência do líquido aqui, onde está? Referência líquida lá vai você. Este é o seu livro didático, esta é a sua documentação, você também tem o meu artigo, que eu recomendo vivamente para lhe dar uma perspectiva diferente sobre o líquido da Shopify, e então você tem a folha de truques também, mas isso é mais como uma referência rápida. Para qualquer coisa a ver com aprender todas as partes diferentes, talvez haja uma área de líquido que você não saiba muito sobre e que você queira aprender mais sobre. Confira a postagem do blog ou confira a documentação oficial. Procure, veja se consegue entender dessa forma, porque agora vamos passar do líquido para falar sobre a API do Ajax. Lembre-se, eu disse que o líquido da Shopify é como a linguagem de programação back-end com a Shopify. Se quisermos fazer algo puramente no lado do cliente, vamos precisar usar JavaScript, e felizmente, dentro do nosso tema, temos esta API chamada Ajax API para nos permitir fazer certas coisas. Aprenderemos tudo sobre isso na próxima lição e talvez duas lições se for uma particularmente longa, qualquer maneira, estou animado para a próxima, te vejo lá. 9. A API AJAX do Shopify: Bem-vindos de volta, rapazes. Nesta lição, vamos falar sobre a API ajax da Shopify. No momento, estou na documentação oficial da Shopify, encontrei esta página apenas pesquisando uma API ajax da Shopify e o Google deve ser o primeiro resultado ou um dos primeiros resultados e esta é a página na documentação do ajax da Shopify API. É muito bom, cobre quase tudo o que você pode fazer com a API ajax. Há algumas gemas escondidas na Shopify. Basicamente, a API ajax da Shopify é principalmente para adicionar itens ao carrinho, atualizar quantidades no carrinho, basicamente fazer qualquer coisa com o carrinho sem uma atualização de página, como diz aqui, eu tenho um exemplo aqui de uma loja da Shopify em execução o tema do impulso. Impulse é um tema premium da Shopify que é bastante moderno. Quero que você veja o que acontece quando estou nesta página do produto, seleciono uma variação e clique em “Adicionar ao carrinho”. Aqui você pode ver que há este carrinho lateral ou gaveta lateral que sai com o carrinho, e eu posso realmente aumentar a quantidade aqui e as atualizações de preço, e eu posso diminuir a quantidade e eu posso configurá-lo para zero e agora o carrinho está vazio. O tempo todo que estou fazendo isso, não vou recarregar a página. Como você pode ver daqui de cima, não há nenhuma nova página sendo carregada, é simplesmente abrir esta gaveta que já está na página. Como é que está a fazer isto? Ele está fazendo isso através da API ajax da Shopify, e posso prová-lo abrindo minhas ferramentas de desenvolvedor, aqui na guia Rede, posso ver todas as solicitações de rede. Vamos adicionar um item ao carrinho e você verá o primeiro que surgiu, add.js, e você pode ver aqui o endpoint que está indo é cart/add.js, e ele está enviando através de, um monte de informações. Agora você pode ver a resposta, é um monte de informações de corte para esta variante de produto em particular. Você verá aqui que também temos uma solicitação get para cart.js, e você pode ver aqui que temos o carrinho completo aqui neste objeto. Temos uma matriz para itens, e você pode entrar e ver esse item que acabamos de adicionar, então esta é a API ajax da Shopify em ação. Isso aqui, é um endpoint da API ajax da Shopify, e a razão pela qual eu sei disso é porque você pode encontrá-lo aqui. Aqui estão os diferentes pontos finais, e como você pode ver aqui, se eu fizer uma solicitação get para esse caminho dentro de uma loja da Shopify, posso usá-lo para obter o carrinho e ele volta no formato JSON novamente. Apenas um aviso, isso pode ser um pouco avançado para alguns espectadores usando APIs e o que é JSON, nós aprendemos sobre JSON em um vídeo anterior, mas aqui estamos realmente enviando solicitações para um servidor e retornando objetos em forma JSON se queremos realmente usá-los em nosso projeto, vamos ter que analisar esses objetos JSON. Este pode ser um tópico bastante longo e você provavelmente precisa de um pouco de conhecimento de JavaScript para obter sua cabeça em torno disso. Novamente, este não é um curso de JavaScript, é tudo sobre a Shopify, então você deve ter alguns fundamentos em HTML, CSS e JavaScript. Se não, eu tenho uma aula aqui em skillshed.com em JavaScript. Se você quiser verificar isso ou qualquer outro lugar que você quer aprender sobre ele. Mas é isso que vamos fazer, vamos consultar esses endpoints e fazer o que está acontecendo aqui. Agora, infelizmente, eu não tenho tempo para construir um carrinho lateral e toda essa interface de usuário nesta lição, o que nós vamos querer fazer é eu vou mostrar a vocês as solicitações apenas em JavaScript, e então eu vou mostrar a vocês um exemplo que eu fiz até que eu vou dar a vocês também, onde eu aluguei um carrinho para a página e eu sou capaz de atualizá-lo, tirar itens, atualizar quantidades diretamente na página. Vou mostrar um exemplo de como você pode realmente implementar a interface do usuário e o que é chamado de ouvintes de eventos no final deste vídeo. Mas antes de tudo, o que eu quero fazer é fechar isso, eu vou voltar para minha loja de testes, e eu vou para o novo tema em que estamos trabalhando. Porque nós vamos estar recuperando dados puramente através de JavaScript, eu realmente não preciso abrir meu editor de código, eu posso realmente fazer tudo através do console, o que eu vou fazer é abrir um produto dessa maneira podemos realmente adicionar este produto para o carrinho e, em seguida, eu vou abrir minhas Ferramentas de Desenvolvedor e ir para a guia Console . Theme vai ser mais agradável de olhar se vamos para baixo aqui, e vamos escrever nosso primeiro pedido, que é um básico, que vai obter o carrinho, se você está começando em um projeto em branco, você deve ter um carrinho vazio, mas você ainda vai obter um objeto carrinho antes de começar embora, ele vai torná-lo muito mais fácil se nós temos algo chamado jQuery instalado, se você não sabe se jQuery está em seu tema, é em um monte de temas, você pode escrever um comando jQuery básico e ver se ele aparece indefinido, eu tenho indefinido para a versão de sinal $ do jQuery e eu tenho jQuery não está definido. O que eu vou ter que fazer é incluir jQuery no meu project.I terá que fazer uma modificação de código apenas para trazer em jQuery. jQuery é uma biblioteca que só vai tornar mais fácil para nós fazer essas solicitações Ajax. Eu vou digitar em jQuery no google e encontrar um link para o CDN, bem aqui, e eu posso simplesmente pegar a versão minificada da versão mais recente. Vou copiar essa tag de script, entrar no meu arquivo de layout, e vou colar isso. Aperte “Salvar”. Agora, se eu atualizar a página, eu posso verificar se eu tenho jQuery instalado fazendo o mesmo comando, e agora você pode ver que eu tenho uma função de volta. Eu posso tentar a mesma coisa com a palavra-chave jQuery em si, e eu obter a mesma coisa. Não há erro dizendo o que é jQuery, então sabemos agora que temos jQuery e agora temos algumas funções mais agradáveis para fazer para obter solicitações com. O primeiro é um pedido para cortar JS para obter o carrinho, então este é um muito simples. Eu vou usar a função get em jQuery, e eu vou colocar em como o primeiro parâmetro, os pontos finais, que é simplesmente /cart.js, e então eu vou colocar na minha função callback. O que vai acontecer aqui é que eu vou fazer uma solicitação para este ponto final e, em seguida, eu vou acessar os dados que voltar, então o que eu vou fazer é o console registrar os dados para que possamos vê-lo aqui mesmo em nosso console. Não sei por que recebo este erro aqui, mas como podem ver, tenho os dados de volta. O problema com ele, no entanto, é que ele está em uma string gigante, então o que eu vou ter que fazer é analisar isso, porque isso é apenas uma string JSON, mas nós somos facilmente capazes de o que é chamado de analisar isso, e vamos obter de volta um objeto JavaScript com o qual podemos trabalhar. Em vez de apenas colocar em dados, eu vou envolver isso em uma análise, e agora você pode ver que nós obtemos um objeto JavaScript de volta que nós podemos realmente navegar e olhar para dentro. Agora parece que eu já tenho um item no meu carrinho, e para verificar se essa é a informação correta, eu estou indo para ir para a página do meu carrinho, e eu vejo, sim, eu tenho três desses tênis incríveis em O meu carrinho. Vamos remover esse produto do meu carrinho. O carrinho agora está vazio, vamos voltar para a página do produto, qualquer página do produto, e eu vou reexecutar esse “Comando”. Agora, você pode ver em nosso carrinho, temos o carrinho de item zero e temos a matriz de itens que está atualmente vazio, exatamente como seria de esperar. O que está acontecendo aqui é que, sem ter que entrar em nosso código de back-end, posso recuperar o carrinho de nossa loja da Shopify tudo no navegador. De uma perspectiva prática, isso é o que nos permite fazer as coisas puramente no front-end e na Shopify o lugar onde faz mais sentido ter essa funcionalidade é com o carrinho. Porque o carrinho é o principal ponto de interação com sua loja da Shopify. As pessoas estão navegando produtos na maior parte do tempo, estão vendo conteúdo. A interação principal acontece quando a pessoa está pronta para comprar. Eles colocam o item no carrinho e depois transformam o carrinho em um checkout e concluem o checkout. Não é de admirar que a Shopify forneça essa API para que você realmente faça coisas assim com seu carrinho. Vamos passar pela próxima. Vamos, na verdade, adicionar um item ao nosso carrinho. Eu vou rolar até o topo e este é o que eu estou procurando. Use esta opção para adicionar uma variante ao carrinho. Lembre-se, é uma variante que é adicionada ao carrinho, não ao produto. O que vamos precisar fazer é pegar a seleção da variante deste formulário e, em seguida, enviá-la para o carrinho usando este pedido de postagem. Podemos fazer isso de duas maneiras. Podemos especificar o ID da variante e a quantidade que queremos adicionar ao carrinho. Mas o problema com isso é que ainda não sabemos a variante até que uma pessoa coloque em sua seleção e a variante seja determinada a partir dessa seleção. O que podemos fazer é, em vez disso, serializar o formulário e o que isso vai fazer é pegar todos os dados do formulário e ele vai sair como um objeto aqui para nós. Vamos usar esse exemplo aqui. Eu vou voltar aqui. Enquanto tivermos um formulário em nossa página com a ação do carrinho barra adicionar, isso vai funcionar. Vou apertar “Enter” nisso. Agora vamos carregar o carrinho de novo, e ver o que aconteceu. Se abrirmos nosso carrinho, agora podemos ver que a contagem de itens é um. Em nossa matriz temos um item, e o item é a variação da nossa seleção aqui. Vou clicar nisto para limpar isto um pouco. Eu quero executar o add to cart solicitações Ajax mais uma vez e eu quero dar uma olhada em uma guia de rede no que realmente está acontecendo aqui. Lembre-se de que serializamos nosso formulário e enviamos esses dados para a Shopify e você pode ver aqui, o que isso é feito nos dá um objeto com o ID da variante que queremos adicionar e quantos deles queremos adicionar. Nós não precisamos necessariamente de um formulário de produto se formos capazes de encontrar a variante através de outros meios apenas como um FYI lá. Poderíamos, na verdade, em vez de serializar o formulário, se soubéssemos o ID da variante para outros meios, podemos simplesmente colocar em um objeto aqui com o ID da variante, copiá-lo daqui, e então a quantidade e então que fará exatamente a mesma coisa. Se eu limpar o console e executar o carrinho de novo, você verá que temos três desses sapatos agora em nosso carrinho. Apenas mais algumas coisas que você pode fazer com a API do Ajax. Podemos limpar o carrinho. Podemos fazer uma solicitação de postagem para /cart /clear.js, define todas as quantidades de todos os itens de linha para zero, então limpa seu carrinho. Vamos voltar aqui, fazer uma solicitação de post usando jQuery e os endpoints foi carrinho claro e não precisamos enviar mais dados com ele, então podemos apenas escrevê-lo assim. Agora, se executarmos o carrinho novamente, você verá que nosso carrinho está completamente vazio. A última coisa que você provavelmente vai querer fazer com seu carrinho usando a API do Ajax é atualizar a quantidade. Aqui você pode usar a solicitação de postagem para o ponto final de alteração de barra do carrinho, e você pode alterar a quantidade de um item já no carrinho. O que vamos fazer é adicionar uma variante ao carrinho de novo. Apenas copiando e fazendo o mesmo pedido novamente. Agora, eu posso criar uma solicitação de postagem para este endpoint e colocar em um objeto exatamente como eu tinha antes. Posso tirá-lo aqui e talvez eu queira atualizar a quantidade para cinco. Agora, eu posso enviar o pedido de postagem. Vamos limpar o console e abrir o carrinho. Acabei de adicionar outro. Agora, nós devemos ter seis é o que eu estou procurando e como você pode ver, nós temos seis deste item. Temos apenas um item de linha porque é tudo a mesma variante, mas a quantidade é seis. Tem toda a informação aqui sobre a variante. Agora, no formulário de item de linha, como você verá no carrinho. Tudo bem, legal. Essas são as principais coisas que você gostaria de fazer com o seu carrinho. No exemplo, vimos e o exemplo, vou mostrar-lhe em um segundo. É para isso que estamos usando a API do Ajax. A API do Ajax da Shopify facilita o uso desses endpoints para recuperar dados sobre seu carrinho e modificar seu carrinho. O verdadeiro desafio vem de enviar ouvintes de eventos e lidar com essa resposta para atualizar sua interface do usuário. Infelizmente, essa é uma lição muito pesada em JavaScript e não é particularmente específica para a Shopify. É por isso que eu vou apenas mostrar um exemplo, agora e executá-lo, mas nós não vamos codificá-lo a partir do zero nesta lição. A razão por que é, é conhecimento geral JavaScript de como fazer isso. Se você quiser saber mais sobre JavaScript, novamente, eu tenho uma aula sobre compartilhamento de habilidades, ou você pode aprender sobre JavaScript em outro lugar. Isso só está preocupado com a Shopify, mas eu quero dar um exemplo de, como seria. Se eu fechar esta pré-visualização e voltarmos para a loja, eu realmente configurei um tema com um exemplo de carrinho reativo. Bem aqui, eu tenho este tema chamado Ajax API Demo, e é baseado no novo tema. Basicamente, a única coisa que eu mudei é que eu adicionei Bootstrap, que é um framework CSS. Você verá que os estilos são um pouco diferentes e nós temos esses botões, estilos bem fora do portão. Se eu entrar em um produto, você pode ver que o carrinho está sentado ao lado do produto e, se eu adicionar um item ao carrinho, não preciso ir para a página do carrinho para ver meu carrinho atualizando. Posso até alterar quantidades e todas as diferentes partes do meu carrinho serão atualizadas. Como eu disse, normalmente você teria que ir para a página do carrinho e vê-lo lá. Mas mesmo a partir daqui, você não pode atualizar quantidades sem ter que recarregar a página. Para fazer um carrinho como o que acabamos de ver, então voltando ao modelo do produto, devemos usar JavaScript e a API do Ajax. Só para provar que isso está usando a API do Ajax, vou abrir minhas Ferramentas do Desenvolvedor e vou dar uma olhada na guia Rede. A primeira coisa que eu quero fazer é, na verdade, antes de olhar na guia Rede, eu só quero limpar o carrinho completamente. Vou limpar este console também. Agora, vamos adicionar um item ao carrinho. Como você pode ver, temos uma solicitação para add.js. Se eu olhar lá dentro, podemos ver o que estamos enviando é uma identificação e uma quantidade. Estes são os dados do formulário. O que ele está fazendo é realmente serializar o formulário, agarrando esses dados e, em seguida, ele está enviando para a API do Ajax. Na verdade, antes disso, antes mesmo de adicionar um item ao corte, se eu apenas atualizar a página. Você verá que estamos recebendo o corte da API do Ajax. A razão pela qual você pode dizer que é se olharmos aqui, podemos ver uma solicitação get para cart.js. Se eu abrir isso, vou ter que mover isso um pouquinho. Você pode ver que não enviamos nada porque estamos apenas pedindo para chegar ao carrinho, não estamos postando nada. Você verá que a resposta que recebemos de volta é o carrinho inteiro como um objeto. Lembre-se que vimos isso antes quando estávamos trabalhando em nosso console. Mas a diferença agora é que o carregamento da página está realmente desencadeando isso. Então o que está acontecendo é que estamos pegando esses dados e estamos representando na página. Vamos dar uma olhada no que acontece quando eu adiciono outro item ao carrinho. Fazemos uma solicitação para add.js. Você pode ver aqui o que recebemos de volta é um item de linha. Não recuperamos o carrinho inteiro, mas recuperamos um item de linha, e isso nos dá as informações necessárias para atualizar nosso carrinho. Agora, se eu aumentar a quantidade, você pode ver que estamos fazendo uma solicitação para change.js, que é outro ponto final. Você pode ver aqui que change.js. O que estamos fazendo é enviar o ID e estamos enviando através da quantidade para a qual precisávamos mudar. O que isso vai fazer é pegar os dados e, em seguida, ele vai devolver o carrinho inteiro novamente. Você pode ver aqui, se olharmos dentro do item, podemos ver quantidade em algum lugar aqui. Lá vamos nós, são três, e então a contagem total de itens é três lá. Se adicionamos outro item de linha, então só precisamos selecionar uma variante diferente, adicione isso ao carrinho. Agora você pode ver que adicionamos esse item de linha e agora temos todos os seus dados aqui. Se eu fosse mudar a quantidade sobre isso, olhe para o próximo pedido. Você verá que temos cinco itens espalhados por duas linhas. A primeira linha tem uma quantidade de dois e a segunda linha tem uma quantidade de três, para um total de cinco. Então, você pode ver que temos o preço total e tudo mais. Eu queria mostrar-lhe como a API do Ajax está funcionando, bem como atualizar a interface do usuário na página. Agora, como eu disse antes, há algumas partes nisso. Primeiro de tudo, os ouvintes de eventos. Certas coisas acontecem na página chamada eventos. Em seguida, esses eventos são definidos para acionar solicitações para a API do Ajax. Agora, é claro, quando os dados voltam, precisamos realmente fazer algo e, em seguida, algo está atualizando nossa interface de usuário. Vamos dar uma olhada no código agora. Se eu voltar para este tema e eu clicar em Editar código, há um pouco de código aqui, e eu não vou explicar linha por linha. Mas o que eu fiz aqui é que usei um bigode de código de biblioteca, certo ela. O que isso me permite fazer é criar esses modelos. Então este é o modelo para todo o carrinho. Este é o modelo para o item de linha. Se você quiser aprender mais sobre bigode, mustache.js é onde você pode aprender mais sobre isso. Modelos de lista lógica, você pode ler o manual aqui. Não é a documentação mais sofisticada, mas essencialmente você pode pensar em bigode como uma versão JavaScript do líquido. Ele realmente usa os mesmos delimitadores, é por isso que precisamos realmente mudar os delimitadores para os personalizados para que eles não entrem em conflito. Então, como você pode ver aqui neste modelo, assim como faríamos em líquido, nós iríamos inserir uma URL como esta. Mas, é claro, porque estamos em líquido e o motor líquido vai interpretar isso como líquido, precisamos usar delimitadores personalizados para diferenciar essas variáveis de modelo das que estão em líquido. Nós temos os dois templates aqui e temos um monte de JavaScript que inclui nossos ouvintes de eventos e agora solicitações de API Ajax, e então nós lidamos com a resposta. Também temos alguns estilos aqui para estilizar o carrinho. Como eu disse, não vou passar linha por linha deste documento porque há muita coisa acontecendo aqui. Escrevi extensos comentários sobre todas as diferentes funções. Eu definitivamente teria uma leitura deste arquivo, e se você tiver alguma dúvida, me avise. Você pode acessar este arquivo através da minha página do GitHub, eu tenho um repositório chamado skillshare onde você pode acessar recursos para todas as minhas aulas no skillshare. Aqui você pode ver product.liquid é um desses recursos. Este é realmente um pouco mais agradável de olhar porque ele faz realce de sintaxe nesses modelos JavaScript. Mas você precisará realmente mover isso para o seu tema, a fim de realmente interagir com esse código e ver o que ele está fazendo. Mais uma coisa antes que eu passo através do código um pouco, é que você vai precisar jQuery instalado em seu tema. Portanto, se você ainda não o tiver, você precisará instalá-lo baixando-o e incluindo-o em sua pasta de ativos. Ou a maneira simples é apenas incluir um link através de uma tag de script para a CDN. Então você pode apenas, como eu tenho este link, foi eu fui para jQuery, jQuery CDN, e eu encontrei o URL. Assim como fizemos antes quando estávamos fazendo nossas solicitações no console, precisamos realmente incluir esse script em nosso theme.liquid. Ou se já existe, tudo bem. Mas há algumas partes aqui onde estamos usando jQuery. Como eu mencionei, temos nossos dois modelos aqui. Antes disso. Temos a página do produto como ela normalmente aparece. Então aqui é onde está o nosso código de modelo de produto normal, que eu tenho aqui. Temos um div aqui para o carrinho lateral. Aqui temos este div com uma identificação do carrinho que vai aqui. A div do carrinho vai aqui, ID é o que usamos para dizer bigode onde colocar o modelo. Quando a página carrega, vai carregar este modelo aqui para este div. Agora, este outro item de uma linha é para quando adicionamos um novo item de linha ao carrinho. Então é uma seção do carrinho. O que isso vai fazer é anexar a uma parte específica deste modelo. Isto é basicamente tudo apenas maquete com os dados apropriados colocados em diferentes partes deste maquete. A verdadeira magia está bem aqui. Então, para passar por este código de forma semelhante ao que eu mostrei aqui. Lembre-se que tivemos, então eu vou colocar de volta em um, atualizar a página e você verá que o carrinho é gerado. Agora, se eu atualizar a página novamente, você pode ver que isso renderiza primeiro e então isso renderiza, isso é porque isso é renderizado por líquido. Isso está vindo do back-end e isso está realmente sendo renderizado no front-end usando bigode. Então o que faz isso é esta função aqui, executar obter carrinho. Quando a página é carregada, que é quando executamos esta função get carrinho/se olharmos para cima aqui, o que get cart faz é que ele envia uma solicitação para a API AjAX para obter o carrinho, ele passa esses dados, e então ele envia para este função que lida com os dados. Eu fiz este tratamento dos dados em alguns lugares diferentes, é por isso que eu mudei isso para uma função diferente. Então você pode ver a função aqui em cima. O que isso faz é atualizar o total do carrinho e os itens com base no que volta da API, a API tem todos os preços no sentido, o que precisamos fazer é dividi-los todos por 100, a fim de obter o preço em $, e então nós renderizamos o carrinho com bigode. Este é o método bigode, a fim de pegar nosso modelo, pegar nossos dados, e combiná-los juntos para criar nossa saída. Então, como você pode ver aqui, nós estamos pegando o elemento que tem a identificação do carrinho vai aqui, e nós estamos colocando essa saída de bigode bem ali. Ok, então é isso que está acontecendo quando eu carrego a página pela primeira vez. Ele está fazendo que pedido Ajax e, em seguida, tornando esse modelo usando bigode. E quando adiciono um produto ao carrinho? Então, vamos apenas escolher esta variante tamanho nove e eu clicar em Adicionar ao carrinho. Oh, nós já temos tamanho 9, então isso só vai aumentar a quantidade. Se eu entrar aqui e eu olhar para o enviar Event Listener para adicionar ao carrinho, estamos fazendo um monte de coisas diferentes aqui onde impedir que o formulário faça um formulário padrão enviar, para que possamos lidar com o formulário usando JavaScript. Estamos fazendo como fizemos antes. Estamos serializando o formulário para que possamos obter seus dados. Em seguida, estamos passando para a API do Ajax para uma solicitação de post. Vamos passar a resposta, atualizar o total do carrinho. Então nós vamos obter a resposta de volta do servidor e lidar com isso. Lembre-se que a resposta para adicionar um item ao carrinho na API do Ajax é o item. Então não é o carrinho inteiro como com cart.js ou este, cart/change.js. As respostas para esses são o carrinho inteiro, mas a resposta para esta solicitação específica é o item de linha. Por causa disso, o total do carrinho, nós temos que descobrir nós mesmos porque ele não está voltando nos dados. Então foi isso que eu fiz aqui. É muito fácil de descobrir, este vai ser o total do carrinho anterior mais qualquer que seja o preço desse item é. Então nós realmente precisamos ir encontrá-lo na interface do usuário e atualizá-lo, dividindo-o por 100, a fim de obtê-lo i $. Isto aqui, vamos verificar se o item já existe no corte. Lembre-se que adicionamos outro item da mesma variante. Isso significa que não precisamos de um novo item de linha, só precisamos atualizar a quantidade desse item de linha. Se eu entrar aqui e escolher uma variante diferente, você verá que temos um novo item de linha. Isso é o que esta condicional faz. Ele verifica se uma variante já existe. Você pode ver a função aqui em cima. Retornamos uma matriz com base em se uma correspondência foi encontrada. Se já houver uma correspondência, em vez de correr bigode para renderizar um novo item de linha, nós só temos que atualizar algumas coisas sobre o item de linha existente. Nós apenas pegamos o item do DOM usando isso e, em seguida, atualizamos a quantidade e o preço. Aqui você pode ver se eu adicionar outro, as coisas que mudam são a quantidade e o preço aqui, e claro, o total, que já tratamos aqui em cima. Mas se for um item totalmente novo, o que vamos fazer é empurrar esse item para a nossa matriz de itens. Vamos pegar os dados, os preços e dividi-los por 100 novamente para obter valores em dólares. Em seguida, vamos renderizar o modelo de item de linha. Sempre que estamos renderizando um novo pedaço de HTML, eu optei com ir com bigode em vez de fazer jQuery. Se você está escrevendo um monte de mark-up , ajuda ter uma linguagem de modelagem. Mas se você está apenas atualizando algumas coisinhas como um número aqui, então você não precisa realmente se preocupar. O último, que foi o que acabei de fazer, está a actualizar a quantidade. Se eu for em qualquer um desses e atualizar a quantidade, se eu definir de volta para zero, como você pode ver aqui, se a nova quantidade é menor que um, o que eu vou fazer é apenas esconder esse item logo após o pedido de postagem. Recuando um pouco, o que eu vou fazer é configurar ouvintes de eventos aqui nesses botões de ajuste de quantidade. O “Plus” vai ajustar a quantidade por um positivo. O botão “Menos” vai ajustar a quantidade em negativo. Isso vai ser passado para aqui junto com o evento, e nós vamos encontrar a quantidade atual e ID da variante do item, aplicar o ajuste para a quantidade atual para obter uma nova quantidade, e então aqui nós enviamos o post solicitação. A razão pela qual precisamos encontrar a quantidade e o ID da variante é porque eles são o que é necessário para enviar a API. Então a resposta que recebemos de volta é o carrinho inteiro, então podemos pausar isso e, em seguida, se estamos removendo um item do carrinho, então nós vamos apenas escondê-lo, e então nós vamos atualizar essas variáveis. Se não, vamos lidar com um objeto de carrinho completamente novo. Isso só torna mais fácil parecer que estamos recebendo todo o carrinho de volta da API. Tudo o que precisamos fazer é passar os dados de volta para esta resposta do carrinho do identificador e, em seguida, ele rerenderizará o carrinho inteiro. Se eu pressionar isso, nós rerenderizaremos o carrinho inteiro com todos os dados. Como você pode ver, esse valor está sendo atualizado e esse total também está sendo atualizado. Isso é um monte de código e eu estou usando ES6 muito aqui. Isto é uma coisa de nível avançado. Isto definitivamente não é coisa de principiante. Definitivamente, não se preocupe se você não entender completamente isso. Isso requer um pouco de conhecimento JavaScript e você precisará saber sobre a sintaxe ES6 também. Por exemplo, o que eu fiz aqui com a função seta, o equivalente em JavaScript tradicional é assim. Estou usando ES6 só porque acho que parece melhor, mas talvez seja confuso para você. Novamente, este é um pouco de uma lição de níveis avançados. A principal coisa que eu quero que você tire disso é o que aprendemos aqui com a API Ajax. Eu quero que você entenda que se estamos criando carrinhos que não exigem recargas de página para atualizá-los, então estamos usando a API do Ajax. Lembre-se, qualquer coisa que permaneça no lado do cliente e envolva programação, obtenção de acesso a dados de back-ends, se não estivermos recarregando a página e fazendo uma nova solicitação de servidor dessa maneira, então estamos usando Ajax, e a API do Ajax e a Shopify é como podemos acessar esses dados. Essa é a principal coisa que eu quero passar neste vídeo. Isso deve abrir você para novas possibilidades com a Shopify, mas talvez você ainda não esteja pronto para aproveitar totalmente isso. Há muita profundidade para JavaScript e a API. Mas aqui, eu acho que é um exemplo que realmente resume tudo. Se você for, novamente, confira o carrinho, passe algum tempo olhando para ele, veja se consegue descobrir. Caso contrário, trabalhe em suas habilidades em JavaScript. Se for tudo também, não se preocupe. Você sempre tem sua página padrão do carrinho. Na verdade, muitas lojas da Shopify, mesmo algumas realmente grandes, não têm um carrinho totalmente do lado do cliente. Havia uma loja que eu vi, eu fiquei realmente surpreso que eles não tinham isso quando eu estava fazendo pesquisa para esta aula. Luxy Hair é uma loja muito grande da Shopify. Se realmente formos a um produto, aqui estamos. Temos este produto aqui. Se eu clicar em “Adicionar ao saco”, que é o equivalente a adicionar ao carrinho, seremos redirecionados para a página do carrinho, e se eu remover um item, a página inteira também será recarregada. Mesmo em um dos principais sites da Shopify, eles não estão usando um carrinho totalmente do lado do cliente. Não é grande coisa se você não está pronto para implementar isso ainda. Muitos temas já têm isso. Em termos de seu conhecimento de programação de temas da Shopify, isso depende do quão longe você deseja ir com ele. Mas se você quiser codificar seu próprio carrinho do lado do cliente, ou você quer ser capaz de manipular um tema atual com esse recurso dentro dele, então você precisará saber sobre esta API do Ajax e saber JavaScript. Mas não é essencial criar uma loja de sucesso. Você sempre pode usar sua página de carrinho. Você não precisa necessariamente ter um carrinho do lado do cliente ou um carrinho lateral que sai. Esta lição, eu acho que foi realmente grande, mas é um assunto bastante grande. Não é um assunto obrigatório. Eu não acho que você possa criar um curso sobre programação de temas da Shopify sem falar sobre esse recurso incrível e essa API. Se você estiver interessado, aqui está a documentação no site oficial. Confira meu código de exemplo se você quiser ver minha implementação. Mas é aí que vou deixá-lo na API do Ajax da Shopify. Na próxima lição, voltaremos ao líquido da Shopify e aprenderemos algumas patentes mais avançadas na Shopify. Vejo-te nessa. 10. Padrões Liquid avançados: Nesta lição, voltaremos nossa atenção para o líquido da Shopify e falaremos sobre algumas das limitações e peculiaridades dentro da linguagem de modelos. Eu vou voltar para o meu novo tema, ir para o código, e eu vou abrir o modelo de índice. Vou até aqui, clique em Índice. O que eu vou fazer para esta lição é eu vou copiar e colar exemplos e então nós vamos trabalhar através deles. O que eu fiz é que eu passei pela linguagem e escolhi um monte de peculiaridades de limitação e as maneiras em torno delas. Eu tenho este parágrafo inicial aqui. Este é apenas um comentário, algo para nós lermos, e então eu vou trazer os exemplos específicos. O que eu escrevi aqui é que enquanto você pode pensar em líquido como uma linguagem de programação, na verdade é apenas uma linguagem de modelagem. Certas coisas que devem ser dadas como poder percorrer uma lista global de artigos ou produtos simplesmente não são possíveis no líquido da Shopify. Muito frustrante quando você está procurando essa consistência e convenção. Esta é a linguagem de modelos da Shopify. Eles têm muitas liberdades e desafiam convenções em várias áreas. Além disso, os únicos tipos de dados que você pode criar e líquidos são primitivos e arrays, incluindo arrays de arrays e primitivos, e o que eu quero dizer com primitivos são basicamente apenas strings e números. Strings, é claro, são apenas pedaços de texto, se você não está familiarizado com esse termo. Outra coisa que eu deveria mencionar na frente, eu vou estar usando um monte de terminologia de programação. Eu vou basicamente estar tomando um programa é abordagem para líquido e mostrando como podemos fazer mais coisas de programação avançada nesta linguagem de modelagem, que é uma linguagem altamente limitada. Aqui estão algumas das limitações. Como acabei de mencionar, você não pode criar um objeto em líquido. Você verá que em apenas um segundo, você pode percorrer certos objetos semelhantes a matrizes. É muito frustrante, mas você não pode realmente percorrer todos os artigos em seu site da Shopify e também não pode ver todos os produtos em seu site da Shopify. A única maneira que você pode fazer isso é através da coleção all, que mostra todos os produtos. Não há nenhuma maneira para nós realmente olhar através de produtos nós mesmos usando líquido. Muito estranho. Mas talvez eles tenham uma razão por trás disso. Você também não pode criar suas próprias funções. Isso é algo que você faria em qualquer linguagem de programação, mas você não pode criar funções em líquido. Há uma solução alternativa para isso. Digamos, por exemplo, se você quisesse usar uma função a fim de reutilizar código, e você tinha algum código que apenas pegou uma variável de entrada e fez a mesma coisa toda vez, você ainda pode conseguir algo como uma função usando um snippet, e com snippets, você pode realmente passar parâmetros, e essa é uma maneira que você poderia imitar certas funções que você encontraria em outras linguagens de programação. A última coisa que eu notei aqui é que você pode criar um booleano que é um valor verdadeiro ou falso. Mas você não pode atribuir o resultado de uma comparação a uma variável e, em seguida, arrefecer esse booleano. Verá o que quero dizer em um segundo. Vamos falar sobre o primeiro exemplo, que é concatenação de string. Eu vou copiar e colar em um comentário aqui para concatenação de string e um cabeçalho, que possamos vê-lo em nosso front-end. O que eu fiz aqui é que fiz duas variáveis. Um é o meu primeiro nome e o outro é o meu último nome. Agora talvez eu quisesse criar uma nova variável com meu nome completo. Em JavaScript ou outras linguagens de programação, você pode fazer tudo isso em uma linha. Se eu abrir meu console, limpá-lo, criar um FirstName, criar um LastName e, em seguida, a fim de criar o FullName, eu poderia apenas usar o que é chamado de concatenação de string. Posso adicionar cordas um ao outro assim. Eu usaria a variável em vez do explícito Christopher. FirstName mais um espaço entre mais o Sobrenome, e agora quando eu chamo por um FullName, eu tenho o FirstName mais um espaço mais o Sobrenome. Eu acho que eu posso apenas usar mais e desvantagens para adicionar juntos cordas. Na Shopify, não funciona assim. Vamos dar uma olhada em como faríamos isso. A maneira como fazemos isso na Shopify é através da tag de captura. O que a captura faz é capturar basicamente tudo dentro das etiquetas de captura. Podemos fazer um loop aqui dentro. Podemos fazer todo o tipo de coisas. Tudo o que vou fazer é um exemplo muito simples. Eu vou enviar o first_name, em seguida, um espaço, em seguida, saída last_name. Agora criamos uma variável chamada FullName. O que eu posso fazer é gerar essa variável, Full_Name, e só para sabermos onde ela está chegando no front-end, eu vou colocar full_name na frente dela também. Agora, vamos abrir nossa pré-visualização em uma nova guia e veremos que eu tenho um título, Concatenação de Cordas, Nome Completo, Christopher Dodd. Infelizmente, eu tenho meu rodapé aqui também, o que faz parecer feio. Permitam-me que remova brevemente isso do rodapé porque esta será a última lição que faremos sobre o líquido. Se eu voltar para aqui, não teremos mais aquela mensagem de rodapé. Agora você pode ver os resultados do FullName saiu. Este é um exemplo muito básico, mas você pode imaginar o que você poderia fazer aqui. Você poderia colocar todo tipo de operações aqui. Você pode criar um loop completo e vamos realmente ver em um exemplo posterior neste vídeo como estamos colocando um loop completo dentro de uma captura, a fim de fazer uma matriz. Vejamos o próximo exemplo. Para o próximo exemplo, vou copiar e colar o código diretamente porque há um pouco aqui e eu não quero reescrevê-lo. Basicamente, este exemplo está em sub-strings. Sub-strings, como o nome sugere, uma parte de uma string. Digamos, por exemplo, que queríamos pegar a parte real do ID de vídeo de um URL de vídeo do YouTube. Em outras linguagens de programação como JavaScript, poderíamos usar uma função chamada substring, e poderíamos selecionar onde queremos que a substring comece e termine, e então poderíamos atribuir isso a uma nova variável. Bem, é um pouco diferente no líquido da Shopify porque não há função ou método de substring no líquido da Shopify. O que precisamos fazer é realmente criar uma matriz a partir da string, e então nós vamos encontrar a parte que estamos procurando tomando um dos itens da matriz. Temos este URL de vídeo do YouTube armazenado nesta variável e, em primeiro lugar, vamos verificar se ele contém o relógio de barra youtube.com. Esta é uma etapa opcional. Não é necessariamente relevante para o exemplo, mas é isso que você gostaria de fazer. Você gostaria de verificar se ele realmente tem isso na URL, e então se ele tem, o que nós vamos fazer é dividir a corda em torno dos v iguais e então nós temos acesso ao que está em ambos os lados dela. Agora é aqui que fica confuso porque temos que fazer isso em várias etapas, e torna difícil rotular suas variáveis corretamente. Este exemplo, nós temos video_id aqui, e então nós estamos reatribuindo-o a algo completamente diferente aqui em baixo. Aqui video_id não necessariamente faz sentido como um nome de variável. Mas o que estamos fazendo aqui é apenas criar uma matriz, a fim de acessar nosso ID de vídeo. Se eu puder falar um pouco sobre ele, o que estamos fazendo é criar uma variável onde estamos pegando a URL e vamos dividi-la por v igual. Se nos lembrarmos do que a divisão faz, ela cria uma matriz. Agora temos esta matriz video_id e tem dois itens. Tem tudo antes do V ser igual, e depois do V é igual. Vamos colocar um cheque extra aqui. Novamente, não é obrigatório, mas se você tiver um segundo argumento em seu URL do YouTube, você vai querer verificar isso. Se for esse o caso, vamos nos dividir de novo porque não queremos o papel depois do fim. Digamos, por exemplo, que eu fui até aqui e talvez eu coloquei em um tempo, eu acho que o código é t no YouTube, t ou s, eu acho que deixe-me apenas salvar isso porque nós estamos filtrando aqui e tirando a parte após o fim, nós devemos Ficar bem de qualquer maneira. Agora o que eu estou fazendo é pegar essa matriz aqui em cima, encontrando o segundo valor nessa matriz, que será a parte após v igual, e então eu vou dividi-lo novamente por este fim. Eu vou dividi-lo novamente, e na mesma linha, eu vou pegar o primeiro item na matriz resultante. Eu tenho essa corda que vamos transformar em uma matriz. Então nós estamos dividindo-lo com este como o primeiro item da matriz, e então este como o segundo item da matriz. Então o que temos que fazer é fazer exatamente a mesma coisa nesta seção. Este vai ser o primeiro item da matriz, e este do outro lado da extremidade, que é este caractere dividido, é o que vai ser o segundo item na matriz. Então nós apenas ligamos primeiro, para obter o primeiro item na matriz, nós não nos importamos com o segundo. O que acontece é que obtemos nosso video_id final e então podemos inserir isso diretamente em um link Incorporar. Vamos ver se isso funciona. Vamos até aqui atualizar a página. Agora podemos ver que temos o meu link de vídeo aqui. O que acabamos de fazer foi converter esse URL do YouTube em um URL de incorporação do YouTube, que leva o mesmo id daqui. Agora eu sei que isso é um monte de linhas, e como eu disse, os nomes das variáveis são confusos porque nós temos que dar vários passos. Talvez queiras nomear outra coisa a isto. Talvez você queira chamar isso de um vídeo URL_parts e, em seguida, referenciá-lo como vídeo_ partes aqui. Vamos fazer isso como exemplo para facilitar. Temos partes de vídeo e, em seguida, chamamos de video_parts aqui. Salve que ainda deve funcionar, e acontece que funciona. Isso é apenas uma dica se você quiser torná-lo mais legível para si mesmo e isso soa confuso, você pode rotular a variável outra coisa, mas muitas vezes você vai vê-lo assim. Acabaste de reciclar um nome de variável. O próximo exemplo é provavelmente o mais complicado dos exemplos sobre os quais vou falar nesta lição avançada de líquido, e isso é criar matrizes de objetos. Eu coloco objetos entre aspas duplas aqui porque, como mencionamos antes, não podemos criar objetos e líquidos e não podemos criar nossas próprias matrizes de objetos como vimos antes. A única maneira que podemos criar uma matriz é pegando uma string e dividindo-a com base em algum valor delimitando. Em seguida, temos um item para cada uma das partes da string que estão entre esses valores de divisão. Então isso significa que não podemos realmente criar matrizes de objetos. Então, como escrevi aqui, o líquido da Shopify não permite a criação de objetos e você também não pode criar matrizes de objetos. Você pode, no entanto, criar matrizes de strings e números, bem como matrizes de matrizes usando Captura e divisão. Então, como eu quero explicar isso, para aqueles de vocês que talvez não entendam totalmente o que eu estou dizendo aqui é mostrar um exemplo em JavaScript primeiro. Então, em JavaScript, eu poderia criar dois objetos. Vamos criar duas pessoas objetos que eu vou ter person1, que vai ter um primeiro nome e sobrenome de Christopher Dodd. Então eu inventei um nome de pessoa aleatória para person2, que vai ser Michael Jordan. Não sei por que escolhi Michael Jordan. O nome dele veio até mim sem fazer nenhuma comparação lá. Então o que eu poderia fazer é criar uma matriz de pessoas. Eu poderia armazenar os dois objetos nesta matriz. A maneira como você cria uma matriz em JavaScript, abre um colchete, coloca em seu primeiro objeto, colocando seu segundo objeto ou valor. Então agora se eu saída matriz pessoa, você pode ver que eu tenho esta lista de objetos. O que isso me permite fazer, como fizemos com looping through produtos em uma coleção, é que eu posso percorrer essa matriz e pegar o primeiro nome de cada pessoa, por exemplo. Infelizmente, não podemos fazer isso sozinhos no líquido da Shopify. O equivalente ao que eu fiz se ele existisse no líquido da Shopify seria criar um array chamado, vamos chamá-lo de coleções. Acho que não estamos usando isso já. Eu poderia simplesmente não usar colchetes em líquido, mas seria bom se você pudesse criar algo como esta coleção, coleção2 e então nós terminamos assim. Então agora criamos esta matriz de coleções. Então, se eu salvar isso, vamos ter um erro de líquido aqui em cima. Erro de sintaxe líquido esperado final da string mas encontrado vírgula na coleção, collection2. Então ele está nos dizendo que não podemos fazer isso e, de fato, se tentarmos e referenciar o primeiro item neste. Então, se eu tentei fazer coleções, pegue o primeiro item na matriz e diga título, se eu produzir que nada vai aparecer na tela. Acabamos de receber o rumo para esta secção. Mas nós realmente não temos o título da primeira coleção porque nós não podemos realmente fazer isso. Então isso pode ser frustrante às vezes em líquido, há momentos em que podemos querer criar nossas próprias coleções, eu acho. Mas a maneira óbvia de contornar isso é realmente criar sua coleção na Shopify e, em seguida, você pode fazer loop através dela como normal. Na Shopify, você não pode criar objetos em líquido, mas você pode, é claro, criar coleções em sua loja e isso é um objeto com uma variedade de produtos lá. Existem algumas soluções alternativas para isso. Eu só vou copiar e colar mais algum código para passar se vocês agora. Este primeiro exemplo é um pouco complicado, mas uma vez que você coloca sua cabeça em torno dele, isso deve fazer sentido. O que vamos fazer é usar essa tag de captura antes para criar uma lista de produtos. Como vamos limitar cada um desses atributos diferentes? É que vamos usar um símbolo de tubo, e então no final desse produto vamos colocar um duplo cólon. Vamos ver o que está acontecendo aqui. Então estamos capturando o resultado disso em uma variável. Então o que vamos fazer é percorrer uma variedade de produtos em uma coleção e então vamos pegar os potes que queremos ter acesso. Então temos o título do produto. Em seguida, colocamos em um caractere para dividirmos isso com o próximo valor, que é URL do produto, dividir novamente e dividir novamente usando esses valores que retiramos do objeto do produto. Então este coloca em um delimitador para acabar com o produto, desde que não seja o último. Porque nós não queremos confundir nosso filtro dividido aqui para pensar que há outro item depois disso. Então, se for o último, é isso. Não é necessário dividir mais. No final disso, o que vamos ter é uma string com todas essas informações divididas por tubos, e no final do produto, essas duas colunas. Acho que vai fazer mais sentido se eu sair na página. Então, se eu apenas produzir produtos, listar, salvar e veremos os resultados em nossa visualização. Então, se olharmos para baixo, temos o título, então temos um pipe para separá-lo da URL desse produto e temos outro pipe para separá-lo da descrição desse produto. Então nós temos outro pipe para separá-lo da URL da imagem, e então nós podemos ver aqui nós temos os dois dois pontos para separá-lo do próximo produto, e então nós temos a mesma coisa novamente. Então isso não é muito útil porque isso é tudo apenas uma string, mas porque nós temos esses caracteres lá para indicar quando dividir, agora podemos usar o filtro de divisão para realmente fazer isso em uma matriz. Então agora eu vou criar um array de produto a partir dessa lista de produtos e dividi-lo por este delimitador. Então agora eu vou ter apenas este papel. Vou ter um array com itens que só têm essa parte. Mas novamente, eu quero dividir isso mais uma vez que eu esteja dentro dele e eu quero dividir por este cano. Então agora eu vou percorrer todos os produtos e a matriz de produtos e, em seguida, criar outro array chamado product_vals e vamos dividir por isso agora. Agora, eu posso referenciar os valores dentro desta matriz pela sua posição. Então, infelizmente, é claro que não estamos criando um objeto aqui. Eu realmente não posso dizer, me dê o título do produto. Portanto, não é um código muito legível, mas novamente, é uma solução alternativa. Então eu posso realmente usar isso para encontrar o primeiro valor e se eu sei que o primeiro valor é sempre vai ser título do produto, então isso vai me dar o título do produto. Isto vai dar-me o terceiro valor. Então, se eu olhar para este aqui e então eu vou até aqui para o número três, ele vai me dar a descrição do produto. Então, se eu salvar isso, eu acho que o código estava sendo executado antes de qualquer maneira, nós atualizamos a página. Você verá que temos o título e a descrição de todos esses produtos dentro desse array. Então, este não é um exemplo muito prático, mas está mostrando uma maneira de você realmente fazer coisas para as quais você usaria um objeto, mas faça isso no líquido da Shopify, onde você não pode criar objetos. Vou fazer mais um exemplo e depois vamos seguir em frente. Este exemplo pode realmente fazer mais sentido para você. Então este exemplo eu tirei de raisedbyturtles.org, definitivamente verificá-los e dar-lhes um grito para mim. Então o que estamos fazendo aqui é criar vários arrays. A primeira matriz vai descrever o que este objeto é e, em seguida, a segunda matriz e matrizes depois que terá valores, atributos basicamente dentro dessa matriz. Então, se você pode ver o que eu estou fazendo aqui ou o que o autor em levantado por turtles.org fez. Criamos esta matriz de itens e dividimos por este símbolo de hash. Então vamos ter em nossa matriz de itens dois itens, item1 e item2. Então, nessa matriz de cores, vamos ter azul e verde. Então a forma como podemos ligar estes juntos é pela sua posição na matriz. Então, contanto que escrevamos o primeiro item em nossa matriz de cores para combinar com o primeiro item em nossa matriz de itens, então podemos referenciá-los pelo mesmo índice e é isso que estamos fazendo aqui. Então o que estamos fazendo aqui, e ignorar essas linhas aqui. Isso é apenas para reduzir o espaço em branco ele faz exatamente a mesma coisa que isso. Mas basicamente o que estamos fazendo aqui é que estamos correndo através de cada item na matriz de itens, e se for o primeiro item, vamos obter o atributo de cor fazendo referência ao índice do loop. Então vamos apenas remover este condicional e o que vamos obter é que vamos obter uma matriz de itens que produzem a cor que pertence a ele. Então, se eu apertar Salvar, atualizar a página e rolar para baixo, ficaremos azul e verde. Podemos até vir aqui e se quisermos adicionar o nome do item associado a essa cor, o que poderíamos fazer é porque já estamos dentro do item e da matriz de itens, podemos apenas saída item e então eu vou colocar uma tag break para quebrar estes acima. Devemos ver o item um item azul para verde. Atualize a página e você verá o item um item azul para verde. Agora, sinto que preciso dizer algo aqui e se você não entender completamente a aplicação prática disso agora, não se preocupe. Isto é material líquido avançado. por isso que lhe chamei de lição de líquido avançado. Essencialmente, o que estou tentando fazer aqui é quando você se aprofundar em sua jornada de programação líquida da Shopify e começar a dominar mais a linguagem. Você vai precisar saber como fazer as coisas à margem e é disso que se trata esta lição. Usando as referências que já mostrei, usando sua prática de braço com a programação de temas da Shopify e, em seguida, chegar a um ponto em que há certas coisas que eu quero fazer na linguagem de programação. Quais são as limitações e como contorno isso? Então, se você não está nessa fase ainda, não se preocupe muito, eu só pensei em mencionar isso agora porque esta é uma área onde você pode estar pensando, ok, Chris, por que eu preciso fazer essas coisas? Bem, se você não precisa fazer isso ainda, não se preocupe. Mas isso é algo assim que você entrar profundamente no líquido da Shopify que você vai querer estar ciente. Certo, como o programa é, gostaríamos de pensar que há uma maneira consistente e convencional de fazer as coisas. Mas a coisa frustrante com o líquido da Shopify é que ele é uma linguagem de modelos desenvolvida pela Shopify, e há muitas peculiaridades e diferenças lá. Desafia a convenção de muitas maneiras. Então esta lição é como o antídoto para isso. Então, de novo, isso é algo avançado. Não se preocupe muito. Se isso não é algo que você pode usar imediatamente. Mas talvez seja algo para voltar mais tarde. Dito isto, vamos passar para os nossos exemplos finais. O próximo exemplo é sobre o armazenamento de valores booleanos. Então, como mencionei acima, deixe-me dividir isso. Chame isso de criar Booleans. Como mencionei aqui acima. Podemos criar um booleano, mas apenas atribuindo-o explicitamente verdadeiro ou falso. Podemos realmente atribuir o resultado de uma comparação a uma variável. O que eu quero dizer com isso é, novamente, eu vou mostrar a vocês um exemplo em JavaScript. 11. Bônus: a API Storefront: Muito bem a todos, bem-vindos a esta lição de bónus sobre a API da vitrine. Até agora, temos trabalhado apenas com o canal de vendas da loja online. Se eu olhar na minha loja da Shopify, você pode ver uma lista de canais de vendas e a loja online é aquela que vem pré-instalada com sua conta da Shopify. É claro que a forma de personalizar o canal de vendas da sua loja online é através de temas. Temos feito tudo de dentro de um tema. Bem, a API de vitrine realmente nos permite acessar nossos dados de armazenamento de qualquer lugar na web. Pensei na melhor forma de explicar isto e acho que a melhor maneira é vocês verem imediatamente. O que eu vou fazer é mostrar a vocês um aplicativo que eu criei. Eu chamo esse aplicativo de aplicativo de vitrine do cliente da Shopify. Eu hospedei em um host aplicativo gratuito chamado Heroku app. Para usar este aplicativo, vou ter que inserir alguns detalhes da Loja. Eu tenho o token de acesso que eu criei já pronto para ir e o domínio da loja está bem aqui. Se eu clicar em Enviar, ele se conectará à minha loja e, de repente, você verá uma vitrine personalizada que criei em um endereço completamente diferente da Shopify. Aqui mesmo, este aplicativo é feito com um framework JavaScript chamado view JS, que eu aprendi recentemente e é muito legal para fazer aplicativos interativos do lado do cliente. O que você pode fazer com este aplicativo é que você pode navegar coleções dentro de uma determinada loja, neste caso minha loja, a loja de testes Chris. Você pode navegar nas diferentes páginas de conteúdo, você pode clicar em um item específico, você pode selecionar uma variante, você pode adicionar a variante ao carrinho, e tudo isso é feito no lado do cliente. Como você pode ver, não há atualizações de página em tudo porque eu fiz isso completamente com um framework JavaScript chamado view JS. Você também pode usar essa API para criar aplicativos angulares ou reagir, é uma ótima maneira de usar seus dados de armazenamento de uma maneira completamente do lado do cliente. Agora, se eu clicar em checkout aqui, ele vai para o checkout real da minha loja, e então ele volta para a Shopify, mas toda essa experiência de compra aqui, incluindo a visualização de blogs, está tudo nessa plataforma de hospedagem de terceiros. Cada vez que eu clico em algo e carrego dados, ele vem através da API da vitrine. Vamos abrir minha guia de rede e podemos realmente ver essas solicitações chegando através. Vou até minha guia Rede e clique na guia XHR. Vamos atualizar meu aplicativo. Você pode ver que fizemos três pedidos aqui. A API da vitrine usa algo chamado GraphQL, que é um tópico inteiro em si. Se você não estiver familiarizado com a maneira do GraphQL de fazer APIs, mas essencialmente temos o GraphQL, há um único endpoint em vez de vários endpoints, e você envia uma consulta para esse endpoint e ele devolve o dados exatos que você está procurando. Se você já usou APIs de descanso antes, talvez haja um ponto final de API onde você solicita todos, digamos as coleções em sua loja, mas neste caso eu só quero a imagem, eu quero o título e eu quero o link para o coleção. Bem, em uma API de descanso, você pode não ser capaz de selecionar apenas esses dados, e então o que você faria é solicitar todas as informações sobre coleções. Isso significa que você pode ter que fazer várias solicitações de API ou apenas fazer solicitações que são maiores do que precisam ser. Novamente, este é um pouco mais de um tópico avançado, mas eu só queria que você entrasse o conceito e talvez você possa usar a API da vitrine para seus próprios propósitos. Voltando para esta guia de rede aqui, se eu clicar na primeira solicitação, se eu entrar no cabeçalho, você pode ver a consulta que eu enviar através da API e esta consulta aqui é uma consulta GraphQL. Ele basicamente diz que eu quero o objeto de loja e eu quero esses atributos no objeto de loja. Isso é apenas uma sintaxe do GraphQL. Aqui você pode ver o que recebemos de volta da API. Obtemos os dados da loja e obtemos coisas como código de moeda, o nome da loja, domínio principal e a razão pela qual essa solicitação existe é porque eu estou usando o nome da loja aqui. Vamos ver o próximo. Parece que este está acessando as coleções. Como você pode ver aqui, esta é a consulta GraphQL. Eu sei que é muito grande, se você não entende GraphQL, não se preocupe, você não vai entender isso, mas o que eu estou fazendo é que você recebe algo de volta da API da loja. São todos os dados de coleta, mas não mais do que o que você solicitou. No meu caso, o que eu fiz foi ter solicitado cada coleção e eu quero saber seu identificador, ID, e eu quero o primeiro produto de cada coleção e a primeira imagem de cada produto nessa coleção. A razão é que se a imagem é nula, eu quero ser capaz de acessar a primeira imagem do primeiro produto em vez disso, então é por isso que eu acessei profundamente nesta coleção. Então você tem o terceiro pedido. O terceiro pedido, como você pode ver aqui, é acessar as páginas com na minha loja. Onde eu uso isso é aqui para baixo para fornecer alguns links para páginas diferentes. Estou usando o nome da página e, em seguida, estou usando o identificador para criar um link exclusivo para essa página também. Se eu clicar em sobre nós, você pode ver isso puxa os dados da página sobre nós. Se clicarmos aqui, podemos ver outro pedido para obter mais informações que, de fato, são as mesmas informações. Se fizermos mais alguns cliques ao redor, se eu clicar no blog, você pode ver que fazemos outra solicitação API vitrine. Se eu cavar aqui, você pode ver que temos uma lista de artigos. Então, é claro, esses dados estão sendo representados na página usando vista JS. Então, para dar um pouco de uma olhada no aplicativo, se você estiver interessado, eu tenho isso aqui, a pasta de serviços é onde eu faço todas as minhas solicitações de API. No meu serviço base, tenho as configurações para a solicitação de API da vitrine. Em seguida, eu crio essa função de chamada de API, que usa um eixo de código de biblioteca para realmente consultar a API de vitrine e eu exponho essa função ao serviço do produto e aqui estão todas as minhas consultas GraphQL. Agora, novamente, isso está se aprofundando em muitos conceitos diferentes como view JS, que você pode não estar familiarizado com, GraphQL, que você pode não estar familiarizado com e talvez você nem tenha muita experiência com APIs, Então não fique sobrecarregado aqui. Nós não vamos gastar muito tempo passando por isso, mas o que eu quero fazer nesta lição é mostrar a vocês um exemplo de como podemos usar esses dados em nosso tema. Essa classe, é claro, é sobre programação de temas da Shopify e é possível usar a API da vitrine em seu tema, se assim desejar. Então, é nisso que vamos nos concentrar nesta lição, mas para a maioria das pessoas, a API da vitrine será mais útil quando você precisar acessar os dados da sua loja da Shopify. Mas você quer ser capaz de fazer isso de forma completamente personalizada, por exemplo, criando uma vitrine personalizada ou talvez um aplicativo de telefone que use os dados de sua loja. O armazenamento de uma API é tudo sobre o acesso a dados que o cliente vê. Então nada disso tem a ver com acessar coisas como adicionar produtos, adicionar clientes, criar descontos. Isso é tudo através da API de administração, que é o que você usa para criar aplicativos que vão diretamente aqui na seção de aplicativos. Novamente, eu não quero falar muito sobre tudo isso porque isso está fora do contexto da programação do tema da Shopify, mas o que eu quero fazer nesta lição é mostrar um exemplo de como podemos realmente usar a API da vitrine em um tema em nossa própria loja. O que vamos precisar fazer é se eu voltar ao meu aplicativo e eu tiver enviado uma opção aqui para desconectar. Podemos ver que eu preciso de um domínio afiado e eu preciso de uma loja para um token de acesso. Como você viu antes, eu já tinha um token e coloquei dentro, mas vamos recriar um token que vocês possam ver como você faria isso sozinhos, então se eu entrar em aplicativos, então eu vou para gerenciar aplicativos privados. Você deve estar familiarizado com este processo se você já configurou o kit de temas antes, porque como você pode ver aqui, tivemos que criar um aplicativo privado para usar o kit de temas. Como você pode ver aqui em baixo, eu tenho este aplicativo API vitrine. Vou apagar isso e recriá-lo para vocês, para que possamos ver como podemos criar um aplicativo de API de vitrine. Aqui há um botão para Criar um novo aplicativo privado, vou clicar nele e nomear este aplicativo como algo apropriado. Eu só vou chamá-lo de aplicativo de loja de API. Esta é basicamente a interface que permitirá que você se conecte à API da vitrine. Vamos colocar o e-mail do desenvolvedor de emergência. Como você pode ver aqui, podemos definir algumas permissões de API de administração. Não precisamos disso. O que precisamos é de algumas permissões de API de vitrine. Aqui, tudo o que precisamos fazer é marcar esta caixa de seleção e, em seguida, podemos personalizar quais permissões vamos habilitar esta API. Os que já foram verificados devem ser bons o suficiente, mas vamos verificar tudo, só por precaução. Se apertarmos “Salvar”, ele nos avisará de que qualquer pessoa que tenha essas credenciais pode fazer solicitações à API, portanto, tenha cuidado com quem você compartilha essa API. Vou clicar em “Eu entendo, criar o aplicativo”. Agora você pode ver que o aplicativo foi criado e se eu rolar para baixo, ele me dá o token de acesso da loja. Vou deixar esta página aberta para que possamos acessar esse token mais tarde, e vou abrir meu canal de vendas da loja online em uma nova guia. O que eu vou fazer é voltar ao nosso novo tema e vamos editar o modelo de índice. Temos todo este código aqui da nossa lição avançada de líquidos, vai remover isso. O que eu vou fazer em vez disso é colocar uma div que vai manter o nosso conteúdo. Na verdade, eu vou dar uma identificação porque só vai haver uma e eu vou abrir algumas tags de script. Como estamos usando uma API que pode acessar dados de qualquer lugar na Internet, podemos fazer isso em qualquer modelo. Ele não precisa estar no modelo index.liquid, pode estar literalmente em qualquer lugar. Para este vídeo, para fins de demonstração, faz sentido fazê-lo no modelo index.liquid. O que eu vou fazer é pegar alguns dados usando a API vitrine e, em seguida, representá-lo na página via jQuery inserindo esse conteúdo nesta div. Vou copiar e colar o código API porque ele leva alguma configuração. Esta é uma função que eu criei anteriormente, obviamente. O que ele faz é que leva uma consulta e, em seguida, envia essa consulta para a API Ajax. Então, com essa resposta, podemos acessar os dados que voltam. Vamos passar por isso muito rápido. Estamos usando a função de busca embutida dentro do JavaScript para fazer uma solicitação para o endpoint da API da vitrine, que é apenas o nome da vitrine, api/graphql.json. Se estivéssemos fazendo essa solicitação fora da Shopify, teríamos que incluir o nome da loja. Se eu mudar para o meu aplicativo e acessar as configurações no meu ApicAll aqui, você verá que tivemos que definir o nome da loja aqui. Mas como já estamos na própria loja aqui, podemos usar o URL relativo e enviar uma solicitação para /api/graphql.json. Então abrimos esse objeto aqui. Nós nos certificamos de que o método é post e temos que enviar esses cabeçalhos. Temos que ter certeza que o tipo de conteúdo é GraphQL, temos que permitir a origem do controle e, claro, precisamos do nosso token de acesso. Isto é o que geramos antes. Se eu voltar para o meu aplicativo privado, lembre-se que eu queria manter isso aberto, eu vou ter que descer aqui, copiar esse token de acesso, e substituir o token de acesso aqui pelo meu próprio. Em seguida, estamos definindo o corpo da solicitação para a consulta que vai ser passada para aqui. Então, com a resposta, vamos codificá-lo com JSON. Precisamos fazer isso para que possamos realmente ler os dados. As duas coisas que vamos precisar é que vamos precisar de uma consulta real. Só vou configurar uma consulta em branco aqui. Então nós temos que realmente chamar a API. Eu vou configurá-los agora, indo para consulta API, e então eu vou usar essa promessa. Eu vou dizer resposta, console, resposta de log. Tudo isso vai fazer, uma vez que enviamos a consulta é log console o que recebemos de volta do servidor. Para criar essa consulta, uma ferramenta útil está na documentação da API da vitrine. Eu acredito que é sobre como começar ou a primeira página de referência da API. Só para observar, há muitas informações aqui se você quiser fazer sua própria pesquisa sobre a API da vitrine. Este é mais um pequeno show prático e contar de como você pode realmente usar a API. Mas se você acessar esta página, a página referência da API para a API da vitrine, você pode rolar para baixo e obter esse GraphQL Explorer interativo. Isso ajuda você a criar consultas GraphQL. Como você pode ver aqui, nós temos um muito básico que agarra o objeto afiado e, em seguida, obtém o nome dele. Se eu executar isso, você pode ver que o que vamos ter de volta é algo assim. Vamos apenas usar isso para testar se nossa chamada API está configurada corretamente. Nesta consulta, eu vou enviar através desta consulta GraphQL. Se eu pressionar “Salvar” sobre isso, e então eu pré-visualizar o tema, nós devemos ver nada aparecer na página além do cabeçalho. Mas se eu abrir meu console, vamos ver que temos um erro, temos um colchete ausente depois de uma lista de argumentos. Vamos apenas voltar. Talvez tenha havido um erro em algum lugar aqui. Sim, esqueci de colocar um suporte extra lá. Vamos atualizar esta página. Agora que temos este console aberto, podemos ver que temos um objeto que volta da API da vitrine. Podemos verificar se isso é da API da vitrine indo para nossa guia de rede, e você pode ver aqui está uma resposta da API. Podemos ver a consulta que enviamos através e podemos ver a resposta. Desde que console registrado esse objeto, agora temos ele disponível em nosso console também. Temos o nome da nossa loja, que é algo que poderíamos facilmente fazer dentro de um tema de qualquer maneira. Vamos fazer algo um pouco mais envolvido. O que eu vou fazer, voltar para aqui, e eu vou copiar através de uma consulta GraphQL que eu tinha no meu aplicativo personalizado vitrine. Se eu passar para o meu código de projeto, eu só vou pegar o código API aqui para pegar os primeiros 20 produtos da loja e eu vou atualizar nossa consulta aqui. Vamos guardar isso e ver se funciona. Entrando aqui, temos um objeto voltando com todos esses produtos. Então, se abrirmos tudo isso, podemos ver que temos todos os dados que pedimos. Se entrarmos na aba Rede, tudo ficará bem. Temos o que enviamos em nossa consulta GraphQL, e temos o resultado de volta. Novamente, eu não vou gastar muito tempo ensinando GraphQL porque esse é um tópico inteiro em si mesmo. Mas só quero mostrar o que somos capazes de fazer aqui. Temos todos esses dados, o que é adorável. Mas queremos realmente usar esses dados. O que podemos fazer é usar jQuery para atualizar nossa página. A maioria dos temas tem jQuery já instalado. Se você está trabalhando em um tema existente, definitivamente verifique se você já tem jQuery porque este é o novo tema e é muito básico. Eu vou ter que realmente importar jQuery do CDN. Se eu apenas procurar jQuery no Google, deve haver um link aqui para o CDN jQuery, e isso nos dá um link para uma versão minificada do jQuery. Eu posso pegar isso, e usando meu conhecimento de tags líquidas, posso colocar isso como uma string e, em seguida, usar o filtro de tag script para realmente criar uma tag de script fora disso. O que eu vou fazer para testar se jQuery está funcionando, é usar uma função jQuery que não deve funcionar se jQuery não está instalado, mas deve funcionar se jQuery está instalado. O que eu vou fazer, este log apenas console pronto quando o documento estiver pronto. Se eu pressionar “Salvar” nisso, atualizo a página, abro o console primeiro e, em seguida, atualize a página, você verá que estamos prontos e, em seguida, dados. Sabemos que definitivamente temos jQuery instalado agora. Vou me livrar dessa função pronta. Agora, o que precisamos fazer é lidar com nossa resposta de forma diferente. O que eu vou fazer é colocar em alguns colchetes aqui, e eu vou manter a resposta do log do console porque eu vou fazer referência a ele. Mas o que nós vamos fazer é realmente percorrer os produtos aqui e fazer algo sair na tela. Estou usando o que está no registro do console para descobrir como navegar por esses objetos. Temos um objeto de dados, depois temos produtos, depois temos bordas dentro disso. Bordas é uma matriz. Então vamos percorrer esse array, encontrar o nó de cada um desses itens de array, e então esses são os dados de cada um dos nossos produtos. Eu vou voltar aqui, e eu vou pegar a resposta, então eu vou navegar para os dados, então eu vou navegar para os produtos, em seguida, para as bordas. Sei que há muitos pontos aqui. Então é aqui que começamos o nosso ciclo. Então eu posso dizer para cada um e eu posso pegar o produto, e então o que vamos fazer para cada produto é que eu só quero ter certeza de que estamos olhando para a coisa certa. Eu estou indo para realmente apenas console log product.node. Vamos dar uma olhada se isso funcionar. Vou apertar “Salvar”, atualizar a página aqui com o console aberto. Como você pode ver, temos o registro inicial do console, que tem toda a resposta que recebemos de volta. Em seguida, você pode ver um log de console individual para cada um dos produtos com seus atributos que temos de volta no objeto de dados. Agora que estamos dentro desse loop, podemos realmente traduzir esses dados em conteúdo na página real. O que eu vou fazer é criar um modelo. Eu vou chamar este modelo const, e neste modelo, eu vou construir algum HTML. Digamos classe div, produto. Vamos dividir isso em outra linha para que tenhamos algum espaçamento agradável, torná-lo um pouco mais legível, e então eu vou fazer um cabeçalho para cada um. Usando interpolação de string, vou navegar até esse nó do produto, então product.node, e o atributo que estou procurando é título. Vou pegar o título do produto, depois embaixo, o que devemos mostrar? Talvez a descrição do produto, product.node.description, mais uma coisa, talvez a imagem. Haverá várias imagens para um determinado produto. Bem, a possibilidade pelo menos de um múltiplo de imagens para um determinado produto, então este vai ser um pouco mais complicado, mas vamos chegar lá. O que eu vou fazer é abrir uma tag de imagem HTML, e para obter o src, o endereço real para a imagem. O que eu vou ter que fazer é navegar em nosso nó de produto, e então de dentro de nosso nó, eu preciso acessar essas imagens, objeto e, em seguida, dentro das bordas. Eu vou fazer isso pouco passo a passo, então imagens, bordas, e eu quero a primeira imagem da lista de imagens disponíveis neste produto. Vou selecionar isso usando o índice zero. Agora, vamos estar dentro deste, e queremos obter o nó e, em seguida, dentro do nó, o TransformedSRC, Node.TransformedSRC. Se você está se perguntando o que é TransformedSRC, podemos realmente em nossa solicitação QL gráfico, especificar o que queremos que MaxWidth e MaxHeight da imagem para ser, como o que fizemos com tags URL de imagem ou filtros em Liquid. Felizmente, nós navegamos nossos objetos corretamente, eu perdi um passo final aqui, e isto é, eu tenho que realmente anexar o modelo a esta div aqui em cima. Eu vou abrir um seletor jQuery, alvo que div, e então eu vou anexar o modelo. Isso vai ser adicionado para cada produto no loop para este conteúdo div aqui em cima, então eu vou apertar “Salvar” nisso, atualizar a página. Agora você verá que temos os dados que obtivemos aqui em nossa API Storefront representados em nossa página. Nós temos o título, nós temos a imagem, nós temos a descrição, e você pode ver, todos os primeiros 20 produtos em nossa loja estão saindo. Agora, isso é tudo através de JavaScript, nós não estamos usando nenhum líquido aqui, este é todo o lado do cliente. Talvez você possa ver isso em uma conexão mais lenta ou talvez se eu apenas atualizar a página, você verá que há um pequeno atraso antes que tudo carregue, e então os produtos, seus nomes e imagens carregam. Basicamente, o que está acontecendo é, o código do lado do servidor é gerado primeiro, você obtém a página de volta, a página termina o carregamento, e logo depois, nós obtemos a carga assíncrona em JavaScript. Novamente, talvez não esteja totalmente claro por que usaríamos a API Storefront para acessar esses dados quando já podemos acessá-los no Liquid. Mas este é um exemplo de como você poderia realmente usar a API Storefront em seus temas. Novamente, o melhor uso da API Storefront é se você quiser criar um aplicativo totalmente do lado do cliente. Se eu apenas jogar na minha loja para um token de acesso para este aplicativo novamente, este aqui é um exemplo perfeito de um aplicativo puramente do lado do cliente, e faz sentido que usaríamos os dados usando uma API JSON, que não nos faz recarregar o todas as vezes. Você pode ver aqui que tudo isso é feito no lado do cliente, que significa que nunca precisamos recarregar a página. Eu acho que isso seria um grande benefício de usar a API Storefront. Novamente, é por isso que esta é uma lição bônus, e é uma lição bônus porque você provavelmente não vai usar a API da loja, mas eu queria deixar vocês com uma pequena lição sobre esta API para mostrar o que é possível. Talvez você realmente queira criar uma loja personalizada, ou talvez você realmente precise acessar alguns dados que estão disponíveis na API que não estão disponíveis no Liquid. Eu realmente sei de alguns exemplos em que a API Storefront fornece dados que o Liquid não faz, então talvez você queira usá-lo para esses casos marginais. Se você quiser saber tudo sobre os diferentes objetos na API Storefront, veja aqui onde você pode fazer isso. Assim como vimos na documentação do Shopify Liquid, podemos ver os objetos disponíveis na API da Storefront através deste menu aqui. Levei algum tempo para descobrir como realmente ler isso corretamente, mas se dermos uma olhada no que fizemos para a lição de hoje com produtos, você pode ver aqui que isso mostra todos os, o que é chamado de conexões. Estes são outros recursos que você pode acessar de um produto como um ponto de entrada e, em seguida, aqui em baixo, são todos os atributos. Por exemplo, se eu quisesse acessar o identificador do produto, é assim que você faria. A descrição em HTML, a data CreateDat aqui e metafield armazenado nesse produto. Finalmente, aqui está o que é chamado de QueryRoute, que é o ponto de entrada para consultas, isso é o que usamos para acessar todos os produtos. Como você pode ver no QueryRoute, podemos acessar artigos, blogs, coleções, páginas e produtos como fizemos. Depois que estiver dentro do produto, clique aqui para saber mais sobre a conexão do produto e navegue documentação da API como se estivesse navegando por uma resposta QL de gráfico. Isso imita o que vimos aqui no sentido de que aqui estamos no QueryRoute. Então, voltamos ao QueryRoute, e em nosso QueryRoute, estamos entrando em produtos, então aqui embaixo, produtos. Se eu clicar na conexão de produtos, agora você verá que podemos fazer bordas ou página infur, aqui vamos nós. Bordas. Se eu entrar em bordas, cada borda vai ter um nó e cursor se pedirmos para ele. Como você pode ver, cada um tem um nó, e, em seguida, se clicarmos em “Node”, ele nos dá um produto, e então você pode ver as conexões nesse objeto e os campos disponíveis. Como você pode ver, acessamos alguns desses campos, acessamos descrição, identificador de identificação e acessamos conexões com as imagens e tags também. Esta é definitivamente uma lição mais avançada, e levei um tempo para descobrir como usar a API Storefront. Definitivamente não é algo que você pode aprender em uma lição de 20 minutos, mas é por isso que é uma lição bônus. É um pouco interessante mostrar a você outra maneira de representar os dados da sua loja em uma vitrine personalizada, ou talvez de uma maneira única no seu tema online. Há, é claro, mais uma API que eu mencionei antes, que é a API do administrador, e se você quiser entrar no Desenvolvimento de aplicativos da Shopify, essa é a API que você precisará aprender. Eu realmente criei um aplicativo da Shopify usando esta API, foi uma experiência muito legal, mas definitivamente não é algo que eu poderia cobrir em um vídeo de 20 minutos nunca. Talvez seja um tópico para outra aula. Mas isso é muito bonito pessoal, que deve cobrir uma boa visão geral de tudo o que fazer com a Programação de Temas da Shopify. Se chegou até aqui, quero agradecer-lhe e parabenizá-lo por continuar com isso. Há muito para Shopify Theme Programming, e se você quiser saber mais sobre isso, a postagem do blog está no meu site, Christhefreelancer.com/shopify-liquid-guide/. São mais de 10.000 palavras na Shopify, então, se você estiver se sentindo entediado ou aventureiro e quiser ter uma longa leitura sobre tudo, Shopify Liquid, obviamente não podemos cobrir 10.000 palavras de conteúdo em uma única classe de compartilhamento de habilidades, mas é aqui que eu iria para aprender mais sobre os diferentes vasos. Se você tiver alguma dúvida, como sempre, deixe-as na caixa de discussão abaixo. Muito obrigado, pessoal, e vejo vocês na próxima. 12. Conclusão: Então, isso praticamente conclui essa aula na programação do tema da Shopify. Para o seu projeto de classe, quero que você crie sua própria seção de template, snippet ou tema inteiro se você estiver se sentindo aventureiro. Como vimos nesta classe, combinar código líquido e JSON Schema nos permite criar nossos próprios modelos e seções personalizáveis. Agora é a sua chance de criar algo que você gostaria que existisse e compartilhá-lo com a classe, se assim o desejar. Se você quiser saber mais sobre o desenvolvimento de temas e programação de temas da Shopify, siga-me on-line e confira meu canal do YouTube para obter tutoriais adicionais. Finalmente, se você precisar de alguma dica ou orientação sobre o que cobrimos na aula de hoje, deixe um comentário na caixa de discussão abaixo e farei o meu melhor para apontar você na direção certa. Obrigado como sempre por assistir e espero vê-lo novamente em algumas das minhas outras aulas.