Shopify Hydrogen: como criar uma loja de comércio eletrônico sem problemas com o React

1. Apresentação: Olá, alunos e bem-vindos a esta aula sobre o Shopify Hydrogen. Estrutura baseada em React da Shopify para criar vitrines personalizadas. Sou Christopher Dodd. Sou um desenvolvedor web freelancer e dos melhores professores aqui no skillshare.com. Tendo me especializado em desenvolvimento web de front-end na plataforma Shopify nos últimos três a quatro anos, passei muito tempo personalizando vitrines com uma delas, um tema do Shopify. Mas em meados de 2022, Shopify lançou um novo canal de vendas na plataforma Shopify, permitindo que os lojistas hospedem um projeto React em sua loja Shopify. Este novo canal de vendas de hidrogênio combinado com a estrutura Hydrogen do React Hooks, componentes e utilitários, construído especificamente para vitrines da Shopify, oferece uma maneira totalmente nova de personalizar o online experiência de loja para clientes e uma nova forma de desenvolvimento para desenvolvedores. Na aula de hoje, examinaremos a estrutura do Shopify Hydrogen, aprenderemos sobre os principais conceitos do entorno construiremos nossa própria vitrine simples usando o sistema. Mostrarei como você pode instalar seu novo aplicativo na loja da Shopify. Para aqueles que estão prontos para aprender esse paradigma de próxima geração para construir vitrines na Shopify, clique no próximo vídeo e nos vemos do outro lado. 2. Conceitos de chave: Antes de começarmos a construir nossa própria vitrine de hidrogênio, é importante entendermos é importante entendermos vários conceitos-chave que entram em jogo ao construir uma vitrine personalizada usando Hidrogênio. Em primeiro lugar, quando digo hidrogênio, eu poderia estar me referindo a duas coisas. Na maioria das vezes, vou falar sobre a estrutura do Hydrogen React. Mas quando realmente começamos a implantar nosso aplicativo Hydrogen em nossa loja, o nome do canal de vendas na Shopify também se chama Hydrogen. Tecnicamente, o nome da solução de hospedagem que o Shopify fornece para as vitrines do Hydrogen é chamado de Oxygen, mas aparece no administrador da Shopify como Hydrogen por qualquer motivo. Portanto, tenha isso em mente. Quanto à estrutura do Shopify Hydrogen em si, ela foi projetada para se basear em uma tecnologia existente chamada React. Alguns de vocês já devem estar familiarizados e/ou habilidosos em React, mas, independentemente disso, abordaremos brevemente o React no vídeo a seguir. Definitivamente, não será um mergulho profundo no React neste curso, mas é importante entender o básico do React para usar o Hidrogênio. O outro aspecto que também é importante entender é como vamos recuperar dados do back-end da Shopify. Isso é feito por meio da chamada API Storefront, uma API que a Shopify fornece para recuperação de dados relacionados a experiências voltadas para o cliente. A API é chamada de API do GraphQL, o que significa que, em vez de atingir diferentes endpoints para obter diferentes bits de dados, há um único endpoint de API ao qual nosso projeto se conectará e solicitaremos os dados específicos que precisamos por meio do que é chamado de consulta, que se parece um pouco com isso. Esses conceitos por si só poderiam ser um curso totalmente diferente. Então, nos próximos dois vídeos daremos uma olhada em cada um individualmente e, em seguida, falarei um pouco sobre o conjunto de ganchos, componentes e utilitários do Hydrogen que atuam nessa configuração. 3. Reagir: Nesta lição muito importante, abordaremos algumas noções básicas do react. Se você já tem experiência com reações, fique à vontade para pular este vídeo. Mas para o resto de vocês, deixe-me dizer que você não precisa fazer um curso completo sobre reação para trabalhar com hidrogênio. Antes de começar o desenvolvimento do hidrogênio, eu havia estudado um pouco de reação ao longo de alguns anos, mas não é algo em que eu seja particularmente especialista neste momento mas ainda assim eu conseguia entender desenvolvimento de hidrogênio com bastante facilidade. Não, você não precisa ser um desenvolvedor inexperiente do React para construir vitrines de hidrogênio. Mas se você tem pouca ideia de quando se trata de reagir, definitivamente ouça o que estou prestes a lhe dizer. Reaja. O que é isso? O React é uma biblioteca JavaScript para criar interfaces de usuário, mas geralmente é chamada de estrutura porque é uma alternativa legítima para estruturas JavaScript, como Angular ou view, dois frameworks muito populares quais você pode ou não ter ouvido falar antes. Você pode estar se perguntando qual é a diferença entre uma biblioteca e uma estrutura. Basicamente, eu diria que os frameworks são muito mais opinativos. Eles forçam você a criar aplicativos de determinadas maneiras. Enquanto é uma biblioteca, você pode simplesmente importar os módulos que quiser e usá-los da maneira que precisar. Vamos reagir, por exemplo. Aqui está um exemplo de como a reação pode ser simples. Eu tenho um playground do Reacts aberto aqui em playcode.io/react. Este é apenas um IDE online para testar alguns códigos do React. Tudo o que fiz foi acessar esse endereço e agora tenho um aplicativo básico do React. Eu tenho meu arquivo index.html aqui, que basicamente traz o arquivo index.jsx por meio das tags de script. Em seguida, isso se conecta a essa div raiz aqui. Se analisarmos nosso index.jsx, você pode ver aqui que estamos usando create route no react DOM para nos conectar a esse elemento de rota e renderizar nosso aplicativo, que está aqui. Algumas coisas para as quais quero chamar sua atenção aqui. Você pode ver aqui quais pacotes estamos usando. Você pode ver aqui que estamos usando react e react DOM. É importante observar isso aqui porque o react é uma biblioteca que pode ser usada em uma variedade de aplicativos diferentes. Não precisa necessariamente ser uma coisa de desenvolvimento web de front-end. Não precisa ser um aplicativo ou site da web. Também pode ser um aplicativo de telefone nativo. No caso do React Native. É por isso que o react é um pacote autônomo, mas então você pode usar algo chamado react DOM. Isso é o que você usa para criar aplicativos e sites da web. Ele aplica todas as funcionalidades principais do React com o ambiente de nosso desenvolvimento web de front-end. A primeira coisa que você notará é que no início de praticamente todos esses arquivos JSX estão as declarações de importação. Como eu disse, o react é muito modular e, portanto tudo o que precisamos fazer para usá-lo é garantir que o estamos importando. Em ambos os arquivos, você verá que importa o react do react. Isso pode parecer óbvio aqui, mas onde isso está aparecendo é dentro dos módulos do seu nó, veja aqui. Você realmente não pode vê-lo neste navegador de arquivos aqui. Mas quando você instala o react em seu computador e cria um arquivo package.json, você verá que ele também criará uma pasta de módulos de node, que instalará todos os seus módulos de node. Veremos isso um pouco mais tarde se você não estiver familiarizado com criação de JavaScript ou projetos baseados em nós. Em primeiro lugar, vamos importar o react. Então, um padrão comum que você verá é que vamos criar um componente funcional aqui. Você verá que ele começa como uma função e, em seguida, retornamos esse material com aparência de HTML. Agora, o que é esse material HTML? Na verdade, isso é chamado de JSX. Parece HTML, mas na verdade não é HTML. O que está acontecendo é que isso está sendo compilado em HTML e renderizado na tela aqui. Você pode ver aqui que temos um Hello React H1 e começar a editar para ver alguma mágica acontecer. Isso se parece exatamente com HTML e está produzindo HTML aqui. Mas isso não é HTML. Vamos fazer uma pausa rápida no JSX porque é importante e abordar algumas coisas com o JSX. O que vou fazer e há o suficiente para o aplicativo. Mas só para demonstrar o JSX, vou criar outro arquivo JSX aqui. Podemos chamá-lo de script.jsx. Eu quero te mostrar algumas coisas. Especificamente, quero mostrar algumas coisas em que JSX difere da sintaxe do HTML. Parece muito parecido com o que eu disse, mas não é a mesma coisa. Aqui estão algumas diferenças. Uma das diferenças é que não há hífens no JavaScript. Se dissermos, por exemplo, vou colar um pouco de código SVG aqui. Você pode ver aqui que não é muito comum, mas em alguns elementos HTML você pode ter um traço entre duas palavras para o nome de um atributo. Agora, isso não vai funcionar no JSX. Quando você vê algo assim, tudo o que você precisa fazer é convertê-lo em CamelCase. Vou apenas remover o traço e capitalizar a largura. Agora, se executarmos isso, não sei se podemos executar nosso JSX autônomo, deixe-me copiá-lo em nosso aplicativo aqui. Se eu colocar isso aqui, você pode ver que funciona. Mas se usássemos um hífen, obteremos uma propriedade DOM inválida. Você quis dizer isso? Isso porque não podemos ter traços nos nomes dos atributos no JSX. Essa é uma diferença. A outra diferença que você verá aqui, em vez de usar a classe, temos que usar className novamente neste formato CamelCase. O motivo é que classe é uma palavra-chave reservada em JavaScript. Não podemos usar a aula aqui. Essa é outra diferença. A terceira diferença é que, se voltarmos aqui, você pode ver que temos alguns números aqui. Podemos colocar expressões JavaScript nesses atributos no JSX. Se eu tirasse isso, são 100 agora. Na verdade, queremos ver essa renderização em nossa tela. Provavelmente não é uma boa ideia colocar isso em um arquivo separado. Vamos colocar isso de volta aqui para que possamos realmente vê-lo sendo renderizado em nossa tela. Recue um pouco aqui. Na verdade, podemos colocar algumas expressões JavaScript aqui. O que podemos fazer é em vez de 100, outro muito simples para você colocar alguns colchetes aqui. O que é 100? É 50 vezes por 2. Aqui você pode ver que obtém o mesmo resultado. Podemos colocar uma expressão JavaScript aqui. Obviamente, podemos colocar uma variável para isso. Se eu fosse usar const x é igual a 50 vezes 2, e então podemos simplesmente colocar x aqui. Então, se eu fosse duas vezes por 4, você pode ver nosso círculo. Está ficando maior? A altura deveria estar ficando maior, mas talvez precisemos criar uma largura maior também. Não tenho certeza do que está acontecendo lá. Mas você pode ver se verificamos esse código, se eu o inspecionar, você verá o resultado que aparece. Está um pouco apertado aqui. Aqui vamos nós. Você verá que o resultado obtido é de fato 500 para a altura, que é 5 vezes 10. Vamos ver isso com bastante frequência nesta aula. Quando estamos usando o React, vamos colocar expressões e variáveis de JavaScript em atributos, em adereços. Essa é uma diferença em relação ao HTML quando o comparamos com o JSX. Outra coisa que eu queria demonstrar neste vídeo foi como esse código JSX acaba sendo compilado em funções do React que então geram o HTML. Não é particularmente importante, mas eu gosto que vocês entendam o que está acontecendo nos bastidores. Infelizmente, não posso te mostrar nesse ambiente. Talvez mais tarde na aula, quando colocarmos esse projeto ou nosso próprio projeto em um anfitrião local. Mas se analisarmos o JSX em profundidade, na documentação do React, você pode ver se aprendemos mais sobre isso, o que realmente está acontecendo é que esse código aqui será compilado em React.createElement, e então você verá todo esse código. O que podemos fazer se quiséssemos é que, em vez de usar o JSX, poderíamos escrever um código como esse. Dessa forma, não precisamos compilar o JSX. Mas, obviamente, isso é muito melhor do que escrever vários métodos do React como esse, especialmente quando você faz o aninhamento. Se aninharmos um monte de elementos dentro de elementos, isso se tornaria muito confuso e quase impossível de trabalhar. É muito útil usar o JSX. Mas eu só queria observar que isso não é realmente o que chega ao seu navegador. É isso que chega ao seu navegador e é isso que cria esses elementos em seu ambiente React. Você também pode ler sobre a introdução do JSX aqui. Você pode aprender tudo sobre o JSX na documentação oficial do React. Novamente, eu encorajo você a fazer isso, como vimos, JSX também é uma expressão. Isso nos mostrará como podemos inserir valores em nosso JSX, especificando atributos, podemos usar variáveis e outros dados em vez de simplesmente colocá-los como uma string, em vez de usá-los em HTML. Diminuindo o zoom do JSX agora para falar mais sobre o React em geral, removerei essa variável porque não a estamos mais usando. Nós conversamos sobre as entradas antes. Vamos importar o React conforme necessário em ambos os arquivos JSX. Mas então, para criar o DOM virtual, vamos usar o React DOM aqui. Em nossos projetos específicos usando hidrogênio, não precisamos usar o React DOM. Acredito que isso seja resolvido com hidrogênio para nós. Mas, como você pode ver aqui, sempre vamos importar coisas do React ou de outra biblioteca do React, que para essa classe será o React. Então, você vai nos ver importando coisas do hidrogênio. Então o que você tem são suas exportações. Como você pode ver aqui, estou importando o React e depois exportando esse componente funcional. Agora, por que estou exportando isso? Bem, na verdade eu o estou usando neste arquivo index.jsx. Você pode ver aqui que estou importando esse componente do aplicativo desse arquivo do aplicativo. Se eu estiver usando esse arquivo , não preciso exportá-lo. Mas se eu quiser usá-lo em um arquivo diferente , precisarei exportá-lo. Agora, se eu apenas exportar sem colocar o padrão depois disso. Eu posso exportar vários diferentes aqui. Preciso especificar qual deles estou importando e colocar esses colchetes em ambos os lados. Esses colchetes aqui estão fazendo o que é chamado de desestruturação. Se eu estiver exportando vários componentes em um arquivo, mesmo que eu exporte apenas um aqui, não estou dizendo padrão. Portanto, eu tenho que entrar aqui e tirar isso entre esses colchetes encaracolados. Para mostrar a diferença, se eu for até aqui e porque temos apenas uma exportação, posso simplesmente colocar o padrão aqui. Então, aqui dentro, eu posso removê-los, e funciona da mesma maneira. Mas se eu quisesse dizer, por exemplo, criar outro componente aqui , não posso simplesmente fazer o padrão. Digamos que eu crie um app2 e, então, opa, guia errada. Eu vou até aqui e depois posso fazer o app2. Eu posso importar vários de um único arquivo. Mas se você está apenas exportando um, fique à vontade para removê-los, vamos nos livrar desse agora e colocar o padrão aqui. É importante observar isso. Você verá os padrões e não os padrões usados. Você verá que os colchetes encaracolados e os colchetes encaracolados não estão sendo usados. É por isso que às vezes você está se desestruturando e às vezes não está desestruturando. Essas são as importações e exportações. Obviamente, vimos dentro desse retorno que aqui está o JSX. Se eu fosse criar outra função como vi antes, vamos remover esse padrão aqui. Vamos chamar isso de botão personalizado. Posso obter acesso aos adereços desse botão personalizado por meio do argumento aqui. O que eu vou fazer é dentro desse retorno, eu vou colocar em um botão, mesma sintaxe do HTML porque é um elemento HTML. Então eu vou apenas dizer, clique em mim, digamos. Então aqui em cima, em vez desse SVG, vamos colocar nosso botão personalizado no Camel Case. Como você pode ver aqui, temos nosso pequeno clique em mim aqui. Agora, talvez queiramos tornar esse campo dinâmico. O que podemos fazer é colocar o texto aqui. Então, quando preciso fazer isso, é puxar os filhos dos adereços. Isso vai puxar o que estiver entre essas duas tags. Eu posso usar adereços, crianças. Aí está você. Você pode ver aqui, clicar aqui ou clicar agora, qualquer coisa que eu coloque aqui são filhos desse componente, e assim eu posso acessá-lo por meio de seus adereços. Agora você não verá isso normalmente, o que você verá é a desestruturação usada novamente. Em vez de adereços, o que posso fazer é desestruturar e tirar as crianças diretamente dos adereços desta seção, aqui. Em vez de adereços. Crianças, vou tirar as crianças dos adereços e depois colocá-los lá. Então você pode fazer clique aqui. Em seguida, você pode passar alguns outros dados. Vou colocar um atributo aqui, vamos chamá-lo de mensagem, e eu digo, eu sou sua mensagem. Agora temos esse suporte que podemos acessar daqui, e tudo o que precisamos fazer é retirá-lo também. Estamos retirando crianças, vamos enviar uma mensagem e depois vou fazer um simples OnClick. Então, vamos colocar um ClickHandler para encontrar meu ClickHandler aqui, ClickHandler. Em seguida, farei um alerta simples com a mensagem que foi passada. Agora, se eu clicar aqui, você verá que recebemos um alerta aqui em cima. Sou sua mensagem, e isso é passado por nosso componente aqui. Os dois adereços, temos nossos filhos que podemos transmitir, e então podemos passar quaisquer adereços que definimos também. Só precisamos tirar isso do nosso objeto de adereços aqui em cima e depois podemos usá-lo como quisermos em nosso próprio componente personalizado. Nós passamos por um bom tempo lá, mas espero que vocês tenham entendido a essência. Novamente, não precisamos passar por uma aula inteira no React para entender o suficiente para começar a trabalhar com o Hydrogen. Mas se você estiver com dificuldades, é claro, você pode pesquisar qualquer coisa que não faça sentido acessando a documentação do React ou apenas pesquisando no Google. Honestamente, o React é uma estrutura muito popular. Há muita informação por aí. Se você tiver algum problema, comece a pesquisar no Google, comece a examinar a documentação especificamente com o React e, claro, se você fizer isso e falhar, você sempre poderá deixar um comentário abaixo com qualquer coisa com a qual você esteja lutando. Antes de passarmos para as outras partes que você precisa entender antes de começarmos a trabalhar especificamente com o Hidrogênio é, eu só quero detalhar as três principais coisas que estamos fazendo para importar e usar do React. Como você pode ver aqui, criamos componentes, mas também podemos importar componentes de determinadas bibliotecas. É isso que veremos quando começarmos a importar componentes que já foram criados pela Shopify para nós no Shopify Hydrogen. Você verá isso muito em breve. Mas então, é claro, podemos criar nossos próprios componentes, como fizemos aqui. Outra coisa que vamos importar do React e do Shopify Hydrogen é algo chamado gancho. Se você quiser acessar a documentação, há uma introdução aos ganchos, em algum lugar aqui. Hooks, vamos lá. Há uma seção inteira aqui, e você pode ler sobre ganchos. Simplificando, os ganchos permitem que você use o estado e outros recursos do React sem escrever uma classe. Isso pode ser difícil para vocês entenderem, para aqueles que não usam o React há um tempo. Mas, como você pode ver aqui, podemos importar um gancho comum chamado useSate do React. Na verdade, vamos dar uma olhada nesse exemplo. Se eu entrar aqui, você pode combinar a desestruturação com o próprio objeto total. Aqui vamos nós. Vou pegar o useState e agora estou importando esse Hook do React. O que podemos fazer é desestruturar novamente, pegar a variável de estado e, em seguida, a função que a define e, em seguida, pegá-la de useState passando um valor padrão de zero. Vamos pegar essa parte primeiro. Agora, dentro do nosso componente, podemos pegar uma contagem e um método setCount. Isso é tudo o que precisamos para criar esse botão. Eu substituo meu botão por este aqui. Agora, enquanto clicamos nisso, a contagem está aumentando, mas você não consegue vê-la, então o que vou fazer é colocar aqui a contagem. Vou apenas colocá-lo diretamente no botão, não colocá-lo em outro elemento, e se eu clicar nele, a contagem aumenta. Eu só quero apresentar o conceito de gancho muito cedo nesta aula, porque vamos usar certos ganchos no Shopify Hydrogen. O mais comum deles é o UseShopQuery, que é o que usaremos para trazer dados da nossa API Shopify Storefront e usá-los em nosso projeto. Vimos componentes aqui e vimos ganchos. A única outra coisa são os utilitários, que são basicamente todas as outras funções que usaremos para facilitar nossa vida na construção de vitrines. Vou dar um exemplo, encontrei esse utilitário em algum lugar on-line. É apenas uma função para formatar moeda. Já temos esse utilitário no Shopify Hydrogen, então não precisamos usar algo assim. Mas, como você pode ver aqui, podemos pegar esse utilitário. Vamos simplesmente colá-lo diretamente em nosso código aqui. Eu vou me livrar desse código de componente. Isso está escrito em TypeScript, então eu só preciso remover a definição de tipo lá. Agora você pode ver que funciona. Digamos que se fôssemos fazer um preço. Novamente, posso inserir uma expressão aqui, e digamos FormatCurrency e incluir 110.10. Agora você pode ver aqui porque estamos usando a moeda USD e o estilo da moeda, você pode ver agora que a moeda está bem formatada. Se somarmos alguns pontos decimais extras aqui, ele ainda será arredondado para os centavos mais próximos aqui, e então colocamos o sinal $ na frente. Se fizéssemos isso algo como Libras Esterlinas, por exemplo, você pode ver que agora é o símbolo da libra. Isso é o que um utilitário fará. É apenas uma função que facilita nossa vida. Como você pode ver aqui, nós o importamos ou simplesmente o pegamos. Obviamente, poderíamos criar um novo arquivo e depois exportá-lo e usá-lo em qualquer lugar do nosso projeto, que seria o cenário mais provável. Mas eu só queria demonstrar o que é uma utilidade, porque também podemos usar algumas funções utilitárias em nossa loja Shopify Hydrogen. É isso mesmo, pessoal. É claro que você pode se aprofundar no React, mas para este curso, isso é tudo o que realmente precisamos para começar. Todos esses conceitos que acabamos de discutir nos ajudarão a gerar a interface do usuário para nosso novo aplicativo personalizado de vitrine. Mas o outro lado disso será como realmente conectaremos essa interface de usuário à API da loja. Isso é exatamente o que abordaremos no próximo vídeo. 4. API do Storefront: Nesta lição, falaremos sobre a API de vitrine, que é a que usaríamos para recuperar os dados necessários para preencher nossa vitrine com todo o produto, página e postagem do blog informações que queremos mostrar ao usuário. Para fornecer um pouco de contexto aqui, a API da Shopify é uma das poucas APIs fornecidas pela Shopify. As duas mais comuns, eu diria, são a API de vitrine e a API de administração. A API Admin é o que você usaria para concluir as funções administrativas. Já a API de vitrine é a API para recuperar informações voltadas para o cliente. Eu falei sobre a API de vitrine em alguns dos meus outros vídeos, você pode ter me visto me conectar à API e menos de 11% da minha aula de programação de temas da Shopify e, por um minuto, 1820 no meu vídeo do YouTube usando JavaScript no desenvolvimento de temas. No entanto, como mencionei nesses vídeos, a API de vitrine não foi criada para temas da Shopify, mas para todos os outros cenários em que você precisaria acessar os dados da vitrine. Como diz a Shopify em sua documentação, ele pode ser usado em qualquer lugar em que seus clientes estejam, como um aplicativo de site ou videogame, e agora isso inclui os aplicativos de hidrogênio da Shopify. Como funciona no hidrogênio do Shopify? Bem, a boa notícia é que o hidrogênio tem um gancho embutido que ajuda você a se conectar e consultar dados com facilidade. É chamado de use sharp query hook e, posteriormente, nesta classe, configuraremos nossos detalhes de acesso no arquivo de configuração de hidrogênio e, em seguida, usaremos o gancho para extrair os dados de que precisamos. Por enquanto, o que eu quero abordar brevemente é a sintaxe do GraphQL, que é a linguagem que usamos para consultar a API storefront. Isso aqui é chamado de gráfico. É um IDE gráfico do GraphQL no navegador. Isso pode parecer muito técnico, mas basicamente tudo isso é uma forma de criarmos e testarmos consultas antes de executá-las em um aplicativo. Mostrarei como configurar isso para seu projeto específico posteriormente, mas, por enquanto, você pode ver que estou executando um servidor local. Na verdade, esse é um projeto de hidrogênio e, felizmente para nós, uma das características é esse gráfico. É basicamente o GraphQL com um i entre o gráfico e o QL. Graphiql, eu acho que é como você poderia dizer isso. Temos essa ferramenta embutida e tudo o que precisamos fazer é, se esse for nosso host local de domínio raiz 3.000, só precisamos colocar o gráfico iQL depois dela e, em seguida, obter acesso a essa pequena ferramenta que nos permite consultas do GraphQL qualquer projeto de hidrogênio da API de vitrine ao qual esteja conectado. Na verdade, este está conectado à loja de pré-visualização de hidrogênio. Essa é a loja padrão que será carregada nas configurações da API da vitrine quando você criar sua primeira vitrine de hidrogênio Você pode atualizar essas configurações, verá isso em um vídeo posterior, mas nesta classe, vamos usar apenas o armazenamento de visualização de hidrogênio e que já contém muitos dados, então nem precisamos criar dados de amostra para essa classe, podemos simplesmente usar o que é fornecido para nós pela Shopify. Já temos uma consulta aqui, se eu clicar em “Executar” aqui, você pode ver que recuperamos uma estrutura de dados que imita o que escrevemos aqui. Eu gosto de usar recuo, então vou colocar isso aqui. O que recebemos é um JSON que imita a estrutura da nossa consulta. Isso é o que é legal sobre o GraphQL ele imita o que recebemos em termos de JSON. Para explicar isso um pouco, temos apenas uma consulta básica aqui, estamos usando a raiz da consulta de sharp, e então estamos abrindo uma seleção aqui e definindo quais campos queremos retornar. Tudo o que estamos fazendo é retornar o nome do pontiagudo, que é hidrogênio. Mas eu também poderia adicionar essa descrição de campo e, se eu executá-la, você verá que, quando nossa consulta voltar, teremos nossa descrição chegando também, ok? Podemos adicionar quaisquer campos existentes no objeto pontiagudo aqui, se eu remover completamente a seleção e tentar executá-la, não vai funcionar, diz que executá-la, não vai funcionar, diz campo deve ter seleções. Há certos campos em sua API que exigirão seleções e shop é um deles, então não funcionará como solicitar o objeto inteiro, teremos que solicitar os campos específicos dentro desse objeto. Como descobrimos quais campos podemos acessar no objeto? Vamos até a documentação. Se eu simplesmente pesquisar a API de vitrine no Google, conseguirei encontrá-la. Aqui está a página da documentação, a API de vitrine do GraphQL da Shopify e, honestamente sua navegação é um pouco difícil navegar, mas eu quero entrar em objetos de comentário, entre aqui e se rolarmos para baixo, não é isso que estou procurando, loja online é a categoria que estou procurando, vou aos objetos, podemos ver aqui o objeto da loja, que possamos ver que a loja representa um coleção de configurações gerais e informações sobre a loja e aqui estão os campos, então acessamos o nome da loja, a descrição, também podemos obter campos meta nela. Podemos obter o domínio primário, então, se eu quiser adicionar esse primário, a vantagem de usar essa interface é que ela foi preenchida automaticamente. Eu posso adicionar o domínio principal lá e isso requer seleções. Se quisermos usar isso, só precisamos verificar isso, que é o tipo de dados. Como você pode ver, há uma variedade de seleções aqui também, então terei que abrir uma seleção nessa e, em seguida, URL é um dos campos nela. Eu posso executar isso e agora podemos obter o URL do domínio principal. Agora, uma das coisas mais complicadas sobre o GraphQL, isso é bem simples até agora. Mas se começarmos a trabalhar com conexões relacionais, começaremos a ver algo chamado bordas e nós. O que quero dizer com isso é que se entrarmos aqui e digitarmos algo que seja plural, não podemos fazer isso em um objeto de loja, mas vamos voltar à nossa rota de consulta aqui e se eu digitar coleções, como você pode ver aqui, ele retornará a conexão da coleção. Aqui podemos segmentar uma coleção específica, mas se eu for aqui e fizer coleções, o que vou precisar fazer agora é usar bordas e nós, certo? Vou ter que acessar as bordas dessa lista de coleções e, em seguida, pegar os dados que eu quiser em cada coleção dentro dessa lista de coleções aqui em node. Eu posso pegar o, digamos, o nome com a alça de borracha e , se eu clicar em correr aqui, provavelmente terei que colocá-lo no perímetro aqui. Como diz aqui, você tem que fornecer o primeiro ou o último, então o que isso significa é que eu tenho que especificar quantos objetos de coleção eu quero devolver, para que eu possa solicitar os 10 primeiros. Eu dirijo isso. Você pode ver aqui que eu recebo de volta um objeto que é semelhante à estrutura aqui, eu recebo de volta dez coleções ou no máximo dez coleções, há apenas 1, 2, 3, 4, 5, 6, eu acredito, coleções em nossa loja no total, então obtemos as 10 primeiras. Se existirem apenas seis, recuperaremos seis e, como pedimos apenas a alça, só recuperaremos a alça em cada nó. Agora, essa coisa de bordas e nós é um pouco confusa mas você vai se acostumar com isso, do jeito que eu gosto de pensar é que podemos recuperar mais do que apenas as bordas de uma lista de coleção específica, qualquer lista para esse assunto. Se eu passar por baixo das bordas aqui, também posso obter um objeto aqui chamado de informações da página, que é uma seleção e em seguida, posso ver se ele tem uma próxima página. Se eu passar aqui e executar isso novamente, não só obtenho os dados que estou procurando, mas também obtenho as informações para paginação, que me diz se ela tem uma próxima página, não tem. Se eu definir isso para três, ele só vai me mostrar os três primeiros e os segundos três e eu executo de novo. Agora, se olharmos para baixo, obteremos apenas os três primeiros resultados e nos tornaremos verdadeiros agora, pois a próxima página. Semelhante ao node, podemos ir abaixo do nó e digitar algo chamado cursor. Vamos executar isso e ver o que volta. Como você pode ver, agora temos esse pequeno ID aqui em cada nó, o que nos dá um endereço para esse nó específico. Pode parecer muito complicado, por que não podemos simplesmente retornar uma lista, mas ela remonta às conexões relacionais entre esses diferentes recursos. Porque esses diferentes nós são recursos si e o que estamos fazendo é retornar uma conexão com eles. Não são apenas dados dentro de uma coleção. Também são dados de produtos que podem fazer parte de várias coleções e, portanto, parecem complicados, mas tudo o que precisamos lembrar aqui é que mesmo que não estejamos usando paginação, então, se eu os remover, apenas certifique-se de usar bordas e nós quando estivermos lidando com conexões dessa forma de lista. Antes de passarmos a falar sobre a estrutura Hydrogen, eu só queria mostrar mais alguns exemplos do que você pode lidar com em termos de GraphQL enquanto cria vitrines usando hidrogênio. Alguns exemplos que você pode encontrar neste tutorial fornecido pela Shopify. Em essência, essa classe é uma versão em vídeo disso, de qualquer maneira, usaremos muito do que é discutido neste tutorial, mas também não usaremos uma tonelada dela. Vou tentar manter as coisas bem simples. Muito desse tutorial que eu descobri está realmente avançando em termos de adicionar muito código, o que pode não fazer muito sentido. A aula foi projetada para ser um pouco mais lenta para vocês. Mas quero chamar sua atenção para algumas consultas do GraphQL que você pode acabar usando. Como você pode ver, temos aquela consulta que vimos antes, onde acessar o nome e a descrição na loja, então essa é uma consulta muito básica. Se eu rolar um pouco mais para baixo, não tenho certeza se está nesta página ou na próxima página. Vamos criar uma página de coleção, role para baixo. Aqui, você pode ver que temos coleções aqui. Na verdade, podemos pular a parte das bordas, então podemos simplesmente escrever nós em vez de escrever bordas e, em seguida, nó singular. Se eu quisesse remover bordas aqui e executá-las, você verá que recuperamos os nós sem precisar colocar essa palavra bordas, então essa também é uma opção. Então, como você pode ver aqui, temos o parâmetro para obter os primeiros oito oito, de uma coleção específica, passando por uma alça, que veremos mais adiante nesta classe, e então vamos pegar a primeira variante de cada produto. Novamente, faremos algo semelhante na aula. Eu só queria dar alguns exemplos, ver se há algo teórico que eu precise contar a vocês antes de começarmos, embora isso seja bem parecido se eu entrar na próxima página. Aqui está uma coisa que eu queria mostrar antes de começarmos, é o uso desses fragmentos. Fragmentos são como se você estivesse acostumado com o desenvolvimento de temas do Shopify, você pode pensar neles quase como um trecho. É um trecho de código reutilizável que podemos conectar a outras partes da nossa consulta do GraphQL. Definimos esse fragmento aqui, que informa quais campos queremos na mídia. Todo esse fragmento aqui nos diz qual seleção de campos queremos e, em seguida, podemos conectá-la onde precisamos usando esse ponto, ponto, ponto. Em vez de escrever todos os campos de mídia aqui, podemos simplesmente expandir o fragmento que criamos aqui. Isso é útil quando queremos reutilizar essa seleção em várias áreas da nossa consulta. A outra coisa aqui que eu quero que você note é esse ponto, ponto, ponto e depois por diante. Aqui, parece semelhante em termos de você ter os três pontos, mas é muito diferente no sentido de que isso só retornará essa seleção quando o tipo for imagem de mídia. Ele retornará essa seleção quando o campo de mídia que voltar for uma imagem de mídia. Ele retornará essa seleção quando for um vídeo. Ele retornará essa seleção quando for um modelo 3D e essa seleção quando for um vídeo externo. Acho que é por isso que ele é criado em um fragmento para que não estejamos aninhando todo esse código em nossa seleção aqui. Não tenho certeza se vamos necessariamente usar fragmentos nessa classe. Vamos manter isso muito simples. Mas pensei em mencionar isso enquanto você olha exemplos do Shopify, fora desta classe, você pode estar se perguntando o que está acontecendo aqui. Definitivamente, procure fragmentos do GraphQL se você estiver interessado em aprender mais sobre isso. Deixe-me descer, ver se há mais alguma coisa que eu queira compartilhar com vocês. Como vocês podem ver aqui, pessoal, esse tutorial traz muito código muito rápido, é por isso que eu não estou seguindo isso exatamente nesta aula do Skillshare. Eu acho que eles saltam para certas partes um pouco rápido demais. Embora eu não goste de ser expulso, eu gosto de abordar muitas coisas em uma sequência passo a passo que permite que vocês entendam o que está acontecendo em cada estágio, então eu sinto que é melhor ir mais devagar e realmente entender profundamente o que está acontecendo , em vez de seguir em frente tanto. Na minha opinião, acredito que eles estão pulando um pouco longe demais, especialmente para alguém que nunca usou o React antes ou é novo no React, este tutorial vai e vai direto para o assunto, tem muitos detalhes. Obviamente, muito disso é apenas código React. Essa é a principal coisa que eu queria mostrar a vocês. Eu queria mostrar a vocês se eu voltar para aqui o material fragmentado. Deixe-me encontrar isso na documentação para vocês, se quiserem dar uma olhada mais tarde. Aqui você pode ver na documentação do GraphQL, a oficial em graphql.org. Se examinarmos a seção sobre fragmentos, você pode obter mais detalhes aqui sobre o que são fragmentos. Esse é o único exemplo complexo que eu vi nos exemplos do GraphQL da Shopify. Provavelmente não usaremos fragmentos nessa classe, mas caso você veja isso em um exemplo como na um exemplo como na documentação da Shopify e esteja se perguntando o que está acontecendo lá. Mas vamos tentar manter as coisas o mais simples possível e depois tentar expandir a partir daí. Mas é importante entender o GraphQL pelo menos em um nível básico Antes de começarmos a criar nossos projetos, precisamos saber como vamos consultar a API de vitrine no para obter os dados necessários para criar vitrines personalizadas. É por isso que precisamos fazer uma pequena lição sobre o GraphQL. No próximo vídeo, abordaremos a estrutura do Shopify Hydrogen. 5. O quadro de hidrogénio da Shopify: Nesta lição, falaremos agora sobre a estrutura Hydrogen, ou seja, o conjunto de ganchos, componentes e utilitários que a Shopify fornece para nos ajudar na criação de vitrines personalizadas. Durante a maior parte desta aula, explicarei os ganchos e componentes do hidrogênio à medida que trabalhamos em nosso próprio projeto de hidrogênio. Mas há alguns conceitos sobre hidrogênio que eu gostaria que vocês entendessem antes de ficarmos presos. Em primeiro lugar, se acessarmos o arquivo App.Server.jsx aqui, você notará que esse arquivo terá uma aparência bastante semelhante, independentemente do projeto Hydrogen que você esteja vendo. Você tem essa função RenderHydrogen aqui, que é responsável pela hidratação. Nesse caso, a hidratação está relacionada à renderização do lado do servidor. Basicamente, essa é a função que configura seu projeto como um aplicativo Hydrogen. Depois de importar o RenderHydrogen para cá, os outros componentes de nível superior que você provavelmente notará estão relacionados ao roteamento e fornecimento. Em um projeto React típico, você pode usar algo como o React Router, que é outra biblioteca para lidar com o roteamento, mas o Hydrogen vem com roteamento embutido. Usando a combinação do componente Router e do componente FileRoutes, podemos configurar facilmente o roteamento básico em nosso aplicativo que imita a estrutura de arquivos do nosso projeto. Por exemplo, em nossa pasta de rotas, se eu clicar aqui, se eu criar um catálogo. Isso é o que faremos na aula mais tarde, mas só para mostrar com antecedência, se eu criar um arquivo catalog.server.jsx, poderei acessá-lo digitando catalog após o domínio da rota do nosso aplicativo. Se eu executar isso; ele não está sendo executado no momento, mas se eu executar o comando yarn dev ou npm run dev, vamos executá-lo no localhost 3001. Estou administrando outra loja no momento, é por isso que está em 3001 e não em 3000. Se eu comandar, clique nele, você verá o Hello World aqui. Se eu voltar ao meu editor de código e colocar algo em catalog.server.jsx. Vamos pegar o que temos em index.server.jsx e substituí-lo Catalog e substituí-lo aqui por Catalog com maiúscula. Clique em “Salvar” sobre isso. Volte para o nosso aplicativo no navegador. Como você pode ver aqui, ele está executando a rota de índice, que, se olharmos, é apenas criar uma div com Hello World para que corresponda. Então, se eu for até aqui e depois do nosso catálogo de domínio de rota, agora você pode ver a palavra catálogo chegando. É assim que obtemos o roteamento incorporado em nosso aplicativo. Basta colocar um roteador e envolvê-lo em FileRoutes, para que nosso roteamento imite o que colocarmos nessa pasta de rotas. Podemos fazer o aninhamento por meio de pastas aninhadas. Na verdade, é muito fácil configurar o aninhamento com o Shopify Hydrogen. Eu também posso fazer um valor dinâmico. Digamos que eu tinha uma rota aninhada para coleta. Vou criar uma pasta de coleções aqui. Então eu também posso criar uma rota dinâmica. Eu posso usar handle como uma variável, server.jsx, e então não vamos fazer isso neste vídeo porque teremos que trazer o gancho de consulta use shop e começar a consultar a API, que abordaremos posteriormente vídeo. Mas, essencialmente, agora vou mudar isso para Coleção. Se tivéssemos acesso à coleção, podemos começar a pegar dinamicamente a coleção que estamos vendo e talvez divulgar seu título ou algo assim. Também podemos criar essas rotas dinâmicas. Isso vai ficar em, digamos que nossa coleção se chamava sapatos, então seguimos essa rota, coleções-sapatos, e então essa parte do sapato se torna a alça, e então nos serviria isso arquivo por essa rota. Também posso usar o componente de rotas. No momento, ele não é importado, mas podemos importar o componente de rota do Shopify Hydrogen. O que isso nos permite fazer é definir uma rota até aqui. Isso é útil para criar uma rota abrangente para 404 páginas inteiras, por exemplo. Se eu criar um componente NotFound, posso carregá-lo lá. Então, se o URL não passar por FileRoutes, ele poderá passar por essa rota de backup. veremos isso nesta aula. Em seguida, os outros componentes que você verá são os componentes Provider. Como você pode ver aqui, Shopify Provider é o componente de fornecedor de nível superior do Shopify Hydrogen. Colocamos isso no roteador para que tenhamos acesso em todas as páginas às principais funções do Shopify, como o gancho de consulta da loja de uso, que usaremos em praticamente todas as rotas. Esse padrão de uso de um componente Provider com componentes e ganchos relacionados é algo que você provavelmente verá em várias partes do seu aplicativo. Os exemplos incluem o CartProvider para fornecer a funcionalidade do carrinho, o ProductOptionsProvider para configurar estados para rastrear a variante selecionada no momento e a opção selecionada em uma página de produto e CartLineProvider, que fornece acesso fácil aos dados relacionados a uma CartLine individual. Estes são apenas alguns exemplos de alguns dos componentes disponíveis na estrutura do Shopify Hydrogen, cuja lista completa você pode encontrar aqui na documentação oficial da Shopify. Além disso, como dica, se você se sentir perdido sobre o que um determinado componente ou gancho faz, basta usar o Google Shopify Hydrogen, seguido pelo nome do gancho ou componente, e isso deve geralmente direcionam você para a página relevante da documentação do Shopify Hydrogen. Lembre-se de que os ganchos geralmente têm essa aparência com uma primeira letra minúscula, enquanto todos os componentes começam com maiúscula. Isso serve para diferenciá-las das tags HTML regulares. 6. Como começar com o hidrogénio: Sem mais delongas, vamos realmente começar a construir nossa loja de hidrogênio. Nós conversamos muito sobre teoria, é hora de entrar na prática aqui. Há duas maneiras de começarmos. Número 1, você pode fazer como eu fiz, seguindo esta documentação aqui, shopify.dev/custom-storefronts/hydrogen/getting-started/quickstart . Basicamente, basta procurar isso na navegação. Aqui, você pode ver na Etapa 1 que podemos criar um aplicativo Hydrogen. Eu estava usando o NPM até me deparar com esse problema de cache que me forçou a usar o Yarn. Falaremos um pouco sobre isso em um segundo. Agora eu uso o Yarn, mas você também pode usar o NPM. É importante observar aqui que, quando estamos usando essas ferramentas, você precisa instalá-las. Você também precisa garantir que você tenha a versão mais recente do node instalada. Isso vai acontecer toda vez que usarmos gerenciadores de pacotes. Se você não está familiarizado, node.js é o tempo de execução do JavaScript, precisamos disso, isso é o cerne do NPM e de tudo o que faremos neste projeto. Verifique se você tem a versão mais recente disso. Então o NPM é o Node Package Manager, ele fica em cima disso e ajuda você a instalar e executar pacotes de nós. Precisamos ter certeza de que temos as versões mais recentes disso. Se você quiser usar o Yarn, você também pode instalar o Yarn. Os detalhes da instalação de todas essas ferramentas de interface de linha de comando estão em seus respectivos sites. Eu vou te mostrar como fazer isso dessa maneira primeiro. Vou abrir meu aplicativo de terminal favorito , chamado iterm. Vou maximizar isso para você, que você possa ver mais facilmente. Limpe todas essas coisas lá. Vou simplesmente navegar até minha área de trabalho para isso, então vou para o cd desktop. Então, vamos executar esses comandos. Vamos executar o NPM init, o hidrogênio do Shopify. Diz que você precisará instalar os seguintes pacotes. Sim. Só preciso dar algum tempo para processar aqui. Agora, aqui, você terá a opção de fazer o Demo Store ou o Hello World. Demo Store é um projeto de hidrogênio mais completo. Eu não recomendo instalar o Demo Store para aprender hidrogênio, porque ele vem com muito código e muita configuração. Se você está apenas aprendendo hidrogênio, é melhor mantê-lo simples. Eu gosto de ir com o Hello World. Então, aqui está uma questão de preferência, se você não sabe o que é TypeScript ou não usa o TypeScript, basta escolher JavaScript. Vou chamar isso de vitrine personalizada. Agora, ele vai baixar o código do repositório de hidrogênio. Agora, depois de um bom tempo, a instalação foi concluída. Agora, vou abrir uma nova janela ou o Visual Studio Code e podemos começar a executar esse projeto. Vou abrir uma nova janela, vou apenas redimensioná-la para caber na sua tela. Em seguida, clicarei em “Abrir”, entrarei em nossa área de trabalho e abrirei a pasta personalizada da vitrine. Aqui, se executarmos um terminal dentro desse projeto, podemos fazer isso de dentro do projeto no código do Visual Studio, ou podemos fazer isso usando nosso outro aplicativo de terminal. É mais fácil em nosso editor de código porque já navegamos até essa pasta. Agora tudo que eu preciso fazer para executar isso, é npm run dev. Como você pode ver aqui, vai dizer que agora estamos rodando no localhost 3.000. Vou clicar com o botão de comando para abrir isso. Como você pode ver, tudo o que diz é Hello World. A razão pela qual diz Hello World é se entrarmos em nossa pasta src aqui e entrarmos em nossa rota de índice. Só aqui no índice de rotas, você verá o Hello World. Lembre-se de que já falamos um pouco no último vídeo sobre o que está acontecendo no arquivo app.server.jsx aqui, então não vou me aprofundar nisso, mas esse é o cerne do seu aplicativo aqui. Temos nosso provedor Shopify, que fornece basicamente todas as funcionalidades que precisaremos para nosso aplicativo de hidrogênio. Então, é claro, estamos puxando para ele rotas de roteadores e arquivos, para nosso roteamento. Esse outro componente que estamos importando do react é um recurso experimental do react neste momento. Se olharmos a página de suspense no site do Reacts, você pode ver aqui que há muito vermelho aqui. Basicamente, um componente de suspensão, ele permite que você aguarde o carregamento de algum código e especifique declarativamente um estado de carregamento. Isso nos permite fazer o carregamento assíncrono dentro dessas duas tags. Em vez disso, poderíamos e deixar-me fazer isso agora , em vez de ter um retorno completo nulo, apenas para carregar. Agora, o que eu fiz para começar , para que não percamos tempo aqui, é que eu criei todo o CSS para você, que não escrevamos CSS à medida que codificamos neste projeto. Também atualizei a rota index.server.jsx, que possamos ver para que possamos ver o padrão que vai acontecer em muitas das rotas, onde inserimos vários componentes e ganchos, exportamos um componente específico e, abaixo disso, escrevemos nossa consulta. O que você pode fazer, essa é a segunda opção, é clonar o projeto de vitrine, que eu enviei para o meu GitHub, este é um repositório público. Isso é basicamente a mesma coisa que se você fizesse o que fizemos aqui em nosso terminal ao aqui em nosso terminal criar um novo projeto de hidrogênio e escolher o Hello World, exceto que eu atualizei isso arquivo index.server.jsx, para demonstrar o padrão contínuo que veremos em várias rotas. Eu também adicionei um monte de CSS aqui. Também vou atualizar as ramificações à medida que avançamos, para que você também possa ver o ponto final. Eu encorajo você, em vez de fazer isso dessa maneira, eu encorajo você a clonar esse projeto, executar o npm, instalar e, em seguida, vamos continuar juntos, usando exatamente o mesmo projeto. O que eu vou fazer é deixar isso, e então eu vou, vamos acabar com isso. Então, no meu iterm aqui, vou navegar até minha pasta de código, entrar na minha pasta Skillshare, que é onde coloquei meus projetos do Skillshare, e vamos executar o git clone aqui. Vou usar o git clone, copiando esse URL. Tudo o que eu preciso fazer é clicar no botão da tela e, em seguida, copiar o endereço HTTPS, e agora ele vai baixar esse repositório para o meu computador. Vamos navegar até a vitrine da classe de hidrogênio. Então, a partir daqui, basta executar o npm install, para instalar todos os nossos módulos de nós. Isso é algo que acontece automaticamente quando executamos comando anterior de npm init Shopify hydrogen. Ele executa o npm install para você. Quando estamos baixando um repositório do GitHub que diz o projeto node, ele vai ignorar o arquivo de módulos do node, porque esse não é um código específico para esse projeto, e ele apenas armazena as referências no arquivo package.json. Então, quando você executar o npm install, ele instalará todas as dependências. Apenas um pouco mais de contexto para aqueles caras que não estão muito familiarizados com os projetos de nós. Pronto, instalamos nossas dependências. Agora, vou abrir o Visual Studio Code novamente. Mostre isso ao nosso tamanho de tela para vocês. Então eu vou abrir essa pasta. Entrando em código, Skillshare, vitrine da classe de hidrogênio. Removendo aquela guia lá. Você pode ver se entramos na pasta SRC, em index.css, temos todo o CSS que eu já escrevi para esse projeto e, se entrarmos em nossa rota index.server.jsx, temos isso aqui. Vamos seguir em frente e executar um novo terminal diretamente dentro do nosso projeto. Vamos limpar todo esse código irritante que aparece. Isso é só coisa de mim. Não se preocupe com isso. Em seguida, vamos executar nosso comando para executar o servidor, npm run dev, e então abriremos localhost:3000. Vou me livrar dessas outras guias. Agora que já temos nosso projeto localmente, e aqui você pode ver que temos um título e uma descrição. Agora, de onde vem isso? Eu queria atualizar o arquivo index.server.jsx para mostrar um padrão que usaremos em praticamente todas as nossas rotas. forma como vamos executar esse projeto é criar uma seção por vez. Vamos fazer a página do catálogo. vamos fazer a página da coleção. Vamos fazer a página do produto e depois habilitar a funcionalidade do código. Basicamente, o padrão que vamos usar, e se você pode entender isso na Shopify como fazer desenvolvimento, então você está no caminho certo para codificar qualquer tipo de projeto. O padrão é esse. Vamos importar o que precisamos do hidrogênio da Shopify, vamos exportar um componente e, em seguida, vamos criar nossa consulta. Agora, isso está fora de ordem porque estamos usando a consulta aqui em nosso gancho UseShopQuery. Mas por qualquer motivo nos exemplos, o Shopify coloca a definição de sua consulta no final, então vou seguir essa sequência. Vou minimizar isso por um segundo. Espere, isso maximizou tudo. Deixe-me ver se eu posso simplesmente criar um pouco mais de espaço aqui para que possamos, não, criar uma nova guia. Talvez o que eu faça seja guardar isso por um período, porque quero que você veja o que está acontecendo aqui em sua totalidade. Vamos remover isso para que possamos dar uma olhada mais de perto. O que está acontecendo aqui é que, se você se lembra do index.server.jsx anterior, ele tinha apenas um componente simples que tinha uma div com hello world nele. Agora, isso não vai ser particularmente útil porque isso não é conteúdo dinâmico. Mas o que vamos fazer nesta aula é trazer conteúdo dinâmico da sua loja. Não vou recarregar a página aqui porque já a fechei, mas aqui, você pode ver que temos hidrogênio e, em seguida, temos uma vitrine personalizada alimentada por hidrogênio, baseada em reações da Shopify estrutura para construção sem cabeça. De onde vem isso? Porque se olharmos para dentro, podemos ver que ambos são valores dinâmicos. O que estamos realmente fazendo é extrair essas informações da API da loja. As três coisas que importamos do hidrogênio da Shopify aqui são o importante gancho UseShopQuery, que é o que usamos para consultar a API da loja. Estamos trazendo esse objeto aqui chamado CacheLong. Essa é apenas uma estratégia de cache, então não há nada muito complexo acontecendo aqui. Podemos facilmente substituir isso escrevendo a estratégia de armazenamento em cache. Isso só nos ajuda a economizar um pouco de tempo trazendo essa pequena utilidade do hidrogênio. Então, este aqui é um utilitário que nos ajuda a destacar a sintaxe com nossas consultas do GraphQL, embora realmente não pareça estar funcionando em minha configuração específica, mas tudo bem. Na verdade, não precisamos necessariamente disso, é muito bom ter. O que estamos fazendo aqui, então temos nosso componente inicial aqui que é executado na rota do índice, e em nossa declaração de retorno aqui, estamos retornando o JSX, que vimos anteriormente na teoria. Eu já montei uma aula aqui. Novamente, isso não será um curso de CSS, então vou colocar nomes de classes que correspondam ao CSS que eu criei para que possamos obter algum estilo desde o início. Tudo o que precisamos fazer é fazer essa combinação com nosso arquivo CSS aqui. Mas, novamente, você pode editar isso totalmente da maneira que quiser. Eu simplesmente não queria me familiarizar com nenhum CSS nessa classe porque essa não é uma classe CSS. Voltando ao nosso arquivo index.server.jsx aqui, o que estamos fazendo é passar um objeto para UseShopQuery com nossa estratégia de alocação de consultas do GraphQL e, em seguida, estamos dizendo preload: true. Essa é apenas uma configuração padrão básica que você pode ver nos exemplos da Shopify. A principal coisa a entender aqui é que estamos escrevendo nossa consulta aqui no GraphQL e depois colocando-a no UseShopQuery. Agora, nos exemplos, o que você verá é desestruturação de objetos acontecendo aqui. Não tem essa linha, mas eu gosto de explicá-la, ou pelo menos para essa aula, porque isso só torna as coisas um pouco menos complicadas. Você pode detalhar um pouco as etapas. O que estamos fazendo é que os dados que serão retornados da API entrem nesse objeto de dados aqui e depois os desestruturaremos para obter os dados retornados. Agora, aqui está algo que você pode fazer em toda essa classe que o ajudará a determinar o que vem da API. Você pode acessar console.log (data). Agora, onde encontramos essa informação? Bem, na verdade, estamos em um componente do lado do servidor aqui. Como você pode ver aqui, não acredito que ainda tenhamos nenhum componente do lado do cliente, mas, como você pode ver aqui, todos os nossos componentes até agora têm o.server neles. Se executarmos isso, o log do console acontecerá em nosso terminal, mas não em nosso navegador. Vamos abrir nosso terminal novamente, nos livrar de tudo isso e depois executar o npm run dev. Agora vamos ter que acertar isso. Vou atualizar a página e, se voltarmos ao nosso console aqui, vou abri-la e você poderá ver os dados que retornam. Na verdade, está voltando duas vezes aqui. Você pode ver que obtemos esse objeto de dados e, por dentro, obtemos o objeto pontiagudo, e dentro dele obtemos o nome e a descrição. Isso nos permitirá inspecionar o que está dentro. Como você pode ver, essa desestruturação corresponde ao que vem desse objeto de dados. Podemos remover isso e, em vez de comprar aqui, podemos fazer dados. dados. loja. Atualize a página e você verá que obtemos o mesmo resultado. Mas, obviamente, isso é um pouco mais feio. Isso pode parecer um pouco mais complicado, mas nos ajuda a retirar objetos pontiagudos para que não precisemos colocar dados, dados na frente deles. Isso é essencialmente o que está acontecendo lá. Eu removo o registro do console e você pode ver que estamos retirando o objeto da loja do retorno aos dados e, em seguida, podemos acessar o nome e a descrição, porque é isso que nós solicitado em nossa consulta do GraphQL. Essa é a base de tudo o que faremos nesta aula, vamos importar componentes, conectar utilitários da estrutura de hidrogênio. Vamos usar esses ganchos para conectar alguns dados. Vamos usar esses dados aqui em nossos componentes e, se isso exigir, escreveremos consultas às quais nos conectaremos no caso da consulta UseShop para obter nosso dados. Se você entende esse padrão, então estamos no caminho certo para codificar nossa primeira loja de hidrogênio. 7. Como criar um componente de layout: Na última lição, começamos com nosso projeto, nós o configuramos e executamos em nosso computador. Você pode ver aqui. Uma das coisas que esqueci de mencionar no último vídeo é que esses dados vêm da loja de pré-visualização da Shopify. Se entrarmos em nosso explorador aqui e descermos até, acredito que seja hydrogen.config.js, você pode ver que o StoreDomain é hydrogen-preview.myshopify.com, e o StoreFrontToken é o que precisamos nos conectar a isso. É por isso que temos esses dados logo de cara. Nesta aula, na verdade, não precisamos criar uma loja ou atualizar nossa loja com dados de demonstração, pois podemos usar essa loja de demonstração por toda a classe. No entanto, quando implantarmos isso nossa loja real da Shopify, vamos querer substituir esses detalhes nosso próprio domínio de loja e nosso próprio token de acesso à vitrine, ok? Pensei em mencionar isso antes de começarmos. Alguns de vocês podem estar se perguntando onde estamos obtendo essas informações? Bem, ele está pré-carregado para usar a loja de pré-visualização de hidrogênio, o que eu acho muito bom nesta classe. Por exemplo, não queremos ter que criar todos esses dados de demonstração, podemos simplesmente conectar os dados de demonstração existentes, o que é muito conveniente. Com isso resolvido, o que eu quero fazer neste vídeo é criar um componente de layout. Nosso componente de layout envolverá todo o nosso site e basicamente fornecerá um cabeçalho e o SEO necessário que serão executados em todas as rotas de nossa loja de hidrogênio. O que vou fazer é entrar na pasta SRC aqui, criar uma nova pasta para meus componentes e, dentro dessa pasta de componentes, vou criar um componente layout.server.jsx, ok? Agora, esse componente terá duas funções renderizará um cabeçalho e também renderizará informações de SEO para que qualquer página do nosso site já tenha SEO integrado, ok? Vamos só que, para facilitar nossas vidas, vou copiar tudo aqui e colocá-lo aqui, ok? Agora, o que vou fazer é remover isso e vamos colocar uma div aqui para começar, para que não ocorram erros, e depois nomearemos isso não como home, mas layout. Então, como mostrei no vídeo teórico, vou usar a desestruturação de objetos para pegar qualquer criança que seja passada para esse componente de layout, ok? mesma consulta aqui, usaremos o nome e a descrição para o cabeçalho e também as informações de SEO. Então, o que vou fazer é que nosso arquivo index.server.js seja simplificado em uma tonelada, não vamos usar esses dados em nossa página inicial, então eu posso remover tudo isso, eu posso remover isso aqui, e vamos apenas retornar um componente muito básico, e aqui, vou colocar a página inicial, ok? Livre-se disso. Então, o que eu vou fazer é trazer esse componente de layout. Eu posso importar e acredito que estamos exportando o padrão aqui, então não precisamos usar os colchetes, podemos apenas fazer o layout dos componentes e, em seguida, criar um caminho para o componente de layout. Então o que eu quero fazer é passar tudo isso entre nossas novas tags de componentes de layout, ok? Agora, como você vê aqui, estamos acessando as crianças, o que eu quero fazer aqui é colocar as crianças entre essas divs, ok? Vamos ver se isso está funcionando agora para nós. Se eu for até aqui, você pode ver, sim, não há erros, ok? Voltando aqui, o que queremos resumir nesta página inicial básica é um cabeçalho e informações de SEO. Vamos começar a trabalhar no que está dentro da nossa declaração de devolução aqui, nosso JSX. Em primeiro lugar, quero retornar tudo o que é passado por essas tags de layout. O que vou fazer é chamar isso principal porque essa será a nossa parte principal da nossa página, e depois vou envolver as crianças em algumas tags de suspense porque não sabemos o que dados de classificação podem estar chegando. Lembre-se de que isso vai envolver todas as rotas, não apenas a rota index.server.jsx , ok? Agora, vamos receber esse erro aqui , porque ainda não importamos o suspense. Vou importar o suspense do react. Como você pode ver, acabou de preencher isso para nós. Agora estamos trazendo qualquer criança seja ela carregada de forma assíncrona ou não, ok? Agora tudo o que precisamos fazer é trazer nosso SEO e nosso cabeçalho. Agora, a maneira como fazemos SEO no hidrogênio do Shopify é simplesmente importar um componente de SEO da estrutura de hidrogênio e, em seguida, o que podemos fazer é trazer esse componente de SEO para cá. Não precisamos de uma etiqueta final, mas precisamos colocá-la nesse hífen para fechá-la. Então, aqui, colocaremos o tipo de SEO padrão. Em seguida, no campo de dados, colocaremos um objeto para título e descrição, e é aqui que usaremos o nome e a descrição da loja que retornaram da API da loja. Podemos colocar isso aqui, nome da loja e descrição da loja. Agora, o que você notará aqui depois de fazermos isso é que estamos recebendo todas essas linhas vermelhas onduladas, e isso porque não podemos retornar vários elementos no nível superior com o JSX, então estamos apenas teremos que criar um elemento de nível superior, e podemos criar um desses elementos em branco, como esse, um pequeno truque, mas agora não temos essas linhas vermelhas onduladas. Se eu voltar aqui, execute novamente nossa página inicial e abro minhas ferramentas de desenvolvimento. Acabei de pressionar a Opção Comando I para fazer isso, caso contrário, você terá que entrar no seu menu e abrir o DevTools. Eu faço isso em todas as aulas, então espero que vocês estejam me seguindo aqui. Então, se eu entrar em nossos elementos aqui, você pode ver que, se entrarmos em nossa tag principal aqui, você pode ver que temos nosso título e descrição aparecendo nessas meta-propriedades, quais são as nossas tags de SEO, ok? temos nosso SEO disponível. Agora só queremos criar um cabeçalho. Novamente, vou aproveitar algumas das classes que eu já escrevi no CSS, essa não é uma classe CSS, então vou pegar esse contêiner header-inner como uma classe. Então, aqui, vou criar um link para que possamos usar o componente de link na Shopify, e vou vinculá-lo à página inicial simplesmente colocando uma barra lá. Esse link será basicamente o logotipo do cabeçalho, é um padrão comum com cabeçalhos que, se você clicar no logotipo, ele o direcionará de volta à página inicial, então é exatamente isso que estamos fazendo aqui. Então aqui é onde vou colocar o nome da loja, ok? Agora precisamos importar links de nossa estrutura de hidrogênio porque ainda não fizemos isso. Então, se eu clicar em “Salvar” nessa atualização aqui, você pode ver que temos esse cabeçalho agora. Então, se eu clicar nisso, ele nos levará à página inicial na qual já estamos , ok? Isso vai ser útil mais tarde. Agora, o que vou colocar é uma lista não ordenada com a classe de navegação por cabeçalho. Obviamente, isso abrigará nossa navegação de cabeçalho. Então eu vou usar um pouco de Emmet aqui para colocar três links. Só vou ter links vazios neste estágio, link 1, link 2, porque não temos outras páginas, então, basicamente, vou colocar alguns espaços reservados. Então, finalmente, teremos um lugar aqui para link para a página do carrinho. Ainda não temos isso, então o que vou fazer é colocar um espaço reservado aqui. O nome da classe será header-cart-link, então vou colocar isso aí, ok? Vou clicar em “Salvar” sobre isso. Se formos até aqui, você pode ver que temos nosso cabeçalho e tudo está bem e centrado. Basicamente, o que vamos fazer, pessoal é que, ao longo da aula, atualizaremos nosso cabeçalho à medida que avançamos. À medida que criamos novas páginas, podemos adicionar links para essas páginas aqui e, em seguida, podemos adicionar nosso ícone de carrinho aqui com o número de itens em nosso carrinho também. Vamos falar sobre isso mais tarde na aula. Mas agora que criamos esse componente de layout, você vai agrupar todas as suas rotas com essa tag de componente de layout aqui, e isso garantirá que o cabeçalho e informações de SEO apareçam em todas as rotas. Com isso resolvido, vamos realmente criar uma página de catálogo para ver todos os nossos produtos em nossa loja de hidrogênio da Shopify. 8. Como construir uma página de catálogo: No último vídeo, criamos esse componente de layout, que é o que usaremos como layout padrão em todas as nossas rotas. Atualizamos nossa rota de índice e agora temos nossa página inicial super básica em nosso layout, que nos fornece nosso cabeçalho e nosso SEO, que vimos no último vídeo. Neste vídeo, o que vamos fazer é criar uma nova rota. Vou chamar isso de rotas do catálogo, desculpe, essa é a pasta errada, aqui na nossa pasta de rotas, catalog.server.jsx. Assim como um pouco de contexto aqui, o motivo pelo qual é um arquivo.server.jsx aqui é porque vamos consultar a API storefront. É uma boa ideia que, sempre que você consultar a API de vitrine em cada componente do roteador, esteja fazendo isso. Você quer fazer isso como um componente baseado no servidor ou no lado do servidor, dessa forma, não estamos expondo o que estamos consultando, essencialmente banco de dados, para o usuário final. Vamos começar exportando um componente funcional aqui. Esta será a nossa página de catálogo, que abrigará todos os produtos que existem em nossa loja. Em seguida, colocarei uma declaração de retorno aqui e, é claro, começaremos com o componente de layout. Teremos que importar isso, caso contrário, teremos um erro. Portanto, importe o layout da navegação para o caminho, para o nosso layout. Só para vocês saberem, pessoal, esse ponto-ponto significa voltar um na pasta SRC, e então podemos olhar nos componentes e encontrar o layout. Se você não está familiarizado com isso aqui, é isso que isso significa. Vamos desenhar algum conteúdo assíncrono aqui, então vou colocar um suspense logo após meu layout. Também teremos que importar o suspense do React. Então, um pouco de estrutura aqui que eu já configurei, eu criei um pouco de CSS para as classes de página de catálogo e contêiner. Vamos apenas colocar nossa página em um bom contêiner. Em seguida, criaremos uma div com a grade de classe de produtos e abrigará todos os nossos pequenos itens da grade de produtos. Se eu clicar em “Salvar”, atualmente não estamos obtendo nenhum dado, mas se eu for até a página do catálogo, teremos uma página praticamente em branco. Se inspecionarmos isso, você verá, no entanto, que temos as divs que configuramos, a página do catálogo e a grade de produtos. Isso é basicamente inútil até que entreguemos alguns dados. Vamos escrever nossa consulta abaixo aqui. Vou criar uma constante chamada consulta e depois vou usar o modelo de string GQL e colocar nossa consulta aqui. Como estou usando isso, vou ter que importar isso do Hidrogênio, então vou fazer isso aqui em cima. Importe o GQL do Shopify Hydrogen. Na verdade, vamos fazer isso em nossa interface gráfica. Depois de testá-lo, sabendo que ele funciona, podemos trazê-lo para o nosso projeto. Eu acho isso um pouco melhor. Vou passar para o gráfico aqui. Podemos fechar nossas DevTools. Vou me livrar dessa consulta padrão aqui, abri-la. Então, o que vou fazer é nomear nossa consulta primeiro. É uma boa convenção fazer isso, então vou criar uma consulta nomeada. Vou chamá-lo de produtos de consulta. Então é aqui que realmente começamos a solicitar alguns dados. Vou solicitar produtos. Vai cometer um erro, a menos que eu determine quantos eu quero. Vou pedir os primeiros nove. Então eu vou abrir uma seleção aqui e vou pegar todos os nós e os itens que eu quero nela. Vamos começar com o título e o identificador. Vamos executar isso. Ele diz que a consulta não existe na rota de consulta do tipo. Isso é porque eu tenho que mover isso. Eu não deveria aninhar isso em um objeto lá. Como você pode ver, agora parece muito melhor, há destaque de sintaxe, então acho que resolvemos esse problema. Vamos apenas descobrir. Aí está. Podemos recuperar os primeiros nove produtos da loja que estamos acessando, que é apenas a loja prévia do Hydrogen, e podemos recuperar o título e identificador de todos eles produtos. Vamos começar com isso. Vamos levar isso de volta para o nosso projeto. Tente recuar bem aqui, assim. Em seguida, precisamos usar uma consulta nítida. Estamos importando isso do Hidrogênio, é claro. Então, queremos entrar em nosso componente aqui. Basicamente , podemos copiar o mesmo, mas usar uma consulta nítida. Agora vamos por aqui. No arquivo layout.server.jsx, coloque-o aqui. Em vez de uma consulta nítida, será apenas uma consulta. Podemos dar a isso o nome que quisermos. Poderíamos nomear essa consulta de catálogo, mas vou chamá-la de consulta por enquanto. Então, o que vou fazer é apenas registrar o console dos dados que retornam para que saibamos como estruturá-los em D. Vamos dar uma olhada aqui. Temos um pequeno erro. CacheLong não está definido, então precisamos ter certeza de que também estamos importando isso do Shopify Hydrogen. Cache longo. Vamos ver se isso funciona agora. Vamos voltar. Abra o localhost 3.000 em uma nova guia e vamos abrir nossas ferramentas de desenvolvimento novamente para ver se há algum erro no lado do cliente. Temos um erro aqui. Diz que falhou na conexão com a API da loja. Isso pode ser devido à minha conexão com a Internet. Esqueci de colocar um C lá, então provavelmente é esse o problema. Vamos nos refrescar aqui. Agora só precisamos entrar na rota do catálogo e agora não há erros. Há algum erro aqui. Mas antes de vermos esse erro, você pode ver aqui, pode ser um pouco difícil de ver, mas na verdade estamos desconectando o objeto de dados que volta do uso de uma consulta nítida. Você pode ver aqui, podemos usar isso como nosso formato para estruturação em D, podemos capturar nós dentro dos produtos dentro dos dados aqui. Eu vou fazer isso. Deixe-me repetir isso para que possamos copiar o que temos aqui. Assim como fizemos aqui quando estruturamos em D e chegamos a esses objetos pontiagudos, o que podemos fazer aqui, se eu copiar isso, vamos entrar nos dados mais uma vez, mas em vez de Sharp, vamos entrar em produtos. Então, dentro dos produtos , os nós serão retirados. Então, se eu executar nós como registro do meu console aqui, vamos atualizar nossa página de catálogo e, se eu olhar aqui, você poderá ver todos os nós retornando. Esses são nossos produtos. Você pode ver que ele está retornando algumas vezes, mas você pode ver uma variedade de nós. Estamos recuperando o título e o identificador de cada um desses produtos. Então o que podemos fazer é usar isso aqui. Eu poderia usar nós. Aqui é onde, em vez de executar um loop, o que vamos fazer é executar o mapa. Vou explicar por que fazemos isso em apenas um segundo. Vamos executar o mapa. Então, o que vamos fazer é passar por cada produto por algum JSX. Vou colocar uma div básica aqui e, em seguida, o que posso fazer é inserir uma expressão JavaScript nesse JSX. Eu posso fazer o título do produto aqui. Na verdade, o que faremos é fazer disso uma lista, então eu farei uma lista não ordenada. Essa não será a forma final, mas ficará mais bonita neste exemplo básico. Então eu vou clicar em “Enter” sobre isso. Há um erro de sintaxe aqui. Acredito que precisamos de outro suporte lá. Às vezes, quando há um erro de sintaxe ele interrompe completamente o servidor, então precisamos executar novamente o servidor, npm run dev. Agora, se formos à nossa página de catálogo, você verá que temos uma lista não ordenada com todos os nossos diferentes produtos. Bem, pelo menos os primeiros nove deles, que é o que solicitamos aqui. Agora, para explicar essa coisa de mapa aqui, basicamente, queremos retornar todos os nós, mas precisamos agrupar cada um desses nós em algum JSX, por isso estamos usando map. Se nós apenas criamos nós sozinhos sem nenhum JSX, vamos ver se isso retorna alguma coisa. Não podemos simplesmente retornar uma matriz aleatória. Precisamos realmente converter essa matriz em JSX, então é por isso que estamos usando o mapa aqui, que basicamente criará uma matriz de JSX. Essa expressão será inserida entre essas tags de lista não ordenadas. Espero que isso explique o uso da função de mapa em JavaScript. Abaixo, temos uma lista básica de todos os títulos de nossos produtos. Os primeiros nove, pelo menos, no momento. Mas o que queremos fazer é expandir isso. Mostre o preço, mostre a imagem em uma pequena grade agradável, como seria esperar em qualquer site de comércio eletrônico. O que vamos fazer é criar um componente para esse item da grade de produtos. O que vou fazer é acessar meu arquivo de componentes aqui e criar, vou chamá-lo, ProductGridItem.server.jsx. Então, o que eu vou fazer é a exportação usual, uma função padrão e, portanto, nosso componente. Vou simplificá-lo dentro do próprio componente e chamá-lo de ProductCard. Então, obviamente, precisamos de uma declaração de retorno para o JSX. Por enquanto, vamos ser muito simples e mover esse item da lista para o nosso componente aqui. Agora vamos tentar acessar o produto, o que significa que precisamos analisá-lo como um acessório. Vou retirar o objeto do produto do suporte desse componente e, nesse lado, precisamos importar esse ProductGridItem e, nesse lado, precisamos importar esse ou ProductCard, como o chamamos aqui. Vou primeiro digitá-lo aqui, ProductCard e clicar em “Salvar” nele. Às vezes, ele o importa automaticamente para você, mas parece que teremos que fazer isso sozinhos desta vez. Vou importar esse ProductCard. Como você pode ver, o resto foi preenchido para nós, o que é muito bom. Vamos tentar reorganizar isso um pouco melhor. Vou colocar meus componentes que eu mesmo criei após minhas importações do React e do hidrogênio assim. Então, o que vamos fazer é criar um adereço chamado produto e analisar esses objetos do produto. Agora, se formos até aqui e atualizarmos, você verá que obtemos exatamente o mesmo resultado. Agora estamos apenas encapsulando esse código em seu próprio componente. É claro que precisamos exportar isso e depois importá-lo aqui e depois podemos usá-lo aqui embaixo, analisando cada produto em seus adereços. Há muitas coisas que faremos dentro deste ProductCard. Vamos remover esse UL porque vamos criá-lo como uma grade, não como uma lista. Então, vou me livrar desse componente da UL, atualizar o aninhamento e, aqui, o que vou fazer é criar uma div com a classe de product-grid-item, que, novamente, esse é o CSS existente isso corresponde ao que eu criei aqui. Então, o que eu quero fazer quando estiver aqui dentro é obviamente trazer o título, mas também quero trazer a imagem e o preço. Agora, quando se trata de imagens no Shopify Hydrogen, Shopify tem esse componente incrível chamado apenas de imagem. Se eu apenas importar o componente de imagem do Shopify Hydrogen e, em seguida, se eu adicionar o campo de imagem aqui, na verdade, vamos fazer essa consulta novamente em uma interface gráfica aqui. Então, se eu descobrir qual é o campo que estou procurando, essa é a parte útil de usar gráficos. Eu tenho o preenchimento automático aqui. Se eu esquecer qual é o nome do campo da imagem nesse nó específico, ele o preencherá automaticamente para mim. Então, se eu tentar executar isso, você verá que está errado porque eu preciso ter seleções aqui. Isso retornará uma conexão de imagem, eu acredito. Se eu passar o mouse sobre ela, ela retornará uma imagem. O que podemos fazer é consultar a documentação para ver quais campos estão no objeto da imagem. Estou aqui na referência da API Storefront. Vamos entrar na loja online, entrar nos objetos. Agora eu acredito que está em objetos comuns. Aqui está o último lugar para onde você olha. Aqui você pode ver o objeto da imagem e, em seguida, aqui você pode ver, para obter a URL da imagem, podemos acessá-la assim. Podemos obter o AltText, podemos obter a largura. O que poderíamos fazer é entrar aqui, pegar o URL, e então poderíamos simplesmente criar nossa própria imagem HTML básica e trazer esse SRC. Mas então não teríamos o benefício de imagens responsivas. O que podemos realmente fazer em vez disso é usar o componente de imagem, se eu for até aqui, da estrutura do Shopify Hydrogen. Eu vou te mostrar como isso funciona em apenas um segundo. Mas primeiro, precisamos esclarecer essa consulta aqui. Eu também vou pegar o AltText. Vou pegar a altura e vou pegar a largura. Vamos executar isso, garantir que não haja erros. Temos o identificador do título e os dados relacionados à imagem em destaque. Vou pegar isso e colar volta aqui dentro da nossa consulta. Lá vamos nós. A nidificação está um pouco errada. Toque assim. Então, o que eu vou fazer aqui é abrir um componente de imagem aqui. Como isso funciona é que podemos colocar dentro de Alt, acessar os objetos de imagem em destaque no produto e , em seguida, pegar o AltText. Mas, para o resto dos dados da imagem, podemos simplesmente analisar essa propriedade de dados, o próprio objeto de imagem. Só preciso fechar isso. Então, se eu clicar em “Salvar” e atualizarmos aqui em nosso aplicativo de hidrogênio, você poderá ver todas as nossas imagens aparecerem. Se eu clicar com o botão direito do mouse e inspecioná-los, você pode ver que temos o carregamento lento embutido e temos todos esses tamanhos responsivos diferentes com base na largura da tela. No Shopify Liquid, você pode fazer essa otimização criando um trecho e usando o filtro de URL da imagem para criar URLs de imagem diferentes para veicular com base nas dimensões da imagem em sua Shopify loja. Mas aqui, tudo o que precisamos fazer é usar o componente de imagem na Shopify. Para mostrar a alternativa, por exemplo, se fizéssemos uma tag de imagem com SRC e pudéssemos simplesmente analisar em product.featureImage.url, salvá-la, atualizar aqui, você obtém o mesmo resultado, mas você vê como ele está carregando um pouco mais devagar. Então, se entrarmos aqui, veremos que só temos um SRC. Para imagens responsivas, não precisamos escrever todo o código sozinhos, só precisamos usar esse prático componente de imagem fornecido pelo Shopify Hydrogen. Como você pode ver, ele já está recarregado e você pode ver que agora temos o carregamento lento ativado e todos esses diferentes URLs ativado e todos esses diferentes URLs gerados automaticamente para nós. Esse é o poder de usar alguns desses componentes que vêm do hidrogênio. Alguns deles são desnecessários e outros apenas tornam nossas vidas muito mais fáceis. Veremos isso quando fizermos opções de produtos e também cortarmos. Talvez pudéssemos fazer isso sem esses componentes, mas eles apenas tornam nossas vidas muito mais fáceis e espero que vocês estejam começando a ver isso agora. O que eu vou fazer é colocar isso em um contêiner de imagem. Isso é apenas um CSS para que ele apareça exatamente como queremos. Estamos ficando sem espaço aqui, então vou abrir isso. Em seguida, abaixo do contêiner da imagem, vou colocar uma div aqui com a classe de product-grid-item-title. Então aqui eu posso colocar o product.title, e então vamos clicar em “Salvar” nele, atualizar aqui e você pode ver que temos o título do produto e a imagem. Mas, geralmente, em uma grade de produtos, você também quer ver o preço, então vamos fazer isso a seguir. Precisaremos trazer alguns dados extras para isso, porque atualmente só temos o identificador do título e a imagem em destaque. Vamos voltar ao gráfico novamente. Em seguida, abaixo da imagem em destaque, se digitarmos algo como preço, que obterá a faixa de preço e o CompareAtPriceRange. Algo um pouco mais preciso é realmente mergulhar no produto e pegar sua variante. Você verá que podemos acessar faixa de preço e comparar AtPriceRange. Mas se quisermos obter um preço específico, o que podemos fazer é explorar as variantes. O que eu vou fazer é apenas procurar a primeira variante. Obviamente, essa é uma seleção com nós dentro dela, então teremos que abrir nós. Então, dentro do intervalo, vou pegar, vamos ver o que acontece com o preço. Temos o PriceV2, e isso é, na verdade, uma seleção em si, então temos que entrar e pegar o valor e o código da moeda. Então, se quisermos ter o CompareAtPrice também, precisaremos fazer exatamente o mesmo para esse código de moeda. Se eu clicar em “Salvar”, ele não salvará, mas será executado nele. Nós olhamos aqui embaixo. Você pode ver que para esta prancha de snowboard de hidrogênio, o preço é de $600, mas na verdade ela tem um CompareAtPrice de quase $650. Obviamente, isso funciona, vou copiar isso. Cole-o novamente em nosso projeto. Infelizmente, acho que vamos perder nosso ninho. Não, na verdade, está bem com o aninhamento. Clique em “Salvar” nisso e , aqui, o que posso fazer é criar uma nova div aqui. Vou usar a classe de product-grid-prices e, aqui, posso fazer product.priceV2.amount para tornar tudo muito simples para começar. O que eu fiz de errado aqui? Isso não corresponde aos produtos que eu tenho aqui. Eu esqueci de entrar na variante. Vamos entrar na variância e entrar nos nós, pegar o primeiro nó. Isso é um erro de ortografia, variants.nodes , preço em valor. Lá você pode ver que o preço está chegando, mas ele não está formatado. O que vamos fazer? Bem, no Shopify Liquid existe um filtro para isso, que formata bem o preço para nós. Temos algo semelhante no hidrogênio do Shopify chamado componente monetário. Vou importar o componente monetário aqui e depois vamos retirá-lo e abrir um componente monetário aqui. Então, assim como fizemos com a imagem, posso colocar na preparação de dados o mesmo preço, mas não quero entrar especificamente no valor. Esse componente descobrirá qual é a quantia e qual é a moeda e a formatará bem com base nessas duas. Eu cometi um erro aqui. Eu tenho dois colchetes encaracolados, e isso interrompeu meu servidor. Vamos executar o servidor novamente, executar o npm run dev e executar novamente nossa página de catálogo aqui. Agora você pode ver que temos o símbolo da moeda e esses preços estão formatados como moeda. Temos uma moeda bem formatada aqui. Agora, por uma questão de integridade, vamos também incluir a comparação de preços. O que eu posso fazer aqui embaixo, vamos fazer isso para começar, e depois vamos limpar isso. Vou entrar aqui e pegar o que foi, compare. Vamos voltar para aqui. Compare o preço V2, coloque isso aqui e feche como esse. Agora vamos colocar os dois preços lado a lado. Talvez não. Temos um erro aqui, que é interessante, que parece corresponder ao que estamos retornando aqui. Vamos usar um log do console para depurar aqui. Vou consolar o objeto de registro de produtos aqui. Podemos ver o que está sendo devolvido. Você tem o título, o identificador da imagem em destaque. Vamos examinar as variantes, os nós e executar novamente. Role até aqui se formos. Eu vejo. Às vezes, comparar preço V2 é nulo e é por isso que há um erro. Às vezes, há uma comparação no preço V2, mas às vezes é nula. O que o componente monetário está tentando fazer é acessar e atribuir um objeto que está agora. Precisamos ter certeza de que estamos verificando se isso é realmente nulo. Podemos fazer isso aqui se ele estiver retornando um valor verdadeiro, então podemos colocar essa declaração de devolução basicamente aqui e, em essa declaração de devolução basicamente seguida, executar o preço de comparação. Aqui você pode ver naqueles em que não há uma comparação de preço , mostrando apenas um preço. Onde há uma comparação de preços , ela mostra os dois preços. Agora, isso é confuso, obviamente. Olha isso, isso não é muito bom. O que vamos fazer é limpar isso aqui e depois colocar algo um pouco melhor aqui embaixo. Vou me livrar desse registro do console. O que vou fazer é usar a desestruturação de objetos para remover esses atributos desse nó aqui mesmo. O que eu vou fazer é pegar o preço V2, e eu vou retirá-lo como preço justo. Em seguida, vou pegar a comparação pelo preço e vou fazer isso como comparar o preço, não a comparação ao preço V2. Nós realmente não precisamos desse V2. Acho que isso é apenas o controle de versão da API. Em seguida, vamos pegar isso do que temos aqui embaixo, product.variants.nodes, e depois pegar o primeiro dessa matriz. Mas precisamos de alguma alternativa caso alguma delas seja nula. Vamos colocar um ponto de interrogação aqui. Se for nulo ou indefinido, passaremos por um objeto vazio. Então, em vez de verificar se agora é isso que faremos, que é um pouco mais sofisticado e um pouco mais agradável, verificaremos se o valor da comparação de preços é maior do que o preço. Vou dizer que está com desconto. Em seguida, colocaremos um booleano aqui, compare com o ponto de interrogação de preço, caso ele retorne nulo, valor seja maior que interrogação de preço, caso retorne um valor nulo. Então, aqui, eu vou alterá-los aqui também, está com desconto. Se tiver um desconto, ele devolverá isso. Em vez de ter o preço representado por muito tempo aqui, podemos simplesmente usar o preço que obtivemos aqui, preço e depois comparar o preço. Se eu clicar em “Salvar” e atualizarmos aqui, você verá que obtemos o mesmo resultado, mas é um pouco mais limpo e, em nosso JSX, é muito melhor de ler. Também vou dar a este um nome de classe de produtos comparados por preço. Então, se eu clicar em “Salvar” e recarregar, agora você pode ver que comparar preços é claramente o preço de redução visual, porque temos alguns CSS que se aplicam a ele agora. Outra coisa que mostrarei antes de encerrarmos é, como você pode ver, alguns deles têm 0,00, que você pode não querer mostrar no front-end. Obviamente, se houver um valor nessas casas decimais, você provavelmente não quer arredondar para cima. Mas quando há algo como 600, não precisamos realmente ir para duas casas decimais. O que podemos usar é semelhante no Shopify Liquid com formatação de preço, podemos colocar algo como sem zeros à direita. Então, se eu clicar em “Salvar” e voltar, você poderá ver que todos os produtos que tinham 0,00 terão isso removido. Essa é outra pequena opção de formatação interessante. Vou deixá-lo lá para a página do catálogo. O que faremos no futuro é torná-los vinculáveis. Mas, como ainda não criamos uma rota de produto, isso resultará apenas no direcionamento para uma página 404. Vamos continuar assim por enquanto. No próximo vídeo, aprenderemos como enviar por meio de um identificador de coleção na URL e consultar nossa API de vitrine para retornar somente os produtos dessa coleção. Basicamente, vamos criar uma página de coleção no próximo vídeo. 9. Como construir uma página de coleção: Então, no último vídeo, criamos uma rota de catálogo, que mostra todos os produtos em nossa loja. Não é filtrado por uma coleção específica. Na verdade, correção, está mostrando apenas os primeiros nove porque consultamos apenas os primeiros nove. Mas se estendermos isso para 100 ou qualquer outra coisa, obteremos os primeiros 100 ou até quantos estiverem em nossa loja, para começar. Se colocarmos 100 aqui e eu clicar em “Salvar” e executar novamente, não obteremos 100 porque não há 100 no total, mas obteremos até 100. Então eu acredito que há 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,11,12 snowboards nesta prévia de hidrogênio. Vou colocar isso de volta em nove. Observe que nosso site funciona mais rápido, mas sempre podemos atualizá-lo para quantos precisarmos. Neste vídeo, o que vamos fazer é criar algo muito parecido com isso, então criaremos outra grade de produtos, mas com essa rota específica, será uma rota dinâmica. Então, poderemos acessar coleções/algo como sapatos, pois eu pré-preenchi aqui, e então podemos ver uma grade de produtos que está filtrando apenas para essa coleção. O que faremos para isso é voltar ao nosso editor de código aqui e entrar em rotas aqui, e porque será uma rota aninhada, então será coleções e depois nosso editor de código aqui e entrar em rotas aqui, e porque será uma rota aninhada, então será coleções e depois tenha o nome da coleção ou o identificador da coleção. Precisamos criar uma pasta dentro da nossa pasta de rotas aqui, chamá-la de coleções e, aqui, faremos algo um pouco interessante. Vamos colocar uma rota dinâmica, vamos colocar o identificador como uma variável e, em seguida, digitar server.jsx. Agora, o que vou fazer aqui é extrair todas essas informações, basicamente copiar e colar tudo isso aqui para isso aqui, e, claro, precisarei atualizar isso de catálogo em coleção, e isso é tudo que vou fazer por enquanto. Vamos ver, temos um problema aqui. Precisamos atualizar os puffs aqui que levam aos nossos componentes porque agora estamos aninhados, como você pode ver aqui, em como você pode ver aqui, outra pasta em nossa rota, então precisaremos adicionar ponto, ponto, traço, outro conjunto desses dois, ambos para que possamos navegar até o lugar certo ou executar o npm, execute o dev novamente. Então, se nos refrescarmos aqui, estaremos bem. Isso também era algo que precisávamos atualizar antes que ele pudesse ser executado. verdade, a única diferença aqui nessa rota em comparação com nossa rota de catálogo é que vamos passar pela alça e , obviamente, precisaremos usar essas informações. Precisaremos passar isso para nossa consulta aqui embaixo e, em seguida, a consulta retornará apenas os produtos dessa coleção. Mas, essencialmente, aqui em nosso JSX, há praticamente nada para atualizar. O que vamos fazer para usar os parâmetros da rota é inserir um novo gancho do hidrogênio da Shopify, pode colocá-lo aqui. UserOuteParams, é o nome do componente e, em seguida, podemos usar esse gancho para retirar a alça dos parâmetros de rota, então vou usar a estruturação aqui, pegar a alça, que virá de UserRouteParams. Agora, para passar essa variável, esse identificador para nossa consulta usando o gancho useShopQuery, vou ter que adicionar minhas variáveis aqui. Vou abrir um objeto e depois vou passar pela alça. Agora, se eu rolar para baixo, posso usar esse identificador dentro da nossa consulta. Como fazemos isso? Em primeiro lugar, vou renomear essa consulta para algo mais apropriado. Vou chamá-lo de CollectionDetails e, em nosso título, queremos especificar que vamos passar por uma string como identificador. Então, em vez de procurar produtos, vou usar o Command X para ir direto ao assunto, então remova-o da nossa consulta para começar, mas depois vou colá-lo novamente mais tarde. Agora, o que temos que fazer é realmente consultar a busca de uma coleção, e a forma como vamos fazer isso é por meio seu identificador, exatamente assim. Então, aqui dentro, vamos pegar alguns detalhes sobre essa coleção, ld, título e descrição. Vamos pegar algumas informações de SEO também. Essa é uma seleção, então, dentro dessa seleção, precisamos pegar a descrição e o título. Poderíamos pegar a imagem da coleção. Não vamos usá-lo nessa classe em particular, isso é apenas um exemplo. Mas podemos extrair qualquer informação que precisamos desse objeto de coleção, e então eu vou colar código que tínhamos antes. Podemos, então, sobre essa coleção em particular. Encontre os primeiros nove produtos e, em seguida, use as mesmas informações. Vamos tentar corrigir um pouco o recuo aqui , isso foi inútil. Se eu clicar em “Salvar” nisso, vamos agora correr. Na verdade, precisamos saber o que é uma coleção em nossa loja, então, para fazer isso, vou entrar aqui e consultar nossa loja aqui para ver as primeiras nove coleções, e depois vou digitar nos nós para acessar cada nó e, em seguida, vou procurar a alça. Isso é apenas para ver quais alças estão disponíveis na loja no momento. Então, aqui estão todas as diferentes coleções por meio de suas alças. Os primeiros nove, pelo menos, mas há apenas 1, 2, 3, 4, 5, 6. Essas são todas as coleções dessa loja em particular. Agora eu posso ir até aqui, ir até as coleções e, em seguida, colocar essa rota dinâmica passando pela alça da coleção, vou pressionar enter nela. Temos um erro, então o que temos? String não é um tipo de entrada definido, então vamos voltar à nossa consulta aqui e eu digitei isso incorretamente. Eu preciso colocar isso como uma string com um ponto de exclamação. Isso é apenas um erro de sintaxe da minha parte e, se eu atualizar aqui, o que temos agora? Nódulos de leitura indefinidos. Isso está relacionado à configuração que tenho aqui, porque agora nossos nós estão aninhados em produtos, em coleções, não apenas em produtos. Vamos comentar isso por um segundo e eu vou consolar registrar os dados que estão sendo retornados da API, então, se eu rolar até aqui, você verá que temos a coleta primeiro. Então, precisaremos atualizar isso. Vamos cortar isso como fizemos antes com a consulta, colocar na coleção e colar depois disso. Precisamos colocar outros colchetes encaracolados e, em seguida, nós de produtos. Agora você pode ver que funciona. Obviamente, isso se parece bastante com a página do catálogo, então, se quisermos confirmar que essa é realmente essa coleção, o que posso fazer é colocar um h1 aqui e pegar o ponto de coleta de dados. O que acessamos? Título? Eu acidentalmente abri dois colchetes encaracolados novamente aqui. Só precisamos de um em cada lado, e se eu clicar em “Salvar” nele, atualize aqui, recebi outro erro aqui. Eu não configurei isso corretamente, então, coleta de dados, acho que precisamos analisar os dados duas vezes aqui, data.data.collection.title, e aqui você pode ver a Coleção Freestyle. Então, se eu entrar no que era um dos outros? No interior, então se eu for para o sertão, agora podemos ver com certeza que a lista de produtos está aparecendo diferente, desta vez, definitivamente em comparação com a coleção freestyle. Agora você pode ver que podemos passar o identificador de coleta e devolver somente essa coleção. Agora isso é feio, então vamos limpar isso um pouco. Vamos fazer a coleta de dados, coletar dados e, em seguida, devemos ser capazes de simplesmente retirar o título da coleção assim, e provavelmente podemos tornar isso ainda melhor colocando isso aqui . Então essa estruturação da coleção, opa. Agora só precisamos dar uma olhada, coleção. Vamos ver se isso funciona. Então, isso também é um pouco melhor. Eu passei por isso um pouco rápido, mas basicamente estou estruturando o suficiente a partir do objeto de dados para obter a coleção e depois me ver, eu tenho esse objeto de coleção agora. Em seguida, estou retirando os nós do produto a partir desse momento. Isso resulta em uma desestruturação menos aninhada e nos permite pegar coisas como collection.title e nós desses objetos aqui. Então, como já criamos nosso item de grade de produtos e o reciclamos, não há muito trabalho aqui para fazer. O que fizemos neste vídeo em comparação com o último foi passar por esse identificador então, obviamente, esse não tinha nenhum identificador chegando e acabamos de acessar os produtos em nossa raiz de consulta. Agora estamos acessando os produtos de nossa coleção e, é claro, precisamos especificar qual coleção buscamos. Fazemos isso por meio da alça e descobrimos a alça por meio dos parâmetros de rota, e isso significa apenas que temos um nível de aninhamento mais profundo porque estamos olhando para dentro de uma coleção, então que nos forçou a atualizar nossa desestruturação de objetos aqui em cima. Caso contrário, agora temos páginas de coleção configuradas em nossa loja. Então, no próximo vídeo, o que vamos fazer é criar nossa página de produto agora, que possamos, na verdade, quando clicarmos nesses itens, entrar em cada um desses produtos. 10. Como construir uma página de produto: Nos dois últimos vídeos, configuramos nossa grade de produtos dentro dessa página do catálogo, que retorna todos os produtos em nossa loja. Em seguida, nossa rota de coleta individual, que é uma rota dinâmica que podemos passar pelo identificador de qualquer coleção que desejamos carregar. Peço desculpas pela baixa velocidade de conexão aqui. Mas aqui está. Aqui está nossa coleção de freestyle. Mas, como você pode ver quando clicamos em qualquer um deles, eles não estão vinculados a nenhuma página de produto individual, porque ainda não a criamos. É isso que faremos neste vídeo. No vídeo seguinte, criaremos a funcionalidade do carrinho. Nos próximos dois vídeos, podemos ver a complexidade aumentar um pouco porque as duas maiores partes da interatividade, você pode dizer, em um site da Shopify geralmente são a seleção de variantes e a funcionalidade do carrinho. Essas são as áreas do nosso site Shopify que geralmente queremos atualizar instantaneamente o estado de gerenciamento no front-end. Felizmente para nós, estamos usando o React e estamos usando o Shopify Hydrogen. Toda essa funcionalidade assíncrona virá naturalmente para essa plataforma. É um dos benefícios de usar o React e o Hydrogen. Mas isso significa que usaremos mais alguns fornecedores e mais alguns ganchos para ativar essa funcionalidade. Mas, como você verá, depois de passarmos por isso, você começará a ver que existem muitos componentes e ganchos no Hidrogênio que estão nos permitindo fazer isso. Vai ser bem simples quando você entender isso. Antes de realmente criarmos esta página de produto, vou atualizar nossos links aqui porque agora temos uma página de catálogo e uma página de coleção. Vou acessar nosso componente de layout e, em seguida, no primeiro link, vou vinculá-lo ao nosso Catálogo. No segundo link, vou vinculá-lo às coleções Freestyle. Pode muito bem fazer isso, Freestyle. Se eu clicar em “Salvar” e ele for atualizado aqui, agora você verá que podemos navegar até nosso Catálogo por meio de nossa navegação de cabeçalho e podemos navegar diretamente até a Coleção Freestyle por meio de nossa navegação de cabeçalho também. Vamos criar essa rota de produtos. Assim como fizemos com as coleções, vamos criar uma rota dinâmica, mas precisamos aninhá-la em nossa pasta de produtos. Então, aqui, vou fazer o mesmo título de antes, handle.server.jsx. Então, como eu costumo fazer, vamos exportar um componente imediatamente. Vou ligar para este produto e em seguida, uma declaração de devolução aqui para o nosso jsx. Não gosta que eu faça isso. Você sempre tem que colocar um pouco de jsx no meio aqui, caso contrário, enlouquece. Vamos colocar um pouco de jsx aqui. Dessa forma, isso não impedirá que nosso servidor execute o npm run dev. Porque antes de começarmos a criar esse componente, o que eu quero fazer é começar a testar algumas consultas do GraphQL aqui. Em vez de consultar produtos, vamos fazer um produto de consulta. Então, para segmentar um produto específico, faremos a mesma coisa que fizemos antes com as coleções. Vou especificar que vamos passar um identificador e o tipo será uma string. Vamos acabar com essas coisas aqui. Então, o que vou fazer é pegar um produto pela alça. O identificador será passado nas variáveis do nosso gancho UseShopQuery, assim como fizemos para a coleta. Agora, depois de determinarmos o produto, devolverei o título do produto. O que mais precisamos? Descrição, HTML e, em seguida, desejaremos retornar a imagem do produto. Podemos passar pela mídia. mídia pode ser modelo 3D , pode ser imagens , pode ser vídeos. Mas, para manter as coisas muito simples para essa aula, vamos apenas lidar com imagens. Vou abrir a mídia aqui. Além disso, para simplificar, exibiremos apenas uma imagem do produto. Vou selecionar apenas a primeira parte da mídia. Nessa loja específica da Shopify, podemos atestar que a primeira mídia será a imagem de um produto. Caso contrário, talvez queiramos procurar várias mídias e depois ter certeza de que estamos encontrando uma imagem dessa lista de mídias. Mas acho muito seguro supor que a primeira parte da mídia será uma imagem. Continuando com essa suposição, vou abrir nós aqui. Então, para os campos de mídia, novamente, isso pressupõe que seja uma imagem. Se você quisesse fazer isso funcionar com todos os tipos de mídia, você precisaria fazer o que eu mostrei em uma das aulas teóricas, que era ter esses três pontos e dizer no MediaImage. Na verdade, ainda vamos fazer isso. Se for uma MediaImage, ela retornará essa seleção, ID e, em seguida, a própria imagem com o URL, a largura e a altura. Novamente, vamos lidar apenas com imagens de mídia nessa classe específica. Mas se quisermos ter uma seleção diferente com base no vídeo, podemos simplesmente entrar em Vídeo e depois colocar nossa seleção de vídeos. Você faz isso em fontes. Isso é exatamente como o exemplo que vimos anteriormente na documentação da Shopify. Mas para que essa aula seja simples, vou supor que estamos apenas vendo imagens, nas quais acredito nessa vitrine de hidrogênio em particular. De qualquer forma, não sei se há algum modelo ou vídeo 3D. É uma suposição bastante segura de se fazer aqui. Então, vamos executar isso para começar. Na verdade, precisamos passar por uma variável aqui, então provavelmente não vai funcionar. Não temos uma variável. Talvez eu queira brincar com isso aqui porque na verdade não temos como lidar com o trabalho, mas vamos pegar isso e colocar isso em uma consulta aqui. Se ele quebrar, ele quebrará em nosso aplicativo e nós o testaremos aqui. Faremos gql para abrigar nossa consulta. Então vamos colocá-lo lá. Então, é claro, precisamos importar, useShopQuery, aquele gancho muito importante do Hydrogen. Também precisamos de gql. Então, se vamos usar o CacheLong, pegue o CacheLong também. Então, aqui, vamos apenas fazer um const data. Nós não vamos destruí-lo ainda. Em seguida, usaremos o ShopQuery. Faremos a consulta como a consulta constante que listamos aqui. cache será CacheLong, assim como antes. Em seguida, passaremos as variáveis de handle. Como vamos passar a alça, teremos que usar os parâmetros de rota novamente. Vou pegar os parâmetros de rota do usuário. Estou examinando isso rapidamente porque esse também é o mesmo padrão que fizemos para a coleção. Vamos apenas retirar a alça const do gancho UserOuteParams. Então, se não especificarmos o identificador aqui, podemos escrever a forma abreviada de just handle. Obviamente, temos um pequeno erro aqui que fez com que nosso servidor parasse. Mas vamos apenas registrar esses dados pelo console e ver se temos algum problema com nosso código no momento. Isso parece bom. Agora, ainda precisaremos passar por uma alça, então vamos incorporá-la em nossos ProductsGridItem. Vou inserir outro componente aqui a partir do hidrogênio, o componente link, e vou transformá-lo de uma div em um componente de link da Shopify. Então, aqui, vou fazer isso, pegar o produto e acessar seu URL. Na verdade, antes de fazer isso, precisarei colocar os produtos anteriores em parte desse caminho. Vamos clicar em salvar isso. Se voltarmos para aqui e vamos para aquela coleção de estilo livre ou qualquer página de coleção ou página catálogo em que ProductGridItem esteja em uso. Agora, nossas imagens estão vinculadas no momento. Se inspecionarmos qualquer um deles, você verá que ele está indo para indefinido. Isso não vai funcionar [RISOS] de forma indefinida. Temos que descobrir qual é o problema. URL do produto. Talvez não tenhamos solicitado isso. Vamos ao catálogo. Não vamos usar o URL, vamos usar o identificador. É assim que vamos construir o URL. Atualize aqui e dê uma olhada aqui. Você pode ver que o snowboard é a alça desse. A alça deste é mail-it-in-freestyle-snowboard. Nomes interessantes aqui. Se formos aqui, podemos ir para essa rota específica. Atualmente, não há nada chegando no front-end. Vamos voltar ao nosso código aqui e, claro, registramos os dados no console. Aqui você pode ver, e vou expandir isso para que você possa ver mais facilmente, vemos o que é retornado pela API Storefront. Parece que nossa consulta funcionou, passamos o identificador e recuperamos o título e a descrição HTML e um objeto contendo a mídia. Teremos que nos aprofundar nesse objeto se quisermos ver o que está dentro. Agora, vou adicionar também as informações da variante a essa consulta, porque definitivamente precisaremos usá-las para fazer a seleção da variante assim que chegarmos a ela. Vou tentar pegar todas as variantes. acho que o número total de variantes que você pode fazer em qualquer forma, acho que o número total de variantes que você pode fazer em uma loja da Shopify é 100. Vou tentar pegar toda a variação usando o argumento dos primeiros 100. Então, obviamente, isso retornará uma lista de nós. Dentro dos nós, vou pegar o ID da variante e várias outras propriedades que vão nos ajudar. Precisaremos pegar o PriceV2. Então, é claro, isso é uma seleção, então precisaremos pegar o valor e o CurrencyCode. Vamos também pegar o CompareAtPriceV2. A mesma coisa novamente, quantidade, CurrencyCode. Se quisermos, podemos pegar a imagem da variante, mas vamos usar apenas a única imagem que existe no produto para essa classe específica. Mas uma coisa que precisamos incluir e que será essencial para descobrir qual variante está sendo selecionada é selectedOptions, para que possamos pegar o nome e o valor. Acho que isso é tudo por enquanto. Se recarregarmos aqui, como você pode ver, só diz objeto. Vamos dar uma olhada na variação de dados. Tudo o que fazemos, precisamos aninhar. Agora precisamos entrar em data product.variantes. Vamos atualizar a página aqui. Temos um erro indefinido nas variantes aqui. Vamos dar uma olhada. Dados, produto, variação. O produto está voltando indefinido, o que é interessante. Volte para os dados de login do console. Vou deixar isso na aula para vocês verem como depurar. Se você não sabe o que está aparecendo nos dados, você sempre pode simplesmente registrá-los no console e, em seguida, descobrir como fazer sua desestruturação e acessar diferentes partes dos dados que obtêm devolvido. Como você pode ver aqui, temos um objeto de dados. Acho que preciso digitar os dados novamente. Dados, dados, variantes do produto. Aqui você pode ver que era isso que eu precisava fazer. Aqui vamos nós. Se formos até aqui, poderemos ver a lista de nós variantes e você poderá ver o ID da vitrine dessa variante, o preço como um objeto e as opções selecionadas como uma matriz. Se quisermos nos aprofundar ainda mais nisso, vá para a primeira variante, então vamos para nós, o primeiro nó que aparece nessa matriz de variantes, e depois vamos para selectedOptions só para dar uma olhada no interior. Como você pode ver aqui, para essa variante específica, o tamanho de 154 cm e a cor da sintaxe. Isso é o que precisaremos saber para determinar a variante. Basicamente, o que precisamos fazer aqui, pessoal, é retirar o produto desses dados aqui. Eu posso me desestruturar aqui como fiz antes e fazer isso com os dados. Ou posso economizar espaço e mover isso até aqui, que faz com que pareça um pouco mais complicado, mas é um pouco mais limpo. É assim que você também verá nos exemplos da Shopify. Agora devemos ter acesso a esse produto se estivermos passando por uma alça correta. Então, o que eu posso fazer aqui é product.title. Então, se nos refrescarmos por aqui, ainda não estamos chegando. O que estamos fazendo de errado aqui? Nada está acontecendo nesta div, o que é interessante. Vamos dar uma olhada nos objetos do nosso produto. Se eu atualizar, você poderá ver o título do produto aqui. Eu acredito que pode realmente estar aninhado. Produto.Produto.Título. Sim, e isso funciona. Isso é um pouco engraçado, não é? Vamos fazer dados. Opa. Vamos limpar isso um pouco. Dados, produtos de dados. Então, agora devemos ser capazes remover um desses produtos. Não, também não gosta disso. Eu vou fazer produtos, e aí está. Precisávamos atualizar nossa desestruturação aqui para obter esse objeto de produto. Mas agora que temos esse objeto de produto, podemos começar a usá-lo aqui mesmo. Agora, uma coisa que você notará é que perdemos nosso layout, então vamos atualizá-lo. Queremos colocar nosso componente de layout aqui e aninhá-lo dentro. Vamos também dar a esta página do produto algumas informações de SEO. Vou pegar o componente de SEO. Dentro do layout, como estamos consultando o banco de dados ou consultando a API do Storefront para obter as informações de SEO, vou colocá-las em um suspense. Precisamos importar o suspense do React. Então, aqui dentro, o componente de SEO. Para isso, basta digitar o tipo de produto e depois passar o produto como objeto de dados. O componente de SEO fará o resto do trabalho por nós. Então, aqui embaixo, vou dar a isso um nome de classe de página de produto e contêiner que se alinha com nosso CSS predeterminado. Outra área aqui, o layout não está definido. Legal. Na verdade, vamos colocá-lo aqui porque é nosso próprio componente. Importe o layout e o restante já está pré-preenchido para nós. Linda. Aí está você. Temos nosso layout de cabeçalho de volta agora, então, se eu acessar qualquer um dos produtos em qualquer uma das coleções e clicar neles, você verá que ele irá para essa alça e, em seguida, carregará o produto informação. No momento, estamos usando apenas o título. Na verdade, vamos criar uma página de produto um pouco mais. Para fazer isso, para dissociar essa consulta da API Storefront dentro do componente do servidor, vou criar um componente cliente para manter nossa página de produto. Provavelmente será um vídeo um pouco mais longo porque há muito código para ler aqui. Mas vamos limpar isso um pouco aqui. Definitivamente, vamos querer dar uma olhada nisso, mas também vamos querer criar nosso componente ProductDetails aqui, Client.jsx. Então, novamente, como eu faço quando inicio cada componente, exporto a função padrão, o nome do componente, vamos chamá-lo de detalhes do produto. É claro que passaremos os dados do produto como uma de suas instruções. Então, é claro, vamos retornar alguma forma de jsx. Certifique-se de não salvar sem nada aqui, caso contrário, haverá um erro. Nessa nota, vamos criar uma div para evitar essa situação. Assim como fizemos antes, colocarei o título do produto lá. Então, em vez disso, o que vou fazer é importar ProductDetails desse endereço. Em seguida, substituirei isso por ProductDetails e depois passarei o produto como suporte. Lá vamos nós. Se eu clicar em salvar, atualize aqui. Outro erro. esse erro de nenhum contexto de localização disponível aqui, que é difícil de depurar. O que eu descobri foi que eu só precisava usar o Yarn para limpar o cache. Isso é o que eu mencionei anteriormente sobre o Yarn. Inicialmente, eu estava usando o npm run dev todas as vezes, mas depois instalei o Yarn porque acabou sendo a única maneira de contornar esse problema e, em vez disso, vamos fechar o servidor que eu acabei de fazer e depois vou executar yarn dev —force. Isso executará novamente nosso servidor e, como você pode ver, agora está funcionando. Essa é apenas uma peculiaridade estranha no desenvolvimento do Shopify Hydrogen. Se você tiver um erro estranho como esse novamente e não conseguir descobrir o que está acontecendo, dê esse comando atrás, yarn dev —force. Obviamente, neste caso, funcionou e podemos seguir em frente. O que eu estava tentando mostrar antes que esse erro surgisse é que agora mudamos o desenvolvedor com o título do produto para seu próprio componente e depois o substituímos pela referência aos componentes. Agora, se dermos uma olhada em nosso navegador, parece exatamente o mesmo. Mas a razão pela qual queremos transferir isso para seu próprio componente está relacionada à renderização do lado do servidor e do lado do cliente. Como diz na documentação, se eu examinar aqui a visão geral dos componentes do React Server na documentação e rolar para baixo, você pode ver aqui que devemos usar componentes do servidor quando fazendo chamadas para a API da vitrine e geralmente devemos usar componentes do cliente quando estamos fazendo interatividade dinâmica do lado do cliente. É por isso que agora vamos detalhar os detalhes do produto. De qualquer forma, deveríamos apenas tornar o código mais limpo, mas isso talvez explique mais por que estamos usando um componente do lado do cliente aqui. Estamos vendo nosso primeiro componente do lado do cliente na classe até agora. Vamos até aqui. Para expandir esta página do produto, vou importar muitas coisas do Shopify Hydrogen, então vamos começar imediatamente. Vou importar alguns fornecedores e ganchos aqui, o que nos permitirá fazer a seleção de variantes com muito mais facilidade. Eu vou colocar o caminho para o hidrogênio aqui primeiro, e depois vou quebrar os colchetes encaracolados assim, porque haverá uma pequena lista aqui que vamos importação. Primeiro de tudo, você quer o ProductOptionsProvider, então, dentro dele, usaremos o gancho useProductOptions e , em seguida, renderizaremos uma imagem, obviamente; ProductPrice, que é muito semelhante ao componente monetário, mas está relacionado especificamente ao ProductPrice. Em seguida, o botão Adicionar ao carrinho, que talvez não usemos nesta lição, mas provavelmente na próxima lição, quando começarmos a incorporar a funcionalidade do carrinho. Agora, em vez do que temos aqui, vou incluir todos os detalhes do produto no ProductOptionsProvider. Esse provedor nos fornecerá algumas funcionalidades importantes em relação à troca de variantes e, como isso pode afetar tudo, incluindo a imagem do produto, teoricamente, vou colocá-la como componente de nível superior. Para que isso funcione, precisamos apenas passar o produto como suporte de dados. Aqui eu vou criar uma imagem e só precisamos passar os dados exatamente onde a imagem está. Vamos colocar o arquivo console.log aqui para que possamos descobrir como navegar até onde as informações da imagem estão. Vou colocar console.log o objeto do produto que é passado por e para o ProductDetails. aqui, vou remover isso, caso contrário, provavelmente haverá um erro. Agora, vamos passar para o lado do cliente para ler nosso console.log. Como esse é um componente do lado do cliente, agora vemos os registros do console em nosso navegador no lado do cliente, em vez aqui em nosso terminal no lado do serviço, então isso é algo a ser observado. Se estivermos trabalhando com componentes do lado do servidor, todos os registros do console acontecerão aqui. Se estivermos usando componentes do lado do cliente, qualquer registro do console acontecerá no nosso lado do cliente, em nosso navegador. Temos um erro aqui porque não estamos colocando nada na imagem, mas essencialmente ainda temos o registro do console chegando. Se entrarmos nos nós de mídia e depois entrarmos nessa imagem aqui, esse objeto deve ser tudo o que é necessário para que a imagem funcione. Vamos dar uma olhada. Vamos usar os nós de mídia do produto; o primeiro nó e depois a imagem. Vamos fazer isso, data= {products.media nodes [0]; pegaremos o primeiro dos nós e depois o.image}. Vou clicar em “Salvar” nessa atualização aqui e vamos ver o que acontece. A propriedade de dados deve ter a propriedade alt texts. Não é assim, vamos dar uma olhada. Talvez precisemos apenas passar o alt como diz aqui, então vamos até nossa imagem e fazer o texto alternativo aqui. Vamos dar uma olhada na imagem principal de nossos elementos. É uma renderização, mas é muito gigante. Parecia que não estava aparecendo, mas na verdade está aparecendo. Eu só tenho que colocar um nome de classe aqui para que ela se comporte, então eu vou fazer className. Novamente, referenciando o CSS que eu já criei para você, será a imagem da página do produto, e agora você pode ver que está bem na lateral. Novamente, isso pressupõe que estamos usando apenas imagens para nossa mídia de produto. Isso basicamente falharia se alguém estivesse usando modelos de vídeo ou 3D em sua mídia de produto. Lembre-se de que esta é uma versão simplificada para o propósito desta classe básica sobre o Shopify Hydrogen. Vamos agora inserir esse componente ProductOptionsProvide em um segundo componente, e é aqui que vou colocar no formulário do meu produto. Vamos criá-lo primeiro. Essa é a primeira vez que veremos dois componentes em um único arquivo. Não precisamos exportá-lo porque o estamos usando diretamente nesse arquivo, então vou chamá-lo de formulário de produto único. Vamos fazer um retorno com um div aqui para que todo o aplicativo não seja quebrado apenas como um espaço reservado. Então, o que eu quero fazer é ter certeza de que estou passando por um produto como suporte e, em seguida, posso pegar os componentes do ProductForm e, em seguida, posso pegar que acabamos de definir lá embaixo. Vamos fazer com que ele se feche automaticamente assim, e então eu posso passar por esse produto como suporte do produto. Então, assim como antes, vou colocar products.title aqui. Vamos executar isso, ver se funciona. Agora você tem a imagem do produto e o título aqui. Agora, aninhado dentro desse componente ProductForm estará o gancho useProductOptions. Aqui é onde começaremos a criar nossa funcionalidade de seleção de variantes. Aqui mesmo; e essa é provavelmente a parte mais complicada do vídeo, então tenham paciência, pessoal, vou tirar algumas coisas desse gancho; useProductOptions e esse UseProductOptions é o gancho para gerenciar o estado de quais opções são selecionadas e, portanto, qual variante é selecionada entre essas opções. O que podemos fazer é usar as opções, podemos usar o selectedVariant, podemos usar o selectedOptions e podemos usar o método setSelectedOption. É mais fácil para vocês lerem, vamos aninhar assim. Estamos pegando tudo isso do gancho useProductOptions, e aqui o que vou fazer é começar com um div, mas vou colocar o título como h1 e, por baixo estou vou utilizar esse componente ProductPrice, então vou pegar o ProductPrice dar a ele um nome de classe de produto-page-preço. Para CSS, vou passar sem zeros à direita , como fizemos antes. Vamos dividir isso em várias linhas para vocês. Sem zeros à direita, passarei o objeto do produto como a propriedade de dados e, em seguida, também passarei o ID da variante. Isso é importante porque o ProductPrice pode mudar com base no ID da variante selecionada e, na verdade, podemos pegar o ID da variante selecionada dessa forma. Isso é muito legal. Estamos pegando isso, que é uma variável nesse objeto de estado, então isso realmente será atualizado à medida que for atualizado com base em nossa seleção. Esse é o poder de usar esse gancho, e esse é o estado sobre o qual estávamos falando nesse componente específico que vamos usar. Você começará a ver isso funcionando em apenas um segundo. Se eu atualizar aqui, você pode ver que temos um preço chegando aqui. Na verdade, ele não tem zeros à direita, então, sem zeros à direita, não está funcionando nessa página específica, mas para qualquer página que tenha dois zeros; dois zeros à direita, ele removerá esses, mas como você pode ver aqui, o preço sobe. Novamente, minha conexão de internet de má qualidade está fazendo com que essa carga seja lenta. Situação da Internet resolvida por enquanto, desculpe por isso. Aí está você. Nosso preço está chegando ali mesmo. Uma boa ideia seria, obviamente, criar outro ProductPrice aqui e fazer o que fizemos no ProductGridItem em termos de , se for com desconto, mostrar também o Compare no preço. Mas eu já te mostrei como fazer isso, então você deve ser capaz de descobrir isso sozinho. No interesse do tempo e para garantir que esta lição não seja muito longa, vamos continuar com a parte mais importante, que é o próprio ProductForm. O que você verá aqui é que eu vou aninhar outra declaração de retorno, então isso será baseado em uma matriz e nesta seção vamos abrigar em uma div com a classe de Opções de produto. Então, aqui, acessaremos todas as opções para criar nosso formulário de produto. Vamos usar o mapa novamente, vamos pegar cada uma das opções. Vamos usar a estruturação para extrair o nome e os valores de cada opção. Em seguida, vamos criar um back completo aqui, só teremos que adicionar um colchete lá. Portanto, isso não quebra e remove isso. Basta mover isso aqui para resolver esse erro. Lá vamos nós. As linhas vermelhas onduladas sumiram. Então, o que vamos fazer é colocar uma declaração if aqui, caso haja apenas um valor, nesse caso, não há opção de seleção. Se houver um, retornaremos nulo. Isso é apenas uma alternativa caso não haja vários valores; nesse caso, não adianta selecionar entre as opções se houver apenas uma opção. Então, se esse não for o caso, retornaremos outro conjunto de JSX. Vou tentar fazer isso passo a passo quanto possível. Então, vamos primeiro criar um grupo de opções de produto para cada grupo de grupo de opções de produto. Vou colocar uma chave aqui porque é uma exigência de reação. Podemos usar o nome aqui como chave e, em seguida, vou colocar elementos de elegância aqui com o nome do traço da opção da classe de produtos, e então posso colocar o nome da opção. Vamos deixar isso aí por enquanto e vamos dar uma olhada. Como você pode ver, o que vamos receber volta é a lista de opções diferentes. Se eu for ao meu catálogo aqui e acessar, acredito que é esse com a maior quantidade de opções. Você pode ver agora listando todas as opções diferentes. Mas o que ainda não estamos listando são os valores. Vamos passar por isso agora. Na próxima parte, vamos aninhar outra declaração de devolução. É aqui que estou dizendo que está começando a parecer um pouco descolado aqui. Há muita nidificação acontecendo aqui. Infelizmente, é apenas a natureza da fera. Vamos usar outro mapa aqui para passar nossos valores para algum JSX para exibição. Vou pegar o valor, abri-lo e depois colocar um código antes da declaração de retorno. Mas só para começar, só para colocar algo na página, abrirei minhas devoluções imediatamente. Aqui é onde vou colocar uma div com um valor de opção de classe de produtos, e aqui dentro é onde colocarei um botão de rádio. Faremos um tipo de rádio. O nome será igual ao nome da opção. Então, é claro, queremos registrar o valor. No momento, estamos examinando todos os valores para que possamos transmitir o valor que estamos analisando no momento e, em seguida, passaremos pelo método onChange. É quando começamos a usar o método de opções lecionadas por conjuntos que retiramos do gancho de opções de uso do produto. Agora vou colocar em um conjunto de funções anônimas a opção selecionada, análise, nome e valor e fechar esse elemento de entrada. Agora vamos ver se há algum erro. Não está completamente completo, mas eu queria te mostrar o que temos até agora. Temos algum espaço aqui, mas não há nada passando. Vamos dar uma olhada. Temos a legenda e, em seguida, temos uma contribuição para cada uma delas. Oh, eu esqueci de colocar a etiqueta aqui. A razão pela qual essas entradas eu aninhei nessas divs é para que possamos colocar uma etiqueta, que é uma aparência mais agradável para a entrada, em vez de ter aqueles botões de rádio feios. É só uma coisa de HTML aqui. Vou criar esse rótulo e, em seguida, vou colocar o valor aqui para que possamos realmente ver qual valor estamos selecionando. Como você pode ver, os valores estão aparecendo agora. Ao passar o mouse sobre cada opção, há uma linha que aparece abaixo. Ao clicar neles agora, a opção de seleção definida deve estar funcionando. Simplesmente não estamos recebendo feedback visual em nosso formulário. Para conseguir isso, o que vamos fazer é criar uma variável aqui chamada check e acessaremos o objeto que ainda não acessamos. Vamos acessar essas opções selecionadas que ainda não usamos. Se, quando passarmos o nome para as Opções selecionadas, ele for igual ao valor que estamos vendo no momento , a verificação será verdadeira. Agora só precisamos passá-lo para nossa entrada aqui. Marcado é igual ao valor desse valor. Clique em “Salvar” nisso. Agora você pode ver que, na verdade, ainda não está funcionando porque temos mais uma coisa a fazer aqui, e isso criou nosso id. Vamos fazer const ID. Vamos criar uma pequena string aqui com o nome e o valor. Em seguida, podemos colocar isso aqui e também no rótulo, colocar HTML como ID, e isso vinculará nosso rótulo à nossa entrada. Isso deve ser tudo o que é necessário para funcionar. Agora, se eu clicar em qualquer um desses, tudo bem. Ainda não está funcionando. O que temos acontecendo aqui? Cada criança na lista deve ter um acessório de chave exclusivo. Talvez esse seja o problema que temos aqui. Aqui, vamos usar esse ID recém-criado como nosso principal suporte aqui. Clique em “Salvar” nisso. Atualize aqui. Ainda não conseguimos mudar nossas opções aqui. Temos um erro aqui relacionado a como encontramos duas crianças com a mesma chave. Vamos dar uma olhada. Esqueci colocar meus colchetes encaracolados aqui. Está literalmente colocando o valor do cifrão. Não é um valor dinâmico. Como você pode ver aqui, agora você já pode ver que está salvando uma seleção diferente. Espero que isso não tenha sido muito difícil de acompanhar. Como você pode ver aqui, quando eu alterno a variação, a imagem não está mudando, mas o preço é, então, o gancho das opções de produtos de uso aqui, está na verdade gerenciando nosso estado para nós, o que é muito legal. Sempre que criamos uma nova seleção aqui, selecionamos uma nova variante que atualiza automaticamente nosso preço e qualquer outra coisa relacionada à variação em nossa página. A única coisa que está faltando aqui, apenas para finalizar antes de passarmos para a página do carrinho, é a descrição aqui. O que eu vou fazer é criar uma div com a classe da descrição do produto. Em vez de inserir HTML lá, o que vou fazer é digitar esse adereço muito estranho aqui chamado perigosamente definido em um HTML e depois aqui para sublinhar, sublinhar HTML e depois colocar em nossa descrição HTML do produto. Descrição HTML. Vamos fechar isso para que possamos dar uma olhada. Então, como você pode ver, aqui está nossa descrição. Agora, por que colocamos isso nesse adereço e não apenas, vamos deletar tudo isso e depois jogá-lo aqui. Bem, vamos dar uma olhada no que acontece quando fazemos isso. Vou clicar em “Salvar” e, como você pode ver, ele insere o HTML literal. Na verdade, precisamos inserir esse HTML por meio de um suporte para renderização. A razão pela qual o prop é chamado perigosamente definido em HTML, em vez de apenas em HTML, é que ele é um lembrete do react para ter muito cuidado ao inserir HTML em um elemento que está chegando de um banco de dados ou de uma fonte externa. O motivo é algo chamado injeção de HTML. Alguém poderia realmente quebrar sua página colocando um HTML incorreto aqui. Portanto, é um aviso do React para que você saiba que isso é um pouco perigoso. Mas em nossa situação em que estamos inserindo HTML da descrição do produto, contanto que nós, os usuários ou os administradores não coloquemos nenhum HTML quebrado em nosso campo de descrição do produto, isso deve funcionar. Mas se o cliente, o administrador ou quem está adicionando descrições aos produtos colocar algum HTML quebrado , isso vai falhar. Tudo isso tem o potencial de quebrar. É por isso que diz perigosamente definido em HTML. Isso é algo a ser observado lá. Isso é um pouco arriscado. Este tem sido um grande problema. Espero que você tenha acompanhado. Se você ficar preso em algum momento, obviamente deixe um comentário. Mas agora, se formos a qualquer produto em uma loja, alguns deles são menos complicados. Este só tem uma opção. Podemos selecionar apenas um tamanho. Mas esse aqui, o snowboard de hidrogênio, eu acredito que é o mais complexo. Tem tamanho, suporte de encadernação e material. No próximo vídeo, quando adicionarmos o botão “Adicionar ao carrinho”, veremos que, quando clicarmos no botão “Adicionar ao carrinho”, a variante já foi determinada a partir de nossa seleção e, portanto, essa variante receberá adicionado ao carrinho. Então, obrigado por acompanhar este vídeo. No próximo vídeo, faremos a maior parte do nosso aplicativo, que é a funcionalidade do carrinho. Basicamente, a loja não funciona até que tenhamos a funcionalidade de carrinho , então essa será a parte final de fazer nossa loja funcionar. Talvez faça uma pausa, prepare-se e volte para a aula final antes de implantarmos nosso aplicativo em nossa loja da Shopify. 11. Funcionalidade do carrinho. 1: Tudo bem, pessoal, é hora da parte final e mais essencial de fazer essa loja funcionar. Nesta loja simples, obviamente, há muitas melhorias que você pode fazer aqui, mas para obter uma loja básica que funcione, há mais uma coisa que precisamos fazer habilitar o carrinho funcionalidade. Neste vídeo, abordaremos vários componentes diferentes aqui. Vamos atualizar nosso componente de aplicativo, atualizar nossos componentes de layout para colocar um botão de carrinho aqui, atualizar nossa página de produto aqui para colocar um botão de adicionar ao carrinho e criar uma página de carrinho. Sem mais delongas, vamos começar. Talvez tenhamos que dividir isso em dois vídeos dependendo da duração. Mas a primeira coisa, como mencionei, vou abrir nosso arquivo app.server.js aqui. Para obter a funcionalidade de carrinho em nosso aplicativo, precisamos pegar o componente provedor de carrinho e , em seguida, queremos envolver nosso roteador nele. Eu vou carregar isso. Ele ainda está na área de transferência, coloque nosso provedor de carrinho lá e cole novamente no roteador entre as etiquetas do provedor do carrinho. Vou clicar em “Salvar” sobre isso. Agora, desse jeito, poderemos usar os ganchos e as funções do carrinho em nosso aplicativo. Vamos entrar em nosso explorador de arquivos aqui e criar uma nova rota para a página do carrinho. Aqui agora roteia a pasta, cart.server.jsx. No tutorial oficial da Shopify, eles usam uma gaveta para isso, mas ela está trazendo bibliotecas externas e colando muito código. Definitivamente, recomendo ter uma gaveta como recurso de design, termos de experiência do usuário, mas para mantê-la simples e focar no que precisamos para realmente fazer isso funcionar, vamos apenas fazer um página separada. Assim como os detalhes do produto, abriremos uma rota aqui e, em seguida, serviremos por meio de componentes do lado do cliente. Esse arquivo será bem simples. Vamos apenas exportar o carrinho de funções padrão e, em seguida, retornar aqui, e depois vamos empacotar tudo em um componente de layout. Vou abrir uma div com uma classe de contêiner, que tudo esteja contido e, em seguida, trarei um componente do lado do cliente que estou prestes a criar uma página de carrinho de código. É basicamente isso. Tudo o que precisamos agora são nossas importações. Vamos importar o layout do servidor componentes/layout. Temos um layout lá e, em seguida, teremos que criar esses componentes, então vou criar um componente chamado CartPage.client.jsx. Em seguida, podemos criar um componente aqui, exportar os padrões da função, carts page , return, uma div básica para começar, e então podemos importá-la. Importe a página do carrinho e o restante será pré-preenchido para nós a partir do código do Visual Studio. Escrevemos um monte de código lá, todas as coisas básicas, todas as coisas que fizemos antes, vamos ver se realmente funcionou. Se eu for para o caminho do meu carrinho aqui, se olharmos dentro de nossos elementos aqui, entrarmos no principal, podemos ver há um contêiner com uma div dentro. Podemos supor que isso está funcionando e estamos nessa rota específica. Isso é tudo o que precisamos fazer para nossa rota de carrinho. Todo o trabalho que faremos na página do carrinho será nesse componente do lado do cliente. Assim como o componente de detalhes do produto, teremos que importar muitos componentes e ganchos diferentes dos hidrogênios do Shopify. Vou fazer o que fizemos antes, dividi-lo em várias linhas e colocar o formulário pronto para uso. Vou examinar todos os ganchos e componentes que vamos trazer, então precisaremos usar o gancho de carrinho de uso. Vamos usar um componente provedor chamado provedor de linha de carrinho, vamos trazer o componente de imagem para mostrar uma imagem, vamos trazer o gancho de linha de carrinho de uso, estamos vamos trazer o componente de dinheiro para formatar dinheiro, vamos trazer o componente de link para vincular ao produto, vamos trazer o componente de custos do carrinho. Como eu disse, pessoal, tem muita coisa aqui. Vamos trazer o componente de quantidade da linha do carrinho e, finalmente, vamos trazer o componente do botão de ajuste de quantidade da linha do carrinho. Eu não estava mentindo quando disse que há uma grande variedade de componentes no hidrogênio do Shopify, mas eles também têm um propósito e facilitam nossas vidas. Confie em mim, você ficará feliz quando começarmos a desenvolver esta página de que tudo isso existe. Agora, o que eu quero fazer é dividir essa página do carrinho em vários componentes. O que eu vou fazer é criar um suspense aqui. Você pode ver que ele é importado automaticamente do react para nós e, aqui, vou exibir a tabela de carrinhos, que ainda não criamos. Vamos criar isso agora. Não preciso exportá-lo porque estou apenas usando no mesmo arquivo e vou apenas criar esse componente da tabela de carrinho. A razão pela qual eu quero colocar isso em um componente separado é porque vamos usar algumas variáveis de estado aqui. Vou retirar as linhas, checkoutURL e o status desse gancho de carrinho de uso. Então, obviamente, eles fazem disso um componente. Precisamos renderizar algum tipo, então vamos abrir e adicionar um elemento HTML da tabela. Agora, atualmente, podemos atestar com segurança que não há itens em nosso carrinho, porque ainda não temos um botão de adicionar ao carrinho na página do produto. O que é uma boa alternativa a fazer imediatamente é se as linhas. O comprimento é igual a zero como em, o que significa que atualmente não há linhas em nosso carrinho, não há itens em nosso carrinho, então podemos devolver alguns JSX aqui e diga algo como se nenhum item estivesse no carrinho no momento. Agora, há um certo problema nisso, e eu quero te mostrar o que é isso. O que vou fazer é colocar um registro do console aqui, e digamos que não há linhas. Se executarmos isso, dirá que nenhum item está no carrinho no momento. Agora, voltaremos a isso em apenas um segundo. O que vamos fazer é qual devemos fazer primeiro? Vamos entrar no componente de layout aqui e preenchê-lo. Vou colocá-lo em um ícone aqui de uma biblioteca de ícones que é recomendada ao usar o Tailwind. No tutorial oficial da Shopify, eles usam algo chamado vento de cauda e há uma biblioteca de ícones de vento de cauda associada. Na verdade, ainda podemos usar a biblioteca de ícones mesmo se não estivermos usando o vento de cauda. Eu esqueço como é chamado, mas se digitarmos a biblioteca de ícones de vento de cauda, ela deve aparecer. Ícones de heróis, é assim que se chama. Esses ícones de heróis são uma biblioteca de ícones SVG cujo SVG agora é provavelmente a melhor maneira de implementar ícones em qualquer projeto moderno. Podemos fazer isso como sólido, contorno ou mini. Gosto do esboço e vou digitar carrinho aqui. Você pode personalizar isso se quiser. Você pode usar este carrinho de compras. Gosto da sacola de compras e podemos copiar o SVG ou o JSX. Estamos usando isso em um projeto react, então podemos copiar o JSX, tudo bem, e então eu posso colá-lo aqui. Na verdade, é melhor usarmos o JSX porque aqui você pode ver algo sobre o qual falei nas aulas teóricas. Isso aqui está vinculado aos ventos de cauda, então vou remover isso. Mas aqui você pode ver se esse era um SVG padrão em HTML, seria traçado, linha, união ou, na verdade, acho que é uma palavra, mas haverá um traço lá. Lembre-se de que falamos sobre isso nas aulas teóricas de que podemos usar traços. Na verdade, é uma boa ideia que pegamos o JSX aqui, vou mostrar que agora, se copiarmos o SVG, haverá traços nos nomes dos atributos que não queremos. Definitivamente, cópia do JSX se você estiver usando o JSX, que é o que estamos fazendo agora. Vou recuar um pouco e, como você pode ver aqui, você também pode colocar uma expressão JavaScript em uma expressão JavaScript em alguns desses atributos e, claro, vou transformar isso em um link. Nós importamos? Sim, importamos o link aqui e o estamos usando em outro lugar. Eu posso simplesmente ir assim. Então eu só preciso fazer um link para a rota, que será apenas -cart. Aqui, vamos colocar um indicador em breve de quantos itens estão no carrinho, mas chegaremos a isso em apenas um segundo. Se eu voltar ao nosso aplicativo aqui, você verá que temos esse ícone de carrinho aqui e, se eu estiver em qualquer outra página, se eu clicar nesse ícone de carrinho, você verá que ele nos levará de volta à página do carrinho. Vamos entrar na página de um produto. Vamos analisar a primeira que vimos quando nosso aplicativo carrega. Aqui está, o snowboard de hidrogênio, e vamos trazer e adicionar ao botão do carrinho. Abra nosso componente de detalhes do produto aqui. Já estamos importando nosso botão de adicionar ao carrinho aqui. Vou até, vamos seguir as opções, mas antes da descrição, e vamos criar um botão de adicionar ao carrinho aqui. Na verdade, não queremos que seja fechado automaticamente porque vamos adicionar crianças aqui. Vamos colocar aqui adicionar ao carrinho. Então, para dar um estilo, acordo com o CSS existente, vou colocar, adicionar ao carrinho como o nome da classe. Vamos acessar nosso aplicativo aqui e você verá que o botão Adicionar ao carrinho existe. Acabei de atualizá-lo, mas aí você pode ver que temos nosso botão de adicionar ao carrinho. Agora, uma coisa que queremos fazer antes clicar nesse botão de adicionar ao carrinho ou permitir que o usuário clique nesse botão de adicionar ao carrinho é restringi-lo se ele estiver fora de estoque. Não queremos mostrar o botão de adicionar ao carrinho ou pelo menos, dizer ao usuário que ele está fora de estoque se estiver fora de estoque. Vamos rolar até o formulário do produto aqui e criar um booleano aqui. Vou criar uma const está esgotada e isso retornará verdadeiro se a variante selecionada não estiver disponível para venda. Se isso não acontecer , teremos uma alternativa aqui de falso. Agora, acredito que não recuperamos isso de nossa consulta do GraphQL, então teremos que fazer isso. Vamos voltar para o handle.server.js x dentro da nossa pasta de produtos. Só precisamos ter certeza de que, no nó da variante, verificaremos se ele está disponível para venda. Só precisamos atualizar isso e, em seguida, temos essa bandeira booleana aqui que será verdadeira se a variante selecionada não estiver disponível para venda. O que vou fazer aqui é um operador ternário, dividi-lo em uma nova linha e, em seguida, colocar uma expressão JavaScript aqui, temos um operador ternário. Se estiver fora de estoque, diremos fora de estoque e, se não estiver fora de estoque, diremos apenas adicionar ao carrinho. Então isso também deve funcionar, vou colocá-lo. Se estiver esgotado, também deve ser desativado, então vou colocá-lo em um suporte desativado. Isso deve funcionar. Não acredito que nenhum desses produtos esteja fora de estoque, então não podemos realmente testá-lo, mas isso definitivamente está em estoque. Se eu clicar em “Adicionar ao carrinho” agora, você verá que há um pequeno estado de carregamento lá, mas quando terminar, isso deve estar agora no carrinho, e se eu clicar neste cartão aqui, agora recebeu um erro porque, na verdade, estamos lidando com algumas informações do carrinho. O que isso renderiza? Não está definido na tabela do carrinho. Vamos dar uma olhada no que estamos acontecendo aqui. Eu coloquei renderização aqui em vez de retornar. Eu sou um idiota. Vocês provavelmente estão gritando do outro lado do computador me dizendo que eu entendi errado. Desculpe por isso. Se atualizarmos aqui, ele ainda dirá que não há itens no carrinho, mas depois desaparecerá. Interessante Se eu atualizar novamente, nenhum item estará atualmente no carrinho e depois de algum tempo ele desaparecerá. Esse é o problema ao qual eu estava me referindo anteriormente. Eu disse que teríamos que vir aqui e consertar isso. Basicamente, não sei se isso é um bug ou algo assim, mas essencialmente o carrinho retornará sem linhas para começar e depois descobrirá as linhas. Quando o carregarmos pela primeira vez, ele dirá que não há itens no carrinho, mas desaparecerá se houver itens no carrinho. O que eu fiz aqui foi retirar status do objeto devolvido do carrinho de uso. Aqui, vamos dar uma olhada em qual é o status. Se eu consolar o status do registro e depois atualizo aqui, você pode ver que surgem três status de busca, busca não inicializada, na verdade, são apenas dois; não é? Mas há três que aparecem. Deixe-me colocar isso do outro lado para que possamos obter o status, não importa se as linhas são zero ou não, e depois atualizaremos aqui. Aqui você pode ver que obtemos a busca, busca não inicializada e, em seguida, inativos. Agora, a razão pela qual isso é útil é que, antes de o ídolo aparecer, ele acha que os itens da linha são zero. Mas quando o modo ocioso aparece, ele percebe que isso não é verdade e mostra a alternativa, que atualmente é apenas uma tabela vazia. Se realmente olharmos aqui e inspecionarmos, você verá que uma tabela vazia está sendo renderizada. Mas é claro que essa mesa é a mesa que abrigará todos os nossos itens. O que vou fazer aqui é que, além de verificar o comprimento das linhas, também vou verificar o status e só vou mostrar que nenhum item está no carrinho no momento se o status estiver inativo. Caso contrário, ele pode estar em um estado de carregamento. Se eu atualizar aqui, se houver itens no carrinho agora, ele não mostrará nenhum item no carrinho. Essa é minha pequena solução para esse problema. Já estamos bem aprofundados no vídeo e nem temos uma lista de itens do carrinho aparecendo. Vamos falar sobre isso agora. Vou dar a essa tabela uma classe de tabela de carrinho, novamente apenas para formatação CSS, e então vou abrir uma tag de corpo t aqui, e aqui é onde vamos começar a trazer nossas linhas. Usaremos essa função de mapa familiar novamente, pegaremos cada linha e, com cada linha, retornaremos um pouco de JSX. É aqui que vamos colocar o fornecedor da linha de carrinhos. Precisamos dar a ela uma chave, então coloque o ID da linha como a chave e, em seguida, passaremos a linha na propriedade da linha. Novamente, não consigo entrar em muitos detalhes sobre por que isso funciona, porque é apenas a natureza do componente. Esses componentes do provedor fornecem funcionalidade e são configurados pelas bibliotecas que estamos usando. Em breve, você começará a ver o que as funcionalidades oferecem. Vamos usar outro gancho dentro daqui, mas o que vou fazer é criar outro componente chamado item de linha de carrinho. Então, vamos novamente, função CartLineItem. Aqui, o que vou fazer é retornar um pouco de JSX, obviamente, vou retornar uma linha da tabela. O que vou usar para isso será devolvido de outro gancho aqui. Temos outro gancho aqui da estrutura, algumas coisas desse gancho, mas o gancho que vamos usar aqui é UseCartline, e o que vamos fazer é pegar o ID da linha, algo chamado mercadoria e o custo desse objeto. Aqui, é aí que podemos usar o ID da linha, e então cada uma dessas linhas terá, eu acho, quatro colunas. Eu configurei isso. Aqui, na primeira, é onde vamos colocar nossa imagem. Digamos que, para começar, uma imagem como espaço reservado, a próxima teremos o título do nosso produto. Vou colocar valores falsos para começar, para que saibamos o que vai acontecer aqui, seleção de variantes e preço individual, e então o próximo terá nosso seletor de quantidade. Então, o último terá nosso total de linhas e um botão de remoção. Se eu atualizar aqui, você verá que temos uma linha que mostra todos esses valores de espaço reservado. Isso não é particularmente útil, então vamos tentar torná-los dinâmicos. Vou remover esses espaços reservados e, aqui, vou usar o componente de imagem acho que já importei. Sim, eu fiz. Muito bom trabalho, Chris. Vamos entrar aqui e dar a ela um nome de classe de LineItemImage para estilização, e então tudo o que preciso fazer é passar a imagem, que na verdade está nos objetos da mercadoria. Eu posso fazer um registro do console aqui para vocês provarem isso. Se você quiser ver o que está no objeto da mercadoria, basta registrá-la pelo console, mas confie em mim, quando digo por enquanto, para economizar tempo, a imagem está dentro desse campo de mercadorias. Se passarmos por isso e eu clicar em “Salvar”, agora você pode ver que o espaço reservado foi substituído pela imagem do nosso único produto que está no carrinho. Agora, queremos inserir a seleção da variante do título do produto e o preço individual. Vamos fazer isso agora mesmo. Vou colocar um link para que, quando clicarmos nele, ele vá para o produto. Aqui, vou fazer produtos/e depois colocar a alça dos produtos da mercadoria. Nos objetos de mercadoria, temos acesso ao produto e, nesse objeto, temos acesso ao identificador desse produto. Em seguida, vou dar a isso um nome de classe para o estilo de line-item-produto-título. Então, entre essas tags de link, vou pegar mercadorias, produtos e títulos. Estamos usando muito mercadorias aqui, então poderíamos fazer algumas reestruturações aqui para facilitar nossas vidas. Talvez façamos isso agora. Vamos pegar a mercadoria. Podemos pegar, eu gosto de colocar no melhor espaço, a imagem e o produto aqui, então podemos simplesmente remover a mercadoria deles é o benefício da reestruturação, que vimos várias vezes durante toda esta aula. Eu coloquei esse link , vamos verificar se ainda está funcionando. Temos a prancha de snowboard de hidrogênio lá, e se eu clicar nela, ela me levará até aquele produto um pouco devagar, mas aí você pode ver que está chegando. Então, queremos, abaixo disso, colocar a seleção de variantes. Teremos que analisar as opções selecionadas, que estarão na mercadoria. Vou fazer isso usando a estruturação e depois vou usar as opções selecionadas. Pode ser que não haja opções selecionadas, então vou fazer um fallback de uma matriz vazia e, em seguida, vou executar o map. Em seguida, para cada opção renderiza um pouco de JSX. Desculpe, isso é uma bagunça quando se trata de todos esses diferentes colchetes. Talvez seja só porque eu não inseri minha expressão JSX aqui, que será, novamente, usaremos uma chave porque estamos percorrendo as coisas e vou usar o nome da opção como chave e, em seguida, vou colocar basicamente o nome da opção e o valor da opção nessa seleção de variante específica. Vamos clicar em “Salvar” e ver como isso funciona. Aí está você. Essa é a seleção da variante. A formatação está um pouco errada. Na verdade, eu não coloquei isso em uma div com o nome da classe da variante do item de linha para obter a formatação que eu já configurei. Lá vamos nós. Então, pelo resto disso, eu poderia fazer isso em um vídeo separado para vocês, porque este está ficando muito longo e Skillshare gosta que eu mantenha meus vídeos com menos de 30 minutos a 20 minutos cada. Vamos fazer a segunda parte desta, nos vemos no próximo vídeo. 12. Funcionalidade do carrinho. 2: Tudo bem Bem vindo de volta. Espero que você esteja pronto para continuar com essa funcionalidade de carrinho e, obviamente, o maior recurso que criaremos em nosso pequeno aplicativo. Então, mereceu dois vídeos para cobrir tudo. Então, ainda temos esses espaços reservados aqui neste lado da nossa mesa de carrinho. Apenas para recapitular o que fizemos no último vídeo, habilitamos a funcionalidade de carrinho em todo o aplicativo envolvendo nosso roteador no provedor de carrinho e , em seguida, criamos uma rota de carrinho com links para uma página de carrinho e em seguida, também adicionamos um link para o carrinho aqui e, claro, adicionamos um botão Adicionar ao carrinho, que nos permite realmente adicionar itens ao nosso carrinho. Vamos voltar a criar nossa página de carrinho. Aqui, usaremos alguns outros componentes que trouxemos ou importamos aqui, quantidade da linha do carrinho e botão de ajuste da quantidade da linha do carrinho. Esse é provavelmente um dos maiores nomes dos componentes que estamos trazendo mas esses botões são muito úteis, como você verá em breve. Agora, para este, é importante que você use as classes, caso contrário, vai parecer uma porcaria absoluta. Então, vou embrulhar tudo isso no seletor de quantidade do carrinho e , para começar, vamos realmente trazer quantidade da linha do carrinho e, se eu colocar isso, desde que esteja dentro de uma linha de carrinho. fornecedor, confira isso, você verá que a quantidade é a quantidade correta. Então, se eu fosse até essa prancha de snowboard e adicionasse outra ao carrinho. Acho que precisa ser exatamente a mesma variante e está demorando um pouco. Agora voltamos ao carrinho e agora você pode ver que são até dois, então quão bom é isso? Já estamos trazendo o estado da quantidade desse item de linha apenas usando esse componente do Shopify Hydrogen. Mas é claro que queremos poder atualizar a quantidade. Então, em ambos os lados, colocaremos um botão de ajuste de quantidade na linha do carrinho e , em seguida, no lado esquerdo do parâmetro de ajuste, faremos com que ele diminua. Vou abrir esse para cima e, por dentro, vou colocar um SVG que é um símbolo de menos. Então, vou voltar aos ícones de heróis aqui, encontrar menos copiar o JSX e jogá-lo aqui. Então, temos nossa diminuição e, em seguida, do outro lado da quantidade da linha de carrinho. Vou colocar outro botão de ajuste de quantidade na linha do carrinho e, como o suporte de ajuste aumentará , o SVG e depois vou colocar aqui, é claro que será o oposto, o que é mais. Então, vou copiar o JSX desse ícone, colá-lo aqui e clicar em “Salvar” nele. Agora vamos ver o que acontece quando atualizamos nossa página aqui. Você pode ver que agora eu posso reduzi-lo para um, ou posso aumentá-lo para três ou quantos eu quero fazer. Portanto, esses são componentes muito úteis do Shopify Hydrogen. Recebemos algumas funcionalidades de ajuste de quantidade imediatamente. Por aqui, para o total da linha, vou substituir esse espaço reservado por um componente monetário. Vou colocar isso sem a bandeira de zeros à direita e, em seguida, passarei o valor total do ponto de custo para formatar o valor total em uma formatação fácil de usar. Então, aqui é onde estamos obtendo o custo do gancho da linha de carrinhos de uso. Você já deve entender que, se passássemos por isso, não seria bem formatado. Então, queremos colocar isso em um componente monetário, que podemos ver aqui. Se recebermos três deles, o total acaba sendo 1.800 e, em seguida o botão de remoção é outro botão de ajuste da quantidade da linha do carrinho. Eu vou colocar isso como adereço, vou fazer com que ele apareça como um div, vou dar a ele o nome da classe de cart remove e seguida, os ajustes adereços de remoção. Isso dirá ao componente do botão de ajuste da quantidade da linha do carrinho que eu quero que ele remova toda a quantidade desse item. Então, basta remover completamente o item da linha e, para isso, vou usar um ícone de lixeira. Então vou entrar aqui, digitar o lixo, copiar o JSX, voltar aqui como fizemos antes e consertar o aninhamento. Então, se tivermos escrito todos os nomes de nossas classes corretamente e voltarmos aqui, você verá que ele aparecerá no canto superior direito aqui e, portanto, podemos simplesmente clicar nele e remover o item da linha completamente. Agora você verá que, quando atualizarmos a página, ela não mostra que não há itens de linha atualmente no carrinho até chegarmos ao estado inativo. Isso evita que isso apareça antes de realmente sabermos com certeza se há algum item em nosso carrinho. Ok, então vamos voltar e adicionar esse item em nosso carrinho. Vamos fazer uma seleção diferente aqui. Policarbonato, padrão de parafuso clássico 160, adicione ao carrinho. Então volte para o nosso carrinho aqui e acho que queria colocar o preço de cada um aqui embaixo, então vamos adicionar isso também. Já temos acesso ao nosso componente financeiro aqui. Vou digitar dinheiro sem perder zeros porque essa é a minha preferência e , dentro dos dados, adereço, coloque o preço da mercadoria, v2, clique em “Salvar” nessa atualização e você poderá ver o indivíduo o preço é 610 e se eu aumentar aqui, o preço por cada um permanecerá o mesmo, mas o custo total desse item de linha aumentará. Deixe-me mostrar o que acontece se eu adicionar outro produto ao carrinho, vamos adicionar uma pilha completa de snowboards ao carrinho e clicar nele para me levar à página do carrinho. Você verá que temos dois aqui. Agora, temos um pequeno problema. Uma delas está aparecendo em negrito e uma delas não está aparecendo em negrito, o que tem um problema, mas também não temos um rodapé aqui para o total, e obviamente precisamos de um botão para finalizar a compra. Então, vamos expandir isso. Quero sair desse item da linha do carrinho, apoiá-lo um pouco aqui e, em seguida, aqui embaixo, colocar uma div com o rodapé do carrinho e obviamente, vamos pegar todos esses vermelhos linhas porque precisamos de um único elemento raiz em nosso retorno. Então, vou fazer aquele truque que usamos antes de abrir um elemento vazio e depois recuar aqui e depois no rodapé do carrinho, vou colocar um link. O link vai para o URL de finalização da compra, que retiramos do carrinho de uso. Isso nos gerará automaticamente o URL do checkout. Vou dar a ele um nome de classe de botão Checkout, que é configurado em nosso CSS. Legal, então vou fechar isso e aqui vou pegar a palavra checkout e depois fechar a tag do link. Se eu atualizar aqui, você tem o botão Checkout, mas eu ainda não coloquei os totais do carrinho. Acho que vou colocar isso no corpo. Então, logo depois daqui, onde estamos retornando todas essas linhas, podemos colocar em uma linha final e as duas primeiras colunas, farei um intervalo de chamada de dois. Nós simplesmente não teremos nada e, em seguida, teremos a palavra total e, para a célula final, traremos o custo do carrinho. que nos dá um custo total do carrinho sem zeros à direita e não precisamos passar por nenhuma informação aqui, desde esteja dentro do fornecedor, que eu acho que é o fornecedor do carrinho, tudo bem . Então, atualize aqui e você verá que esses dois somados são iguais isso e acredito que o negrito foi devido ao meu CSS ter deixado a linha final em negrito. Portanto, a linha final deveria ter sido o total. Então, agora esse problema de estilo foi resolvido. Tudo bem Então, temos duas dessa variante específica. Em uma dessas variantes específicas, se eu clicar no botão “Finalizar compra”, vamos dar uma olhada no que acontece. É um pouco lento. Desculpe por causa da minha Internet ruim. Mas em breve você verá que vamos até a página de checkout da loja Hydrogen. Se mostrarmos o resumo do pedido, ele deverá corresponder à seleção em nosso carrinho. Aí está, pessoal. Isso é o quão simples ou não é simples. É muito código para escrever, mas há muitas funcionalidades que a estrutura do Shopify Hydrogen cuida para nós. Não precisamos colocar nenhum código especial em nosso botão Checkout. Podemos simplesmente inserir o URL do checkout. Podemos usar componentes como esse. Tudo o que precisamos fazer é colocar CartCost e ele resolverá o resto para nós. Esses incríveis botões CartLineQuantityAdjust, o próprio CartQuantity, é realmente incrível funcionalidade que alguns desses componentes nos oferecem imediatamente. Uma das últimas coisas que eu quero fazer aqui é colocar um indicador de quantos itens estão no carrinho aqui em cima. O que eu vou fazer é nos nossos componentes de layouts, onde está? Aqui mesmo. Vou inserir algo chamado CartBubble. Esse será um componente que eu mesmo construí. Então eu vou, aqui embaixo, criar esse componente CartBubble. Na verdade, como vamos usar o carrinho de uso, vou mover isso para o arquivo de componentes de seus próprios clientes. Vou entrar em um novo arquivo, cartbubble.client.jsx; coloque isso aqui, faça uma exportação padrão. Em seguida, voltando ao arquivo layout.server.jsx, importarei esse componente, CartBubble, e o resto será preenchido automaticamente para mim. Se eu voltar para CartBubble.client.jsx, obviamente precisamos retornar algo aqui; retornar um pouco de jsx. Tudo o que estamos procurando aqui é a quantidade. Isso é tudo o que isso está fazendo. Vou importar o gancho useCart da estrutura Hydrogen. Vou retirar a quantidade total do objeto que esse gancho retorna. Essa é uma maneira fácil de obter nossa quantidade total. Se a quantidade total for menor que um, que é basicamente zero, eu vou retornar null, então basicamente não devolvo nada. Mas se ultrapassar isso, retornaremos um intervalo e, dentro do intervalo, faremos colchetes, e dentro desses colchetes retornaremos apenas a quantidade total. Se eu salvar isso, atualize aqui ou atualize em qualquer lugar em nosso aplicativo. Temos um pequeno erro, DOM ColSpan inválido. Precisamos usar o CamelCase para o ColSpan aqui. Onde eu estava? Carrinho/Página. Precisamos colocar um S maiúsculo aqui. Isso é uma coisa estranha de sexo. O que mais temos aqui? Se lermos a mensagem de erro, ela parece estar vindo do nosso componente CartPage. Deixe-me ir para outra página em nosso site e confirmar que ela está isolada no CartPage. Sim, é. Se olharmos aqui, ao lado desse ícone do carrinho, ele deve indicar quantos itens estão no carrinho. Deixe-me ir aqui para CartBubble. Se não houver nenhum item no carrinho, ele deverá retornar nulo, então não haverá nada aparecendo. Então, isso sugere que não há nenhum item no carrinho. Vamos clicar no carrinho novamente e ele simplesmente retorna, nenhum item está no carrinho no momento. Se eu atualizar, recebo o mesmo erro? Sim. Se eu navegar pela CartPage a partir de outra página, tudo ficará bem. Mas se eu chegar diretamente na CartPage, receberei esse erro. Acho que o problema aqui remonta a se formos ao CartPage. Essa renderização sem que a solicitação assíncrona para a API da loja retorne ainda. Ter suspense aqui deve verificar isso. Mas nesse caso, não está funcionando. Vou colocar esta declaração de devolução. Isso pode ser uma solução meio hackeada, mas deve funcionar. Vou colá-lo aqui. Se lines.length for maior que zero , vamos renderizar o carrinho. Se eu me atualizar aqui, isso resolverá nosso problema. De alguma forma, perdemos nossos itens no carrinho, mas está tudo bem. Vamos voltar ao nosso catálogo ou a qualquer coleção. Faça uma seleção de produtos e, em seguida, clico em adicioná-la ao carrinho. Agora, você pode ver que nosso CartBubble está funcionando. Temos um item em nosso carrinho e, se eu clicar nele, você verá que esta é a nossa prancha de snowboard de hidrogênio. Se eu adicionar um segundo, você verá que esse número também aumenta. Se eu adicionar uma prancha de snowboard diferente, talvez esta cheia, clique em “Adicionar ao carrinho” ver que ela também é adicionada. Se entrarmos aqui, você pode ver as três pranchas de snowboard que temos em nosso carrinho. Aí está, pessoal. Se executarmos nossos projetos até agora, temos nossa página inicial. Obviamente, não construímos nada aqui. Isso é para vocês descobrirem o que querem colocar na sua página inicial. Você pode trazer uma determinada coleção e apresentá-la de todas as formas. Em seguida, temos nossa página de catálogo aqui, que lista os primeiros nove produtos em nossa loja, independentemente da coleção em que estão. Se clicarmos em qualquer um deles, ele irá para esse produto. Da mesma forma, se formos a uma coleção específica, como a coleção freestyle, e clicarmos em uma dessas páginas de produtos, podemos fazer uma seleção de variantes adicioná-la ao carrinho. Vá até o carrinho aqui. Como você pode ver, essa seleção foi salva. Eu posso aumentar a seleção. Posso removê-lo do carrinho reduzindo tudo para zero e, em seguida, direi que não há itens atualmente no carrinho ou, se eu quiser adicionar outro produto ao carrinho novamente, adicione esses 154 centímetros um e aumente a quantidade, você verá que aumenta aqui também. Uma melhoria para este aplicativo seria trabalhar nos estados de carregamento e criar algo um pouco melhor para um suspense. No momento, não temos nenhuma alternativa, mas você pode criar alguns estados de carregamento muito bons aqui. Obviamente, também podemos finalizar a compra clicando neste botão aqui, e isso levará nossa seleção diretamente para a finalização da compra. Nesse ponto, estamos saindo do nosso aplicativo e indo direto para a página de checkout conforme hospedada na loja da Shopify. Aqui vamos nós. Também podemos remover esse item pressionando esse botão. Como você pode ver aqui, leva um pouco de tempo para criar o CartPage, mas as funções do carrinho são muito bem tratadas por todos esses componentes e ganchos que estão disponíveis no Shopify. Biblioteca de hidrogênio. Para resumir tudo o que fizemos neste projeto, quero destacar os temas que destaquei no início desta aula antes mesmo de entrarmos no lado prático das coisas. Se voltarmos ao que é simples aqui, tudo isso acabou sendo bem construído no final. Mas, por exemplo, temos um item da grade de produtos, por exemplo, é um componente do lado do cliente que passamos em um produto. Se dermos uma olhada em nossas rotas de coleta, estamos fazendo uma solicitação à API da loja, todas as informações de que precisamos por meio de uma consulta, passando-as para cada um desses componentes da placa de produto, e usando ganchos ao longo do caminho. Se você estiver perdido ou confuso, consulte qualquer um desses ganchos ou componentes na documentação. Se você está importando do React, você quer dar uma olhada na documentação do React. Se você estiver importando do Hydrogen, consulte a documentação do Hydrogen. Você pode literalmente acessar a documentação do Hydrogen. Essa é a API de vitrine. Mas eu deveria ser capaz de pesquisar aqui, UserOuteParams, entrar na API Hydrogen, clicar aqui, e você poderá aprender mais sobre todos os diferentes ganchos e componentes que usamos nesta classe. No próximo vídeo, mostrarei como implantar esse aplicativo na sua loja da Shopify. Isso envolverá a conexão com a API da vitrine. Então, atualizarei nossas credenciais aqui e as publicaremos ao vivo em sua loja da Shopify. Obviamente, podemos fazer muitas melhorias aqui. Deixei esse terceiro link aqui, e isso será para o vídeo bônus que vamos adicionar em um blog. Mas, por enquanto, esses são os principais componentes de que você precisa para ter uma vitrine Shopify funcionando. No próximo vídeo, vamos implantar isso em nossa loja Shopify. Eu vou te ver nessa. 13. Como implementar nosso Storefront personalizado: Bem-vindo, pessoal, nesta lição, aprenderemos como implantar nossa vitrine de hidrogênio do Shopify em oxigênio, que é a plataforma de hospedagem fornecida pela Shopify, que podemos acessar diretamente em nosso Loja Shopify por meio do canal de vendas de hidrogênio. Infelizmente, no momento da gravação, oxigênio só estava disponível nos planos do Shopify Plus. Mas se você estiver assistindo isso no futuro, talvez já esteja disponível para outros planos da Shopify. Esse é um recurso muito novo, então acho que eles estão apenas lançando-o nas lojas Shopify Plus, pois são o nível mais bem pago Teremos prioridade nesse novo recurso. Infelizmente, se você acessar esta página da documentação e esse aviso ainda estiver aqui, se você estiver usando alguma coisa no Shopify Plus, infelizmente estamos, isso não se aplicará a você. Você precisa usar uma solução de hospedagem diferente se decidir implantar uma loja de hidrogênio. Agora, para minha sorte, o Shopify me permitiu uma loja com canais de venda de hidrogênio, para que eu possa demonstrar esse recurso. Mas eu só quero te mostrar em algumas lojas, você não vai conseguir acessar isso. Por exemplo, na minha loja de testes original, a loja de testes Chris. Se eu entrar aqui nos canais de vendas e clicar em todos os canais de vendas recomendados. rodadas aqui são onde o botão para instalar hidrogênio ficaria se eu estivesse no Shopify Plus ou, no caso desta loja, ativasse pela Shopify. Infelizmente, nesta loja, não posso adicioná-la, mas como mencionei aqui na loja de testes Chris 2, que é uma loja que eu montei especificamente para hidrogênio. Se eu clicar nos canais de vendas e entrar nos canais de vendas recomendados, ele não aparecerá mais aqui porque já está instalado. Mas antes de eu instalá-lo, ele estava disponível para ser adicionado aqui. Agora você pode ver que eu tenho um canal de vendas de hidrogênio aqui. Se você estiver no Shopify Plus, poderá acessar os canais de vendas, canais vendas recomendados e adicioná-los aqui, então você terá esse item de menu aqui. Infelizmente, se você for todo mundo no momento da gravação, não conseguirá fazer isso. Vou fechar este, não podemos fazer hidrogênio lá. Deixe-me entrar no canal de vendas de hidrogênio. Agora, o que podemos fazer é voltar à documentação e acompanhar. Eu fiz isso e tive alguns soluços. O que eu fiz foi descobrir o que funciona e vou mostrar isso neste vídeo. Se eu voltar aqui para meu canal de vendas de hidrogênio aqui, vocês podem ver que eu fiz um teste de hidrogênio aqui, mas o que vamos fazer é criar uma nova vitrine. Em primeiro lugar, quero voltar para o meu editor de código aqui e fazer algumas alterações. Em primeiro lugar, quero criar uma filial de produção, e essa é a filial que vamos implantar em nossa loja Shopify. Vou entrar aqui, criar uma nova filial, chamar essa filial de produção. Então, a próxima coisa que vamos querer fazer é alterar essas credenciais para nossa loja real de hidrogênio da Shopify. A maneira usual de fazer isso é examinar nossos aplicativos privados, que atualmente estão em configurações, aplicativos e canais de vendas. Depois, venha aqui para desenvolver aplicativos. Como você pode ver aqui, eu tenho acesso à API de vitrine como um aplicativo personalizado. Vou demonstrar isso rapidamente, criarei um aplicativo e direi acesso à API de vitrine. Então, vou colocar o Skillshare aqui para diferenciá-lo. Clique em “Criar aplicativo”. Em seguida, só precisarei clicar aqui para configurar os escopos da API storefront. Vou apenas marcar todas as caixas aqui. Em seguida, posso clicar no botão verde salvar. Depois de fazer isso, posso clicar em “instalar aplicativo”, clicar em “Instalar”. Então, aqui, sob as credenciais da API, terei meu token de acesso à API da vitrine para que eu possa pegá-lo e colocá-lo aqui. Mas o que acontecerá quando implantarmos nosso canal de vendas de hidrogênio é receber automaticamente um token de acesso à API da vitrine. Mostrarei que agora, se entrarmos no canal de vendas de hidrogênio, clique em “Criar vitrine”. Aqui é onde podemos criar um novo repositório de hidrogênio. Eu não vou fazer isso. Vou conectar um repositório existente porque, é claro, já temos nosso projeto no GitHub. Vou clicar em “Conectar” um repositório existente, selecionar “Minha conta” e, em seguida, encontrar esse repositório na vitrine da classe de hidrogênio. Agora, algo a ser observado aqui é que você precisará configurar a integração com o GitHub. Eu já fiz isso, portanto, isso está aparecendo sem avisos. Mas se você não tiver, colocarei uma captura de tela na sua tela agora para que você possa ver que há uma caixa de aviso que aparece solicitando permissões. Você precisará instalar o aplicativo Shopify GitHub em sua conta do GitHub e , em seguida, habilitar determinadas permissões para aqueles que estão usando a integração do GitHub com o desenvolvimento do tema, é exatamente o mesmo aplicativo Shopify GitHub. Isso requer apenas algumas permissões extras. Depois de ativar o aplicativo e conceder essas permissões, você poderá pesquisar seu repositório e clicar nesse botão verde para Conectar. Agora, antes de fazermos isso, quero apenas observar que o ramo de produção deve ser mestre ou principal. É muito irritante para mim porque gosto que ramo de produção seja um ramo separado chamado produção. Mas, por padrão, aqui no hidrogênio e eles não permitem que você o altere no momento, ele selecionará automaticamente o ramo mestre ou acho que o ramo principal, se você não tiver um ramo mestre como seu ramo de produção. Se você tiver a versão de produção do seu aplicativo na sua filial principal ou principal , isso será muito fácil para você. Mas para eu gostar do meu ramo de produção, em um ramo separado chamado produção, haverá algumas etapas extras aqui. Anote isso. Agora vou apertar o botão verde Conectar e ele carregará esta nova vitrine de hidrogênio. Como você pode ver aqui, acabamos de comprar uma nova vitrine. É chamado apenas de vitrine da classe de hidrogênio. Como você pode ver aqui embaixo, uma ramificação de visualização está sendo implantada. Vou esperar que isso termine e depois daremos uma olhada. Isso acabou agora e, se eu clicar nesse URL de visualização, você verá que a ramificação principal está sendo implantada e está obtendo minhas credenciais reais da vitrine. O nome real dessa loja, não o nome da prévia da Shopify. Agora, algumas coisas acontecem nos bastidores que eu quero mencionar aqui. Se abordarmos isso aqui, você pode ver que ele adicionou um arquivo especial chamado arquivo fluxo de trabalho de implantação de oxigênio da Shopify. Ele fez isso por meio da pasta de fluxos de trabalho.github slash. Isso é importante porque é necessário para que essas filiais sejam implantadas. Se voltarmos aqui e analisarmos a produção, não haverá implantações. Se eu entrar em todas as implantações aqui, você verá que não há nada em produção, há algo em pré-visualização. Então, se eu entrar nas configurações da vitrine, você pode ver que há uma filial de produção aqui, mas se eu clicar nela, obteremos uma página 404. Agora, como eu disse, eu não gosto de ter minha filial de produção em master, então vou criar outro ambiente de produção. Mas antes de tudo, vou atualizar e publicar essa ramificação de produção em nossa conta do GitHub para que possamos realmente conectá-la. Agora, como mencionei antes, essa vitrine de hidrogênio vai nos gerar um token de API de vitrine. Podemos usar isso em vez de criar um aplicativo privado. O que vou fazer é substituir o token da vitrine aqui pelo que está dentro das configurações da nossa vitrine. Então, é claro, o domínio da loja será Chris-testing-shop-2.myshopify.com. Infelizmente, não consigo copiá-lo diretamente, então vou digitá-lo. Vou apenas copiar isso e garantir que funcione. Sim, esse é o endereço certo. Ótimo, então atualizamos nossas permissões aqui, clicarei em “Salvar” nela e , obviamente, cometerei essas alterações. Etapa, Atualizar o arquivo de configuração do Hydrogen será a mensagem de confirmação e, em seguida, clicarei em “Confirmar”. Em seguida, vou clicar aqui para publicar. Agora que eu coloquei essa ramificação e ela está na nossa conta do GitHub, posso ir para “Adicionar ambiente”. Vou selecionar o ramo de produção. Lá vamos nós e vou chamar isso de produção, produção só para diferenciá-la do outro ramo de produção. Infelizmente, não consigo renomear os outros. Este será apenas produção e produção entre parênteses, porque esse é o nome da filial real. Vou tornar isso público e clicar em “Salvar”. Agora, se eu voltar, vocês podem ver que temos um segundo ambiente aqui. Mas se eu clicar na URL, teremos o mesmo problema, esse erro 404. O motivo é que ele não está realmente sendo implantado. Se eu voltar aqui e acessar todas as implantações, você verá aqui na versão prévia que temos uma implantação. Em produção, sem implantação e em nosso ambiente ou implantação de produção personalizada , não há implantação. Agora, qual é a diferença entre esses e este é que o Shopify adicionou esse arquivo de fluxo de trabalho de implantação do Oxygen. Nós vamos fazer isso por nós mesmos também. O que eu vou fazer é acessar meu repositório do GitHub. Aqui está, vitrine da classe christopherdodd/hidrogênio. Só para deixar claro, pessoal, este é o meu repositório, então eu tenho acesso a isso e posso criar uma ramificação de produção aqui para vocês, você vai querer fazer uma bifurcação ou outro repositório e uma filial de produção sobre isso. Esse não é o projeto literal do GitHub que você implantará na sua loja. Eu só queria deixar isso claro. Mas se olharmos aqui dentro e usarmos a minha como exemplo, se eu for aqui para ver as diferentes ramificações, posso ver uma aqui embaixo, elas adicionaram uma nova ramificação, e esta é a nossa ramificação prévia. Se eu olhar para dentro, você pode ver que é baseado no mestre. Mas o que eles fizeram foi adicionar um arquivo de fluxo de trabalho aqui e essas são nossas configurações de implantação aqui. É isso que está sendo exibido neste URL de pré-visualização aqui. Shopify não deixa isso muito claro, mas isso é essencialmente o que está acontecendo. O que vamos fazer é pegar esse arquivo. Só precisamos anotar o caminho aqui. É.gitthub/Workflows e , em seguida, colocamos esse arquivo. Vou clicar aqui para obter o arquivo bruto. O que eu vou fazer é um pouco fora da tela. Vou entrar no menu de arquivos. Clique em “Salvar página como”. Então, dentro do nosso projeto de vitrine aqui, vou copiar o caminho para criar uma pasta.gitthub. Isso nos avisará que os pontos estão reservados para o sistema, o que significa que não poderemos ver essa pasta em nosso localizador, ou acho que é o Windows Explorer no Windows. Mas poderemos ver isso em nosso editor de código. Em seguida, vou criar a pasta de fluxos de trabalho e, em seguida, aqui posso salvar esse arquivo de implantação. Eu vou sair disso. Vamos voltar a isso e, se eu entrar no meu editor de código aqui, você poderá ver essa mudança chegando. Se eu for até o Explorer, você verá que adicionamos esse arquivo a esse caminho. Tudo o que temos que fazer é cometer isso. Vou preparar esse arquivo de adição de oxigênio. Vou clicar em “Commit”. Vou empurrar essa mudança para o ramo de produção. Depois disso, se voltarmos aqui para nossas implantações e entrarmos em produção, você poderá ver que algo está sendo implantado agora. Se eu entrar em tudo, você pode ver que estamos adicionando nosso arquivo de distribuição de oxigênio à nossa filial de produção aqui. Vou esperar que a implantação termine e agora você pode ver que ela foi implantada com sucesso e, se eu clicar nesse URL aqui, eis que aqui está nosso aplicativo. Se eu entrar na página do catálogo, você pode ver que isso está funcionando exatamente como o fizemos localmente. posso entrar em qualquer uma dessas Em vez disso, posso entrar em qualquer uma dessas pranchas de surfe ou snowboard, adicionar ao carrinho, entrar na página do meu carrinho e finalizar a compra. Isso nos levará ao checkout real de nossas lojas. Independentemente de você querer implantá-lo na ramificação principal ou não, você ainda precisará adicionar esse arquivo de implantação de oxigênio para que essa ramificação seja implantada. Aqui você pode ver que eu criei um ambiente personalizado agora usando o ramo de produção e podemos acessar esse URL público, o que é muito legal. Se quisermos isso para o ramo mestre, também podemos fazer isso. Caso contrário, temos esse URL de visualização aqui e ele nos mostra exatamente o que é exigido pela Shopify para que ele seja implantado corretamente. Como você pode ver, isso não está aparecendo sob o título de produção porque pressupõe que a ramificação mestre entrará no ambiente de produção. Mas, para mim, prefiro ter uma filial separada porque a filial principal pode estar sendo implantada em lojas diferentes, então geralmente tenho filiais de produção diferentes para lojas diferentes. Mas é claro que há algum código comum que fica entre as lojas quando estou trabalhando com clientes. É por isso que eu gosto de ter a ramificação mestre como o código comum que abrange todas as filiais de produção e, em seguida, ter uma ramificação de produção separada para cada loja. Essa é uma pequena explicação de por que eu uso a produção como meu ramo de produção. Mas, por algum motivo, Shopify assume o master como o ramo de produção. Aí está você. Agora temos nosso ambiente de produção e nossa URL pública para nossa loja Hydrogen. Agora que sabemos como implantar nossa vitrine em oxigênio, se estivermos no Shopify Plus ou em qualquer outro plano, esperamos que ela esteja disponível no futuro. Agora, vamos passar para a aula bônus. Vamos dar um passo atrás, desenvolver com base no que já criamos e adicionaremos em um blog. Nos vemos no próximo vídeo. 14. Bônus: como adicionar uma seção de blog: Tudo bem, então, como costumo fazer em minhas aulas de Skillshare, lancei um vídeo bônus final, que não é essencial, como vimos antes, já criamos coleções, produtos e habilitamos o carrinho funcionalidade, que é realmente tudo o que precisamos para criar uma loja funcional básica. Mas, para obter mais prática com o fluxo de trabalho do Hydrogen, mostrarei como criar uma configuração de blog aqui para que também possamos obter postagens de blog da loja. O que eu fiz criar uma ramificação de produção da última vez, mas voltei à antiga configuração do Hydrogen, então estamos usando as postagens do blog da prévia do Hydrogen novamente, isso vai ser seguindo dois vídeos atrás, não foi o último vídeo que eu só precisava fazer referência a isso. Estamos executando o Hydrogen Preview, não nos conectando à minha loja em particular. O que queremos fazer é o número 1, criar um layout de blog e, em seguida, o número 2 é criar uma rota para todos os diferentes artigos uma rota para todos os diferentes artigos dessa postagem do blog. Deixe-me abrir o GraphiQL novamente porque eu só quero verificar se temos blogs nessa loja específica do Shopify, então eu vou fazer blogs, isso listará nossos blogs e eu farei nós e identificadores. Se eu executar isso, você deve fornecer pelo menos o primeiro ou o último, então, digamos que os primeiros cinco blogs, certamente não devem haver mais do que cinco blogs. Há dois blogs na loja de exemplos de hidrogênio da Shopify, e isso são notícias e jornais. Isso vai funcionar, então, se voltarmos aqui, o que vou fazer é voltar ao nosso projeto aqui e criar uma rota para o blog. Dentro de nossa pasta de rotas aqui, novo servidor de pontos de blog de arquivos, na verdade, desculpe, eu preciso fazer disso um servidor de pontos de blog maiúsculo dot JSX. Em seguida, vamos exportar o blog da função default e, em seguida, retornar um pouco de JSX. Não clique em “Salvar” ainda porque há um erro porque não temos nenhum JSX lá. Em seguida, vamos importar algumas das coisas que precisaremos usar . É claro, precisaremos usar a consulta use shop, porque consultaremos a API da loja para obtenha as informações da postagem do blog. Vou importar o CacheLong e o GQL, novamente não clique em “Salvar” ainda porque ele vai quebrar e depois vou importar o suspense do react, vou importar o layout do nosso servidor de pontos de layout de componentes e é isso que vou fazer por enquanto. O que vou fazer é testar uma consulta aqui em nosso GraphiQL, então vou acessar o blog do periódico, então vamos criar uma consulta nomeada Vou nomear essa consulta de artigos e então podemos acessar o blog por meio seu identificador que, como podemos ver aqui, temos duas opções para escolher, jornal ou notícias, de seu identificador que, como podemos ver aqui, temos duas opções para escolher, jornal ou notícias, vamos fazer um diário e , aqui, vamos acessar desculpe, artigos, pulando um pouco à frente. Precisamos colocar o parâmetro aqui, então vamos para os primeiros nove, e vamos digitar nós aqui e, em seguida, nos nós, podemos selecionar o título de cada artigo, o identificador de cada artigo, precisaremos disso navegação e depois a imagem, então o URL e o texto alternativo. Isso é tudo o que precisamos se eu clicar em “Executar” nisso, você verá que recuperamos os primeiros 1,2,3,4, então há apenas quatro artigos, embora tenhamos especificado nove, se houver menos de nove, é isso que recebemos de volta. Mas a boa notícia é que tudo funcionou então vamos voltar ao nosso projeto aqui, e eu vou criar essa consulta, consulta const é igual a GQL e, em seguida, vamos colar a consulta aqui, eu vou apenas deixe o recuo assim e eu fui um idiota e cliquei em “Salvar ” sem colocar nada em nossa declaração de devolução , então teremos que reiniciar nosso servidor, o que não é nada demais. Antes de fazermos isso, no entanto, vou usar o gancho de consulta use shop então vou pegar os dados da consulta use shop, analisando a consulta dessa forma, usar cachelong, como fizemos anteriormente, preload true e, em seguida, aqui embaixo, eu vou fazer const. Na verdade, antes de fazer isso, antes de fazer a estrutura, vamos fazer o que normalmente fazemos e dar uma olhada nesse objeto de dados. Eu só preciso colocar alguma forma de JSX aqui, caso contrário, o servidor não vai rodar, então eu vou fazer isso e então vamos fazer npm run dev aqui embaixo, então isso está funcionando agora, vamos refresh e vamos para a rota do nosso blog, temos um problema aqui, nenhum contexto do Shopify encontrou, isso soa como um daqueles erros estranhos que podemos corrigir usando yarn dev, dash, dash force, refresh e como você pode ver que removeu todos os erros. O que estamos procurando, porém, é o que está no objeto de dados e, como você pode ver aqui, dentro dos objetos de dados, temos dados novamente, temos o blog novamente e, em seguida, temos artigos que contêm um objeto então vamos desestruturar aqui, então vamos continuar com os dados que vamos inserir, acessar os dados, depois, dentro dos dados, acessar o blog como blog. Então, o que podemos fazer é apenas registrar o blog do console, ter certeza de que temos o correto. Se olharmos aqui dentro, você pode ver que ainda temos artigos e artigos internos que temos uma lista de nós legais. O que vamos fazer é entrar aqui e colocar o título do blog, mas não vamos fazer isso neste vídeo em particular, na verdade, tudo o que estamos usando isso é para pegar os artigos, então eu vou um passo mais fundo na estruturação e pegar os artigos, na verdade, não acho que precisemos colocar os dois pontos lá e, em seguida, se eu apenas registrar o console novamente, você não precisa fazer esses registros do console , estou apenas verificando se eu tenho os dados corretos aqui. Aqui você pode ver que sim, você tem a lista de nós aqui. Na verdade, vamos entrar e entrar nos artigos dos nós, atualizar aqui e agora isso remove os nós da frente, então temos apenas artigos, temos uma matriz de apenas objetos de artigo. Isso é tudo o que queremos, vamos colocar como nosso componente principal aqui, o layout que já importamos de onde ele existe e, em seguida, porque estamos acessando dados assíncronos, vamos colocar um suspense, vou colocar tudo isso em um contêiner e então eu já configurei uma classe para a grade de artigos que será muito semelhante à grade de produtos e depois muito parecido com a grade de produtos, vou examinar todos os artigos, executar um mapa sobre eles e, em seguida, para cada artigo, abrir essa devolução e não precisamos colocar a devolução aqui, Acho que podemos simplesmente colocar uma div aqui, colocar um pouco de JSX aqui e vamos retornar o título do artigo. Aqui vamos nós e temos acesso ao título do artigo aqui, então se eu clicar em “Salvar” nele, atualize aqui, nada está acontecendo no momento, vamos dar uma olhada. A grade do artigo está chegando, mas não o título do artigo aqui, e talvez eu não devesse ter colocado isso lá. Vamos fazer isso e ver o que acontece. Sim, então aí está, temos quatro divs aqui com todos os títulos. Poderíamos fazer essa lista como mostrei antes, mas vamos transformá-la em grades em breve , então vamos deixá-las como divs. Eu posso criar um componente separado na minha pasta de componentes aqui, mas eu só vou usar isso nessa rota específica do blog, então vou colocá-lo abaixo e vou para chamá-lo de item de grade de artigo e vou passar pelo artigo como um adereço e, em seguida, vamos retornar exatamente o mesmo JSX que temos aqui, e então vou substituir aqui com item de grade de artigos. Então, a única coisa que precisamos fazer é passar o artigo como um suporte e isso vai passar direto para aqui, que podemos usar em nosso JSX aqui embaixo. Clique em Salvar e obteremos o mesmo resultado, o que obtemos. O que vou fazer é adicionar essa classe aqui para permitir que ela use nosso item de grade de artigos CSS é o nome da classe. Em seguida, vamos inserir dois links aqui. Um link de imagem e outro link do título. Nós importamos o link e a imagem? Não, não temos. Vamos importar o link e a imagem do hidrogênio. Em seguida, vou colocar um componente de link aqui. Vou adicionar uma string aqui. Vamos aninhar o artigo em uma rota de blog. Como fizemos com os produtos, use o identificador de artigos como URL. Vamos configurar essa rota em apenas um segundo. Vou dar a isso um nome de classe de contêiner de imagem. Então, aqui, vamos configurar nosso componente de imagem. Tudo o que precisamos fazer é passar pela imagem do artigo e componente de imagem do Shopify cuidará do resto, exceto alt, que precisamos passar aqui, artigo, imagem, alt, texto. Legal. Não queremos que feche assim, queremos que seja fechado automaticamente. Varrer. Vamos ver se isso funciona. Sim, temos essas imagens chegando. Linda. Aqui, vou criar outro componente de link, vinculando ao mesmo lugar. Vou dar a isso um nome de classe para o CSS de article-grid-item-title. Vamos fechar isso, para que possamos ver. Feche isso e coloque o título do artigo entre essas tags de link. Guarde isso e aleluia, temos nossa grade de artigos aqui. Se eu clicar em um desses, ele basicamente vai para uma página em branco porque ainda não configuramos essa rota. Vamos configurar isso agora mesmo. Assim como fizemos com coleções e produtos, só precisamos criar uma nova pasta chamada blog. Então, assim como fizemos com coleções e produtos, configure uma rota dinâmica [handle] .server.jsx. Aqui é onde faremos a maior parte do nosso trabalho nesta lição. Vamos exportar uma função padrão. Chamaremos esse componente de artigo e passaremos o artigo como um acessório. Em nossa declaração de retorno aqui, vou apenas imprimir nosso arquivo de layout e, em seguida, descobriremos o que colocar dentro dele daqui a pouco. Precisamos importar algumas coisas aqui. Vou expandir isso em várias linhas, como fizemos nesta aula, e importar algumas coisas da biblioteca de hidrogênio da Shopify. Vou precisar usar o ShopQuery. Vou precisar de UseLocalization. Vou pegar o componente de SEO porque de que adianta ter um bom artigo se ele não é otimizado para mecanismos de busca? Vou pegar o GQL e vou pegar o componente de imagem. Eu também vou importar o suspense do react e importar os componentes dos layouts, é claro. Acho que precisamos voltar duas vezes, indo para components e depois layout.server. Lá vamos nós. Em seguida, criaremos a consulta. Vamos fazer isso na interface gráfica, para que possamos corrigir qualquer erro antes de realmente executá-lo. Também aproveitamos o preenchimento automático fazendo isso dessa maneira. Vou me livrar desse antigo e vamos chamar esse artigo de consulta de singular. Antes de abrirmos isso, na verdade, precisamos passar qual variável vamos passar? Precisamos dizer que vamos passar uma variável chamada handle, que é o tipo de string. Em seguida, vamos segmentar o blog específico da revista. Então, o que precisamos fazer é especificar um artigo por identificador. Não é chamado de artigo por algum motivo, é chamado de ArticleByHandle. Isso é bem específico, mas obviamente vamos colocar como parâmetro nosso identificador. Abra isso e, em seguida, aqui, quais são algumas das coisas que precisaremos recuperar de cada artigo. Obviamente, o título, a data em que foi publicado, o autor que agora é AuthorV2. O que na verdade é uma seleção, só precisamos especificar o que queremos nessa seleção. Eu só quero o nome e depois a imagem, o que obviamente é uma seleção. Vamos pegar o URL e o texto alternativo e , em seguida, o HTML do conteúdo, que é o conteúdo do artigo. Obviamente, isso não vai funcionar porque não especificamos o valor do identificador, mas pelo menos usamos gráficos para nos ajudar a preencher automaticamente alguns desses campos. Vamos voltar aqui. Vou apenas anotar aqui a consulta como uma GQL constante, abri-la e aí vamos nós. Codificamos o fato que estamos examinando o diário, mas o identificador vamos passar como uma variável. Dentro daqui, podemos pegar a alça que estamos procurando por meio dos parâmetros, através dos adereços desse componente. Vou pegar o identificador do artigo e depois usar o ShopQuery, então os dados const são iguais a useShopQuery. Dessa vez, vou colocar a consulta e as variáveis. As variáveis pelas quais vamos passar são simplesmente o identificador. Como sempre faço, vou consolar registrar os dados retornados da nossa consulta. Quando vamos para um deles, temos um erro, não podemos desestruturar o identificador da propriedade do artigo, pois ele é indefinido. Na verdade, não temos acesso a um objeto de artigo aqui. Vamos dar uma olhada. Estamos usando a coisa errada aqui. Precisamos usar os parâmetros de rota. Desculpe por isso. Use os parâmetros de rota. Não vamos passá-lo, vamos apenas usar os RouteParams. Vou usar os parâmetros de rota aqui e tirar a alça. Vamos atualizar. Opa. Vamos voltar ao nosso blog. Clique em um desses. Agora temos um erro da API Storefront, o identificador da variável foi fornecido como inválido. Provavelmente porque eu não usei os colchetes aqui para invocá-lo. Vamos nos refrescar aqui. Sim. Agora não temos erros. Deixe-me dar uma olhada aqui. Nós rolamos para baixo. Lá vamos nós. Estamos obtendo o registro de dados do console aqui e ele está nos devolvendo dados do blog artigo por identificador e, em seguida, objeto dentro dele. Na verdade, podemos simplesmente copiar isso e usá-lo para nossa desestruturação. Obviamente, não precisamos usar objeto aqui, mas podemos retirar o artigo por identificador e, em seguida, nosso console registrar o artigo por identificador. Atualize aqui. Se eu abrir isso, você verá que esse objeto vem por meio de title, publishedAt, AuthorV2, imagem e o conteúdo dele. Muito legal. Isso está funcionando agora, nossa consulta de API Storefront. Agora temos essa coisa chamada ArticleByHandle. Eu realmente não gosto do ArticleByHandles, então vou trocar isso. Vou chamar isso de artigo. Não sei por que precisa ser ArticleByHandle. Em seguida, usaremos o artigo aqui. O que eu vou fazer é abrir um suspense para o componente de SEO, abrir um suspense para digamos, digite o artigo e, em seguida, os dados serão apenas o artigo. Eu quero fazer disso uma etiqueta de fechamento automático. Depois disso, o que faremos é criar esta página do artigo, então vou criar um desenvolvedor com a classe de artigo, página e contêiner. Então eu vou ter duas partes disso. Eu vou ter o cabeçalho da página do artigo e, em seguida, o próprio artigo, cabeçalho da página do artigo é o nome da classe. Vou passar por H1, o título do artigo. Vou criar um intervalo aqui para a data que ainda precisamos formatá-lo. Mas digamos que é um artigo. Vamos analisar o não formatado por enquanto. PublishedAt, vamos separar isso com um ponto e colocar o artigo AuthorV2.name aqui para o nome do autor, e depois do cabeçalho, criaremos, abriremos uma tag HTML do artigo aqui é onde colocaremos nossa imagem principal do artigo. Vou passar pelo artigo.image e, em seguida, nos textos alternativos, na imagem do artigo, no texto alternativo. Tag de fechamento automático para a imagem e, em seguida, o que vamos fazer é a div para trazer o HTML. Vamos ver esse atributo dangerouslySetInnerHTML novamente, e só precisamos fazer esse sublinhado, sublinhado HTML é igual a e, em vez disso , não é igual a dois pontos. Em seguida, coloque o conteúdo HTML proveniente do objeto do artigo e, em seguida, darei a ele um nome de classe para formatação do corpo do artigo. Legal. Vamos encerrar essa div e ver o que acontece agora quando executamos esta página. Olha isso. Temos o título, temos a data que ainda precisamos formatar. Temos o nome completo do autor e, em seguida, temos essa imagem aqui, que é a imagem principal. Se eu fechar isso, você verá que essa é a primeira parte e depois o conteúdo do artigo. Isso está praticamente feito. A única coisa que realmente precisamos fazer é corrigir esse carimbo de data/hora aqui. É muito **** feio. Obviamente, não podemos deixar isso assim para o usuário, e também, caso não haja nenhum artigo, quero colocar um substituto também. Deixe-me fazer isso primeiro. Eu só vou colocá-lo em um substituto. Se não houver nenhum artigo , vamos voltar com nossos componentes de layout. Ainda usando o contêiner. Vamos apenas colocar uma div com o artigo não encontrado, e isso também me lembra de criar algo em nosso componente de aplicativo que mencionei nas aulas de teoria, mas não implementei neste específico projeto que está trazendo o componente de rotas e fazendo uma rota NotFound. Podemos usar esse caractere curinga selecionado aqui. Qualquer coisa que passe pelas rotas dos arquivos e chegue até aqui, traremos apenas os componentes NotFound. Desculpe, isso é bastante tangente, mas eu só pensei nisso quando estava criando aquele substituto para a página do artigo, e depois aqui embaixo, na verdade, vamos fazer isso aqui. Função NotFound. Este é apenas um pequeno retorno de página 404 sem layout, que acredito que teremos que importar o layout dos componentes, layout.server. Então, assim como fizemos com a página do artigo, um contêiner com uma div dentro que diz apenas a página não encontrada. Agora, se eu for para um artigo que não foi encontrado, então nosso olá, vamos colocar algo aleatório assim. Ele voltará, artigo não encontrado. Se seguirmos a rota raiz e digitarmos algo aleatório, como “olá”, ele dirá que a página não foi encontrada. Isso é um pequeno bônus para você aí. Na verdade, vamos atualizar o link 3. Estou andando um pouco aqui, mas é o vídeo bônus. Me dê um pouco de folga, pessoal. Em layout.server, vamos colocar um link para o blog. Livre-se desse link feio 3, e então, se eu clicar em “Blog”, ele nos levará ao blog, e então, se eu clicar aqui, chegaremos a um de nossos artigos, e então sim. Como eu estava dizendo antes de entrar nessa tangente, precisamos formatar essa data, que é um pouco mais complicado do que gostaríamos, mas estamos trazendo, use a localização aqui, que é um gancho de hidrogênio. Podemos usar a estruturação para fazer algumas coisas aqui partir do gancho de localização de uso. O que vamos fazer é a linguagem, ISOcode. LanguageCode é o que vamos chamá-lo, e então o país extrairá o ISOCode do país e o transformará em sua própria variável chamada CountryCode. Isso será para a próxima função que usaremos. Vamos criar uma data formatada e vamos criar novos objetos internacionais no formato de data e hora. Essa é uma especificação em JavaScript. Isso não é reação ou hidrogênio. Em seguida, abriremos uma string aqui, inserindo as duas variáveis que acabamos criar e que acabamos de usar a localização. O primeiro LanguageCode, depois o traço CountryCode e, em seguida, o próximo argumento colocará um objeto com o ano numérico, mês inteiro e o dia numérico. Tudo isso depende de sua preferência pessoal. Mas teremos um ano numérico, uma exibição longa por mês, o que eu acho que acontece como se fosse janeiro, fosse janeiro completamente, e então o dia será numérico também, o que faz sentido. Depois disso, vamos executar formatos nesse objeto recém-criado e depois executá-lo por meio um novo objeto, Article.PublishedAt. Isso parece muito agitado, mas basicamente estamos apenas convertendo data PublishedAt para esse formato de data internacional. Agora que temos essa data formatada, podemos simplesmente ir até aqui e substituir artigo PublishedAt pela data formatada, e a menos que tenhamos cometido alguns erros aqui, o que parece que temos. O que nós fizemos? Não é possível acessar o artigo antes da inicialização. Eu criei o artigo variável depois de escrever todo esse código, então eu só precisava movê-lo antes e, se eu clicar em Salvar nessa atualização então eu só precisava movê-lo antes e, se eu clicar em Salvar nessa atualização, aqui, você poderá ver o nome longo do mês que é 3 de junho de 2022 da célula Ben ou como você pronuncia o nome dele, e aí está seu artigo. Se consultarmos outros artigos neste blog, você verá que ele funciona da mesma forma. Isso é um pequeno bônus para vocês. A página do blog, acho que esta lição deve ser uma boa prática para vocês porque, como mencionei anteriormente, estamos passando por apenas uma sequência de construção repetidamente . esses componentes, pegando dados da API de vitrine usando uma consulta nítida usada para capturar os dados que queremos dentro dos dados retornados e, em seguida, usá-los em nosso componente. Ao mesmo tempo, trazendo alguns desses outros componentes e ganchos da Shopify, que tornam nossas vidas muito mais fáceis. Isso basicamente conclui essa turma, pessoal. Espero que tenham gostado. Qualquer dúvida, como sempre, deixe-a abaixo, mas vamos tirar uma conclusão agora, onde falaremos sobre seu projeto de aula. Te vejo lá. 15. Conclusão e projeto do curso: Isso conclui esta aula sobre hidrogênio do Shopify. Para seu projeto de classe, eu encorajo você a criar sua própria vitrine personalizada usando hidrogênio. Para se inspirar, você pode pegar o que fizemos até agora nesta aula e expandi-lo. Você pode criar uma galeria de produtos para trazer mais fotos do produto do back-end, criar uma gaveta para abrigar o carrinho do usuário sem que ele saia da página do produto ou criar seções personalizadas para mostrar as melhores características do seu produto. A escolha é sua. Como sempre, se você tiver alguma dúvida ou preocupação, deixe um comentário na caixa de discussão abaixo e farei o possível para indicar a direção certa. Obrigado, como sempre, por assistir e espero vê-lo novamente em algumas das minhas outras aulas.