Desenvolvimento de temas da Shopify com Vue.js: otimize as páginas de produtos e carrinhos

1. Introdução: Olá e bem-vindo ao Shopify Theme Development com Vue.js. Sou Christopher Dodd. Eu sou um desenvolvedor web freelance e professor de topo aqui no Skillshare.com, cobrindo todas as coisas de desenvolvimento web e freelancing on-line. Na aula de hoje, aprenderemos como integrar o JavaScript Framework Vue.js nas páginas de produtos e carrinho de um tema da Shopify. Esta aula é ideal para aqueles que fizeram algumas das minhas outras aulas sobre desenvolvimento de temas da Shopify aqui no SkillShare.com e estão prontos para levar suas habilidades de desenvolvimento de temas para o próximo nível. Com o Vue.js, podemos trazer as estruturas de dados da Shopify para o front-end e permitir que o usuário atualize elementos sem recarregar o navegador. Usando Vue.js sobre outras bibliotecas JavaScript como jQuery, podemos criar uma experiência mais ideal para nós como desenvolvedores, bem como para os usuários finais de nossa loja de e-commerce. Se você está pronto para começar, clique no próximo vídeo e eu vou vê-lo por dentro. 2. Conhecimento necessário: A aula de hoje ao usar Vue.js dentro dos temas da Shopify é um tópico avançado e, portanto, você precisará de algum conhecimento pré-requisito para entender e aproveitar ao máximo essa classe. Antes de tomar esta classe, você deve entender a diferença entre front-end e back-end quando se trata de desenvolvimento web, isso também é conhecido como lado do cliente e lado do servidor. Se você não estiver familiarizado com o motivo pelo qual precisaríamos transferir dados do Shopify Liquid para JavaScript, por exemplo, recomendo que você dê uma olhada na Lição 4 da minha aula anterior de Skillshare, Compreendendo o Desenvolvimento Web. Em segundo lugar, você vai precisar saber JavaScript. Se você precisar de uma atualização, você pode conferir minha classe Skillshare, Fundamentos de Desenvolvimento Web: JavaScript. Em terceiro lugar, você deve ter pelo menos alguma familiaridade com a API do Ajax e a Shopify. Nesta classe, vamos conectá-lo à vista e usá-lo para atualizar nosso carrinho em tempo real. Se você quiser uma atualização da API do Ajax, confira a Lição 8 da minha turma, Programação de temas da Shopify. Claro, por último, mas não menos importante, você deve ter alguma experiência geral com desenvolvimento do tema da Shopify e escrever código do Shopify Liquid. Caso contrário, eu definitivamente recomendo minhas duas aulas anteriores do Skillshare sobre o assunto, Desenvolvimento de temas da Shopify e Programação de temas da Shopify. Além disso, mesmo que você seja novo no Vue.js, você deve ter conhecimento suficiente para continuar com os seguintes vídeos. 3. Por que usar o Vue: Antes de começar, vamos falar sobre por que gostaríamos de usar o Vue dentro dos temas da Shopify. Simplificando, Vue.js é útil para todas as áreas em nosso site da Shopify que exigem ou incentivem a interação do usuário fora de simplesmente navegar para novas páginas. Vamos pensar por um segundo sobre como um usuário pode comumente interagir com um site de comércio eletrônico. Podemos dividi-lo em três comportamentos principais. Um, navegando ou encontrando produtos específicos para comprar dois, adicionando e removendo produtos de e para o carrinho de compras, e três, levando esses produtos para o checkout e concluindo seu pedido. No ponto 1, navegando ou encontrando produtos específicos para comprar, maioria das vezes isso acontece através da navegação. Basta clicar na coleção ou categoria que deseja navegar e você recebe uma lista de opções. Isso não requer interatividade além de navegar nas páginas. Mas e quando você chegar à página do produto e você é apresentado com algumas opções para modificar o produto ao seu gosto antes de adicioná-lo ao carrinho. Aqui, quando você atualizar sua seleção, a imagem do produto, o preço do produto e outros detalhes podem mudar. De preferência, o usuário não deve ter que navegar para uma nova página ou atualizar a página para ver essas pequenas alterações. Em segundo lugar, depois que um usuário terminar de navegar e adicionar itens ao carrinho, talvez ele queira remover produtos do carrinho ou adicionar unidades adicionais do mesmo produto. Novamente, seria preferível que a atualização fosse gravada instantaneamente em vez de ter que esperar por uma atualização de página. Felizmente, ambas as interações que podemos lidar no front-end usando JavaScript. Mas usando JavaScript ou jQuery no framework em tudo, vamos ter que especificar quais seções da página se destinam a mudar e em quais situações. Isso resulta em nós ter que escrever códigos confusos, ambos atualizar os dados e, em seguida, torná-lo para que os dados atualizados são, em seguida, refletidos na página. Vue.js resolve esse problema para nós através de algo chamado reatividade. Encorajo-o a ler sobre a reatividade em profundidade no site da Vue, mas por enquanto é assim que vou explicar. Simplificando, Vue nos permite criar uma estrutura de dados e inserir valores dinâmicos em nossa estrutura HTML front-end. Quando os dados forem alterados , os valores na página também serão alterados. Portanto, eles são considerados reativos. Ao escrever Vue.js, não temos que dizer explicitamente a interface do usuário para atualizar, em vez disso, a interface do usuário vai reagir a qualquer que os dados vinculados a esse elemento foi atualizado para. Vamos colocá-lo em termos das duas áreas onde usaremos o Vue na aula de hoje, a página do produto e a página do carrinho. Na página do produto, se o produto tiver mais de uma variante, será necessária uma seleção do usuário. A seleção determina então a variante atual, que pode levar consigo um preço, imagem e/ou nível de estoque diferentes . Na página do carrinho, a maioria, se não todo o conteúdo da página virá do que está atualmente armazenado no carrinho, como os vários itens no carrinho, suas imagens, títulos , preços e a combinação desses preços, que compõem o preço total. Quando um item ou unidade é removido do carrinho, isso produz um efeito de gotejamento para baixo na matriz de itens, no preço da linha do item e/ou no total do carrinho. Em Vue.js, podemos abrir nossas ferramentas de desenvolvedor para ver claramente nossa estrutura de dados e como os valores na página são mantidos em sincronia com a estrutura sem ter que escrever manualmente linhas de código para atualizar os valores como visto na página. Para resumir, Vue.js é mais útil nestes ambientes, nestas situações em que não pretende ter de actualizar a página cada vez que ocorre uma actualização. Em lojas de comércio eletrônico especificamente, Vue.js é particularmente útil ao lidar com seleções de variantes e interações de carrinho de compras. 4. Como usar o Vue em temas da Shopify: Vue.js é uma estrutura que pode ser usada para criar um aplicativo da Web de página única ou pode ser descartada em qualquer página da Web única. A instância do Vue, como é chamada, conecta à sua estrutura HTML existente e, através do uso de tags personalizadas, atributos e sintaxe de modelo, permite a vinculação de dados e eventos do HTML para a instância do Vue. Na aula de hoje, vamos criar dois aplicativos ou instâncias do Vue, um a página do produto e outro para a página do carrinho. Para a página do produto, vamos usar o Vue para rastrear a variante selecionada atualmente. Isso será determinado pela combinação de opções selecionadas pelo usuário através deste formulário. Vamos importar a lista de variantes do back-end da Shopify e usar os valores desses suspensos para determinar a variante atual. Para a página do carrinho, importaremos os dados do carrinho do back-end da Shopify para nossa instância usando a API AJAX do carrinho. Nós também vamos importar uma coleção específica para oferecer upsells abaixo do carrinho, bem como adicionar estados de carregamento de transição para os botões adicionar ao carrinho e a tabela de carrinho, dado que estaremos fazendo chamadas assíncronas para a API AJAX. Essa é a visão geral do que vamos usar o Vue em nosso tema da Shopify. Observe que as instâncias do Vue e os modelos da Shopify têm um relacionamento individual aqui. À medida que começamos a construir e, em seguida, terminar de olhar para o Vue, deve começar a ficar mais claro por que estamos fazendo isso dessa maneira. Na conclusão desta classe, você pode explorar quais outros modelos em seu tema da Shopify podem se beneficiar de uma instância do Vue. Um exemplo que eu posso pensar fora do topo da minha cabeça é o modelo de coleção. A loja da Shopify está com muitos produtos individuais, você pode querer criar um sistema de filtragem mais sofisticado no qual o usuário não precisará atualizar a página depois de adicionar ou remover parâmetros diferentes ao filtrar uma lista de produtos. Isso envolveria muitos dados sendo atualizados com base na entrada do usuário e seria uma boa oportunidade para usar o Vue. Por enquanto, vamos nos concentrar nas duas áreas mais comuns que Vue.js faz sentido na maioria dos sites da Shopify, que na minha opinião seriam seleções de variantes em páginas de produtos e interações de carrinho. 5. Configurando nosso projeto: Vamos começar a parte de compartilhamento de tela desta classe dentro do meu campo de testes habitual para temas da Shopify, Chris Testing Shop. Obviamente, você precisará de uma loja da Shopify para trabalhar. Esse é o caso em qualquer uma das minhas outras aulas de desenvolvimento de temas da Shopify. Tenha em mente aqui, pessoal, que estamos nos concentrando em uma área muito particular do desenvolvimento de temas da Shopify usando Vue.js. Não abordaremos coisas como CSS, como a Shopify funciona ou outras coisas que combinam com o desenvolvimento do tema da Shopify. Espera-se que você saiba como usar o Kit de Temas. Espera-se que você entenda CSS, HTML, um pouco de JavaScript. Vamos focar especificamente no Vue nesta aula. É por isso que criei um projeto inicial para trabalharmos nesta classe, já que não queremos construir um tema do zero, mas também queremos usar um tema que seja o mais simplificado possível. A maneira como vamos acessar esse tema é acessando minha conta do GitHub. Então github.com, e eu acredito, é apenas “Christopher Dodd”. Aqui vamos nós. Dentro dos repositórios populares, você pode ver o Skillshare, mas há um novo que eu criei aqui chamado “vue-class-theme”. Voltaremos ao repositório do Skillshare em apenas um segundo. Mas o que eu quero fazer aqui é pegar esse “ponto de partida” no meu repositório de tema vue-class-aqui e trazer isso para o nosso editor de código, que para esta classe, será VS Code. Claro, você pode usar qualquer editor de código que você quiser, eu só prefiro usar VS Code. É grátis e poderoso. Por que não? Vou abrir o VS Code, clicar em “Nova Janela” aqui e executar um Novo Terminal. A maneira de obter este repositório é pegar a URL aqui e depois “git clone”. Lá vamos nós. Isso estará em algum lugar em nossa estrutura de arquivos, onde quer que tenhamos nosso terminal configurado para ir. Para mim, será aqui nas minhas contas de usuário. Lá você pode ver, eu só vou mover isso para a área de trabalho apenas para torná-lo um pouco mais fácil. Então, agora, eu posso abrir isso. Eu só vou abrir, ir para aquela pasta, e aqui está ela. Agora, como é o caso de todo o desenvolvimento de temas da Shopify, teremos que configurar um arquivo config.yml. Eu cobri que algumas vezes diferentes nos diferentes vídeos do YouTube que eu fiz. Ele foi abordado na primeira aula sobre desenvolvimento de temas da Shopify aqui no Skillshare, então não vamos passar pelo Theme Kit. O que eu já tenho dentro da pasta compartilhada aqui, eu tenho o meu config.yml. Eu só vou trazer isso para dentro Claro, o arquivo config.yml tem todos os detalhes de autenticação e o ID do tema para realmente fazer login na loja. Vou fechar essa uma vez que tivermos isso. O próximo passo para nós será enviar esse tema para nossa loja da Shopify. O que eu vou fazer para isso é fechar isso, fazer Compress on a Mac. Agora está fechado, indo para voltar para minha loja de testes, clique em “Enviar tema”. Selecione o arquivo zip. Carregue em “Carregar”. Isso vai levar um pouco de tempo para fazer upload e então vamos vê-lo aparecer. Vou apenas remover o V maiúsculo. Agora, devemos ser capazes de clicar em “Pré-visualização” e ver uma pré-visualização do nosso tema. Na página inicial, não há nada, mas o que eu tenho aqui são dois links, um para comprar o tee ou comprar sapatos. Agora, vamos falar sobre os dados da loja em apenas um segundo, mas vamos dar uma olhada no que temos até agora. Temos a nossa camiseta aqui e, em seguida, temos a nossa página de coleção onde temos uma variedade de sapatos. Agora, é claro, tudo isso é baseado em dados de armazenamento. Eu menciono isso em praticamente todas as aulas, isso está tirando da informação que você tem dentro de sua loja. Você não vai ter exatamente as mesmas informações que eu, mas eu tentei torná-lo tão simples e fácil para você começar e colocar isso em funcionamento em sua loja quanto possível. O que eu fiz foi exportar todos esses produtos. Basta voltar para o GitHub, entrar no repositório Skillshare. Aqui sapatos e camisa CSV, se importarmos isso para a Shopify, teremos todos esses produtos em nossa loja. Aqui está um pequeno vídeo de como é quando você está importando essas informações para uma nova loja. Agora, você deve ter seu tema carregado e você deve ter esses produtos carregados também. Se você quiser acompanhar, você pode simplesmente usar os produtos que você tem em sua loja agora, se você quiser, isso é com você. Mas agora temos o tema aqui. Vamos conectar nosso Kit de Temas. Como eu costumo fazer, vai abrir, personalizar, pegar o ID do tema deste tema. Vá para o nosso arquivo config.yml, atualize o ID do tema aqui. Para confirmar que isso funciona, vou abrir um novo terminal e executar o relógio temático. Agora, você pode ver que estamos conectados a esse tema e agora estamos observando mudanças. O próximo passo é preparar o nosso ambiente para o Vue. Mas antes de fazermos isso, eu só quero familiarizá-los com o projeto como não fizemos até agora. É muito simples. Isso é baseado em um tema inicial que é bastante nu. Você verá que não há muitos ativos, não há nenhum trecho aqui. Na verdade, também não há seções. Este é um tema muito simples. Obviamente, se você tem um tema de produção, você teria mais pastas e arquivos aqui. Só estamos a manter as coisas simples para esta aula. A primeira coisa que eu quero chamar sua atenção, é o arquivo theme.css. Eu já criei essas regras de estilo. Eu não queria gastar tempo nesta classe criando CSS, então eu coloquei tudo isso em um arquivo CSS já para nós. Há um arquivo JS tema aqui. Podemos colocar em nosso JavaScript geral para o tema aqui, mas estamos usando Vue e conectando para armazenar dados. Não é realmente necessário para esta classe e nós não estaremos realmente usando este arquivo nesta classe. Mas esta é uma opção também para o seu JavaScript geral. Eu também tenho um logotipo do site aqui. Isto é só Chris Testing Shop. Não importa qual é a sua loja, se você estiver usando este tema, você terá o mesmo logotipo a menos que você altere este arquivo. Eu tenho um ícone de lixo para a página do carrinho, e eu tenho este script aqui, que você pode encontrar aqui no GitHub se você quiser. Caso contrário, ele já está incluído no projeto. É uma maneira de fazer a formatação de dinheiro na Shopify via JavaScript. Caso contrário, você ficará preso com a formatação de dinheiro líquido da Shopify e isso não funcionará quando usarmos JavaScript e Vue.js. Essa é a sua pasta de ativos. Quero chamar sua atenção ao lado do arquivo de layout. Temos um arquivo de layout bem básico aqui. Eu posso ver que eu incluí controle deslizante liso, que foi removido. Isso será removido para sua versão do tema. Basicamente, o que temos é CSS tema incluído, que é o único CSS extra que temos incluído. Estamos incluindo esse script de dinheiro da Shopify para que ele possa formatar os valores de dinheiro da Shopify. Eu incluí jQuery também. jQuery é útil para fazer nossas solicitações AJAX. Caso contrário, se usarmos o JavaScript Vanilla, o código acaba parecendo confuso, e é muito mais fácil usar jQuery. Eu incluí jQuery lá também. Essas são algumas dependências. Nós vamos precisar shopify-money para formatar os valores monetários e jQuery para as solicitações AJAX. Novamente, podemos usar Vanilla JS, mas jQuery é um pouco mais agradável. Isso é tudo para dependências. Agora, é hora de realmente trazer Vue.js. A maneira que podemos fazer isso como indicado nos documentos é, após a nossa tag jQuery aqui, adicionar nesta tag script que traz em Vue. Agora, se você está se perguntando de onde eu tirei isso, está na Documentação do Vue. Esta é uma boa oportunidade agora para mostrar onde você pode encontrar a documentação do Vue. A coisa que você realmente precisa estar ciente é que nesta aula eu vou estar usando Vue 3. Há três versões diferentes: Vue 1, Vue 2, Vue 3. Talvez se você estiver assistindo isso em uma data muito mais tarde, há mais versões depois disso, mas no momento da gravação, ele está atualmente no Vue 3. Aqui você pode ver que você está navegando na documentação do Vue 2 por padrão. Você precisa clicar aqui para obter a documentação do Vue 3. Como você pode ver, o site parece praticamente o mesmo, mas seu URL aqui é diferente. Clique em “Começar”. Esta é a sua referência para qualquer coisa Vue em toda a classe se você ficar preso. Como você pode ver aqui em baixo, apenas o anterior em instalação, aqui está a tag de script que eu tenho. Isso é exatamente o mesmo que temos aqui. A próxima coisa que queremos instalar é o Vue DevTools. Confie em mim, isso é tão útil quando se desenvolve para o Vue. O Vue DevTools adiciona uma guia extra aqui em nosso DevTools dentro do Chrome. Tenho certeza de que há versões para outros navegadores também, mas eu recomendo que você use o Chrome ao fazer este desenvolvimento web. Vamos adicionar uma guia extra aqui que nos permitirá inspecionar nossa camada de dados do Vue e também nossas propriedades computadas e todo tipo de coisas. Ajuda muito a descobrir quais dados e coisas estão acontecendo no Vue enquanto estamos desenvolvendo. Para isso, vou procurar a loja de extensões do Chrome, Chrome Web Store. A coisa a observar aqui é que se estamos usando o Vue 3, então temos que usar a versão beta aqui. Este é o que funciona perfeitamente no Vue 1 e no Vue 2, mas precisamos usar o beta se vamos usar o Vue 3. Obviamente, isso mudará dependendo de quando você estiver assistindo a essa aula. Mas, atualmente, para inspecionar o Vue 3, vamos precisar usar esta versão aqui, a versão beta. Vou clicar em “Adicionar ao Chrome”, clicar em “Adicionar extensão” e você verá que ela foi adicionada ao Chrome. Agora vamos abrir o nosso tema e pré-visualizar o tema. Tenho certeza que para que o Vue DevTools funcione, teremos que criar um aplicativo Vue real. Diz Vue.js não detectado. Incluí o pacote, mas ainda não criamos um aplicativo. Só para provar que tudo isso está funcionando, o que eu vou fazer é entrar no primeiro modelo. Vamos trabalhar no modelo de produto e abrir algumas tags de script. Então aqui dentro, vou criar um aplicativo do Vue. Lembre-se, na seção de teoria desta classe, falamos sobre como estamos fazendo um relacionamento um-para-um entre os aplicativos e os modelos em nossa loja Shopify. Vamos criar um aplicativo chamado ProductPage para acompanhar este modelo. Vamos abrir um objeto e, em seguida, vamos criar um aplicativo a partir desse objeto. Abaixo deste objeto, vamos escrever vue.createapp e, em seguida, carregar em nosso objeto lá. Em seguida, vamos montá-lo para o nosso DOM especificando o ID dos elementos. Eu já defini aqui para a página do produto. Usando a sintaxe CSS com o hash, colocando na página do produto lá. Agora, pessoal, só para notar aqui que esta é a sintaxe do Vue 3. Se você estiver olhando para exemplos online, a sintaxe pode ser diferente porque essa pessoa pode estar usando o Vue 1 ou o Vue 2. Apenas mantenha isso em mente. Esta é a mais recente sintaxe para o Vue 3. Se você está olhando para exemplos antigos, vai parecer um pouco diferente disso. Mas o seu ponto de verdade aqui é que você sempre pode voltar para a documentação, certificar-se de que você está na versão 3. Então, se formos para a introdução, você pode ver aqui que este é o mesmo formato. Podemos realmente obter um erro se não incluirmos um objeto de dados. Vou verificar isso primeiro. Vamos para o nosso modelo de produto. Vamos para o console. Não parece haver nenhum problema até agora. Vá para a conta do Vue, e aqui vamos nós. Temos este elemento raiz aqui. Aí está, pessoal. Acabamos de criar nosso primeiro aplicativo Vue. Podemos inspecioná-lo agora no Vue DevTools, será a guia final provavelmente em seu DevTools aqui no Chrome. Agora estamos no camarote para começar a criar nosso primeiro aplicativo Vue. Sem mais delongas, verei você no próximo vídeo onde construímos este aplicativo de página de produto e adicionamos alguma interatividade a esta página. Como você pode ver, podemos alterar a variante aqui, mas ela não está alterando-a em nenhum lugar na página. Se eu clicar em “Adicionar ao carrinho”, ele só vai adicionar a primeira variação. Precisamos consertar isso e faremos isso no próximo vídeo. Te vejo lá. 6. Usando o Vue na página do produto: Nesta lição, vamos refatorar a página do produto aqui para usar Vue.js. Se olharmos para o código agora, o conteúdo e todos os valores dinâmicos vêm do líquido da Shopify. O que isso significa é que ele é renderizado no lado do servidor uma vez quando a página é carregada. Não importa o que façamos, a variante atual será pequena branca porque essa é a variante selecionada no carregamento da página, e não importa o que façamos aqui para atualizar nossa cor, a cor na imagem do produto não vai para mudar, e isso é uma má experiência do usuário, é claro. Atualmente, nem sequer temos esta configuração para alterar o id da variante. Quando clicamos em “Adicionar ao carrinho”, ele vai adicionar o pequeno T. branco Vou limpar o meu carrinho rapidamente executando a busca. Você pode fazer isso também. Este é apenas o ponto final do carrinho Ajax API para limpar o carrinho. Basta buscar o carrinho clear.js, e que atualizar a página que irá limpar o carrinho. De volta a esta página aqui. Se entrarmos no código, estaremos renderizando todo esse líquido da Shopify na página, mas é claro que queremos atualizar certas coisas dependendo da seleção aqui na seleção de variação. É por isso que queremos usar o Vue. A primeira coisa que vou fazer é configurar os dados. Já vimos isso antes. Nós vamos ter que criar uma função de dados dentro deste objeto, e, em seguida, dentro desta função, nós retornamos um objeto que contém nossos dados. Vamos pensar sobre algumas das coisas que queremos acompanhar neste aplicativo. Claro, queremos rastrear o id da variante atual porque é isso que será adicionado ao carrinho quando clicarmos em “Adicionar ao carrinho”. Vou começar com esse id variante atual, e o valor inicial do nosso id variante atual será igual ao que temos atualmente aqui em nosso valor. Como mencionei antes, o valor que foi inserido neste campo oculto e, portanto, o que é adicionado ao carrinho quando você clica em “Adicionar ao carrinho” é a variante selecionada ou a primeira disponível. Vamos mover esse valor para aqui, nossa instância do Vue, e isso vai garantir que o id da variante atual no carregamento da página será definido com esse valor. Mas então podemos atualizá-lo à medida que interagimos com nosso aplicativo Vue. Agora o que vou fazer aqui é algo muito sutil, mas muito importante. Vou colocar dois pontos na frente do valor, e isso vai transformar esse campo em um campo dinâmico do Vue. Em vez de colocar um valor explícito lá como aqui, o valor vai ser um, podemos colocar um nome de variável lá do nosso objeto de dados e ele irá atualizar dependendo do que acontece com esses dados. É aqui que entra a reatividade. Aqui, vamos colocar o nome da variável aqui. A ideia é que, se isso mudar ao longo do tempo, isso também mudará automaticamente. Mas, por enquanto, devemos ver os mesmos resultados. Vou atualizar a página. Vamos para a nossa aba Vue, e você pode ver aqui nós começamos a inspecionar os dados e podemos ver nosso id variante atual. Se inspecionarmos o formulário e procurarmos esse campo oculto, você pode ver que esse é o valor. Na verdade, o que podemos fazer é entrar aqui e editar isso em tempo real. Se eu colocar isso como 1, 2, 3, 4, 5, por exemplo, eu mudei o valor, e então você pode ver aqui ele é alterado no DOM também. Você tem essa ligação de dados acontecendo aqui. É muito legal. Se eu atualizar a página, esse valor será carregado novamente. Isso é muito legal. A próxima coisa que eu quero capturar, as diferentes variantes disponíveis para este produto em particular. O jeito que vou fazer isso é fazendo um loop líquido. Esse não é o código mais limpo, mas é apenas o jeito que temos que fazer no líquido da Shopify. Vou criar um array de variantes aqui, e dentro desse array, usarei o líquido da Shopify para nos dar nossas variantes. Vamos colocar em um loop for aqui, variante em variantes de produto. Basicamente, o que estou fazendo aqui é transferir os dados do líquido da Shopify para nossa instância do Vue para que possamos interagir com eles dentro do Vue, tudo no front-end sem ter que depender do líquido da Shopify. Para cada variante em variantes de produto, vou ter um objeto com uma vírgula. Não se esqueça da vírgula, caso contrário, não haverá separação entre variantes e vou copiar alguns dos dados do líquido da Shopify. Primeiro, id variante, vamos precisar saber se a variante está disponível. Podemos definir isso sem aspas para que ele possa apenas inserir como um valor booleano lá, e então vamos pegar seus valores de opção. Dentro das três opções disponíveis na Shopify, qual é a seleção? Se você não estiver familiarizado com qualquer um desses objetos, você sempre pode procurá-los na documentação do líquido da Shopify. Posso mostrar-lhe isso agora, apenas como um ponto de referência rápido, referência de líquido da Shopify. Se você estiver confuso sobre quais atributos você tem em um determinado objeto, você pode simplesmente ir para a referência, ir para baixo. Olhe para a variante é a que estamos procurando, e então você pode ver explicações de todos esses atributos que estou colocando em nossos dados do Vue. Eu poderia apenas manter esse aberto apenas para o caso, e vamos voltar e construir no resto opção 2 e opção 3. Então eu vou colocar o preço da variante, certificando-se de filtrar isso através do filtro de dinheiro no líquido da Shopify, caso contrário, ele vai sair como sentido sem formatação. Em seguida, eu vou pegar a imagem para essa variante, e eu vou adicionar um passo extra aqui para verificar se a imagem variante está em branco. Como na Shopify, se a imagem da variante estiver em branco, ela ainda carrega uma imagem, é apenas a imagem errada. Vou criar uma variável aqui primeiro, e você verá o que estou fazendo em apenas um segundo, pegue o URL da imagem usando todos os filtros disponíveis no líquido da Shopify. Novamente, verifique a referência se há algo aqui que esteja confuso para você. Então aqui o que eu vou fazer para a imagem é colocado em menos declaração. A menos que a URL da imagem não contenha imagem, que é a imagem que aparece quando não há nenhuma imagem definida nessa variante específica. Eu estou indo para a saída deste URL de imagem que eu defini nesta variável logo acima, e não há nenhuma outra declaração lá. Se for, uma imagem sem, vai aparecer como em branco. Varrer. Agora, apenas sobre a questão das imagens, o que eu também vou fazer é criar uma imagem alternativa. No caso de a variante não ter uma imagem, que vai ser um monte de instâncias, eu vou apenas usar a imagem em destaque do produto. Eu vou fazer imagem de produto de fallback vai ser imagem em destaque, que é uma variável que nós configuramos aqui. Eu posso pegar essa imagem em destaque e depois pegar o URL dessa imagem em destaque, certificando-se de colocar isso entre aspas. Agora vamos dar uma olhada dentro de nosso Vue DevTools, certifique-se de que não fizemos nenhum erro de sintaxe. Refresque-se aqui. Parece que temos algo inesperado. Aqui vamos nós, disponíveis. Eu digitei em varian ao invés de variante. Vamos atualizar a página. Sem erros de JavaScript, vá para o Vue. Aqui você pode ver que temos um array com todas as variantes e os dados que foram configurados. Temos a imagem do nosso produto de reserva. Nós temos nosso id de variante atual. Podemos usar todas essas informações agora dentro do nosso aplicativo Vue. Podemos vinculá-lo a elementos na página ou podemos usá-lo em cálculos. Agora, na verdade, há apenas um pouco mais de dados que eu quero adicionar aqui, e isso é para capturar nossa seleção aqui. Nós estamos indo para apenas acima variantes, colocar em nossa seleção de variantes, e nós vamos vincular isso à nossa forma. Certifique-se de que a vírgula está lá. Esta é apenas a opção 1 vai igualar o valor selecionado de nossas opções com valores, valor selecionado. Aqui o que estamos fazendo, se entrarmos na documentação, olhamos para o produto. Há um atributo aqui chamado opções com valores, e ele irá retornar uma matriz. Dentro da matriz lhe dará os valores e o nome da opção de todas as opções. Você tem nome e valor aqui. Você pode dar uma olhada nesse objeto em particular aqui. Nome, posição, valor selecionado, valores. Estamos usando o valor selecionado da primeira opção de produto em nossos produtos. Essa vai ser a opção 1. Certifique-se de colocar isso entre aspas. Só vou copiar para os próximos dois. Para este 1, 2 e 3, nós só precisamos atualizar a posição na matriz e isso deve ser tudo bom. Agora vamos voltar para a nossa página aqui. Você pode ver que agora temos nossa seleção de variantes, que é pequena e branca. Temos esta seleção de variante aqui carregada no Vue na página carregada. Mas o que não temos atualmente é vinculação de dados para que, quando isso for atualizado, nossos dados na instância do Vue também sejam atualizados. Vamos fazer isso agora mesmo. Vamos ao nosso código. Vou arrastar isto para baixo porque não precisamos de tão grande. O que eu vou fazer é vincular esses valores a esses seleções aqui mesmo. Como podemos ver aqui, estamos looping através das opções com valores atributo no produto, que para cada item na matriz nos dá o nome da opção do produto, os valores que estão disponíveis, e o selecionado valor. Podemos usar essa lógica para descobrir o que é a seleção atual e criar uma seleção para que o usuário altere isso. O que precisamos fazer é vincular esse valor da seleção ao nosso modelo de dados aqui. A maneira que podemos fazer isso é adicionando um atributo aqui de v-model. Nós adicionamos isso ao select porque é aquele que está carregando o valor. Dentro daqui podemos começar na raiz do objeto de dados. Vamos fazer variante. Na verdade, pode valer a pena ter isto lado a lado. Você pode ver os dois lados. Aqui está o nosso objeto de dados. Aqui está o código HTML. Queremos entrar na seleção de variantes e retirar a opção relevante. Eu estou indo para ir opção de seleção de sublinhado variante. Então o que eu vou fazer para selecionar o número específico que eu quero é usar o atributo dentro deste loop sobre os objetos de opção de produto da posição. Product_option.position. Isso vai inserir um número de um aqui, e isso vai ligá-lo com isso. Agora temos modelo Vue em nosso elemento. Podemos voltar para a página aqui, atualizar. Se eu alterar uma dessas opções, você pode ver as atualizações nos dados. Isso é tudo bem e bom. Estamos atualizando nossa seleção de variantes. Mas o que precisamos fazer é converter essa seleção de variantes em uma variante real. Temos aqui a nossa lista de variantes. O que precisamos fazer é calcular qual variante está atualmente selecionada pela seleção que armazenamos aqui. Isso é algo que precisaríamos fazer dentro de qualquer loja da Shopify, quer estejamos usando o Vue ou não. Não vou passar muito tempo passando por isso. Mas o que vamos fazer é criar o nosso primeiro método. Isto é algo novo que ainda não abordamos, é adicionar um método. Em nossa instância, temos nosso objeto de dados aqui. Mas vamos criar um método que é basicamente uma função em nossa instância do Vue. Como fazemos isso é garantir que colocamos uma vírgula lá e definimos um objeto métodos. Dentro do objeto métodos, criamos nosso primeiro método. Vou chamá-lo de variante de opções. Dentro vou procurar a variante com base nas opções da variante. Onde eu vou fazer isso é eu vou copiar e colar algum código, e então eu vou apenas explicá-los. O que estou fazendo aqui é usar o método find neste array de variantes para encontrar uma correspondência. Quando a opção de variante 1 é igual à opção de seleção de variante 1, então isso é uma correspondência com essa opção em particular. Vamos começar a verificar se está em branco. Porque se estiver em branco, então não devemos sequer procurar uma correspondência por padrão vai ser verdade a menos que nos deparemos com um falso. Então, no final, seremos devolvidos com um fósforo. Isso vai retornar o método de busca aqui. O que vamos fazer com esse valor, se eu criar uma nova linha, é atualizar o id da variante atual para ser igual à variante selecionada nesta instrução find e pegar o ID disso. Agora que criamos esse método, ainda precisamos conectá-lo ao nosso elemento na página. Vamos usar um outro atributo aqui em Vue.js, começando com o símbolo @ e, em seguida, escrevendo o evento que estamos procurando. Isto é basicamente dizer “Onchange”. Em seguida, onchange, vamos executar variante a partir de opções. Nós temos a ligação, e então quando nós mudá-lo, não só estamos alterando aqui em nossa seleção de variantes, vamos recalcular o id da variante atual da nossa seleção de variantes aqui, ou melhor, aqui. Atualizando a página. Quero que repares aqui. Na nossa instância do Vue, se eu alterar a seleção, você verá que nossa variante atual é recalculada. Se eu selecionar Preto médio e clicar em “Adicionar ao carrinho”. Agora devemos ver uma camiseta preta média sendo adicionada ao carrinho. Só vou executar o comando Fetch novamente para se livrar do carrinho. Vamos voltar para a página do produto da loja Tee. Isso está tudo bem agora que temos nossa seleção de variantes funcionando. Mas o que acontece se cada uma de nossas variantes tiver um preço diferente, um status diferente esgotado, uma imagem de variante diferente. Queremos que isso seja atualizado na página. Além disso, há uma coisa na Shopify onde o id da variante é armazenado no URL. Se você compartilhar esse URL ou atualizar a página, a mesma variante é selecionada, então precisamos adicionar isso também. As três áreas que vamos fazer são a imagem da variante, o preço da variante e o estado do histórico em nossa URL. Vamos voltar ao nosso aplicativo Vue. Se vamos realmente encontrar qual é a imagem da variante atual, o preço da variante atual e o ID da variante atual são, bem, nós já temos o ID atualizando aqui. Nós vamos precisar entender qual variante está atualmente selecionada e agarrar isso como um objeto a partir desta matriz de variantes. Se eu voltar para os dados dentro do Vue, a única coisa que temos sobre a variante atual é seu ID. Isso nos permite procurar a variante, mas na verdade não nos permite acessar atributos de dados na variante. O que vamos fazer é usar isso para procurar o objeto variante relevante dentro desta matriz. A maneira como vamos fazer isso é através de algo chamado uma propriedade computada. Propriedades computadas existem em Vue.js porque não queremos colocar funções e lógica dentro de nossa estrutura HTML. Nós apenas adicionamos um objeto extra aqui com nossas propriedades computadas. Em seguida, podemos tratar a propriedade computada como se fosse um atributo de dados aqui e colocá-lo em nosso HTML. O que vamos fazer dentro de nossa propriedade computada, vamos criar nossa própria propriedade chamada variante atual. Você verá isso refletido em nosso Vue DevTools em um momento. Propriedades computadas são basicamente apenas funções que retornam um valor. Vamos fazer o retorno e, em seguida, vamos procurar a variante usando o método find. Variante, e tudo o que precisamos procurar é o id da variante igual a este id da variante atual. Isso deve nos dar o objeto variante relevante deste array. Vamos voltar aqui, atualizar a página. Você verá sob os dados que temos computados agora. Se olharmos na variante atual, você pode ver que temos um objeto com o id variante, as opções, a imagem, o preço. Se eu entrar aqui e mudar isso, então isso será atualizado. Se o preço for diferente, isso será atualizado. Veja aqui, a imagem será atualizada se for para ser atualizada. Isso tudo está acontecendo sem que tenhamos que acionar um método porque uma propriedade computada é reativa. Se alguma destas alterações for alterada, todas as propriedades calculadas serão recalculadas. Se o colocarmos em um método, então teríamos que recomputar explicitamente. Essa é a beleza dos métodos computados. Podemos unir dados e ter que ser reativos também. Agora que temos a nossa variante atual calculada propriedade, agora temos acesso à nossa imagem e preço de variantes atuais. Vamos garantir que nossas atualizações de interface do usuário em resposta a isso. Eu vou voltar aqui, e eu vou subir, vamos fazer o preço primeiro. Eu vou me livrar disso, e eu vou adicionar um atributo no próprio elemento, código V-HTML. Sempre que você vê v traço, que é mais provável um atributo Vue. Vou adicionar V-HTML. Dentro do V-HTML, eu posso colocar no atributo que estamos procurando. Vai ser current_variants.price. Então aqui em cima para a imagem, eu vou substituir isso. Eu vou fazer essa dinâmica colocando o cólon na frente e então eu vou colocar na imagem variante atual. Agora, se a variante atual não tiver uma imagem, vamos precisar usar o fallback. Vou usar a sintaxe de tubo duplo aqui. Se isso vem como falso, nulo ou indefinido, eu acredito que a lista é, então nós vamos padrão para o valor que vem a seguir, que vai ser imagem de produto de fallback. Isso vai ser muito importante em produtos que não têm nenhuma imagem variante definida. Vamos voltar para o nosso front-end aqui, e vamos mudar isso para preto. Como você pode ver, a imagem variante atualiza não é particularmente suave agora nós vamos adicionar um pouco de uma transição sobre isso, mas como você pode ver, quando atualizamos a cor, a imagem variante muda também, mudando essa cor. Se atualizarmos o tamanho, você pode ver que o preço está mudando. Como sempre, você pode usar as ferramentas VUE-DevTools para verificar se isso se alinha com os dados, que é claro que sim. A terceira coisa que eu queria vincular é o estado histórico, que não estamos atualizando atualmente. Isso é importante se você compartilhar esse link com alguém ou atualizar a página. Se eu atualizar agora, você verá que o padrão é a primeira seleção. Vamos criar um método para atualizar o estado do histórico também. Dentro de métodos objeto após esta variante do método de opções, eu vou criar um método de estado de histórico de atualização. Vou colocar no argumento de uma variante, e então aqui algum código, “Se a história substituir o estado”. Este é o código que eu copiei de um tema anterior porque ele vai ser o mesmo independentemente de você estar usando view ou não. Estou apenas carregando isso em uma instância de visualização nesta ocasião. Vou digitar o resto do código e podemos falar sobre o que ele está fazendo em um segundo. Não é essencial que você entenda 100 por cento exatamente o que está acontecendo aqui, obviamente ajuda se você fizer isso, mas basicamente o que estamos fazendo aqui, se não houver “estado de substituição da história”, e não há “variante” então nós vamos apenas voltar. Mas se houver, vamos criar uma nova URL. Nós vamos tomar o protocolo, que provavelmente será HTTPS, em seguida, adicionar essas duas barras, em seguida, o host, em seguida, o caminho, em seguida, nós vamos adicionar neste parâmetro de consulta de variante igual e, em seguida, passar no ID da variante. Em seguida, vamos atualizar nosso histórico de janelas para o novo URL. Sinta-se livre para copiar e colar este código. Tudo o que está fazendo é atualizar o URL em um navegador usando JavaScript. Agora, é claro, ele não vai disparar sem nós resfriá-lo em algum lugar então o que eu quero fazer depois que a variante foi calculada a partir dessas opções, eu quero atualizar o estado histórico. A fim de acionar um método da mesma instância, nós apenas fazemos isso.updatehistorystate, e então nós temos esse objeto variante para que possamos apenas colocar isso lá. Isso irá encontrar o ID da variante deste objeto e colocá-lo após este parâmetro de consulta em nosso navegador. se eu atualizar a página aqui, vamos selecionar uma variante diferente e ver o que acontece. Aqui você pode ver que nosso ID de variante é adicionado ou atualizado em nosso navegador. Se eu atualizar a página, obterei a mesma seleção. Essas são as três áreas que queremos ser reactivas. Queremos que o preço reaja, queremos que a imagem do produto reaja, e queremos que o estado histórico reaja. Isso é basicamente para a nossa instância do Vue. A única coisa que vou fazer antes de seguirmos em frente é que isto parece um pouco defeituoso. Quero dizer, poderia ser uma experiência de usuário melhor, então eu vou usar algo que vem padrão no Vue, que é transições. Se eu voltar para onde essa imagem está, e então eu vou envolver a imagem em um elemento Vue chamado transição, eu vou chamá-la de fade, que dará a transição de desvanecimento, e então copiá-lo de volta lá. Há duas coisas que precisamos para que isto funcione. Uma é que precisamos do CSS. O que isso vai fazer é adicionar algumas classes a este elemento enquanto ele está mudando. Precisamos realmente colocar em nosso CSS o que queremos que ele faça quando essas classes são adicionadas. Vou mostrar-lhe onde isso está no nosso tema. CSS, bem aqui. Ele vai adicionar e remover essas classes. Nós só precisamos defini-los em nosso CSS. Você pode encontrá-lo nos exemplos do que fazer na documentação do Vue. Se entrarmos em “Transições” “Enter & Leave”, você pode ver que este é basicamente o mesmo código da documentação, então aqui está a referência. A outra coisa que vamos precisar é, precisamos adicionar uma chave a este elemento, porque Vue não vai saber que ele mudou mesmo que este SRC tenha mudado. Ele precisa saber que o elemento mudou. Uma maneira de forçá-lo a entender isso é dando ao elemento uma chave. Nós vamos fazer: chave, e então nós vamos fazer a chave igual exatamente à mesma que aqui no SRC. Agora, se eu atualizar a página, e vamos mudar este atributo, você pode ver que temos este pequeno desvanecimento agradável entre as diferentes cores. Quão bom é isso? Aí está você. Temos nossa página de produtos aqui. Se eu selecionar qualquer variante, o preço, a imagem da variante e o ID da variante no URL serão atualizados ao lado dela, ou dentro de alguns milissegundos, e ele salvará o ID da variante atual com base no seleção. Quando eu clicar em Adicionar ao carrinho, se eu tiver selecionado uma camiseta vermelha grande, ela vai adicionar uma camiseta vermelha grande ao meu carrinho. Como você pode ver aqui, isso não tem interatividade, se eu aumentar a quantidade, não vai funcionar, se eu clicar no lixo, não vai funcionar. Estes upsells aqui em baixo não estão ligados. Se você está pronto para saltar para a próxima lição, nós realmente vamos conectar esta página ao Vue, e Vue vai lidar com todas essas interações e sincronizar todos esses dados. A página do carrinho, é claro, é um ótimo candidato para Vue.js. Na próxima lição, vamos realmente ligar esta página do carrinho. 7. Usando o Vue na página do carrinho: Na última lição, conectamos a funcionalidade para a seleção de variantes na página do produto. Agora, se você alterar isso vai mudar todos os elementos na página que estão vinculados a essa seleção. Vamos subir a aposta agora e trabalhar na página do carrinho. Como você pode ver aqui, há algumas interações possíveis. Primeiro, devemos ser capazes de atualizar a quantidade, para que possamos adicionar mais camisetas ao nosso pedido, adicionar menos camisetas ao nosso pedido, devemos ser capazes de remover um item de linha do carrinho, clicando neste botão de lixo. Também devemos ser capazes de adicionar qualquer uma dessas vendas ao carrinho e ter o carrinho atualizado ao vivo. Nesta lição, é isso que vamos construir usando o Vue. Apenas atualizamos a página, certificamo-nos de que tudo está sincronizado. Vamos seguir em frente do nosso modelo de produto aqui e abrir nosso modelo de carrinho. Nesta lição, nós vamos ter que refatorar alguns desses loops que foram criados em JavaScript, porque nós estaremos atualizando essas listas usando o Vue. Vai ser muito mais dinâmico ainda mais do que o que fizemos no modelo de produto anterior. Como já fizemos antes, vamos abrir uma tag de script na parte inferior do arquivo de modelo aqui, e usando a mesma convenção, eu vou chamar este aplicativo Vue CartPage. Então eu vou colocar esse objeto em um método de aplicativo criar Vue, então vue.createApp Cartpage.mount, e eu vou montá-lo para o elemento que tem o ID de CartPage. Agora, uma das maiores diferenças entre essa instância do Vue neste modelo em comparação com o modelo do produto é que não usaremos o Shopify Liquid para carregar os dados. A razão pela qual é que temos uma API chamada carrinho Ajax API que nos permite usar solicitação Ajax para coletar informações de carrinho e atualizar o carrinho. Na verdade, não precisamos usar o Shopify Liquid. Eu acho que pode valer a pena mencionar que nós poderíamos realmente usar a API Ajax em nosso modelo de produto também. Em vez disso, onde estamos criando os objetos de dados usando diferentes tags do Shopify Liquid, o que poderíamos ter feito em vez disso, e eu vou colar em algum código agora, é em vez disso aqui, basta comentar isso, então não é distração, em vez disso, o que poderíamos ter feito foi iniciado com um objeto de produto vazio e, em seguida, trouxe as informações do produto através da API Ajax também. Eu optei contra isso, e a razão é porque queremos que os objetos que preenchem no carregamento da página, isso pode causar problemas adicionais, se isso estiver vazio no carregamento da página e que é carregado, apenas torna um pouco mais difícil. Mas essa é uma opção também no aplicativo da página do produto, se você quiser evitar usar o Shopify Liquid. Vou colocar esse código de volta onde estava antes. Muito do mesmo conceito que na página do produto para a página do carrinho, podemos carregar as informações do carrinho usando o Shopify Liquid. Mas, a fim de atualizar o carrinho em tempo real, vamos precisar usar a API do Ajax também. O que vamos fazer é trabalhar apenas com o objeto carrinho através da API Ajax. Neste aplicativo específico, não precisaremos usar o Shopify Liquid. É uma grande diferença. Como mencionado anteriormente na classe, espero que você entenda um pouco sobre a API do Ajax. Se você não fizer isso, há uma lição que eu vou vincular na descrição de uma classe anterior da minha Skillshare. A API do Ajax é uma forma de reunir informações especialmente sobre o carrinho via JavaScript. Não precisamos usar o líquido da Shopify. Isso é perfeito para criar interações de carrinho de front-end, que vamos fazer aqui mesmo usando o Vue. Vamos realmente carregar em alguns dados de carrinho da API do Ajax agora. Como eu mostrei antes com o objeto de produto, vamos ter que começar com um objeto de dados vazio ou um objeto de carrinho vazio aqui. Sabemos que dentro do objeto do carrinho eles serão itens. Podemos definir uma estrutura básica aqui, mas até que a solicitação Ajax volte, não podemos realmente preencher esses dados ainda. Vamos apenas começar com itens de carrinho como uma matriz vazia. Mas o que vamos fazer no gancho de ciclo de vida criado é atualizar este objeto aqui mesmo. Acabei de mencionar um novo conceito aqui, ganchos de ciclo de vida. São basicamente diferentes partes do processo de criação e processo de montagem de uma instância do Vue, podemos acionar certas coisas. Assim como você faria quando você está escrevendo, digamos, jQuery ou qualquer outro JavaScript, você esperaria a página para carregar, para que o DOM para carregar a fim de executar algum JavaScript. Com o Vue, podemos nos conectar a diferentes métodos de ciclo de vida. Só uma rápida olhada do que é isso. Se houver uma pesquisa aqui, ganchos de ciclo de vida, temos befoRecreate, criado, BeforeMount, montado, BeforeUpdate, atualizado. Mas basicamente os principais comuns são montados e criados. O que eu vou fazer é assim que a instância do Vue foi criada, eu quero acionar essa solicitação Ajax e atualizar nosso objeto carrinho. Vamos realmente passar para a nossa página de carrinho e vamos adicionar nesse gancho de ciclo de vida logo após o método de dados lá. É apenas um método na raiz da instância do Vue, então vamos dizer quando a instância é criada, vamos criar uma solicitação get, e isso está usando jQuery. Você deve estar familiarizado com esta sintaxe. Estamos usando jQuery para acertar o endpoint cart.js, então vamos pipe um.then, tratar a resposta. Nós estamos indo para JSON analisar a resposta, modo que vai se tornar um objeto JavaScript então. Em seguida, vamos tomar esse objeto JavaScript que vai ser nosso carrinho e, em seguida, aqui vamos definir o objeto carrinho nos dados dessa instância para o objeto carrinho que é retornado da API. Se eu for aqui, atualize e abra o Vue DevTools. Você pode ver que o objeto carrinho da API Ajax está preenchendo nosso.data agora. Você pode ver tanta informação toda a partir do carrinho Ajax API, temos todas essas informações agora dentro da nossa instância Vue. Se você quiser verificar a solicitação da API do Ajax como sempre, você pode ir para a guia Rede, atualizando a página, aqui você deve vê-lo. Deve ser um dos primeiros lá, cart.js. Você pode ver que estamos fazendo este código de status de solicitação GET 200. Está tudo bem. Isto é o que volta. Incrível. Agora temos o nosso carrinho. O que queremos fazer é usar nosso objeto de cartão dentro Vue para renderizar essa peça agora em vez da Shopify Liquid, porque vamos atualizar o carrinho com base em se excluirmos um produto ou adicionarmos um novo produto ao carrinho. Haverá produtos adicionados e removidos dessa lista imediatamente, e não queremos ter que esperar Shopify Liquid faça um carregamento de página para atualizar esta tabela. O que eu vou fazer é apresentar algumas coisas novas que nunca vimos antes nesta aula, que é um loop, e algumas condicionais também dentro do Vue. Como você pode ver aqui, temos se o número de itens no carrinho é maior que zero, então queremos percorrer eles e mostrá-los. Não queremos mais fazer isso com a Shopify Liquid. Vamos refatorar isso para usar o Vue. O que eu vou fazer é me livrar disso e usar o que é chamado de tag template. Uma tag template é basicamente uma tag que não será renderizada no Vue, mas é usada apenas para lógica e loops. Eu poderia fazer uma div aqui e embrulhar tudo isso em uma div e depois fazer o meu v-if, mas eu não quero realmente renderizar uma div. Eu estou indo apenas para div-template, e você vai ver em apenas um segundo ele não vai renderizar um item, mas ele vai renderizar o que está aqui se a afirmação se é verdade. Para colocar um condicional dentro de nosso HTML do Vue aqui, podemos usar v-if, e o que eu quero fazer é semelhante a como acabamos de fazer isso no Shopify Liquid. Vou olhar para carrinho.items.length e verificar se é maior que zero. Se assim for, vamos fazer loop through, senão, o que eu vou fazer, encerrar esse modelo, criar um novo para o outro, e tudo o que você faz é v-else, e colocar em seu carrinho está atualmente vazio. Vou me livrar disso. Terminar se-declaração lá e atualizar a página aqui, ele deve parecer o mesmo. Mas uma coisa que você deve notar na verdade é que quando atualizamos a página, há uma pequena falha antes que ela apareça porque estamos calculando se ela deve ser mostrada ou não com base em JavaScript. Há uma fração de segundo onde o objeto carrinho está realmente vazio. Isso é realmente falso para uma fração de segundo antes que as informações do carrinho sejam carregadas e, em seguida, isso se torna verdadeiro. É um pouco defeituoso, mas resolveremos isso mais tarde nesta lição. Agora queremos substituir esse loop do Shopify Liquid por um loop do Vue for. Para isso, podemos apenas colocar o loop for diretamente sobre este elemento em si. Vou me livrar do começo e do fim para. Vamos mudar o recuo aqui. Podemos fazer v-for e o que podemos fazer aqui é para o item no carrinho. items. Vamos ver se vamos para as questões de fazer isso. Como você pode ver, nós temos uma posição, mas isso, é claro, quebrou tudo isso porque com nosso código anterior nós criamos esse objeto de item dentro de nosso loop para que pudéssemos pegar esses atributos. Vamos ter que refatorar isso também. Entrando aqui, não quero a versão do título do item do Shopify Liquid. O que eu vou fazer em vez v-html como fizemos antes, e fazer item.title. Usando as informações dentro do Vue para a imagem src, vamos apenas olhar para o nosso objeto de dados aqui, ver o título chegando agora. Vai para os nossos itens. Dê uma olhada. Temos essa imagem aqui, então podemos nos livrar disso. Coloque dois pontos porque é um valor dinâmico e estamos inserindo uma variável aqui, item.image. Vamos ver se funcionou corretamente. Sim. Então aqui para baixo para o preço final da linha do item, vamos formatar este valor em apenas um segundo, mas por enquanto, vamos apenas colocar no valor explícito. Faremos item, linha, preço. Verifique se isso funciona. Sim. Novamente, está no sentido e não está formatado, mas vamos corrigir isso em apenas um segundo. Então aqui dentro do valor, queremos corrigir isso para a quantidade real do item. Como sempre, se estamos colocando em uma variável aqui, valor dinâmico, precisamos tornar esse campo dinâmico colocando os dois pontos. Acho que é isso. Não há mais Shopify Liquid aqui dentro. Vamos nos livrar de um pouco deste espaço branco e trazer este recuo. Lá vamos nós. Na verdade, aqui na barra lateral, temos um. Vamos apenas remover esse v-html e em vez de entrar em um item específico, vamos apenas fazer o preço total do carrinho. Venda adicional, ainda temos um loop da Shopify Liquid aqui, mas vamos consertar isso em apenas um segundo. Eu vou atualizar aqui, e como você pode ver, todas essas informações agora vêm de nossa instância do Vue em vez da Shopify Liquid. Aqui, ele ainda é gerado pelo Shopify Liquid, mas chegaremos a isso depois de trabalharmos para corrigir essa quantidade, formatar os preços e permitir que um usuário remova um produto do carrinho usando esse ícone. Primeira coisa que vamos ligar este seletor de quantidade para que ele realmente atualiza a quantidade do item de linha no carrinho. Para isso, vamos criar um método, é semelhante ao que fizemos na página do produto quando a seleção é alterada, precisamos realmente acionar um método nesse evento, e neste caso, vamos ser enviando uma solicitação do Ajax para a API do Ajax do carrinho para atualizar o cartão no back-end. Vamos realmente ir atrás do nosso gancho de ciclo de vida criado aqui e criar um objeto de método, e dentro vamos criar este método carrinho de atualização. Agora os métodos que eu criei nesta instância do Vue, ou eu vou criar nesta instância do Vue com base nas diferentes funções dentro do carrinho Ajax API. Nós temos os principais é obter o carrinho, adicionar um item ao carrinho, atualizar quantidades e, em seguida, aqui está a mudança. Você também pode atualizar quantidades e propriedades. Você também tem Limpar, se você quiser limpar o carrinho, não teremos um botão para limpar o carrinho inteiro, mas vamos acionar este endpoint API para habilitar a remoção de um item de linha do carrinho ou reduzindo a sua quantidade. Ambos vão usar o mesmo ponto final e, portanto, o mesmo método. Voltando ao código, os dois atributos que vou colocar aqui, id variante e quantidade. Isso é baseado, é claro, no que passamos por aqui. Temos um id de variante e a quantidade, e então enviamos isso através de um objeto de atualização. O que eu vou fazer id e quantidade, e, em seguida, dentro deste método, eu vou iniciar a solicitação post usando jQuery e ele está indo para o carrinho update.js ponto final. Em seguida, vamos colocar no corpo da solicitação, e para isso, podemos fazê-lo assim, ou podemos fazê-lo como uma string. Acho que isto é um pouco mais fácil, por isso vou fazê-lo desta forma. Essencialmente, tudo o que precisamos fazer é ter atualizações nos colchetes, colocar o id da variante, e então é igual seguido pela quantidade. Eu só vou fazer isso, atualizações, e a propósito, esses ticks traseiros, se você não estiver familiarizado, nos permitem colocar essas variáveis dentro da string sem ter que sair e entrar na string uma e outra vez. Com os ticks traseiros definidos, eu vou colocar id com esta sintaxe lá, depois dos iguais, colocar a quantidade. Então vamos encadear um.then, assim como fizemos com get cart, tomar a resposta, JSON analisar a resposta, e então vamos ser devolvidos ao objeto carrinho para o qual vamos definir nosso próprio carrinho objeto igual a. Agora, note que nem todas as solicitações AJAX retornarão o objeto carrinho. Alguns deles retornam um item de linha única, mas nesse caso, o endpoint update.js retorna o carrinho. A mesma coisa, obviamente, para obter carrinho, com adicionar ao carrinho. Eu acredito que ele apenas devolve o item. Veremos isso em apenas um segundo quando construirmos isso em nossas vendas adicionais. Mas, por enquanto, podemos confiar que o endpoint do carrinho update.js vai nos devolver o carrinho. Obviamente, isso não será executado, a menos que o anexemos à nossa seleção. Então vamos para esse método de mudança. Assim como fizemos com o modelo do produto, vou colocar dentro deste @change, atualização de corte. Para o ID da variante, nós o temos definido no item. Lá vamos nós, ID da variante. Em seguida, o segundo argumento, a quantidade também é definido no item, é apenas quantidade. Agora, se deixarmos isso como está e depois voltarmos aqui e colocarmos isso, você verá que vai voltar para um, e isso é porque não definimos modelo V aqui. Então, assim como fizemos na página Produtos, precisamos mudar isso para V-model para obter essa ligação de dados bidirecional. Agora vamos atualizar a página e vamos ver se isso funciona. Como você pode ver, quando colocamos a quantidade, vemos o preço da linha e a atualização do preço total. Vamos verificar se todas as partes estão funcionando. Deve ser se ele está recebendo esse resultado, mas deixe-me atualizar nossa guia Rede aqui, limpar a guia Rede, clique nisso, e você verá que estamos atingindo esse endpoint update.js. Está voltando verde. Lá você pode ver o que estamos enviando para ele, e aqui você pode ver o que nós recebemos de volta. É um novo objeto de carrinho. Isso, como definimos na nossa opinião, vai actualizar esta situação. Se eu entrar em meus itens e eu rolar para baixo até onde ele tem quantidade. Onde está a quantidade? Lá está ele. Se eu clicar sobre isso, levará um segundo, mas depois que ele voltar da API, ele irá atualizá-lo em nossa instância view também. Shopify por padrão preços de saída como este, em centavos, sem formatação, então teremos que formatá-lo nós mesmos em JavaScript. Mas se você se lembrar, incluímos esse arquivo shopify-money.js e, dentro desse arquivo shopify.money.js, temos esse método de formato de dinheiro no objeto Shopify. Vamos usar isso agora. O que eu vou fazer é criar um novo método para que possamos usar isso em diferentes pontos em nossa aplicação. Aqui está o objeto métodos. Eu vou verificar cuidadosamente onde isso termina, e então antes que ele termine, eu vou adicionar em outro método aqui chamado preços de formato. Dentro deste método, há dois preços que eu quero atualizar. Quero atualizar o preço da linha e quero atualizar o preço total. Esses são os dois que podemos ver em nossa interface aqui. Mas eu não estou realmente indo para atualizar os próprios valores, eu vou criar um novo valor chamado preço de linha formatado e preço total formatado. Assim, mantemos os antigos. Você pode fazer como quiser, você pode substituí-los, mas eu vou deixar o original no lugar e apenas criar um novo. Vou criar um loop aqui, percorrendo os diferentes itens em nosso carrinho. Para cada item, vou criar um novo atributo, preço de linha formatado, que será igual ao preço da linha do item, mas com uma diferença de que estamos executando o método de dinheiro no formato da Shopify. Vou embrulhar isso em formato de dinheiro. Isso é para o preço da linha do item de linha. Então, para o carrinho geral, vou criar um novo atributo, preço total formatado, e isso será igual, novamente, ao resultado do dinheiro do formato Shopify (este.cart.preço total). Agora, é claro, nós não estamos executando isso em lugar algum, então vamos fazer isso depois de colocar o carrinho. Há dois lugares onde fazemos isso. Vou executá-lo aqui depois de atualizarmos o carrinho, e executá-lo aqui quando carregarmos o carrinho pela primeira vez. Agora, atualizando a página, você verá que ainda temos os mesmos valores aqui. Mas se entrarmos em nosso objeto aqui, você pode ver que temos um preço de linha formatado, e no carrinho, devemos ter um preço total formatado. O que temos que fazer é entrar em nosso HTML e atualizá-los. Então, em vez de preço de linha, preço de linha formatado, e em vez de preço total, preço total formatado. Em seguida, ele usará a versão formatada em vez da outra versão que vem diretamente da Shopify. Lá vai você. Agora temos nossos seletores de quantidade funcionando, e está atualizando nossos preços de linha e preço total. Agora, você deve ter notado aqui que nós não estamos realmente escrevendo código DRY quando temos este carrinho é igual a preços de carrinho e isso.format duas vezes duplicados. O que eu vou fazer é mover ambos para um novo método que eu vou chamar set cart. Ele vai tomar um objeto carrinho e, em seguida, ele vai colocar esse objeto carrinho no carrinho e, em seguida, formatar preços. Em vez disso, o que eu vou fazer é colocar este carrinho de conjunto, e então nós podemos fazer o mesmo para carrinho de atualização. Isso só torna nosso código um pouco mais DRY para que possamos reciclar o código. Aí está, ainda funciona. Agora que temos essa função de carrinho de atualização funcionando e estamos atingindo a API com sucesso, deve ser muito fácil habilitar esse botão para funcionar. Tudo o que eu vou fazer é criar um outro método após os preços de formato chamado remover do carrinho. Tudo isso vai levar é um ID de variante. Ele não precisa saber a quantidade porque a quantidade está implícita. A quantidade, é claro, será zero se a removermos do carrinho. O que eu posso fazer é apenas fazer isso, atualizar carrinho, colocar no ID, e então para o segundo argumento, a quantidade, basta colocar em zero. Agora vamos vincular isso no evento onclick para este botão. Eu vou usar essa sintaxe @ símbolo, e escrever aqui, “Remover do carrinho item.variant ID. Agora vamos ver se isso funciona. Perfeito. Acabamos de remover um item do nosso carrinho. Se eu voltar para a camiseta, vamos adicionar uma pequena camiseta vermelha. Você verá que está lá. Podemos atualizar a quantidade, podemos removê-la do carrinho, e tudo está funcionando. Essas são as nossas principais funções dentro da mesa do carrinho. Vamos fazer uma pequena pausa, e vamos realmente codificar estes upsells aqui. Nós vamos adicionar em outra função aqui para adicionar ao carrinho, bem como para atualizar e remover itens que já estão no carrinho. 8. Upsells e animações do carrinho: Claro, nem todas as lojas terão upsells em sua página de carrinho. Mas é uma boa oportunidade para aumentar o valor médio do pedido, oferecendo uma maneira fácil para os clientes adicionarem produtos adicionais ao seu carrinho. Usando Vue.js, podemos tornar essa interação muito suave e perfeita. Se entrarmos em nosso editor de código novamente, você pode ver que estamos trazendo esses valores por meio Shopify Liquid e estamos fazendo nossos loops e condicionais por meio do Shopify Liquid. Assim como fizemos aqui em cima, vamos precisar refatorar isso. A primeira coisa que precisamos fazer é obter esses upsells dentro de uma matriz em uma instância real view. Depois do carrinho, o que eu vou fazer é criar uma matriz chamada upsells. Aqui vamos carregar nessa coleção que estamos incluindo aqui, mas em nossos dados de visualização para que possamos tornar esta seção um pouco mais interativa e você verá por que precisamos fazer isso em apenas um segundo. Assim como fizemos na página do produto para variação, eu vou criar um loop Liquid aqui para trazer produtos de uma coleção particular. Vou usar a coleção de sapatos. Lembre-se, este valor aqui precisa corresponder à alça de uma coleção em sua loja se você importou os sapatos e, em seguida, criou uma coleção com esses sapatos e, em seguida, verifique se a alça é sapatos, então ele deve funcionar. Caso contrário, terá que fazer isso. Obviamente, nós vamos ter que colocar produtos no final aqui. Vou fechar isso, finalizar , e aí dentro, abrir um objeto e copiar alguns valores do Shopify Liquid. Tão maré. Seguindo esse mesmo formato, acho que vou passar por isso agora porque já vimos isso antes e estou basicamente copiando os dados do back-end da Shopify usando o Shopify Liquid em nosso front-end aqui. Vou avançar um pouco com isto. Certifique-se de terminar os objetos com uma vírgula aqui para que você tenha separação entre esses objetos. Como você pode ver aqui, estamos trazendo o título, o identificador, a imagem, o ID do produto; o que ficará claro por que estamos fazendo isso em apenas um segundo, e, claro, o ID da variante. Porque o ID da variante, como sabemos, é o que realmente é adicionado ao carrinho. Vamos atualizar nossa página e apenas verificar se os dados estão chegando. Como você pode ver aqui, nós realmente não temos nada em nossa matriz upsells, vamos verificar por que isso pode ser o caso. Vejo aqui que esquecemos um s em coleções. Aperte salvar nisso. Agora você pode ver que o array de vendas adicionais tem todas as mesmas informações que temos aqui e agora podemos percorrer isso em vez de usar o Shopify Liquid. Vamos entrar e refatorar esse código agora. Vou aqui dentro fazer um V-for ou V-Se sim. Se upsells.length for maior que zero. Podemos nos livrar desta declaração ao redor se agora. Esse é um código que não deveria estar lá. Eu só vou remover isso. Então dentro do loop, em vez de fazer este loop, o que vamos fazer é colocá-lo aqui. Eu vou fazer um modelo, V-para upsell em upsells. Colocamos isso em torno disso para substituir o for-loop. A fim de imitar este limite, eu vou mostrar-lhe em apenas um segundo como fazemos isso, nós vamos ter que adicionar no atributo extra aqui de índice. Isto irá rastrear o índice do item e da matriz, e então podemos fazer v-if índice é menor do que cinco. Atualizando a página, você pode ver que perdemos nossas vendas adicionais geradas pelo Shopify Liquid. Isso é porque nós realmente precisamos entrar aqui e atualizar esses atributos. Assim como fizemos com a tabela de carrinho acima, vou substituir estes por atributos de visualização. Título de venda adicional, e então para este, o src, vamos colocar os dois pontos na frente dele, remover isso e usar a imagem de venda adicional. Acho que é isso. Atualizando a página aqui, veja que ainda não funciona. Acho que a nossa questão aqui é que precisamos mover índice para o elemento por baixo. Esta é a diferença entre Vue 2 e Vue 3, você pode fazer isso no Vue 2, mas não no Vue 3. Refresque-se aqui. Lá vai você. Agora podemos ver que os produtos estão lá. Só temos de fazer com que este índice seja inferior a quatro e, no entanto, agora só temos os quatro produtos. Agora que estamos usando o Vue para exibir essas vendas adicionais em vez da Shopify Liquid, estamos na próxima etapa que é habilitar esses botões “Adicionar ao carrinho” para funcionar. O que eu vou fazer, vá para o código e vamos criar um novo método para adicionar ao carrinho. Temos a nossa remoção do carrinho aqui. Eu poderia colocá-lo antes da remoção para o carrinho. Adicionar ao carrinho. Para adicionar qualquer produto ao carrinho, precisaremos saber seu ID de variante. Como sempre, podemos consultar a referência aqui na documentação oficial da Shopify. Acabei de encontrar isso, pesquisando a API do Ajax da Shopify. Deve estar na API do carrinho logo ali. Então não é muito difícil de encontrar com um pouco de Google. Aqui vamos nós. Precisamos enviar através de uma matriz de itens com o ID da variante do produto e a quantidade de quanto queremos adicionar. Atualmente, nosso site, não temos a opção de adicionar mais de uma quantidade no momento de adicionar o produto ao carrinho da página do produto. Mas se tivéssemos isso, poderíamos usar esse valor para colocar como opção aqui, mas em nosso caso, vamos apenas colocar um para esse valor. Tudo o que precisamos é o ID da variante do produto, que vamos adicionar um ao carrinho. Vamos abrir um pedido de correio aqui. Vai ser carrinho add.js. Em seguida, vamos ter a matriz de itens e dentro vamos ter outro objeto e estamos apenas adicionando um item. ID será igual a ID. Esta sintaxe significa que nós não temos que fazer isso, nós podemos apenas fazer isso, e quantidade vai ser um como nós mencionamos pouco antes. Então, uma vez que obtemos uma resposta de volta da API, vamos fazer o que sempre fazemos JSON pausá-lo para que possamos tê-lo como um objeto JavaScript e, em seguida, tomar o item que ele retorna. O que vamos fazer? Vamos apenas log console porque nós não podemos realmente atualizar nosso carrinho como nós normalmente faria porque o adicionar ao carrinho solicitação Ajax realmente retorna um item em vez de um carrinho. Vamos voltar para aqui. Vamos abrir a guia Rede, fechar ou limpar a atividade de rede anterior. Vamos adicionar um item ao carrinho. Na verdade, antes de fazermos isso, temos de ligar isto. Então eu vou ter que agarrar adicionar ao carrinho, colocá-lo no evento clique aqui. Eu vou ter que colocar upsell.variant ID. Vamos atualizar aqui, limpar a guia Rede e clicar em “Adicionar ao carrinho” e vamos ver o que acontece. Se entrarmos, veremos que teremos uma matriz de itens retornados. Não é realmente item, seus itens. Aqui você pode ver os dados que estão sendo passados. Vou mudar isso para itens. Mas seja o que for, quando entrarmos no console, você deve ver que obtemos essa resposta de volta em nosso console porque nosso console registrou aqui. Se atualizarmos a página, você verá que adicionamos esse produto a um carrinho. Como mencionei, não recuperamos os objetos do carrinho. Então, como vamos garantir que este carrinho atualizado depois de adicionar um produto ao carrinho? Nesta situação, o que podemos fazer é simplesmente solicitar o carrinho novamente. Podemos fazer a mesma coisa que fizemos no criado. Pegando isso e colocando o carrinho. Mas isso seria um código muito seco porque nós estaremos repetindo a nós mesmos tendo exatamente o mesmo código em dois lugares diferentes. O que eu vou fazer é criar um novo método com este chamado get cart. Isto vai estar no início da nossa lista porque é central para a nossa instância de visão aqui. Desculpe eu chamei de começar, pegar carrinho. Então, em vez de executá-lo aqui, vou chamar isso de carrinho de compras. Exatamente o mesmo código, mas agora podemos pegar isso e executar o mesmo código neste método. Os itens voltam, mas acabamos de pegar o carrinho. Quando estamos executando Ajax adicionar ao carrinho, ele está realmente executando duas solicitações Ajax. Você verá que agora, infelizmente temos um erro. Esqueci de colocar uma vírgula aqui depois do método. Atualizando a página que você pode ver aqui. O que vamos fazer é tirar esta camiseta, e vamos adicionar sapatos loucos ao carrinho. Como você pode ver, há um pouco de uma falha lá com a imagem, mas você pode ver que sapatos loucos agora foram adicionados ao carrinho também. O que fizemos, adicionou o produto ao carrinho usando a API Ajax e, em seguida, executou outra solicitação para a API para buscar o carrinho inteiro. É mais fácil assim do que tentar adicionar o item ao objeto de cartão existente e atualizar o total. Acho que é mais fácil obter o carrinho novamente depois de atualizar o carrinho ou adicionar a ele. Agora conectamos todas as interações principais. Podemos atualizar a quantidade de itens no carrinho. Podemos remover um produto do carrinho. Podemos adicionar um novo produto desses upsells para o carrinho, mas há algumas pequenas coisas aqui que podemos fazer para tornar a experiência do usuário mais agradável e suave. Número 1, se eu adicionar um produto do carrinho upsell ao carrinho, então eu devo remover esse produto das vendas adicionais do carrinho ou, no mínimo, indicar que esse produto já foi adicionado ao carrinho. Se eu simplesmente clicar em “Adicionar ao carrinho” no mesmo produto novamente, tudo o que ele vai fazer é atualizar essa quantidade, que pode ser bom, mas eu acho que poderia definitivamente ser melhorado. A outra coisa é que quando você está esperando que a adição ao carrinho aconteça, não há feedback para o usuário. Então, de repente você clica no botão, nada acontece e, em seguida, alguns segundos depois, uma vez que a solicitação assíncrona foi concluída, então ele aparece de repente em seu carrinho. A outra coisa é que estes não têm nenhuma transição agradável. É tudo rápido e um pouco rápido demais, e queremos suavizar isso um pouco. Isso é o que faremos na parte final deste vídeo aqui. O que eu vou fazer primeiro é criar uma matriz filtrada de upsells. Como eu mencionei, se um upsell particular é adicionado ao carrinho, eu quero remover isso da matriz upsells e não mostrá-lo nesta lista de upsells. Para fazer isso, o que eu vou fazer é usar uma propriedade computada. Vou criar uma propriedade computada. Gosto de fazer isso antes dos métodos. Vimos as propriedades calculadas na última lição sobre o modelo de produto. Vamos usá-lo novamente aqui para criar uma propriedade computada chamada upsells filtrados, que será apenas uma versão filtrada dos upsells. O que eu vou fazer, isso vai ser um pouco complicado código. Mas o que estamos tentando fazer é encontrar a interseção de itens no carrinho e na matriz upsells. Se estiver no carrinho, remova-o deste array de venda adicional filtrada. Vou dividi-lo em dois passos. Primeiro, vou obter a lista de produtos no carrinho. Vou chamar esses produtos em um carrinho. Mas porque nós vamos estar olhando para cima através do ID da variante, essa é a maneira que vamos identificar, vamos usar uma função de mapa em JavaScript. Em vez de dizer isso.cart.items, que lhe dará a lista de objetos, eu vou transformar isso em uma matriz direcionando o valor específico da ID do produto do item. Vou te mostrar o que isso faz em um segundo. Eu vou converter isso em uma string usando o método de duas cordas. Não podemos fazer um log de console, infelizmente dentro de uma propriedade computada. O que eu gosto de fazer é apenas para fins de depuração, é movê-lo para fora da propriedade computada em algo como criado. Em seguida, ele será executado no carregamento da página. Se formos agora estou atualizando a página, infelizmente, ela está voltando com uma matriz vazia. Eu acho que isso é em grande parte porque ainda estamos esperando no carrinho para chegar da API Ajax. Um pouco de hack, mas eu vou colocar um tempo limite aqui para fazer com que ele seja executado um pouco mais tarde, talvez dois segundos depois do que era antes. Vamos apenas obter este código para executar dois segundos após a criação. Como você pode ver, temos um array com todos os IDs de variante. Se adicionarmos outro produto ao carrinho, temos sapatos loucos lá dentro. Vamos refrescar. Dois segundos depois, veremos um array com todas as nossas variantes IDs. Movendo isso de volta para a propriedade computada, o que eu vou fazer é pegar essa matriz de IDs variantes representando os produtos já no carrinho, e então eu vou filtrar as vendas adicionais com base nisso. Indo para filtrar as vendas adicionais, levar cada venda adicional individual e, se não, os produtos no carrinho incluem ID de produtos de venda adicional. Este é um pedaço de código um pouco longo. Mas basicamente o que estamos dizendo aqui é que isso retornará verdadeiro se os produtos em carrinhos ou matriz de IDs variantes que se relacionam com os produtos no carrinho, inclui o ID do produto da venda adicional. Basicamente, se o upsell estiver no carrinho. Se não, queremos devolver esses upsells. É basicamente filtrar qualquer um dos upsells que já estão no carrinho. O que podemos fazer agora é em vez de correr através de upsells, aqui podemos colocar em filtered_upsells, dando-lhe tempo suficiente para carregar e atualizar nossa página aqui. Devemos começar a ver agora que nenhum desses produtos já está no carrinho. Se eu adicionar Kicks Old School, você verá que a lista de upsells aqui em baixo atualiza. Filtramos as vendas adicionais que já foram adicionadas ao carrinho. Se eu remover isto, verá que os Sapatos Insanes voltam para o conjunto de vendas adicionais. Agora resolvemos esse problema com os upsells. Não queremos vender um produto que já tenha sido vendido. Queremos removê-lo se já estiver no carrinho. O que eu quero fazer, no entanto, quando eu adicionar um produto ao carrinho é fornecer alguns comentários para o usuário. O que podemos fazer é usar uma declaração if para isso. O que eu vou colocar aqui no botão Adicionar ao carrinho, eu vou colocar em outro botão à frente dele. Verá por que estou fazendo isso em um segundo. Vou dar a esta classe de upsell-ATC. Na verdade, poupar-me algum tempo. Posso copiar isto. O que eu vou fazer também é adicionar uma classe modificadora aqui, upsell-button — adicionando. O que estou prestes a fazer aqui é mudar o estado do botão. Em vez de adicionar ao carrinho, ele vai dizer adição, e esse estilo já deve ser configurado no arquivo CSS tema. Atualizando a página aqui, você verá que cada um deles tem esse estado de adição, mas queremos alternar entre eles com base em se um produto está sendo adicionado ou não. Como fazemos isso é adicionar outro atributo aos nossos dados. Podemos entrar aqui e criar um estado de carregamento. Quando a página é carregada pela primeira vez, fica vazia e depois de um tempo, elafica vazia e depois de um tempo, as solicitações assíncronas para a API do Ajax retornarão o carrinho e o atualizarão. No carregamento da página, vamos tornar o carregamento verdadeiro. Mas depois de cada pedido do Ajax onde terminamos algo, vamos colocar o carregamento em falso. Que situações são essas? Se nós rolar para baixo aqui, poderíamos possivelmente colocá-lo aqui após get_cart. Mas como você pode ver, ele atinge o set_cart. O que eu vou fazer é descer para set_cart e depois de format_prices, eu vou colocar neste carregamento igual a false. Claro, o carregamento será verdadeiro quando carregarmos a página pela primeira vez, mas depois que ela for definida como false, precisamos da oportunidade de configurá-la como verdadeira novamente. Para isso, o que vamos fazer é quando estamos adicionando um produto ao carrinho, vamos definir este carregamento é igual a true. Quando estamos removendo um produto do carrinho, vamos definir isso.loading é igual a true. Nós não vamos fazer isso para carrinho de atualização porque isso é bom para mim, nós não vamos colocar em animação para isso especificamente. Mas para remover do carrinho, quero que haja um estado de carregamento. Pode não estar claro exatamente agora enquanto estamos fazendo isso, mas em breve você verá como esse atributo de carregamento nos permitirá criar algumas transições mais agradáveis. Vamos dar uma olhada se eu remover isso agora, vamos atualizar aqui. Comece isso de novo. Se eu clicar nisso, ele vai carregar por uma fração de segundo, e então quando terminar o carregamento, ele vai ficar falso. Mesma coisa com Adicionar ao carrinho. Uma vez que eu adicioná-lo ao carrinho, ele vai carregar true por uma fração de segundo e, em seguida, ir para false. Nós vamos usar isso em apenas um segundo, mas antes de fazer, eu quero adicionar mais um estado de carregamento e isso é nesses itens específicos. Nós vamos ter que fazer isso em uma base de item individual aqui. Você não pode fazer isso no objeto geral do carrinho. O que eu vou fazer é passar para a nossa matriz upsells aqui e colocar em um estado de carregamento em cada um dos itens de venda adicional. Da maneira que eu vou fazer isso, eu vou chamá-lo de adição, obter real específico aqui, e chamá-lo adding_upsell. Por padrão, isso será definido como false porque quando estamos carregando a página, não estamos adicionando uma venda adicional. Mas quando estamos fazendo isso Adicionar ao carrinho aqui, queremos definir o atributo adicionando upsell na venda adicional particular como true. O que vamos ter que fazer para acessar o objeto real é encontrar o upsell primeiro porque agora, nós só temos o ID da variante upsell. Vamos ter que procurar aquele objeto de venda adicional. Vou criar uma venda adicional const aqui, e depois encontrar dentro da matriz upsells o upsell com o ID da variante que é passado em upsell.variant_id igual id. Novamente, agora que temos o objeto variante, podemos ir aqui e fazer upsell.adding_upsell é igual a true. Então, quando terminar o carregamento, podemos definir o atributo adding_upsell no upsell particular como false. Vamos voltar para o nosso aplicativo front-end agora. Vamos observar a matriz upsells à medida que adicionamos um produto ao carrinho. Às vezes, isso acontece tão rápido que nem sequer tem tempo para atualizar. Vou clicar em “Adicionar ao carrinho” aqui e você verá que ainda diz falso. Se eu ficar um pouco mais rápido, então você verá que ele muda para verdadeiro antes de ir para falso. Lá vamos nós, verdadeiro ou falso. Você pode ver que a tabela do carrinho estava carregando então e o estado de venda adicional adicionado também foi verdadeiro. O que podemos fazer agora é adicionar uma transição para a tabela do carrinho e, em seguida, também trocar esses botões dependendo do estado da venda adicional em termos de adicionar ou não ao carrinho atualmente. Vamos voltar para dentro. Tudo o que tenho a ver com esses dois elementos, eu tenho eles lado a lado, mas agora, eu posso apenas colocar V-ifs neles. Vou fazer v-if=product.adding_upsell, então vamos exibir isso. Caso contrário, vamos exibir o botão habitual Adicionar ao carrinho. Isso deve ser tudo o que é necessário para a interação com o produto upsell, parece que eu cometi um erro aqui adicionando upsell. Eu nomeei este produto em vez de upsell, upsell.adding_upsell. Atualização. você pode ver que o botão não aparece porque não estamos adicionando vendas adicionais no momento. Mas se eu clicar nisso, você verá que os botões alternam brevemente para dar a ele um estado de carregamento antes de adicionar ao carrinho, e então o item desaparece porque agora ele foi filtrado para fora da nossa matriz de vendas adicionais. Posso fazer isso com os Sapatos Gnarly também. Como você pode ver, ele tem um estado de adição antes de eu adicioná-lo ao carrinho. Lá vamos nós. Nós demos upsells um pouco de um estado de carregamento lá, e agora, vamos embrulhar a tabela do carrinho em um pouco de um elemento de transição. Aqui mesmo, dentro da tabela do carrinho, vou adicionar um elemento de transição como fizemos no modelo do produto. Coloque tudo isso dentro dos elementos de transição chamados de elementos de transição nome fade. Finalmente, mais um passo, o que vamos ter que fazer é verificar o estado de carregamento. Vamos cortar tudo isso, mas ainda temos na minha prancheta. Crie uma div e coloque um atributo em seu código v-show. Se não está carregando, vai aparecer. Isso pode parecer um pouco redundante, mas vai dar essa funcionalidade de desvanecimento e desvanecimento por não mostrar quando está carregando. Quando ele não está carregando, ele não vai aparecer e isso irá desencadear a transição. Então, quando voltar a ligar, a transição irá desvanecê-la. Vamos dar uma olhada em como isso funciona. Como você pode ver, quando eu atualizo a página, o carrinho desapareceu. Se eu adicionar um produto ao carrinho, o carrinho desaparece. Se eu remover um item do carrinho, ele desaparece. A razão pela qual ele está fazendo isso, a maneira como temos que agir assim é porque estamos definindo esse estado de carregamento quando estamos adicionando um produto ao carrinho aqui e também estamos atualizando esse estado de carregamento quando estamos removendo produtos do carrinho também. Também estamos no carregamento da página, tendo configurado para carregar até que o set_cart termine o processamento e, em seguida, o carregamento vai para false. Isso torna o estado de carregamento da nossa mesa de carrinho um pouco mais agradável. Tenho certeza que você poderia melhorar isso muito mais. Eu não sou necessariamente um designer, mas esta é a funcionalidade e os princípios fundamentais dentro de vista para fazer isso acontecer. Aí está você. Se fecharmos nossas Ferramentas de Desenvolvedor, agora temos nossa página do produto trabalhando com algumas transições agradáveis. Posso adicionar uma camiseta vermelha média ao meu carrinho. Vá até aqui, venda com alguns sapatos insanos. Vá para Checkout se eu quiser ou aumente a quantidade. Talvez colocar isso em três. Isso é tudo sincronizado com o nosso carrinho Ajax API. Se eu estivesse em uma loja de produção real, eu poderia clicar “Checkout” aqui e verificar. Na verdade, acho que pode me deixar checar. Lá vai você. Aqui está, essa é a minha seleção. Sim, isso é praticamente tudo para a página do carrinho. Eu sei que este é um vídeo bastante longo ou conjunto de vídeos para obter esta página carrinho de trabalho. Mas essa é a maior área de interação em um site da Shopify com maior frequência. Pense em quando você vai fazer compras, as coisas ficam nas prateleiras até que você as pegue e as coloque em seu carrinho ou as coloque de volta. A principal interação do usuário com seu site que faz sentido usar o Vue com pelo menos são as interações do carrinho. Obviamente, também, a variante comutação muito útil para ter Vue para isso. Como mencionei anteriormente, se você quisesse filtrar sua página de coleção, você poderia ter alguns filtros agitados aqui. Se você tivesse um monte de produtos dentro sua loja e um monte de atributos diferentes para filtrar, você pode tornar este um aplicativo Vue também. Mas o princípio principal é que sempre que você tem algumas interações que precisam acontecer ao vivo no front-end, você vai pelo menos querer usar JavaScript e eu encorajaria você a usar o Vue ou algum outro tipo de framework. Obviamente, você aprendeu Vue nesta aula, então é isso que eu recomendaria, mas este deve ser um bom ponto de partida para você começar a incorporar Vue em seus projetos. Dependendo de quando você estiver assistindo a essa aula, o próximo vídeo pode ser um vídeo bônus sobre o uso Vuex caso você esteja compartilhando dados em diferentes partes. Usamos o carrinho e a página do carrinho aqui, mas talvez você queira atualizar o carrinho em uma página diferente e sincronizar esses dados. Estaremos aprendendo sobre a loja Vuex no próximo vídeo, dependendo de quando você estiver ouvindo isso. Caso contrário, eu vou vê-lo na conclusão, e eu estou ansioso para começar em seu próprio projeto de classe. 9. Bônus: armazenando dados do carrinho com o VueX: Bem-vindo a este vídeo bônus sobre Vuex. Eu queria cobrir isso como um bônus nesta classe, pois é um conceito no Vue que já utilizei anteriormente usando o Vue no desenvolvimento do tema da Shopify e algo que pode ser valioso para você aprender também. Nesta aula até agora, criamos dois aplicativos em nosso tema da Shopify, um para a página do produto e outro para a página do carrinho. Atualmente, estes são muito separados. Cada um deles carrega seus próprios dados, propriedades e métodos, e estes são exclusivos para cada instância. Para compartilhar dados entre várias instâncias e componentes em nosso tema da Shopify, podemos utilizar uma biblioteca chamada Vuex. Se eu procurar Vuex online, o primeiro link é o que é Vuex. Como afirma aqui, o Vuex é um padrão de gerenciamento de estado e biblioteca para aplicativos Vue.js. Ele serve como um armazenamento centralizado para todos os componentes em um aplicativo. Temos regras que garantem que o estado só pode ser mutado de uma forma previsível. Essencialmente, o Vuex nos permite criar um armazenamento centralizado de dados que todas as instâncias e componentes do Vue podem acessar. Agora, por que precisaríamos disso especificamente no desenvolvimento do tema da Shopify? Bem, há um exemplo claro e que é se fôssemos permitir interações de carrinho de front-end fora desta página de carrinho. Por exemplo, um recurso que você deve ter notado em um site da Shopify antes é um carrinho lateral. Como nesta loja, por exemplo, se adicionarmos um produto ao carrinho aqui, você verá que temos uma pequena interação aqui. Temos algumas informações do carrinho aqui, mas também podemos ir para a página do carrinho real e ver as mesmas informações. Se eu fosse adicionar um desses upsells para o carrinho, isso é refletido neste carrinho lateral também. Isso significa que os dados são compartilhados entre o carrinho lateral e a página do carrinho. Basicamente, vem do mesmo lugar , vem do objeto do carrinho. Tudo isso precisa estar em sincronia. Então, como podemos fazer isso é através de uma loja Vuex. Agora observe que sempre que me refiro a uma loja Vuex, estou me referindo a um armazenamento centralizado de dados, não à própria loja da Shopify. Às vezes, pode ficar um pouco confuso falar sobre lojas Vuex nas lojas Shopify. Portanto, vou me certificar de me referir à loja Vuex como a loja Vuex ou Vuex para encurtar. Tudo bem, então neste vídeo, vamos mover os dados e métodos do carrinho para uma nova loja Vuex. Atualize nossa página de carrinho e, em seguida, mostrarei como podemos usar essa nova fonte de verdade para atualizar outras áreas do nosso tema. Soa bem? Vamos começar. Certo, a primeira coisa que vamos fazer é incluir o roteiro para Vuex. Tudo bem, então eu vou voltar para esta documentação em vuex.vuejs.org, clique na instalação, e o que nós vamos ter que fazer é garantir que a versão que estamos usando é compatível com a versão que estamos usando do Vue. Então, nesta classe, usamos o Vue 3. Então, se você está seguindo o mesmo que esta classe e usando o Vue 3, então você vai ter que usar a versão quatro do Vuex. Então clique em V4 aqui, mude para essa documentação, vá para a instalação, e eu vou pegar este link CDN do Vuex 4. Entendido, vá para o nosso código. Em nosso theme.liquid após nossa tag script Vue, eu vou adicionar em Vuex. Então, apenas certificando-se de que estamos usando Vuex versão 4 se estamos usando Vue versão 3. Agora que incluímos a biblioteca da Vuex, podemos criar nossa loja Vuex. O que eu gosto de fazer é colocá-lo dentro de um trecho. Como você pode ver, este tema não tem trechos agora. Então eu vou realmente criar a pasta de snippets. Dentro da pasta de trechos, vou criar um arquivo chamado store.js.liquid. Não vamos usar variáveis líquidas aqui. Então, uma alternativa poderia ser colocá-lo em theme.js, ou criar um arquivo js e ativos e incluí-lo. Mas isso nos permite incluí-lo em páginas específicas usando a palavra-chave include, que mostrarei em apenas um segundo. Então o que vamos fazer é fazer isso imediatamente. Vamos usá-lo na página do carrinho. Então eu vou arrumar algum espaço aqui em cima e vamos incluir esse trecho. Incluir store.js. Nós não precisamos de.liquid parte porque isso está implícito quando usamos instruções de inclusão. Tudo bem. Então, duas partes para ter tudo isso ligado. Primeiro, vamos ter que criar uma loja aqui. Então nós vamos ter que vincular essa loja para as instâncias que estão indo para usá-lo. Então eu vou usar a convenção padrão aqui. Não vamos esquecer de abrir nossas tags de script porque estamos em um arquivo.liquid. A sintaxe padrão e convenção de nomenclatura padrão é apenas chamar nossa loja, loja. Podemos então usar o método de armazenamento criar do objeto Vuex como este. Aqui dentro criaremos nossa loja Vuex. Todas as nossas opções para a loja vão direto aqui. Antes de fazer isso, eu só quero ligá-lo na nossa instância do Vue aqui. O que eu vou fazer é mudar isso para um nome mais apropriado porque é o objeto de opções. Vou renomear isso para opções de página de carrinho, opções de página de carrinho e, em seguida, vou armazenar isso em uma variável. Então vamos chamar esta página do carrinho. Então, isso irá armazenar o aplicativo real agora em vez das opções. Então o que eu vou fazer é montar a página do carrinho e adicionar mais um passo aqui para usar nossa nova loja Vuex. Então o que fazemos é usar e então colocamos o nome da variável da nossa loja Vuex, que acabamos de chamar de loja. Idealmente, devemos ter apenas uma loja para todo o site. Então faz sentido chamá-lo de loja e então podemos apenas incluí-lo assim. Eu vou voltar para a loja aqui e apenas no meu editor de código, mudar a detecção de idioma para HTML. Isso vai se livrar dessas linhas rabugentas. Na verdade, há mais um passo e que é entrar em nossas opções aqui e apenas certifique-se de adicionar na loja para as opções. Ok, este é o equivalente a loja: loja. Então podemos economizar espaço e colocá-lo como loja. Em seguida, isso agora nos permite fazer referência ao armazenamento dentro desta instância. Certo, então o que vamos fazer é mover nossos dados de carrinho para nossa loja recém-criada. Então eu vou cortar isso. Vou deixar os upsells lá dentro. Dentro da nossa loja, vou criar uma função estatal. Então, assim como fazemos quando estamos retornando dados dentro de uma instância do Vue, eu vou copiar e colar isso em nosso estado aqui. Acho que podemos trazer de volta alguns entalhes aqui. Sim. Tudo bem. Agora, um pouco da teoria Vuex. Temos alguns conceitos fundamentais aqui. State, que é basicamente getters de dados, que nos permitem acessar esses dados que acabamos de definir no estado da loja. Mutações, que são a única maneira de alterar dados em uma loja Vuex. Então mutações significam sempre que mudamos dados. Ações que enviamos para cometer mutações, e então módulos que não estamos usando nesta lição. Mas essencialmente o que vamos fazer é usar getters para obter os dados. Então vamos usar ações e mutações para definir os dados. Ok? Agora, se você quiser se aprofundar sobre por que usamos mutações e ações para alterar dados e não apenas um ou outro, você pode ler sobre isso aqui na documentação. Eu não vou entrar na teoria das ações e mutações neste vídeo em particular, mas toda a informação está lá se você quiser olhar para ela. Certo, então vamos voltar para nossa loja bem aqui, nossa loja Vuex. Vamos pensar sobre quais mutações podemos precisar fazer. Basicamente, a única mutação que precisamos fazer aqui é atualizar o carrinho. Lembre-se de cada vez que estamos mudando o carrinho, estamos apenas recebendo um novo objeto carrinho da API do Ajax e definindo esses novos dados. Ok? Então só precisamos de uma mutação. Você pode escolher se quer fazer isso ou não. Mas gosto de usar a convenção da capital para nomear mutações. Então eu vou abrir um objeto de mutações. Aqui, vou criar uma mutação de carrinho. O primeiro argumento será o estado. Isso é padrão ao executar mutações. Então a próxima coisa vai ser a carga útil, que vai ser o carrinho. Então é isso que vamos passar. Então tudo o que vamos fazer é fazer carrinho de estado igual a carrinho. Novamente, isso pode parecer um pouco redundante, mas há algum método para a loucura com Vuex. Está seguindo um padrão específico. Novamente, se você quiser ler mais sobre isso, você pode fazê-lo na documentação. Mas depois de criarmos essa mutação, o que vou fazer é criar algumas ações. É aqui que começamos a transferir algumas dessas funções assíncronas da nossa página de carrinho para a nossa loja Vuex. Mas antes disso, eu quero criar algum código de trabalho e mostrar que isso está realmente funcionando. Então o que eu vou fazer é fechar isso e abrir isso em uma aba dividida. Vamos nos livrar de todas as outras guias aqui. O que vamos fazer é refatorar isso, mover, algum desse código para aqui. Agora, a primeira coisa que acontece quando carregamos a página, claro, é pegar o carrinho. Então vamos recriar isso usando esta loja Vuex. Ok? Então o que eu vou fazer é antes de ações, na verdade, eu vou abrir um objeto getters aqui. Aqui podemos colocar nossos getters. Novamente, isso vai parecer um pouco redundante. Por que não podemos apenas acessar o estado diretamente? Novamente, há uma teoria por trás de que você pode olhar para cima na documentação. Mas como isso funciona é, a fim de chegar ao objeto carrinho, precisamos escrever uma função assim, e ele só vai retornar state.cart. Então, a fim de obter esses dados de nossa loja Vuex, lembre-se que nós já incluímos a loja aqui em cima, nós só precisamos criar uma nova propriedade computada que apenas puxa esses dados da loja Vuex. Então tudo o que eu vou fazer é substituir o objeto carrinho que acabamos de remover pela propriedade computada. Aqui vamos nós, eu só vou chamá-lo de carrinho e é aqui que trazemos nossos dados da loja Vuex, eu vou para a primeira referência store.state.cart. Agora, é claro, quando você carregar a página pela primeira vez, nós vamos ter esses dados. Então é por isso que no criado, nós executamos get_cart, mas agora vamos estar fazendo isso através do Vuex. O que vamos fazer é colocar isso em ação. Então aqui em baixo, eu vou criar uma ação chamada get_cart, e a partir do primeiro argumento, eu vou retirar o método commit. Esta é a prática padrão com ações, e nós não temos uma carga útil aqui, então isso é tudo que eu preciso e então o que eu vou fazer é imitar a ação get_cart aqui. Eu vou pegar tudo isso, trazê-lo para dentro, e em vez de executar este método set cart, eu estou realmente indo para executar a mutação set cart e o termo para isso é chamado de commit. O que fazemos aqui é em vez disso nós fazemos store.commit, então nós colocamos o nome da mutação set_cart, e então como o segundo argumento, nós colocamos a carga lá, que é o que nós somos retornados da API. Então isso vai definir o valor do carrinho para o que obtemos da API. Novamente, isso é exatamente o que temos aqui. Só estamos colocando na Vuex. Então em criado em vez de this.get_cart, vamos em vez disso despachar a ação que temos aqui. Então o que eu vou fazer é armazenar.dispatch get_cart. Agora, se executarmos esse código agora, vamos voltar ao nosso carrinho de compras, abrir nosso DevTools, atualizar a página; você verá que quando formos procurar aqui, nossa tabela de carrinho está lá, mas definido atualmente para exibir nenhum. Você pode ver que seu carrinho está vazio, mas ele não está sendo exibido como você pode ver aqui. A razão é porque agora perdemos essa parte do código aqui onde definimos carrinho e alteramos o carregamento para false. Então o que nós vamos ter que fazer é obter essa ação para retornar uma promessa e então quando essa promessa resolver, então nós vamos definir o carregamento de volta para falso. Então o que precisamos fazer para isso é aqui, onde os pedidos de get começam, precisamos apenas colocar o retorno na frente dele. Então agora podemos colocar um ponto e depois aqui. Então, quando a ação get_cart terminar de despachar, terminar a execução, então vamos definir o carregamento como false. Tudo bem, agora vamos atualizar a página, e você pode ver agora que temos esse valor chegando. Agora, se formos comprar o T e adicionamos, digamos uma pequena camiseta preta ao carrinho, você verá que ela aparece não a partir de nossos dados de carrinho que são armazenados na instância de exibição, mas de uma propriedade computada do carrinho que está puxando da nossa loja . Então nós temos o começo do nosso refator aqui, e podemos ver que isso está saindo da nossa loja Vuex. Vamos voltar ao código e continuar trabalhando nisso. Então, movendo-se para baixo em nossos upsells filtrados, eu posso ver isso. Carrinho. Agora estamos usando carrinho como uma propriedade computada, puxando esse valor, então eu vou substituir este.cart por store.state.cart. Essa é a primeira mudança, e então à medida que descemos, não precisamos mais de get_cart porque isso é agora uma ação Vuex. Vamos apenas verificar onde nos referimos a isso. Como você pode ver, estamos usando também para adicionar ao carrinho. Vamos apenas remover isso e, em seguida, refatorar adicionar ao carrinho quando chegarmos a ele. Em set_cart, estamos fazendo isso através da mutação agora, então eu posso remover isso, mas o que eu vou ter que fazer é que há um passo extra aqui para preços de formato. Então vamos mover essa lógica para fora daqui, e vamos colocá-la na mutação real. Eu vou remover preços de formato e dentro desta mutação aqui, vamos pegar o objeto carrinho que é enviado como a carga útil, e vamos atualizar isso antes de colocá-lo em nosso estado. Para isso, tudo o que temos que fazer é remover este ponto porque agora estamos usando o carrinho que passou, nesta carga útil. Então isso vai criar esses novos preços de linha formatados, e preço total formatado, e, em seguida, inseri-lo em state.cart. Tudo bem, então de volta às ações aqui. Vamos mais para baixo. Nós podemos nos livrar do set_cart agora, e nós vamos ter que criar um novo método ou uma nova ação para este aqui mesmo, o carrinho de atualização. Para este, eu vou supor que a única vez que estamos atualizando carrinho estamos apenas fazendo isso para um item de linha, então vamos manter esta sintaxe. Então o que eu vou fazer é pegar este código assíncrono aqui e vamos criar um método de carrinho de atualização aqui e, claro, o primeiro argumento vai ser commit, e então o segundo argumento vai ser um objeto com esses mesmos dois argumentos; ID e quantidade. Então dentro podemos fazer esse pedido de post e para que possamos fazê-lo retornar uma promessa, colocamos retorno na frente do pedido Ajax. Isso, claro, nos permite encadear um ponto no despacho, como fizemos aqui. Vamos nos livrar desse código e, claro, isso.set_cart precisa ser substituído por store.commit set_cart e, em seguida, em nosso método de cartão de atualização aqui, tudo o que temos a fazer é acionar essa ação ou usar o Vuex terminologia, despache a ação. Então fazemos isso a partir do objeto de armazenamento, despacho, atualização de carrinho e, em seguida, um objeto com os dois parâmetros, ID e quantidade, e isso é tudo o que precisamos fazer. Porque no nosso método de carrinho de atualização estamos apenas usando isso para atualizar a quantidade como você pode ver aqui, não precisamos atualizar estados de carregamento, portanto, não precisamos encadear um ponto no final. Mas para add_to_cart, vamos definitivamente ter que usar promessas. Na verdade, vamos ter que encadear algumas promessas juntos. Vou te mostrar como fazemos isso agora. Então, após update_cart, vamos colocar add_to_cart, e vamos usar a mesma sintaxe de antes. O primeiro argumento que vamos retirar o método commit e, em seguida, a carga vai ser ID. Vamos puxar este pedido ajax para aqui como eu fiz antes para que possamos lidar com a promessa como ele volta da ação, colocar um retorno na frente dele, e infelizmente o recuo é tudo errado aqui, Então deixe-me consertar isso rapidamente. Tudo bem, isso serve. Agora, para refatorar este código, temos que substituir este método por outro despacho. Então vamos lidar com isso quando a promessa voltar da Vuex para nossa instância. Vamos apenas remover isso e vamos fazer isso dentro da instância um pouco mais tarde. O que eu vou ter que fazer para despachar uma ação de dentro de outra ação é apenas retirar o método de despacho aqui neste objeto, e então em vez de this.get_cart, eu vou executar despacho get_cart, e então isso é tudo o que precisamos fazer. Porque vamos lidar com a promessa dentro da nossa instância, não precisamos fazer mais nada depois disso na loja Vuex. Então vamos fazer isso agora. Vamos entrar aqui, em add_to_cart, e vamos fazer nosso despacho, armazenar, despachar, add_to_cart com nosso payload de ID, e então podemos lidar com a promessa assim e primeiro atualizar o estado de carregamento para false, e em seguida, upsell, adicionando upsell, false. Faz sentido atualizar esses estados de carregamento porque isso se relaciona com a interface do usuário que estamos lidando na página em si, então dentro desta instância específica, mas tudo a ver com os dados do carrinho deve ser centralizado dentro deste Loja Vuex. Espero que isso explique por que estamos lidando com algumas promessas dentro da Vuex e algumas promessas dentro da instância Vuex. Todos esses atributos de carregamento tinham a ver com a interface do usuário na página do carrinho em si, não com os dados do carrinho. Finalmente, temos este método remover do carrinho, que está acionando este carrinho. Update. O que eu vou fazer aqui é substituir este método de carrinho de atualização pela ação de carrinho de atualização em nossa loja Vuex. Como já vimos antes, store_despacho, a mesma carga que antes. Nós só precisamos colocá-lo em uma forma de objeto, ID e zero, então vamos definir este ponto carregando como false depois que ele voltar. Vamos ver se isso vai funcionar. Não tenho certeza se o valor explícito aqui vai errar. Sim. Como você pode ver, ele não gosta do zero lá. O que eu vou fazer é apenas fazer quantidade const igual a zero, e então substituir isso por quantidade. Aperte “Salvar” nisso. Atualize a página aqui. Como você pode ver, temos um erro, “Não é possível ler propriedade total_price of undefined”. Se eu rolar até aqui, você pode ver que eu tenho uma referência a isso aqui. Só preciso remover isso, porque não temos acesso a isso. Isso, claro, estava se referindo à instância do Vue, o aplicativo do Vue, mas agora estamos dentro do nosso carrinho, então só precisamos olhar para o que passamos, e o objeto da loja. Vou consertar isso, refrescar-me aqui, e agora podemos ver a nossa camisa preta a passar. Se eu for atualizar a quantidade aqui, você pode ver, apesar dos erros em nosso console JavaScript, isso agora está funcionando. Se eu bater na lata de lixo aqui, ele irá remover o produto do carrinho, atualizando para mostrar que isso é legítimo. Se eu pressionar “Adicionar ao carrinho” em um desses, ele agora funciona. Agora, todos esses dados estão vindo da nossa loja Vuex. Se eu entrar aqui, infelizmente, com esta última versão do Vue DevTools, eu não acho que podemos realmente olhar para a loja em si, não há uma aba Vuex como havia nas versões anteriores de você Vue DevTools, mas o que podemos ver é que estamos recebendo os objetos de carrinho de computados em vez de dados aqui, e isso deixa claro para nós que estamos puxando esse objeto carrinho de outro lugar que não seja a instância. Se eu remover isso, você verá que esse objeto de carrinho está atualizando de acordo com o que está na loja Vuex. Agora, é claro, o que você vê aqui é exatamente o mesmo que tínhamos antes. Talvez não esteja claro para você por que isso é diferente ou melhor, então pensei em mostrar como podemos usar esse novo ponto centralizado de verdade para interagir com o carrinho em qualquer outra página do nosso site da Shopify. O que eu vou fazer é realmente colocar a contagem de itens em nosso carrinho aqui em cima, e ter esta atualização ao vivo quando adicionamos um novo produto ao carrinho, atualmente só podemos fazê-lo na página do produto aqui. claro que podemos fazê-lo na página do carrinho, mas já estamos na página do carrinho, por isso não faz muito sentido fazê-lo, mas talvez queiramos adicionar ao carrinho e não há feedback imediatamente sem recarregar o página. Agora, podemos usar esses dados do carrinho para atualizar algo em nosso cabeçalho para indicar que adicionamos um produto ao carrinho sem ter que ir para a página do carrinho. Vou mostrar-lhe um pequeno exemplo disso agora. O que eu vou fazer é criar uma instância do Vue para o cabeçalho, e infelizmente, não temos um arquivo de seção para o cabeçalho. Nós poderíamos ir e criar isso agora, não seria muito difícil, mas vamos apenas manter o código em nosso theme.liquid. Vou fechar esta página do carrinho aqui. O que vou fazer é incluir o mesmo trecho aqui, logo acima do nosso cabeçalho. Nós vamos fazer incluir store.js, e então agora estamos incluindo essa loja Vuex em nosso arquivo de layout de tema também. Eu também vou adicionar um ID de cabeçalho para este elemento aqui para que possamos identificá-lo claramente em nossa instância Vue. Então, como fizemos ao longo desta classe, vou criar uma instância do Vue abaixo deste código HTML aqui. Primeiro, vamos criar um objetos opções, opções de cabeçalho. Vamos apenas abrir um objeto vazio por enquanto, e então eu vou criar outra variável que vai manter nosso cabeçalho de aplicativo, vue.createApp, inserir essas opções de cabeçalho, e então eu vou montar isso usando o ID que acabamos de adicionar ao cabeçalho, e então eu vou obter essa instância do Vue para usar a loja Vuex. Agora, se eu atualizar a página aqui, devemos ver aqui embaixo que temos dois aplicativos. Você verá que a informação que tínhamos aqui já desapareceu, porque está embaixo do App 1 aqui. Deixa-me ver se consigo diminuir o zoom e mostrar-te. Aqui vamos nós. Como você pode ver, App 1 e App 2, nós realmente não nomeá-los, por isso é um pouco confuso. Vamos entrar e realmente fazer isso agora. Eu vou dar a esta instância um nome de “Header”, e vamos entrar e nomear nossas outras instâncias na página do carrinho. Vou colocar um nome nas “Opções”, “Carrinho” e, em seguida, “Página do Produto”, “Nome”, “Produtos”. Isso só vai dar um nome no Vue DevTools para que possamos identificá-lo facilmente. Vamos voltar, atualizar, olhar para o DevTools, e você pode ver que podemos alternar entre o aplicativo Header e o aplicativo Produto aqui. Estamos executando dois aplicativos em uma página. Claro, se formos para a página do carrinho, você verá que temos Cabeçalho e Carrinho lá também. Vamos voltar para a página do produto. Agora podemos alternar entre os diferentes aplicativos. Vamos adicionar os dados do carrinho ao cabeçalho. Então o que eu vou fazer é trazer essa loja, e então como fizemos para a página do carrinho, eu vou criar uma propriedade computada que puxa o carrinho da loja Vuex. Isso vai ser carrinho, exatamente como fizemos na página Carrinho, store.state.cart. Em seguida, para preencher esse carrinho no carregamento da página, o que eu vou fazer é aproveitar o gancho do ciclo de vida que criamos e, em seguida, neste gancho do ciclo de vida, despache a ação get_cart. Vamos atualizar a página agora com nossas DevTools abertas. Parece que temos um erro, “Identificador inesperado, loja”. Isso é porque eu esqueci a vírgula aqui. Vamos “Salvar”, “Atualizar”. Volte para o nosso Vue DevTools. Sim, temos cabeçalho e produto. Se clicarmos no cabeçalho, podemos ver que temos nosso objeto carrinho vindo da loja Vuex agora. Como podemos usar isso é que agora podemos entrar aqui, vamos criar um span, e dentro aqui no v-html, podemos adicionar na contagem de itens do nosso carrinho. Vou fazer cart.item_count. Isto é, é claro, um atributo no objeto carrinho, você pode ver aqui. Se eu “Salvar”, “Atualizar” a página aqui, você pode ver que temos um item no carrinho. Claro, poderíamos ter alcançado o mesmo resultado usando shopify.liquid, mas o que vamos fazer agora é atualizar a página do produto para enviar o ID da variante através do Vue, em vez dos meios padrão da Shopify que acabam processando o “Adicionar ao carrinho” e movendo-o para a página do carrinho. Como você pode ver aqui, nós já temos essa interação acontecendo entre o cabeçalho e a página do carrinho. Só para completar isso, vamos voltar para a página do produto. Vamos para o código da página do produto, bem aqui. O que vamos fazer é aqui mesmo, adicionar um manipulador de eventos, nós poderíamos realmente remover este formulário completamente e apenas ter um botão que faz isso bem, mas vamos apenas ficar com o formulário por enquanto e torná-lo mais fácil. Nós vamos anexar isso ao evento de envio, e como um modificador extra, podemos colocar aqui chamado previne, e isso vai impedir a funcionalidade padrão de envio, que é, claro, o que queremos. Aqui, podemos colocar um método que vai lidar com o Adicionar ao carrinho. Eu só vou criar isso agora. Vamos descer após o método final e criar uma função handle_atc. Tudo o que vai fazer é pegar o ID da variante que precisa ser adicionado ao carrinho, e nós vamos apenas despachar a ação “Adicionar ao carrinho” com a carga desse ID. Então vamos subir aqui. Onde estava? Bem aqui. Para handle_atc, e como o argumento nesse método, vamos colocar o ID da variante atual. Isso torna os campos ocultos um pouco redundantes, mas ainda deve funcionar. Vamos até aqui, atualizar a página e ver o que acontece quando clicamos em “Adicionar ao carrinho”. Agora você pode ver que a página não é atualizada, mas algo mudou. O número no carrinho foi atualizado. Poderíamos adicionar outras interações como se pudéssemos fazer aparecer aqui dizendo: “Adicionado recentemente”, ainda poderíamos redirecionar para o carrinho, poderíamos ter um carrinho lateral aparecendo como vimos anteriormente. Poderíamos fazer todos os tipos de coisas, mas o ponto é, agora temos sincronização de dados entre nosso cabeçalho e nossa página de carrinho. Como você pode ver, o número em nosso cabeçalho é atualizado quando atualizamos os itens em nossa página de carrinho, mesmo que eles estejam em aplicativos separados, e o motivo é que estamos compartilhando dados entre eles usando o Vuex. Isso é um pequeno bônus na Vuex para vocês. Se você está construindo um carrinho lateral completo enquanto tem uma página de carrinho com recursos completos, então você vai querer compartilhar dados entre eles, e Vuex é a solução ideal para fazer este trabalho no Vue. Espero que tenha aprendido algo com esta lição. Se você quiser incorporar um carrinho lateral e usar o Vuex em seu projeto de classe, eu encorajo-o a fazê-lo. Vou lhe dar mais detalhes sobre seu projeto de aula no vídeo final que está chegando. Obrigado por assistir. Vejo-te nessa. 10. Bônus: se adaptando aos modelos JSON: Nesta curta lição bônus, vou mostrar-lhe como mover nossos aplicativos do Vue para arquivos de seção em vez de deixá-los em arquivos de modelo líquidos. A razão pela qual estou mostrando isso é por causa da Loja Online 2.0. Se você não estiver familiarizado com a Loja Online 2.0, incentivo você a conferir minha primeira aula aqui no Skillshare, desenvolvimento de temas da Shopify: Como criar e personalizar sua própria loja online. Adicionei três vídeos adicionais lá para ter em conta as alterações da Loja Online 2.0. Essencialmente, o que mudou é que os arquivos de modelo agora podem ser JSON ou Liquid. Para se adaptar a essa nova maneira de criar temas, quero mostrar como podemos mover nossos arquivos de interseção de aplicativos e, em seguida, transformar esses modelos em arquivos JSON. Vou investigar o tema aqui, vou mostrar-lhe o que quero dizer. Aqui em Templates, você tem todos os arquivos de template codificados como Liquid que, é claro, nos permite inserir código líquido HTML, CSS JavaScript, tudo neste arquivo template, e isso é o que é usado como nosso template. Mas se você clicar sobre isso hoje em dia, você verá que há uma opção para um modelo JSON. O que eu vou fazer é duplicar o tema para manter esse tema intocado, e aqui, vou clicar em “Editar código” na duplicata, e vamos começar a refatorar nosso projeto aqui. Primeiramente, queremos criar uma nova seção para casa. Vamos fazer modelo de produto primeiro, então eu vou criar uma nova seção, e eu só vou chamá-lo de modelo de produto. Não tem que colocar o.liquid lá porque isso será automático, e agora nós vamos ter que preencher o nome da seção, apenas vamos chamá-lo de Modelo de Produto ou Produto Principal, algo assim porque podemos querer colocar algumas outras coisas nele. Modelo principal do produto. Agora eu vou apenas apertar “Salvar” sobre isso, e eu vou para o nosso modelo product.liquid. É aqui que temos nosso aplicativo Vue para a página do produto. Vou copiar todo o código usando o Comando A em um Mac. Eu não tenho certeza do que é em um Windows, depois Comando C. Então eu vou para aqui, criar algum espaço no topo, e colar em nosso código lá. Agora que temos nosso código colado e salvo, podemos excluir este arquivo de modelo, e isso nos dará espaço para criar um modelo JSON. Vou clicar em “Adicionar novo modelo”, e ir para baixo para o produto, e aqui você pode ver que podemos criar um modelo Product.JSON agora. Indo para clicar em “Criar modelo” e agora temos a base do nosso modelo de produto. Tudo bem. Vou aprofundar isso na Lição 11 do desenvolvimento do tema da Shopify: Como criar e personalizar sua própria loja online. Vou passar um pouco por isso, mas essencialmente o que precisamos fazer aqui é adicionar os campos necessários para usar isso. Ele não me permite salvar a menos que eu faça uma alteração, mas você verá que se você não incluir isso, ele irá errar. Temos de incluir estes campos obrigatórios. Primeiro de tudo, precisamos dar um nome a este modelo de produto, e eu vou apenas dar-lhe o nome simples de Modelo de Produto. Agora, dentro do objeto da nossa seção, precisamos vincular esse modelo de produto que acabamos de criar. Vou começar chamando-o de Main-Product, e vamos abrir um objeto como o valor disso. Então tudo o que precisamos é colocar em um tipo, e o tipo precisa ser igual ao nome da seção; o nome do arquivo da seção menos o.liquid. Isso vai ser apenas modelo de produto. Tudo bem. Em nossa matriz de ordem, precisamos colocar no nome que corresponde a este, então principal produto. Isto parece redundante neste momento porque temos apenas uma seção, mas se tivéssemos vários, podemos definir uma ordem diferente para eles aqui nesta matriz de ordem. Vou apertar “Salvar” nisso. Como você pode ver, sem erros. Então eu vou tocar “Personalizar tema”. Agora que estamos dentro do editor da loja, precisamos clicar aqui para mudar para o modelo de produto que acabamos de criar. Ele só vai ser produtos padrão porque ele não tem um ponto após produto, é apenas product.JSON. Se fosse produto ponto outra coisa, então ele apareceria como um alternativo como este. Eu só vou clicar sobre isso, e aqui você pode ver que temos nosso modelo de produto ainda. Se eu for para Comprar o Tee, você pode ver que temos nosso aplicativo, e ele ainda está funcionando. Isso porque incluímos nosso arquivo de seção aqui, ele não tem nenhuma seção editável, mas foi vinculado. Agora esta não é a lição mais emocionante porque não adicionamos nenhuma funcionalidade nova, exceto pelo fato de que agora podemos adicionar outras seções e reordená-las. Como este é um projeto bare-bones sem outras seções, nós realmente não temos a capacidade de adicionar outra seção aqui porque literalmente não há outras seções. Mas usando o sistema da Loja Online 2.0, se estivéssemos usando um tema moderno, poderíamos agora mover isso, adicionar novas seções se quiséssemos. Isso tem sido essencialmente o que este vídeo tem sido, adaptando-se à Loja Online 2.0. Você pode estar usando um tema mais recente que tem todos os seus modelos como JSON. Nesse caso, precisamos de adaptar um pouco as nossas práticas para nos adaptarmos a esta nova mudança. Tudo o que fizemos aqui foi mover o código Liquid para um arquivo de seção, e incluir esse arquivo de seção dentro do nosso modelo de produto JSON. Ainda podemos fazer isso da maneira antiga, ainda podemos jogar ou manter esse código em um modelo product.liquid, mas agora estamos indo nessa direção com a Loja Online 2.0. Eu só queria jogar neste vídeo aqui para aqueles de vocês que estão trabalhando com temas modernos, ou abriram um tema moderno, e se perguntou o que diabos. Espero que este vídeo tenha proporcionado algum contexto para você. Quaisquer perguntas, como sempre, sinta-se livre para deixá-las na caixa de discussão abaixo, e eu vou vê-lo no vídeo final para a conclusão. 11. Conclusão e projeto do curso: Isso conclui essa classe sobre o uso do Vue.js nos temas da Shopify. Para seu projeto de classe, recomendo que você integre Vue.js em qualquer tema da Shopify em que você está trabalhando no momento. Tenha em mente que a maioria dos temas de nível de produção já usa uma quantidade razoável de JavaScript, então você provavelmente terá que refatorar alguns desses JavaScript para abrir espaço para Vue.js. Como mencionei ao longo desta aula, esse tópico é bastante específico no desenvolvimento do tema da Shopify, então, se você não tiver certeza sobre nada sobre os tópicos fundamentais de HTML, CSS, JavaScript, líquido da Shopify, você pode encontrar muitas lições sobre tudo isso aqui no meu canal Skillshare. Tudo que você tem que fazer é clicar no meu nome e depois verificar minhas outras aulas de desenvolvimento web. Como sempre, se você quiser saber mais sobre programação de temas e desenvolvimento de temas da Shopify, siga-me on-line e confira meu canal do YouTube para obter tutoriais adicionais. Finalmente, se você precisar de alguma dica ou orientação sobre o que cobrimos na aula de hoje, deixe um comentário na caixa de discussão abaixo, e farei o meu melhor para apontar você na direção certa. Obrigado como sempre por assistir e espero vê-lo novamente em algumas minhas outras aulas.