Tutorial para o carrinho de compras em JavaScript

1. Introdução: Tudo bem, pessoal. Bem-vindo a estes cursos sobre como construir um carrinho de compras usando JavaScript baunilha. Então temos aqui um exemplo do projeto que vamos construir neste curso. Então este é um exemplo de um site de comércio e. Como podemos ver, temos alguns lucros aqui, algumas camisetas ótimas e Ray quem? Estas e algumas camisetas pretas e moletons pretos. Quando nós sobre o mouse em um deles, podemos ver que temos esses botões que podemos apenas clicar e artes para carrinho e temos aqui no topo. Nosso cartão que podemos ver no momento está completamente vazio. Então, vamos apenas adicionar alguns produtos para ver como nosso aplicativo funciona. Então eu vou adicionar duas dessas grandes camisetas, por exemplo. Então eu vou clicar 12 e podemos ver isso no topo aqui. Nós temos que no nosso cartão no momento, e então eu vou clicar em três deste, então eu vou fazer 123 Então agora eu sei que eu tenho no total cinco produtos no meu carrinho. Eu vou clicar nestes Agora eu posso ver que esta é a minha página de cartão, que, como no momento, para grandes camisetas se vocês se lembram, com os $15 cada, nós temos um total de $30 e então nós adicionamos três destes camisetas pretas por US $10 que dá um total, bem como de 30. Então 30 mais 30 nós temos o nosso total de 60 dólares. Mas o que mais podemos fazer aqui? Olha, eu posso se eu quiser aumentar ou diminuir a quantidade desses produtos que temos no cartão. Então, por exemplo, eu vou clicar aqui no dedo do pé, ter mais um. Então vamos ver se vou adicionar mais um. Eu provavelmente vou adicionar mais $15 em cima destes, então vai ser como 45 aqui deve ser 75. Vamos ver se funciona. Vou clicar 45 porque os três deles e eu tenho 75 no total. Obviamente, eu posso, tipo, reduzir isso para simples, apenas para um. Se eu quiser olhar agora são apenas tenho 15 15 junto com estes 30 destes três. Eu tenho 45 e eu também posso, como eu disse, ir para cima e para baixo com estes. Vocês realmente podem experimentar estes depois de haver um botão aqui que você pode se livrar de todos os produtos dessa linha de lucros. Digamos que tenho quatro camisetas pretas aqui. Eu posso me livrar de todos eles apenas clicando nestes X. E olha, eu só ganhei camisetas de US $15 com o meu total e aqui no topo. Você pode ver que eu ainda tenho Onley avisando. Está bem. E eu posso voltar entre páginas para isso. Se eu puder ir para a minha página inicial, volte para o carro e isso está sempre lá dentro. Tudo bem, pessoal. Então este é o projeto que vamos construir vai ser incrível para você, porque você vai aprender como lidar com um armazenamento local do do seu navegador. Como criar esses aplicativos como usar funções modulares em javascript. Nós vamos usar um monte de funções modulares e sim, eu espero que você esteja animado para começar a pontuação, então eu vou ver quando o outro lado 2. Construindo a interface de frontends: Muito bem, pessoal, bem-vindos de volta a outro vídeo hoje. Vamos construir o carrinho de compras e commerce com JavaScript de baunilha. Então o site está aqui. Como você pode ver, temos quatro produtos que se você superar isso, você pode ver sobre anemia que dizem que é depois carrinho. Então, digamos, por exemplo, que eu vou ter e dois negros quem estes. Então eu vou apenas clicar duas vezes 12 e, no topo, devemos ver aqui um botão de cartão que, como, gosto em que no momento. Então chegamos aos produtos. Eu vou ter que avisar sobre esses capuz cinza também. Então, quando eu clicar nele agora, eu tenho três. Então, se eu recarregar a página, olha, se eu recarregar a página, ela ainda estará lá. O número três. Por que é isso? Porque vamos usar algo chamado depósito local. Todos os navegadores modernos. Eles têm-lo. E isso é incrível para frente e obrigações como esta que vamos construir. Então, se eu vou clicar agora para obter esses cartões, Ok, eu vou clicar aqui, e agora eu posso ver que eu tenho dois desses hoodies pretos que nós selecionamos antes, nós podemos ver o preço individual dele e o preço total de dois. Então, se cada um é $20, o total vai ser de 40. E também temos um moletom cinza, que é $20. Está bem. E, no total, o preço deve ser de US $60. Talvez eu vá fazer mais um pouco. Eles sabem se precisamos, mas espero que vocês vejam melhor. Por isso, também podemos clicar nestas garrafas para alterar a quantidade. Digamos que eu vou adicionar um desses cinza. Quem é este. Ok, eu vou clicar agora. O preço total, porque ele também é 40. E agora se vocês check-in ainda o carrinho, eu tenho quatro produtos no total e fora do curso. O preço total também é atualizado. Eu também posso clicar nestes botão excluir que irá se livrar de todos esses produtos. Então, por exemplo, se eu clicar nisso, Ok, Ok, agora eu só tenho dois pretos. Quem está na carroça aqui? Só tenho dois, o que é perfeito. E agora o preço total é de $40. E aqui em baixo $40 também. Por quê? Caras? Então este é o projeto que vamos construir. Espero que queiras entusiasmado por estes. E a primeira coisa que vamos fazer é começar a construir o HTML e CSS deste projeto. Eu não vou gastar muito tempo com estes HTML e CSS. Tenho aqui o treinador Justin. Eu vou usá-lo, mas eu vou explicar fora do curso, mas eu quero passar um pouco mais de tempo em javascript porque este curso é sobre isso. Mas, como sempre, se tiverem alguma pergunta, avise-me. Nos comentários abaixo, respondo a todas as suas perguntas. E também, eu vou colocar alguns links ok para alguns desses arquivos que todos esses arquivos no final, se vocês só querem usá-los é realmente com você. Se você não quiser, você pode apenas, tipo, seguir junto e deve ser fácil. Então, vamos começar. Tudo bem. Então a primeira coisa que precisamos fazer é apenas criar nosso arquivo html index dot. Então é isso que vou fazer. HTML e ah, eu só vou escrever um modelo simples aqui. Html cinco. Eu só vou fechar estes que eu vou colocar aqui, tipo, tipo, no topo da quadra de compras e dentro. Vou colocar aquele que diz estes mares home page. Eu também vou criar agora um novo arquivo para o ponto estilos CSS Ok. E eu vou criar outro arquivo, que vai ser para o meu carrinho dot html. Então isso vai ser como uma página para ir para o carrinho onde temos todos os produtos. Então eu vou apenas copiar tudo o que eu tenho no meu índice dot html quando um colocar estes dentro do meu carrinho dot html e que deve ser isso por enquanto. Tudo bem, como eu mencionei antes, pessoal, eu não vou gastar muito tempo com HTML e CSS nas pontuações porque eu quero apenas dar um pouco mais de tempo apenas para javascript porque este é um curso JavaScript. De qualquer forma, eso eu só vou colar algum código aqui que eu já tenho do projeto. Vocês sempre podem ter um link na descrição se quiserem obter os arquivos. Hum, se você está recebendo esses núcleos então você deve obter os arquivos se ele é que vocês só querem, gostaria de seguir junto e apenas pausar o vídeo e apenas copiá-lo. Sinta-se livre também. Então o que eu vou fazer é, hum, eu vou começar a “Heather”. Ok, eu vou apenas copiar isso, que eu estive aqui ao lado. Vou colá-lo. Só estou fechado. Estes eu vou ritmo thes. Então, no momento, eu tenho ah, elementos do céu. Nós o Deve com uma sobreposição de classe. Chega com o título H dois e com algum tipo de barra de navegação. Então, se eu só ver, como as coisas ficam assim no momento em que se parece com isso. Está bem. É um normal é uma navegação normal, hum , mas de um site. Como eu disse, pessoal, vou dar-vos um pouco de tempo, se quiserem. Copieoque tenho aqui. o Então, uma vez que você tem isso, nós poderíamos realmente nós poderíamos realmente começar a estilizar nosso site, então eu vou colocar o link para o meu CSS, e eu acho que eu chamei isso de estilos. começar a estilizar nosso site, então eu vou colocar o link para o meu CSS, Ok, pequeno ponto CSS aí. Eu só vou colar algumas coisas que eu costumo colocar então eu sempre colocar isso ou não, meus sites dedo apenas, como, redefinir todos esses tipos de propriedades, então obviamente, nós temos aqui uma família divertida roboto que não temos no momento. Então precisamos importá-lo do Google. Ok, então se você entrar em fundos do Google, Ok, eu vou clicar no Google phones, e eu estou apenas usando este robô. Ok, então vocês clicam aqui no fundo. Devia ver. Deixe-me mover isto um pouco para o lado. Você deve ver exatamente como um link para importar estes. Então é isso que eu vou fazer. Eu só vou copiar cópias de canto e colar apenas, hum, aqui dentro. Eu também preciso adiar o curso de um link. Não tenho certeza se coloquei o Lincoln. Sim, coloquei o link errado que coloquei no carro para marcar html no lugar errado. Vou tirar isso do carrinho. Não, na verdade, eu preciso deixar aqui de qualquer maneira, porque nós vamos usar isso para o carrinho S então eu vou colocá-lo aqui, ok? Styles dot CS diz Ok. Então nós temos isso feito. Deixe-me voltar aqui. Basta salvar deixar você colocar mais alguns estilos. Vou colocar o estilo para o meu Hever. Está bem? Eu vou colocar a urze no ano no momento, como vocês podem ver, meu céu, meu céu, ele só tem, tipo, tipo, uma imagem de fundo que é bem estilizada com uma altura de 150 pixels. Então, se vocês se lembram, eu tenho no meu Sim, eu acho que eu mordi colou todas essas coisas. Vou copiar tudo isto porque isto vai ser exactamente o mesmo para o meu índice. Certo, foi só um erro. Caras. Você pode copiar o mesmo código para ambos índice eo carro para dot html porque vai ser a mesma coisa. Olha, eu vou clicar aqui. O cartão de casa ainda é o mesmo. Certo, Certo, há uma coisa no momento que precisamos é de cópias sobrepostas. Você vê essas sobreposições dif que eu vou colocar em anos, alguns CSS que está fazendo isso, hum, um, um pouco mais escuro. Isso é o que eu queria. Então eu vou colocar alguns estilos para o meu nuff também, então eu vou colocar aqui. Então, no momento meu novato aqui com o título e eu tenho aqui o menu, Nav Lings. Então eu vou colocar alguns estilos ok para os meus links de navegação. Então eu vou colocar isso aqui. Estou dando um pouco de tempo. Como eu disse, se quiser pausar o vídeo e copiar esses estilos no momento em que chegamos em casa. E carrinho, se você tem aviso aqui na minha navegação. OK, estou usando algo chamado ícones de ferro. Ok, Este é algum tipo de ícones frontais que você pode usar que você pode aumentar o tamanho, mudar o chamador e tudo, e eu realmente gosto de usá-los. Eu tenho ícones, então eu vou colocar aqui no Google ícones de ferro que são completamente grátis. Ok, alguém clicando aqui. E olha, você tem todos esses ícones que você pode usar quando você clica em uso e você quer escrever aqui que você precisa colocar para baixo no corpo fora da página. E então, se você país continuar rolando para baixo, haverá outro link aqui que diz instalação. Você deve colocá-lo um pouco antes do seu estilo dot CSS. Ok, então, hum, se está tudo bem e nós apenas atualizamos nossa página, deve estar funcionando. Deixe-me ver se me falta alguma coisa. Eu acho que isso, uh talvez eu seja apenas sobre Sim. Ok, agora eu estou em casa e ele está lá. Ok, vamos colocar um pouco mais de estilos para o cartão. Então, vou copiar isto. Eu vou colocar, hum aqui embaixo. Olha, agora está bem estilizado meu carrinho. Como eu disse, está aqui todos os estilos, então eu estou apenas recuado estes um pouco melhor, então tudo está bem organizado. Uh, deixe-me apenas copiar todos estes enrolados no meu carrinho porque vai ser exatamente o mesmo índice e cartão no momento. Eles devem ser exatamente os mesmos. Então, se você ficar entre casa e carrinho, ele vai ser o mesmo. Ok, então nós temos isso para a nossa urze. Agora podemos começar a construir, por exemplo, os produtos e agora esses produtos é apenas para a página html de ponto de índice. Está bem, deixa-me ver. Vou só copiar isto, está bem? Eu tenho um contêiner. Então eu vou copiar meu contêiner que eu tenho aqui, e eu vou te mostrar. Depois da urze, , vou dar um pouco de espaço, está bem? Quando ultrapassado estes. E este é o meu Deve com uma classe de contêiner com algumas dessas imagens que se vocês não se lembram, eu estive aqui no lado da pasta com essas imagens, ok? E essas imagens que eles têm dentro de todas essas coisas que eu vou usar, então deixe-me apenas aumentar. Mas vou pôr isto no ano. Vou aumentar isso para que vocês possam ver um pouco melhor. Então você tem o início do contêiner, e então você tem um acordo com uma imagem de classe que este vai ser cada um fora das imagens com a imagem dentro com o título com o preço. E então recebemos o botão de carrinho que não vemos. Eu vou me livrar dessas entradas porque eu acho que eu não estava mesmo usando-as no final. Está bem. Então você pode se livrar dessas entradas. Eu só estava tentando fazer outra coisa. Então, se eu atualizar a página, veja, você deve ver algo como o agora mesmo. Está bem. Acho que coloquei quatro produtos. Você pode colocar quantos quiser. Vamos voltar para os estilos que CSS Agora deixe-me ver. Cartão A. Vou pôr o meu contentor, por isso vou pôr aqui o meu contentor. Livra-te desta coisa. Eu vou explicar isso depois, então se você colocar este recipiente agora, você deve ver aqui os projetos. Então eu vou colocar a imagem. Isto é para estilizar as nossas imagens. Ok, então eles parecem um pouco melhores assim. Então eu vou fazer em duas cartas porque nós temos que carregar botão dentro. O que mais, então? Fora do curso. Acho que esqueci. Hum, não, eu não lutei para colocar Eu só vou colocar isso para quando nós esperamos para as imagens, nós podemos ver o botão do cartão ARTO. Lá está ele. Está bem. caridade 30. Sterritt, calma. Está bem. E se eu for para o carrinho, não há nada. E se eu for para casa, fico com tudo isso. Tudo bem, então acho que é isso para esses caras de vídeo. Nós montamos nosso projeto. Nosso projeto inicial. Isso não é nada relacionado com javascript, mas eu acho que é sempre bom para vocês verem um pouco como começamos o projeto, como nós adicionamos todos esses elementos diferentes. E, claro, você pode estilizá-lo como quiser. Tudo bem, então é isso para esses caras de vídeo e também para o próximo. 3. Como adicionar números ao carrinho: Certo, pessoal, bem-vindos de volta. Então, neste vídeo que vamos fazer é clicar sobre estes são dois botões de cartão e nós vamos atualizar o botão que temos aqui. Isso é uma cicatriz. Assim, quantas vezes clicarmos em adicionar ao carrinho, vamos contar quantos produtos estamos adicionando ao cartão. Então a primeira coisa que vamos fazer é ir para o nosso índice dot html. Ok? E logo depois do guião que temos aqui, vou criar outro guião. Ok, nós somos a fonte fora do ponto principal Js. Ok, então eu vou adicionar isso aqui ao lado, então eu vou apenas fazer um clique direito novo arquivo, e eu vou fazer um ponto principal Jess. E eu vou colocar o console, o registro de corrida. Ok, apenas certifique-se de que isso está funcionando. Então eu vou clicar com o botão direito na minha página. Vou fazer uma inspeção, está bem? E eu vou olhar aqui dentro dentro do console, e eu posso ver aqui no lado correndo. Está bem. Se vocês podem ver aqui, é o meu diário do consulado. Então isso significa que o meu principal arquivo Js ponto está conectado Então isso é perfeito. Eso A primeira coisa que eu quero fazer é ir aqui no topo, e eu vou fazer uma licença e eu vou fazer cartas. Igual a dois documentos ponto Queary seletor tudo eo que eu quero selecionar é o meu ponto no carrinho . Está bem, vou mostrar-te agora. O que é isso aqui no meu índice de ponto html? Olha, nós temos esses elementos de âncora que com uma classe de pedido para carrinho, se você quiser ver é este botão. Tudo bem, então eu quero pegá-los todos com JavaScript. Então eu preciso mirá-los. É por isso que estou a usar isto. E então o que vou fazer é fazer um ouvinte de eventos. Então, sempre que eu clicar em um deles, eu quero fazer alguma coisa. Então, porque nós temos um monte deles quando nós pegamos estes vai ser, como em algum tipo de um array. Nós podemos apenas fazer um loop de quatro para Let I igual a 20 Então nós vamos percorrer todos eles, e eu vou fazer I Ele vai ser o último. Então, o comprimento das cartas, está bem? E depois vamos fazer um “I plus”. Além disso. Ok, então este é apenas um loop simples que vai correr a partir de zero carrinho do dedo do pé desse comprimento. Então, quanto é o cartão? Comprimento inicial. Nós temos 1234 Então eu vou ser menos que cortes que o comprimento vai estar correndo de zero no negócio 30123 Ok, então se eu ganhar aqui um curso, segure esse log, eu vou dilatar meu loop. Ok? Vou guardar estes. E olha, eu tenho o meu loop rodando nestes quatro olhares quatro vezes. Então, o que eu quero fazer aqui? Quero pegar minhas cartas. Está bem. E eu vou colocar aqui. Eu porque o meu olho vai mudar sobre estes loop vai começar a partir de zero que está indo para um e outras coisas para que eu possa pegar todas as minhas cartas com base nisso. , Porque obviamente, se vocês se lembrarem, podem ter cartas. Zero para pegar este aqui, você pode ter cartas. Uma carta. Quero pegar esse aqui. E assim um. É por isso que estou usando o loop. Então eu vou fazer um ouvinte de eventos acrescenta. E que ouvinte de eventos eu quero. Eu quero clicar. Ok, então eu vou colocar a função. Então o que eu estou fazendo aqui é sempre que eu clico em um desses botões, eu quero fazer alguma coisa. No momento. Só vou fazer um botão de desligamento, ou vou matar outros também. Cartas. Ok, eu vou entrar aqui. Olha para estas coisas ao lado. A minha consola. Eu vou clicar sobre estes para fora para o carrinho, e ele diz que outros dois carros, eu vou clicar novamente e olhar duas vezes eu vou clicar novamente. 34 Então todos esses botões, agora eles estão funcionando. Então, Então, o que eu quero fazer aqui? Basicamente, eu só fiz esse tipo de evento. Ouça se eu quiser, mas no momento, vou criar uma função chamada números de cartão. Então eu sei quantos itens eu estou adicionando ao carrinho, então eu vou fazer uma função. Liguei para os números do carrinho. Então talvez a primeira coisa que eu vou fazer é apenas adicionar algum tipo de valor ao armazenamento local . É assim que vamos economizar todos esses lucros que estamos adicionando aqui na página. E mesmo se você se refrescar, eles serão lembrados. Então, sempre que eu clicar aqui, então eu só vou fazer este número de cartões de carro. Vou pôr isto aqui em vez deste registo da consola. E o que eu vou fazer é eu vou fazer um ponto de armazenamento local dito item, e então eu vou colocar um número de carrinho e, em seguida, eu vou apenas colocar um, por exemplo, e eu vou te mostrar em um segundo. Então, se eu entrar aqui, eu atualizo a página. Vou clicar agora primeiro, antes de clicar, vou entrar aqui no topo. Vou entrar em aplicações. Está bem. A propósito, pessoal, estou usando o navegador Google Chrome. Acho que vai ser algo parecido. Se vocês estão usando Mozilla Water Opara ou qualquer outra coisa. Vocês ou safári, se quiserem seguir exatamente como estou indo, apenas usá-los. O navegador Google Chrome. Então aqui, espere. Diz a aplicação no topo. Vocês vão para o depósito local? E se você ver aqui, não há chaves nem valores no momento. Ok, então quando eu fizer o armazenamento local, não definir os números do carrinho de itens um, isto é, nós vamos adicionar algo lá dentro. Então eu vou te mostrar clicando aqui sobre isso. Olha, eu tenho um cartão número um, ok? E se eu clicar em novamente só vai fazer re fazer a mesma coisa uma e outra vez. Então, por exemplo, agora eu cliquei uma vez e atualizei meus números de carrinho. Os números dos meus cartões-chave e o valor 1. Se eu clicar novamente, nada está acontecendo. Então, talvez quando eu clicar neles eu quero verificar se inicialmente há algum tipo de valor chave lá dentro . Então, por exemplo, se eu sei que está aqui um já eu quero que a próxima vez que eu vou clicar vai aumentar isso um pouco. Então vamos obter esses valores na primeira vez que clicamos no botão. Vamos pegar esses valores. Então eu vou fazer números de produtos flett vai ser vai para armazenamento local pensamento, e eu vou fazer eu obter item ok. E o item é chamado se vocês se lembrarem aqui nas cartas superiores, números Ok, então, hum, eu só vou didio console ponto log desses produtos em números. Está bem , olha para isto. Vou me deixar ver meu console no momento. Isso não é nada aqui. Eu posso me livrar disso. Não se preocupe com estes, um, erro de que estava lá dentro. Eu só vou clicar aqui e olhar, eu tenho meus números de produto ok de lá. Mas se vocês entrarem aqui e fizerem um golpe, então desconectem os números dos produtos. Está bem, deixa-me tirar isto. Vou clicar novamente. E diz que ele é um que estamos pegando do nosso armazém local. Vem como uma corda. Certo, então precisamos fazer algo para converter esses números de uma string para um número. Então, para isso, eu posso apenas fazer, hum, números de produto vai ser igual a uma análise int. Está bem. Fora dos números de produtos de antes. Ok, agora, você é o registro final novamente. O tipo de números de produto. Está bem. Só vou verificar meu console, atualizar a página, se livrar deles quando eu clicar nele, e ele diz agora que é um número porque eu usei essas partes em para converter a string em um número. Certo, então vamos nos livrar desses registros de pontos do cônsul por enquanto. Ok, então uma coisa que vou fazer antes de começar com isso é apenas começar aqui. Variável no topo chamado produtos. Isto vai ser igual a uma matriz. E essa matriz vai ter alguns objetos dentro com o nome desligado, por exemplo. Camisetas cinzentas. Está bem. E então ele vai ter uma conversa. Ok, esta é uma maneira que vamos usar para pegar as imagens depois. Ok? Camiseta Ataque de Ray. E então ele vai ter um preço de 15 e então ele vai ter em cartas fora de zero. Então esta é uma maneira que podemos apenas, como rastrear quantas vezes este item que este produto está no carrinho? Eso, vou fazer o mesmo para o resto dos produtos. Vou copiar estes que eles têm ao lado. Quando uma cópia destes, eu vou colocá-lo aqui. Então estes são todos os produtos que vou usar. Está bem. A grande camiseta, o moletom cinza, a camiseta preta e o moletom preto. Ok, como você pode ver todos eles no início, eles têm em cartas. Não há nada no cartão. Está bem. Certo, então aqui, quando eu clicar em uma dessas coisas Ah, primeiro lugar, fora do curso, eu quero ver esses então aqui, quando eu clicar em uma dessas coisas Ah,em primeiro lugar, fora docurso, eu quero ver essesnúmeros de cartões. Eu quero verificar. Primeiro de tudo, se há algo aqui no meu armazém local, , então,para isso, eu vou fazer qualquer declaração aqui, ok? Porque se eu vou remover estes olhar, se vocês apenas clicar sobre estes limpar tudo e apenas atualizar a página se eu tentei fazer um log ponto console destes números de produto a primeira vez que você vem para a página e você apenas clicar em upto cartão. Se você tentar obter estes a partir do armazenamento local e você tentar fazer este partes em porque ele não existe vai dar-lhe, como, como, indefinido ou não. Vamos apenas verificar. Vou fazer no console. Eu vou clicar e vai ser, tipo, não um número. Ok? Eso, vamos fazer isso. Se declaração então eu vou fazer se Ok, se houver alguns números de produtos, Ok. Significa que já entramos lá de antes. Temos sido algo para o cartão. Quero fazer um conjunto de pontos de armazenamento local. Ah, números. Ok, então eu só vou cortar isso Eu vou colocar este em um depósito local ano. Aquele item para os números dos meus cartões ser o que estava lá de antes. Olha, é isso que estamos fazendo aqui. Ok? Mais um. Está bem. E se não há nenhum produto ok aqui com qualquer se já havia produtos lá em nosso armazenamento local, se isso não é nenhum, Ok, Ok, O que eu vou fazer é apenas definir meu armazenamento local para definir os números do cartão do item para ser um. Ok, então isso é o que vamos verificar agora. Deixe-me apenas ir para a aplicação. Quero dizer, apague essas coisas no seu pessoal. Não se esqueça de fazer isso, porque então você vai não vai funcionar como planejado. Então eu vou atualizar a página. Vou clicar aqui. Então, a primeira vez que entramos aqui, obviamente estamos tentando colocar algo lá dentro. Você não ganha nada. Então isto não vai ser um número. Então, quando tentamos fazer isso, se existem números de produtos, que não é os números, significa que é falso, ele significa que esses códigos vão ser executados. Ok, então armazenamento local, vamos definir o item de números de cartão. É o que temos aqui no topo. E ele vai definir o valor de um. A segunda vez que eu vou clicar em um desses cartões, nós vamos obter os números do produto do armazenamento local. Vamos obter o número um como uma corda. Então vamos convertê-los em um número. Agora, eu vou dizer se os números de produtos existem agora é um, então ele existe e é verdade. Então o que vamos fazer é fazer um armazenamento local. Esse item do nosso carrinho de números serão os números do produto, que acabamos de receber antes com o número um. Então, um mais um vai ser o que vamos tentar. Lá vai você. E daí se continuares a clicar? Olha, você tem todo o número de produtos que você está clicando nele. Agora há mais uma coisa que podemos fazer. Que é quando clicamos aqui ou nada disso para o armazenamento local. Eu quero isso. Se este é o primeiro item, posso usar documentos. Deixe-me apenas fazer um Docks documentos, seletor de consulta. Está bem. E eu quero selecionar minha extensão carrinho. Está bem, deixem-me mostrar-vos. Qual é a barra de navegação que tenho aqui? Meu, onde está? Ally, Com uma classe de cartas dentro, temos uma extensão com o número zero. Ok, se vocês não se lembram, é isso aqui. Ok, olha, estes vão com o número zero. Isso é o que eu estou pegando lá dentro. Está bem, então deixa-me voltar. E eu queria acessar o texto. Ah, conteúdo. Toby é igual a dois eso. Eu quero ser, Por exemplo, se ele é a primeira vez que estamos fazendo será apenas um perto de um. Ok? Se não, o que vamos fazer é definir, hum, o conteúdo dos decks para ser números de produtos, que vamos pegar do que quer que esteja aqui. Está bem. Mais um. Ok, então estamos pegando todos os produtos que já temos em nosso armazenamento local, e estamos adicionando um. Então, basicamente, estamos fazendo a mesma coisa que aqui, mas estamos atualizando nosso carrinho. Ok? Quero dizer, livrar-se de todas essas chaves de armazenamento locais que atualizamos a página. E agora olha, eu vou clicar em depois de cartões. Ok? Então temos um. Vou clicar de novo. Eu tenho que ir e também aqui em cima. Vou clicar aqui três e assim um. Se eu atualizar o visual da página, agora ela se foi, OK? Nós ainda temos nossos valores de armazenamento local, mas aqui no topo, nosso cartão está vazio, então precisamos fazer algo sobre isso. Então o que vou fazer é criar a função, está bem? Tem função chamada em cargas, cartões, números. Está bem. E esta função só vai verificar a mesma coisa como aqui de antes, nós vamos criar uma variável chamada números de produto vai verificar o dedo de armazenamento local , obter uma noite, hum, off números do carrinho, se ele existir. Então eu vou fazer se houver alguns números de produtos do armazém local. Está bem. O que eu quero fazer é apenas definir o meu documento que a extensão do cartão seletor de consulta, conteúdo de texto. Toby é igual ao número de produtos que estão no meu armazenamento local. Ok, agora, este funcionamento aqui nunca vai funcionar a menos que chamemos isso. Se vocês se lembram desta função de números de cartão é anexado dedo do pé um ouvinte evento clique estes botões. Mas essa função que criamos agora nunca funcionará até chamarmos. Então eu vou chamar essa função aqui embaixo. Então, sempre que carregarmos a página pela primeira vez, isto vai correr, e ele vai verificar. Então, se eu atualizar a página, olha, o carrinho é o tempo todo. Três. Então, se eu vou sair, por exemplo, como um a nós temos cinco aqui no topo, como você pode ver, se eu atualizar ou se eu ir para a página do carrinho e então eu voltar. Olha, está ali. Tudo bem, pessoal. Então é isso para estes v vista e todos processando o próximo 4. Adição de produtos ao armazenamento local: Muito bem, pessoal, pessoal, bem-vindos de volta. Então, no último vídeo, se vocês se lembram, nós estávamos apenas clicando sobre estas são duas cartas. E ele estava atualizando nosso carrinho abotoando aqui na palestra com quantos itens temos no carrinho. Mas no momento, não sabemos exatamente quais os produtos que temos em nosso país. Então é isso que vamos aprender neste vídeo. Então, a primeira coisa que quero fazer é se vocês se lembrarem quando precisarmos desses quatro movimentos Teoh nesse ouvinte de eventos, clique para esses botões afegãos. Não sabemos no momento em que tipo de produto estamos clicando, só sabemos que podemos clicar, e isso vai adicionar algo ao carro. Deixa-me mostrar-te o que quero fazer quando chamo números de cartões de disfunção. Eu quero passar dentro destes cartões membros que eu quero passar. Sim, produtos. OK, estes produtos de um ano. Então, onde estão os produtos e eu vou colocar aqui. Então, como vocês se lembram, estamos fazendo esses quatro look que começa com a indexação aqui. Zero. E foi até as três. Então cada um desses produtos terá um índice. Então, sempre que eu clico nisso e chamo essa função, eu poderia pegar isso aqui dentro de um produto, ok? E logo no começo, vou te mostrar. Ok? Estou cheio de Alma de Milho. Não olhe. E eu vou dizer que o clique dos produtos é que eu vou colocar anos, uh, uh, espaço vírgula e eu vou montar um produto. Ok, então eu vou clicar com o botão direito aqui na página, inspecionar para que eu possa abrir as ferramentas do desenvolvedor. Vou entrar na minha consola e olha o que vou fazer se vou clicar neste. Minha grande camiseta. O irmão clicou na ISS e vai me mostrar aqui. O irmão clicou na ISS e vai me mostrar aqui. Nome grandes camisetas. Cansado. Camisa cinza preço 15 no cartão zero. OK, e se você se lembra, isso é o que está aqui no topo. Ok, então deixe-me limpar isso Atualizar a página. Imagine isso. Agora eu vou clicar, ou este aqui o capuz preto. Eu vou clicar no seu Eu estou apenas atualizando a página. Limpe estes agora clique no capuz preto e veja o que ele diz. Nome Black. Quem? O alvo. - Preto. Quem? O Nós temos o preço e em cartões como estes. Por isso, estamos no passo certo. Agora, levem isto para o nosso armazém local. Se vocês se lembram no nosso armazém local, a única coisa que temos no momento é apenas atualizar. Vou clicar nestes. Só não estamos aqui no momento. Só os números dos cartões. Ok, então o que eu vou fazer é se eu rolar para baixo aqui. Então eu estou passando isso para os números dos cartões e aqui depois que eu fizer tudo, apenas pegue este bloco policial com apenas necessidade mais. Vou chamar uma função chamada “sit IVs”. Está bem. E eu também estou com um passe esses produtos. Ok, então eu estou passando o produto aqui, aquele que eu estou clicando no número do meu carro. Eu o agarro aqui no topo desses números de cartas, e então eu estou passando aqui para essas outras funções que ele não existe no momento , mas nós vamos criar é agora. Certo, então defina itens. Vamos criar esses itens de sentido de função de função. Ok? E vamos pegar esses produtos. Vamos colocá-lo aqui também. E eu estou indo para um pacote do Senhor e eu vou dizer até mesmo assinar a função do set item , e eu vou fazer outro consulado. Olha, o meu projeto é, e eu só vou bater a frente. Isso está tudo bem. Apenas certifique-se de que estes funcionando aqui está em execução. Por isso, vou limpar isto. Vou clicar aqui em nós para Cartland, checar meu console e olhar dentro da função do item. Meu irmão usou um grande prato em que eu apenas cliquei em. Ok, eu atualizei estes novamente quando eu clico neste capuz cinza agora, dentro da função do item do set. Meu produto é que ele quer o nome. Você quer amarrar isso? O preço e a renda perfeita. Ok, então o que nós queremos fazer, primeiro que tudo, é que eu vou fazer, hein? Produtos pontos em cartões no carrinho. Ele vai ser igual a um. Ok, então a primeira vez que você estava clicando aqui, você poderia fazer ponto de produto no carrinho, porque se você se lembra Ah, nós temos isso em cartões, opções? Sim, produtos médicos no carrinho. E então eu vou fazer um depósito local. Não defina item Eu acho que o item conjunto que Sim, Deus definir item e o que eu vou chamar isso está sob o problema. Parece que é o que eu tinha antes. Sim. Ok, então produtos em cartões, e então eu vou colocar uma vírgula e então o valor que eu quero. Ok, então agora eu vou colocar, uh, talvez eu vou começar uma nova variável no veículo. Deixe as cartas. Tudo bem. Isto vai ser igual. Duas pessoas viram um objeto, e eu vou colocar aqui o ataque. Vou colocar os produtos tipo ponto. Ok, eu só vou colocar estes nomes e então dentro destes, eu vou pisar apenas o produto em si, ok? Em algum lugar para salvar estes, deixe-me empurrar estes Primeiro de tudo, aqui no topo. E agora eu vou dificar Eu vou passar esses itens do carro aqui. Ok? Então deixe-me entrar aqui. Deixe-me remover todas as coisas lá dentro. Quando você atualizar a página, vou clicar em um desses e ver o que acontece. Diz produto no cartão e eu tenho objeto. Objeto. Ok, então o problema é quando estamos criando esses objetos que eu vou passar para o meu armazém local . Precisamos fazer algo chamado Jason. Não estranho se eu porque precisamos passar estes não como um objeto javascript, mas como objeto adjacente e ao nosso armazenamento local. Então o que podemos fazer é Jason ponto corda se eu Ok, e se eu colocar isso aqui, Jason não corda. Se eu e eu vamos embarcar itens de carro, eu acho que é se eu não estiver errado. Vamos nos livrar disso. Isso é refrescar. Vou clicar no 1º 1 e agora está tudo bem. Está bem, vou empurrar isto aqui. Olha, isso é o que temos agora dentro do nosso sólido local sobre produtos para cartão. Eu tenho uma ótima camiseta com o nome de ótima camiseta para atacar o preço. E eu tenho a contagem um. Certo, perfeito. Então, conseguimos a primeira parte. Mas a coisa é, se eu quiser um rápido agora no 2º 1, por exemplo, estes túmulos Woody. Agora você vê que isso é mais escrito, então vamos começar com essa parte. Porque nós não queremos Estes ficar mais escrito o tempo todo Então, para isso é, sempre que clicamos nos itens do conjunto pela primeira vez, precisamos verificar se já existe algum tipo de itens de carro aqui ou não. Certo, então vamos fazer isso. Então eu vou fazer você ouvir que os itens do Let's Cards vai ser águias para o depósito local. Está bem, deixa-me passar por isto. Vamos porque eu já inicializei aqui no corredor primeiro. Então, o armazenamento local não recebe o item, está bem? E o item que eu quero obter são esses produtos em tipos. Está bem. Para verificar se existe. Já, algo em nosso armazenamento local, então não recebe empate. Isso são cartas. Ok, então isso é o que meus itens do carrinho vão ser. Ok, e então eu vou para um carro, então ande. E eu vou dizer que meus itens de carrinho são, e eu vou apenas colocar aqui itens de cartas. Certo, então vamos checar isso. Vou atualizar a página. Vou entrar no meu console. Vou clicar nestes grable, o por exemplo, e olha o que temos para chegar no topo. Meus itens do carrinho são, e então temos o túmulo temperamental, e temos o nome e se você verificar isso. Este é um Jason para imagens e quatro meses. Exactamente. Porque seu velho cheio dessas citações não está em um objeto javascript normal. Então, para isso, tem que Quem tem itens é igual a dois. O Jason. Não é difícil, porque queremos passar de Jason para um objeto JavaScript. Ok, hum, então eu vou fazer aqui é, hum apenas os itens. Ok, agora eu vou clicar sobre estes foodie novamente. E, Lou, o que eu tenho desta vez, ok. Eu tenho meu grande filme com o nome com a hora do preço e no carrinho um, isso é o que está lá exatamente no momento, o que é perfeito, que é perfeito, que é perfeito, para que possamos ver o que está lá dentro. Bem, vamos apenas olhar fraco verificando aqui e primeiro dentro de cada declaração. Se OK, guardas, itens de carro, ele é a diferença, então. - Não. Está bem. Significa que ele já é algo agora em um depósito local em nossos cartões. Ok, se estamos tentando obter algo do nosso armazenamento local e tivemos um tomá-lo estes com adjacente é como um objeto javascript. E então nós fazemos uma verificação Se nossos itens são diferentes do que não, isso significa algo que já existe. Então é isso que queremos fazer. Queremos fazer cartões, itens, e então eu vou colocar esses suportes para colocar meus produtos. O tipo vai ser igual a todos. Desculpe. Quero acessar os métodos dos cartões. Toby é igual a dois ou mais Waas igual a um. Então isso é para aumentar um que já está lá, e eu vou te mostrar agora. Ok? Isso é quase, como itens de cartas em. Então, por exemplo, se eu vou escolher o primeiro ataque ao produto, se vocês se lembram, ele é ótimo camiseta. Certo, isso é o que vai acontecer. Onde é que está? Onde é que está? Isso é exatamente a mesma facilidade de comprimento. Está bem. E então nós estamos recebendo essa propriedade chamada em cartão, e nós estamos aumentando em um. Ok, eu sou apenas tudo isso, então, uh, eu estou apenas limpando essas atualizações Eu vou clicar no primeiro 1 Olhe essas coisas grandes d da primeira vez. Olha, nós temos um no número total de cartões e o que temos dentro, nós temos um não-objeto com uma chave de camisetas ótimas e dentro dela, nós temos o nome. A hora do preço. E entrámos no carrinho um. Vou entrar limpo mais uma vez. Olhe. Certo, então não aconteceu nada. Deixe-me ver. Porque com estes, se declarações e nós precisamos colocar que mais OK, estes outros vão ser se nós estamos clicando para baixo na primeira vez. Ok? Quando você está clicando para baixo pela primeira vez, você quer apenas definir o seu produto em cortes para ser um. Esta é a primeira vez que você está clicando. Isso significa que seus itens de carro não é. Não há nada lá dentro. Ok, então deixe-me cuidar disso. Refresque. Vou tremer aqui. E nós temos uma ótima camiseta com o preço de falar de nome no corte. O que? Porque esta foi a primeira vez que clicamos. Eu vou e vou clicar no próximo. E se vou parecer aberta, tenho impacto em duas dessas camisetas. E quando eu clicar mais uma vez, olha, eu tenho três no cartão e eu sei que o número total de cartões também é três no topo OK, mas há um problema agora com estes porque se eu vou entrar, clique, Por exemplo, nesta camiseta preta poderia dizer: “ Olha, Olha, o que vai acontecer? Nada é diferente do que aqui. Olha, vou atualizar a página quando clicar aqui. Nada está acontecendo. Ok? Porque, olha, nós estamos tendo todo o tempo ainda estes e uma grande camiseta de antes. Então vamos corrigir isso, By the way, Eu só vou clicar aqui no console para deixar vocês mostrar, olhar e erro de tipo tribunal não pode re propriedade de no carrinho de indefinido. Ok, então o problema é quando eu estou tentando fazer isso, se eu tentar fazer onde itens de carrinho e, em seguida, o produto atacar ponto no carrinho fora algo que não foi adicionado antes, como, por exemplo, estes se você verificar aqui no momento, nós temos esses grandes problemas porque esta foi a primeira coisa que nós clicamos em. Certo, vocês se lembram quando clicamos nisso pela primeira vez, estamos atualizando nosso produto em carrinhos. Toby é igual a um dedo. Tudo bem, o que quer que você clique, então você cria estes muito leite são itens. Ok? Toby é igual a qualquer que seja o seu produto Time Name. Ok, então se você clicar, por exemplo, na camiseta preta pela primeira vez, quando ela acabou de atualizar, ela foi rápida na camiseta preta pela primeira vez. Olha, o produto é visto cartões? Você tem essa camiseta preta chave, e então você tem tudo dentro com o carro uma segunda vez que você clica. OK, ele vai verificar facilmente. Os itens não podem saber se você se lembra que os itens do carrinho está apenas tentando recuperar o que temos aqui. Se não é saber que estamos fazendo metade itens e então imagine que eu vou clicar sobre estes hoodie cinza porque estes grande temperamental não existe em ouvir esses objetos, como você pode ver vai nos dar esse erro. Então vamos verificar estes. Agora, eu vou fazer um olhar confortável só para mostrar a vocês fazer um ponto de console Log off os itens do carro irmão para atacar. Certo, então no momento temos no armazém local apenas uma camiseta preta. Então, se eu tentar semana sobre estes hoodie cinza, olhar em sarnento s 66 que é estes linha diz que estes indefinido. Ok, então se isso não está definido, se eu tentar assumir este Israel, ele diz indefinido. Certo, então não podemos fazer nada porque ele é um produto diferente do 1º em que clicamos . Então vamos fazer qualquer declaração. Eu vou aqui. Se cartões, iTunes, pontos, pontos, tipo de produtos é a diferença, em seguida, na busca. Está bem. Quero atualizar os itens do meu carro para ser igual a um novo objeto. Está bem. E o que eu vou fazer é pegar o que está no meu carro itens de antes, usando o resto do operador do trabalho. Ótima. Então, não pense em nossos pensamentos, cartões , itens, e então o que eu vou colocar em são apenas meus produtos naquele tempo com o meu produto lá dentro. Ok, então deve ser isso. E finalmente, depois, fora do curso, eu apenas atualizo o em carrinhos. Toby Bliss um. Está bem, deixa-me guardar isto. É refrescante. Vou clicar, por exemplo. Esta é a primeira vez. Então, a primeira vez que clicamos em um produto está bem. Por isso vou clicar nestas camisetas fantásticas. Olha, eu tenho uma camiseta ótima com um carrinho de um. Eu vou clicar mais uma vez e eu tenho rendimentos para. Mas agora, se eu tentar ir e clicar em uma diferença Produtos, por exemplo, estes hoodie cinza Ok, um não está funcionando. Vamos ver o que há de errado no console. Ainda está dizendo que no 73 eles usam algum tipo de sempre eso Vamos apenas verificar o meu apenas limpar estes refrescar e olhar aqui. Desculpe, eu não quero que isso seja diferente do que apenas bom. Eu queria ser igual a um definido, como estávamos verificando antes. Se quando eu clicar, um desses alvos desses produtos vai me dizer que é indefinido. Eu só quero atualizar meus itens de carro para ser o que é no meu armazenamento local de antes e , em seguida, nesses novos produtos. Certo, então vamos nos refrescar. Vou clicar nestas camisetas. Quero. Vamos verificar. Temos cartões de guisado. Vou clicar em mais um. Então, todos os três. Agora vou clicar no grande Moody, por exemplo. Está bem. Eu não salvei meu arquivo. Desculpe por isso, pessoal. Ok, vamos apenas entrar aqui aplicação. Vamos nos livrar desses. Refresque. Vou deixar 123. Quero três destes. Eu vou clicar no Santo e olha, eu tenho o grande Houdini também. Com um no cartão. Entro aqui e clico. Eu fui preso e se você ver Olhe, eu tenho três aqui da grande camiseta que eu peguei do capuz cinza. E eu não preciso de um total de itens no topo que acabamos de pegar de antes do vídeo anterior cinco. Ok, eu não posso nem mais um. Digamos que os navios de chá preto que é camiseta preta, nome, preço do tempo e no carrinho. Tudo bem, então eu acho que é isso para esses reais e apenas ver se eu estou perdendo algo mais. Não, acho que assenta bem, pessoal, como normalmente. Se você tiver alguma dúvida, basta me informar nos comentários abaixo. E isso é tudo para você. Rapazes do vídeo. Vejo-te no próximo. 5. Calcule o custo total no carrinho: Muito bem, pessoal, pessoal, bem-vindos de volta. Então, neste vídeo, vamos calcular o custo total de nossos produtos que estamos adicionando ao carrinho. Então eu vou criar a função. Hum, provavelmente. Sim, isso pode fazer. Apenas aqui em baixo. Depois de tudo isso. Organize esses códigos um pouco melhor. Só para não termos, tipo, muitosespaços diferentes em todos os lugares. Só para não termos, tipo, muitos tipo, Ok, eu acho que está tudo bem. Então eu vou criar a função aqui chamada Custo Total. Ok. E essas funções sempre que eu vou e eu faço uma olhada através do meu próprio aplicativo para Carter Button vai passar este funcionamento aqui. Custo total. E eu quero passar para dentro dos valores desses produtos. Ok, então eu vou fazer decks. Eu gosto de antes. Então, quando eu clicar em um desses, eu posso ter acesso às propriedades que temos aqui. Por isso, vão ser produtos. Ok, então eu vou pegar esses valores. Vamos pegar esses volumes no ano. Nós o um parâmetro fora do produto. Você pode chamá-lo do que quiser, porque este é o perímetro que você está apenas agarrando. Então eu só vou dio console não Senhor fora os produtos Fries é e então eu vou colocar a chamada. Não vou colocar produtos. Pontos, batatas fritas. Certo, vamos testar isso. Vou para a minha consola. Eu vou clicar, por exemplo, estes hoodie preto, que é $25 com um clique, e ele vai dizer os preços do produto 20. Ok, porque eu não atualizei estes aqui corretamente. Então eu tenho 25. Eu tenho 10. Então 25 10 e então eu tenho 20 e então eu tenho 50. Ok, desculpe por isso, pessoal. Eu não tinha os mesmos preços, como os do ano na página html. Então deixe-me deletar o antigo armazenamento local. Atualize a página para que não tenhamos nada de guarda ou algo assim. Vou clicar nestes moletons pretos. Certo, então temos um moletom preto no nosso armazém local. Temos um produto no cartão, o que é bom. Temos os números de cartão um, e vou entrar no meu conselho, e diz que é o preço do produto East 25. Perfeito. Porque nós clicamos nesses capuz. Vou clicar nessas camisetas lindas agora. Então deve me dizer o produto. Preços 50. Ok. E oitenta. Certo, então vamos pegar as coisas primeiro. O que eu quero fazer é fazer um depósito local. Não defina o item. Ok. Isso sim, set item. E o item que eu quero definir será chamado de custo total. E o que eu quero colocar dentro é o preço do meu produto. Certo, o preço do meu produto. Então vamos entrar em aplicação. Exclua todo o armazenamento local para que possamos reiniciar. Vou clicar nesta camiseta ótima e olha, agora temos o custo total de desconto. 15. Então, se eu vou clicar mais uma vez sobre ele, olha, olha, nós acabamos de ser usados em cartas, ok? Eu não cliquei. Acho que sim. Tenho duas cartas destas camisetas fantásticas. O total de números de cartão geral ainda é muito. Mas nosso custo total não está sendo atualizado porque quando clicamos pela primeira vez, estamos definindo o primeiro valor. Mas se você clicar na segunda vez, você precisa verificar se há algo no armazenamento local que já existe ou não. Então é isso que vamos fazer. Só estou impedindo essas leis do consulado e vou criar a nova variável aqui. Vou chamá-lo de “Leads”. Custo do cartão. Ele vai ser igual a dois armazenamento local pensamento recebe item. E qual item eu quero obter? Eu quero pegar este que é chamado de custo total. Ok, então eu vou didio Karl Soule Dot trancar meu carrinho. O custo deles é, e então eu vou colocar esses custos esculpidos que estamos pegando do depósito local . Certo, vamos dar uma olhada nesse console. Vou clicar aqui nestes grandes temperamentais, por exemplo, e vai dizer-me que o meu cartão custa 15. Ok? E se eu vou fazer um curso, a fechadura fora, eu só vou fazer o tipo de custo atual. Isto é apenas para mostrar que tipo de dados são? Então eu vou clicar aqui nesse ótimo humor, e ele vai me dizer que meu carrinho custa 20 e é uma corda. Então, sempre que obtemos algo de volta do armazenamento local, ele vem como uma string porque queremos o número. Vou atualizar o custo do meu carro. Está bem, deixa-me entrar aqui. Quando eu joguei minhas cartas custam ser igual a dois A analisá-lo fora do custo do cartão. Então estamos convertendo de uma força em um número. Então vou tentar mais uma vez. Agora eu quero que o tipo fora o tipo de dados da variável thes é um de seu número, então nós podemos realmente usar o agora toe calcular o custo total do nosso carrinho. Ok, então a próxima coisa é eu vou verificar se meu custo total é não ou não. Porque, por exemplo, a primeira vez que eu clicar sobre ele, Eu quero apenas fazer isso, OK, OK, Mas se o meu custo gato não é em todos, isso significa que existe que já algo no meu armazenamento local. Quero fazer algo diferente. Então, o meu custo é a diferença ? Não, significa que o existe. Vou fazer outra coisa. Vou pôr isto no meu armazém local. Está bem, vamos guardar isto. O que? Quero colocar o interior do ano. Quero definir meu armazenamento local, não definir o item desses custos totais. E isso vai ser o que está lá de antes do custo do carrinho mais esses novos preços do produto que estamos clicando em Ok, então cujo carro custo mais preço. Está bem, , vamos experimentar estes. Não, limpe o depósito local. Atualize a página. Então, se eu clicar uma vez na minha camiseta, temos algum tipo de arejamento aqui. Não temos um número. Vamos ver o que há de errado aqui. Bem, eu acho que o problema pode ser porque nós só queremos converter o custo do nosso carrinho. Quando são lançados custos de corte é realmente diferente do que não. Talvez isto seja o que nos está a dar um problema. Então, vamos limpar a atualização de armazenamento local. Vou clicar no meu grande turno. Olha, eu tenho $15. Vou clicar de novo agora. Eu tenho o total fora 30 e eu tenho o total de produtos aqui para vamos verificar também nossos produtos em cartões. Tenho um grande problema. Se eu clicar sobre ele, Eu tenho o nome ataque um preço e quantos cortar para. Vou fazer exatamente a mesma coisa agora pelo capuz. Talvez apenas gostasse de um dois. Assim, o preço total é 2020. Então é 40 mais 15 15 30 40 em 30 é o custo total 70 que é perfeito e eu cheguei a Gray. Quem? Estes estão em cartas. Eu tenho duas grandes camisetas no carrinho e o total aqui no top quatro e meus números de cartão para então todos estes agora está funcionando bem. Tudo bem, pessoal. Por isso, temos os nossos custos totais. Só vou limpar isso mais uma vez e apenas clicar. Por exemplo, uma grande camiseta. Vou clicar em um capuz cinza e, por exemplo, camiseta preta usada. Certo, então temos 15 mais 2035 mais 45. Quanto é o nosso custo total? 45. Quantos itens devemos ter no cartão? Três Olhar. Números de cartões. Três. Quanto tem aqui em cima? Três. Ok, se eu clicar aqui em produtos no carro, eu tenho uma camiseta ótima. Tenho o capuz cinza e a camiseta preta. Ok, todos eles aqui. Tudo bem, pessoal, essa tomada para estes vídeos, e vejo vocês no próximo. 6. Criando a página de cesto com todos produtos: Certo, pessoal, bem-vindos de volta a este vídeo, vamos começar a fazer a nossa página de contagem quando pudermos ver todos os nossos produtos que temos que cortar. Então, se vocês se lembram que nós tínhamos aqui é o botão que nos leva para a página do carrinho no momento. Nada acontece aqui. Se você olhar para as cartas aqui, nada acontece. Certo, então é isso que vamos fazer no momento. Nós adicionamos aqui ainda nosso armazenamento local com as coisas que adicionamos de antes. Se vocês se lembram, estamos no último vídeo uma ótima camiseta, moletom cinza, uma camiseta preta, todas essas coisas. E uma vez que vamos para o nosso carrinho, não há nada lá dentro. Certo, vamos resolver isso. Então a primeira coisa é, precisamos obviamente carregar nosso roteiro, ok? Porque nosso script não está carregando no momento. Então, se eu colocar isso agora, estamos carregando pelo menos nosso número de cartões de produtos no carrinho. Então isso agora é atualizado aqui no topo. O almoço está fechado. Ele é um por um segundo. Vamos começar a colocar algum tipo de elementos HTML de estilo. Então vocês podem ver o que vai acontecer. Então a primeira coisa que quero fazer é criar um ladrão com uma classe de produtos. Contenha isso. Ok, então dentro deles foram criados ladrão com uma classe de produto que eu tinha, uh, então eu vou ter em h cinco com garras fora do título de produtos, ok? E eu vou colocar esses produtos. Eu vou colocar outro H cinco na classe de preço, e eu acho que é isso. E eu vou colocar um preço. Ok? Vamos tirá-lo de h cinco. Esqueci de pontar para a aula, Theseus um vai estar com uma quantidade de quantidade. Quer um pouco de chá? E finalmente, eu vou colocar um no H 5 com uma classe de total ok, e vou dizer que vai, então está tudo bem depois que estes saírem com a classe de candidato irmão . Vou fazer um acordo com a classe de apenas produtos. Então é aqui que vamos colocar todos os nossos produtos que eles estão no armazenamento local. Vou deixar vazio porque vamos preencher estes com javascript. Atualize a página. Vocês filmam CDs no momento, só esse irmão joga o preço total. Então talvez possamos começar a adicionar alguns CSS. Ok, então eu vou colocar isso aqui só vou colocar a divisão. Então eu sei disso agora. Isto é o que vai parar minha página de cartões, e eu vou fazer, hum, hum, primeiro de tudo, onde fazer com Container Pro? Isso é ... onde está? Os meus produtos de contentores. Se eu me lembro, isso deve ser chamado como podemos chamá-lo recipiente de produtos. Isto é bom. Então eu vou chamar esses produtos de contêiner, ok? E o que eu quero fazer com este ISS foi colocado um mês com marcas fora de 650 pixels. Eu vou colocar o conteúdo justificar como sons espaciais, e eu vou colocar uma margem zero também, para que ele fique centrado na página. E finalmente, vamos ver, um, margens também são e eu vou colocar o Jim 50 diesel errado para os 50 pixels principais. Ok, então como vocês podem ver nós temos agora estes um pouco centrados na página. Vindo. Indo inspecionar. Olha, este é o meu material da escola particular. Então, tudo está um pouco mais centrado na página, como vocês verão em um segundo. Então o que? O que mais eu quero fazer? Eu também quero colocar esses produtos recipiente. Eu acho que se eu não estiver errado, está na minha contendo apenas olhando aqui produtos contendo então nós vamos aplicar esses mesmos estilos em todas essas coisas. A próxima coisa que eu quero fazer é colocar um pouco de estilo para o meu produto. Cabeçalho alguém colocar desenhar decks e lá. Ok, ele vai ficar com a onda desligada 100%. Vai estar com Max com 650 pixels fora com o holofote do Flex Flex. Agora quero que as pessoas justifiquem o conteúdo. Acho que nem preciso de pôr esta bandeira a começar. Vou colocar a fronteira lá. baixo para fora. Quatro pixels, pistas lentas, luzes. Ótima. Está bem. Como vocês podem ver, parece um pouco melhor. Vou colocar o seu filho margem de margem zero também. Está bem. Que era o meu produto. Heather, é isso? Então, isso é bom. Então ele está bem centrado na página. Agora que eu quero estes, eu quero deixar meus produtos seu título com uma semana de folga 45%. Olha, este é o meu produto. Ok? Então eu vou verificar o meu preço para estar com desconto, hum, 15%. Acho que também vou colocar um pouco de água da fronteira exatamente igual. Tipo, de antes. E eu vou colocar o floco de tese fora de manchas, justificar o conteúdo? Não, uma linha aumenta. Um de vocês vai ver em um segundo. Por quê? Então essas coisas pelo preço, eu acho que deve ser bom. Sim, porque depois, eu vou fazer outra coisa lá dentro Eso eu tenho estes. Temos isto para grandes celas. Acho que não preciso colocar as duas fronteiras. , Na verdade, verdade, vamos ver. Vamos ver. Vamos deixar isto por enquanto. E depois de o fazermos, vamos livrar-nos disto. Vou copiar. Isto vai ser exactamente a mesma coisa. Então eu não quero colocar o vídeo muito longo só por causa disso, vocês sempre podem cair e apenas copiar esses estilos que eu tenho. Ok, então nós estamos para o meu total e para os meus produtos. Está bem. Quando uma quantidade de atualização, acho que está faltando algo para o meu de cestodecesta. Tenho a imagem dos meus produtos, os meus produtos. Isto vai ser para depois que isto vai ser para os meus produtos. Eu acho que é isso. - Sim. Quando voltarmos, minha quantidade acho que estou perdendo minha quantidade. Essa foi a coisa depois do preço. Está bem, acho que estás à espera do meu preço? Sim, acho que está tudo bem por enquanto. Certo, certo. Então temos essas peças, e obviamente não temos mais nada. Eu só quero agora ir para o meu ponto principal Js. Então nós temos todos esses estilos que eu quero criar agora, outra função que vai verificar se há algo no meu armazenamento local para verificar se há um produto no momento, que são três deles aqui. Se vocês se lembram, nós temos isso. Basta empurrar isso. Temos algum produto no cartão. Camiseta cinza, uma cinza. Quem? O Juan. Temos uma camiseta preta. Um custo total 45 conseguiu a contagem. Números três. Ok, então, , vamos começar a colocar isso com nosso roteiro de trabalho, então eu vou criar a função chamada essas cartas de jogo, ok? E eu quero que esta função seja executada sempre que amamos a página. Então, sempre que carregamos a página pela primeira vez, eu quero que essas funções sejam executadas imediatamente. É por isso que vou chamá-lo aqui. E o que essa função vai fazer é que eu vou fazer. Vamos itens de carboidratos iguais. Então o armazenamento local teme recebe item. E qual é o item que eu quero comprar? Se vocês se lembram, temos esses produtos no cartão. Ok, então carrinhos de produtos, então obviamente encontrar para fazer item de cartão é igual a Jason pontos. Porque quando você pega alguns objetos do armazenamento local, eles vêm é Jason Com todas essas cordas ao redor, queremos converter de Jason em objetos JavaScript. É por isso que estou usando isso, Jason, não pars. Vou pôr isto aqui e agora. Só queria um visual confortável. Certifica-te de que isto está a funcionar. Vou passar por aqui. Este cartão, está bem? Vai salvar estes? Vou verificar. Meu item de cartão de console não está definido online. 98 itens de carrinho. Ok, isso é o que eu queria vir. Eu Teoh. Está bem. Contato é o que eles descobrem quando, Ok, houve alguns casamentos aqui. Acho que é um tipo de itens. Então, se vocês verificarem, Olha, quando nós amamos a página no meu console está dizendo, olha, eu tenho todas essas coisas vindo do meu armazenamento local, que é realmente o que nós queremos. Queremos verificar que tipo de produtos temos quando o nosso armazenamento local. Certo. Então, realmente, a primeira coisa que eu vou fazer é apenas verificar se itens de cartão. Ok, então se eu colocar algo assim, itens de cartão vai verificar se ele existe ou não, se ele vai ser não ou se eles descobrirem que isso não vai funcionar, ok, eu quero verificar se o cartão itens. E eu também quero verificar se estes estes contêiner estes produtos recipiente porque em nossa página inicial, porque temos compartilhando estes JavaScript final sem uma página inicial e com este cartão. Então eu só quero que isso corra. Se esses produtos não contêm um elemento está na página. Então eu sei que a disfunção só vai correr para a página da tese. Então o que eu vou fazer é apenas o meu recipiente vamos produtos. Ele vai ser igual. Dois documentos, cães, consulta, seletor desligado. Quem tinha se lembrar desses produtos. Uh, contêiner. Está bem. Então, se o elemento do existe na página, eu quero que essas duas coisas sejam executadas. Vou pôr estas mãos. Apenas certifique-se de que isso está funcionando na web. Um olhar mais atento, Senhor. E eu vou dizer que estou fugindo. É só um teste. Vou entrar no meu console aqui no topo, eu digo correndo. Então, isso significa que estamos na página do carrinho com o produto que não contém elemento existe. E também temos algo sobre nossos itens de carro no depósito local. Ok, isso é o que eu tenho. Esta condição se declaração. Então agora, sério? O que quero fazer é deixar que eu separe a lei do conselho. Eu vou fazer meus produtos contendo ok, Don't Skinner html. Está bem. Eu quero inicialmente quando carregamos a página para estar vazia. Se há algo que já está bem, e então o que vou fazer é olhar. Se vocês se lembram desta lei do consulado onde estávamos pegando todas as nossas coisas com esses itens de carros, eu quero ver tudo isso. Deixe-me fazer aqui outro relógio do consulado para que vocês possam ver fechar a fechadura dos itens do carrinho. Ok, olha, este é um objeto com uma chave de camiseta cinza, moletom cinza, camiseta preta e dentro há um objeto nominal, é claro, mas eu quero olhar através de todos esses . Então eu vou fazer bem objetos pontos valores de meus itens de carrinho. Ok? E então eu quero verificar os valores dos meus itens de carpa. Não quero checar essas chaves. Eu só quero verificar os valores dentro. Então eu vou olhar primeiro através destes objetos do que através deste do que através deste e assim por diante. Vou fazer um esfregão. E aqui, vou chamá-los de um item, por exemplo. Está bem. E agora ele é o que eu vou acrescentar. Vou fazer um recipiente de produtos. Pensado em html, eu vou fazer um plus igual plus igual. Então eu sei que a primeira vez que ele vai correr pela primeira vez. O que? Não temos nada. Então da próxima vez vai adicionar algo lá, ele vai ficar estranho, porque se você tem vários produtos que você não quer substituir, é por isso que você precisa colocar o mais igual. Ok, então eu vou usar alguns carrapatos para trás. Ok, porque eu não estou familiarizado com essas táticas é apenas o caminho para que possamos injetar variáveis Cem dentro com as raias. E aqui, deixe-me ver. Vou pôr um ladrão, está bem? Com essa classe de produtos, ok. E aqui, eu quero ir. Se vocês se lembram disso, vocês são minhas cartas? Ok, eu corto. Eu quero colocar um bata perto este aqui em baixo, se vocês vão verificar. Eu não tenho certeza se você perguntar alguma coisa por causa da minha imagem que vocês vão me ver. Vou empurrar aqui. Você sempre pode copiar isso. Gosto de um elemento. Está bem. Vou colá-lo logo abaixo. Ok? Deixei-me ver o ícone de ferro de alguém e depois depois do desejo Nikon, vou colocar uma imagem. Assim como a I. M. G. Nós esta força fora, ok. E esta é a fonte. O que eu vou colocar é, hum, não cortar e eu vou colocar imagens, cães, cães, um cifrão, e agora eu vou pegar os pensamentos do item. Acho que ele está cansado. Não pague e não acha errado. Eu acho que assentos e então eu vou apenas colocar apenas roupas, o é. Eu também colocaria o Spahn bem. A aula do Alcorão no momento. Vou colocar o nome do cão certo. Eu acho que é isso. Apenas feche estes. Vamos refrescar a página e entrar no carro. Olha, isto é o que temos no momento, OK? Chegando apenas com isso. Então vamos estilo camiseta cinza. Vamos ter algum problema aqui com a minha extensão. Então, o que foi? Talvez isso. Ok, isso é bom. Temos o nosso botão de fecho porque vamos fechar depois de termos o nome, temos a imagem, e pronto. fecho porque vamos fechar depois de termos o nome, temos a imagem, Vamos colocar alguns estilos nisso. Deixe-me ver. Encontra algo que falta. Vou pôr os meus estilos aqui depois do contentor dos meus produtos. Está bem. Vou colocar estes, uh, uh, você é Nikon? Então eu poderia colocar esses estilos, ok? Apenas aumentar seus produtos de tamanho de telefone contendo eu posso. Acho que está tudo bem se eu não estiver errado. Eu vejo o que pode estar errado em nosso recipiente de produtos. Eu só quero chorar aqui. Estes produtos Olhe, este é o que era o problema. Ok, nós temos esses produtos que devem ser quando quisermos colocar se vocês se lembrarem no nosso carrinho este é o ladrão onde vamos colocar tudo isso. Então agora está parecendo melhor. Ok, então isso é bom. Vamos para o resto das coisas. Então eu vou entrar aqui no meu mapa de pontos. Deixa-me só ver. O que mais eu quero colocar lá? Quero colocar outro presente. Está bem. Com as garras fora do Price. Está bem. Então eu vou apenas fazer Steve agora, o que eu quero colocar aqui é apenas que eu realmente posso apenas colocar isso em uma linha. Eu quero colocar um ano. Apenas o item Dogs Price. Ok, então eu tenho a coisa dedo do pé, tirar essas coisas do este produto do carrinho. Eu tenho o nome, eu tenho o preço. Agora vamos fazer outro para a quantidade. Então eu vou fazer agora, Deif Ok. Com Kloss fora da quantidade, classe de quantidade, e então eu vou fechar o ladrão, ok? E o que eu quero colocar dentro é que eu vou colocar na verdade alguns ícones de ferro para aumentar e diminuir. Então, se eu vou entrar nesses ícones... Vocês vêem essas coisas? Vou colocar algo assim. Eu só vou copiar algumas coisas que eu tenho aqui quando um policial eu e eu pudéssemos. Ok, isto vai para dentro. Depois, eu vou colocar o que eu vou colocar a extensão e vamos colocar as ervas daninhas. Meu item ponto no carrinho. Tão assustada parte eso tem isso. E o que mais? Eu só preciso colocar outro vai ser este. A seta para a direita. Então, vou copiar também. Vou colocá-lo ano após a verificação da coluna vertebral. Olha, isto parece muito melhor, está bem? Isso está olhando muito melhor misturando algo em meus estilos no meu preço. Eu preciso colocar esses também. Está bem. Sim, porque estava faltando isso daqui. Finalmente, só precisamos colocar algo no total. Ok, então eu vou colocar permanecer dot Js aqui. Basta colocar outro ladrão. Ok? Então chama a vista. Eu não faria isso com uma classe fora do total. E agora dentro, vou colocar um cifrão para colocar meus pensamentos em cartas vezes minha altura e preço de pensamentos. Então, por exemplo, aqui temos apenas 15. Então vai ser 15 vezes um vai ser o total. Então, se você tem, tipo, dois ou três produtos, esse número vai se multiplicar por isso, e vai te dar, tipo, um total. Está bem. Eso, isto está bem. Eu quero ser como um cifrão extra como uma força. E então é Coleman 00 para que possamos tê-lo como se fossem dólares. Eu estou indo para a mesma coisa pelo preço aqui em cima. Vou ter outro lado do dólar como este. Então temos estes 2010. Isso é bom. E finalmente, o que eu quero fazer é logo depois de fazermos isso. Se declaração, deixe-me ver se isso é depois. Sim, depois do meu loop, Eu só queria fazer novamente o meu recipiente produto ponto html interno Ele vai igual a mais igual ok, eo que eu quero perguntar. Então eu vou colocar mais algumas táticas. Preciso de pôr isto. Isso é só semi. Colon é apenas uma boa prática para ir colocar um se bem, e eu vou adiar a aula. Cesta . Então? Então o contêiner relata um NH 4 que classe fora de cestas. Então é tudo o que eu disse. Está bem, para dentro. Eu só vou derramar, hum, Cestas total. Vamos ensinar essas quatro mãos de idade. Eu vou colocar quente ou h quatro. Ok, desta vez com uma aula fora de cestas, eu quero fechar estas quatro horas e dentro. Eu só quero com sinais de $1 para que possamos ver o cifrão na página. Então eu colocaria chaves de placa de porta para colocar meu carrinho. Ok, se vocês se lembram do depósito local para aplicar nosso custo total, eu preciso pegá-lo aqui. Então eu vou fazer a mesma coisa. Como de antes. O que não pode custar quando uma cópia destes de antes. Vou pô-lo aqui. Deixe o cartão custar. E aqui em baixo, vou colocar cartas. Além disso, tudo bem, então isso é bom. A única coisa que estamos faltando agora, se eu não estiver errado, é apenas adicionar um pouco de estilo porque ele está faltando para eles. Então, para o contentor total da cesta, vamos dançar estes. Ok, então pelo título da cesta, eu vou adiar a semana 30% e meu total de cestas. Eu só vou colocar a semana de 10%. Ok? Como isso. E como podemos ver, obviamente, ainda não temos essas coisas funcionando. Isto é o que vamos fazer a seguir. Mas temos todos os produtos que estamos adicionando e queremos os totais. Então vamos apenas ler de todos esses armazéns locais. Como podem ver, não temos nada aqui no momento. E então eu vou para casa. Vou acrescentar, por exemplo, talvez dois pretos. Quem? Estes 12? Eu vou sair talvez três, um, um, 33 dessas camisetas pretas. 123 Então chegamos a dois moletons pretos e temos três camisetas pretas com um total de $50 para este $30 para estes quatro, e nós temos este total. Tudo bem, pessoal, isso é tudo para esses caras de vídeo. Agora, a única coisa que nos falta agora é como quando clicamos aqui. Podemos remover todos esses irmãos, mesmo que haja 123 ou algo assim. E então basta clicar nessas setas para ter certeza de que podemos aumentar ou diminuir as quantidades. Tudo bem, pessoal, isso é tudo para este vídeo. Vejo-te no próximo. 7. Como remover produtos do carrinho: Muito bem, pessoal, pessoal, bem-vindos de volta. Então, neste vídeo, nós estamos indo toe adicionou a funcionalidade para remover esses itens com este botão que temos aqui. Se clicarmos nele, mesmo que possa haver dois ou três desses moletons pretos ou mesmo se você vai remover esta camiseta preta aqui, podemos removê-los todos de uma só vez clicando neste botão. Então, para isso, eu vou apenas criar aqui em baixo após a minha função de cartão de exibição. Só vou fazer um pouco de espaço, e eu vou criar uma função chamada Exclui os leads, botões. Ok, alguma coisa. E agora, realmente, o que eu quero fazer é exatamente como quando eu clico em um desses botões, eu só quero testar para ter certeza de que há um console, aquele log ou algo assim para ter certeza de que isso está funcionando. Então, primeiro de tudo, vamos direcionar todos esses botões na página, então eu vou apenas criar, hum, variável chamada excluir botões também. Seria o mesmo nome. Ok? Ele vai ser igual a documentos dot queary selector tudo o que você sabe, porque vai haver vários desses elementos na página. Quero dizer, apenas empurrei estes um pouco mais para que possamos ver o suficiente para que eu possa apenas redimensioná-lo. Ah, e esses itens, se vocês entrarem aqui quando clicarem nisso, podemos realmente ir em um produto. E então eu em Aiken. Está bem. Então eu posso fazer produtos, e então eu sou Icahn. Esse é o elemento. Ok, isso deve ser bom. Agora, eu vou montar um loop quatro aqui. Então, quatro, vamos. Oi é igual a 20 Eu vou fazer I menos do que excluir parte inferior do comprimento do ponto. Então, como muitos botões é que temos, vamos fazer um quatro olhou através de todos eles, então eu vou fazer um I plus. Ok, então agora eu posso realmente fazer um loop através de todos esses botões, OK? Fazer os botões de lead I dot arts evento ouvinte e o ouvinte de eventos que eu quero ter aqui é apenas um clique. Então eu vou passar uma função ou necessidades. E agora, só para testá-lo, é claro. Eu quero fazer um console que travar desligado clicou. Ok, então as páginas foram atualizadas. Vamos entrar aqui, deixe-me abrir meu console. Só vou me livrar desses. Vou clicar neste botão e não aconteceu nada. Hum, ok. Obviamente, nada aconteceu porque criamos essa função, mas nós nunca a chamamos, então precisamos chamá-la em algum lugar para que esses Teoh possam ser executados. Claro que sim. Então vamos fazer isso. Então eu quero chamar essa função, Excluir botões para aplicar esses ouvintes de eventos, clique em um sempre com isso. Jogue o carrinho. Ok, então antes de nossos vídeos anteriores, nós configuramos nossa função de cartão de exibição, que exibe todos esses itens aqui. Então, uma vez que tudo é exibido na página apenas no final desses cartões de exibição, Eu só vou chamar a função de excluir botões. Ok, Agora, nosso cartão é tudo exibido no final, chamamos a função de excluir botões e a função de excluir botões. Basta configurar um vazamento de ouvinte de evento ofc que sempre que clicamos nesses botões, ele apenas como um registro de ponto cônsul de clicado. Então é exatamente isso que vou fazer. Eu vou clicar aqui e ele salva clicado no topo quando você clica sobre estes um olhar , e ele vem duas vezes como clicado. Então agora esses botões são ROK são com uma função que podemos fazer algo com ele. Então, provavelmente a primeira coisa que quer fazer agora é sempre que eu clicar neste botão, eu quero pegar esses, hum, nome fora do produto em si. Ok, então se vocês voltarem aqui para o HTML, vocês podem ver isso. Este é o nosso olho em Aiken, por exemplo, onde estamos realmente clicando com o botão. Ah. Então, se vocês forem até o pai, vocês poderiam realmente entrar no pai, obter o conteúdo do decks, que deve indicar o nome do produto. Então vamos experimentar estes. Então eu vou fazer aqui os botões de leads. Eu cães elemento pai. Então estamos aqui com estes Aiken de ferro. Eu quero subir um nível para o produto, então. Certo, vou fazer um condimento de texto. Ok, mas obviamente, eu preciso colocar isso dentro de uma variável. Então, vou ligar para este aqui. Vamos nome do produto, por exemplo, nome do produto. Então eu estou apenas inicializando a variável aqui e agora eu vou colocar o nome do produto igual ao botão excluir. Ok? Os feridos. Na verdade, estou a clicar. Então imagine, por exemplo, se eu estou clicando neste, eu estou indo para o produto elemento pai. Vou pegar o conteúdo do texto. Devíamos ser um capuz preto. Então isso vai se aplicar o mesmo para todos os outros produtos que você pode ter aqui porque, hum, ele vai ser apenas o mesmo modelo que nós colocamos para todos os diferentes produtos aqui. Então vamos apenas fazer um console que olhar para fora esses nomes de produto agora. Ok? Deixe-me salvar estes. Deixe-me entrar no console. Eu tenho um. Ah, consulado registrando aqui de antes de 102 Hum, qual é este? Deixe-me apenas comentar este fora, porque eu não acho que nós precisamos deles por agora. Ok, deixe-me atualizar a página. Deixe-me clicar aqui e ver o que eu ganho. Eu entendo Hoody preto, OK, Mas o problema é que porque nós estamos pegando todas essas coisas de dentro todo o conteúdo de texto também está trazendo um monte de diferentes espaços em branco que nós não queremos. Então, provavelmente, o que precisamos fazer é sempre que pegamos esse conteúdo de texto, eu quero fazer um ponto sonhar estes ponto Treem basicamente remove todos os espaços em branco antes e depois e os nomes que temos lá dentro. Então vamos experimentá-lo quando um clique. E agora eu fiquei preto. Quem é se eu tentar este e quando um clique e ele vai me dar camiseta bloco perfeito . Mas eu também quero colocar todos esses ataques que temos em minúsculas porque vou te mostrar depois que vou fazer. Então eu vou fazer para transformar tudo isso em minúsculas. Deixe-me só. Estamos todos a ver para que possamos apenas embrulhar o nosso código para que ele não saia da tela. Então eu tenho um nome de produto igual ao botão de exclusão. Qual deles eu estou clicando no momento. Estou indo para o elemento pai, pegando o conteúdo do texto, transmitindo-o para que ele remova todos os espaços de antes e depois. E agora eu vou fazer outro, que é minúsculo. Eu acho que você precisa colocar assim para não não muito local. Muito mais baixo para minúsculas. Certo, vamos banal. Eu vou clicar neste, e olha, agora, agora, eu tenho capuz preto, por exemplo, e é tudo em minúsculas. Isso não é capital. - Nada. Ok, depois que tivermos isso, eu também quero remover o espaço aqui no meio. Então eu quero que o mundo seja apenas um, porque eu vou te mostrar o que eu vou fazer com isso. Então, para isso, eu posso entrar aqui e nós somos ponto substituto. Ok, eu vou fazer um pouco de pano X. Eu não sei se vocês já ouviram falar sobre isso, então eu posso colocar aqui dois desses quartos, e eu vou colocar o G. eu vou fazer um pouco de pano X. Eu não sei se vocês já ouviram falar sobre isso,então eu posso colocar aqui dois desses quartos, e eu vou colocar o G. Então isso significa que vai procurar qualquer correspondência para algum Ah, como o espaço, como esse espaço globalmente. E vou substituir as ervas daninhas, uma vazia. Então é basicamente remover esse espaço de antes. Eu só estou aumentando aqui para que vocês possam ver melhor. Então deve ser como se a filha substituísse. Nós queremos. Estamos procurando um espaço globalmente em todos os lugares e apenas substituindo-o pelo espaço vazio. Basicamente como removê-lo, como eu disse. Certo, deixe-me atualizar a página. Limpe estes. Vou clicar aqui e ver o que tenho agora. Moletom preto. E se eu clicar neste aqui, eu tenho camiseta preta. Então, por que eu estava tendo todos os problemas para conseguir esses nomes? Porque se vocês se lembrarem aqui, , quando criarmos nossos produtos variáveis, temos o nome. Temos o ataque. E agora com o estoque, se vocês verificar é igual a esses nomes que nós apenas criar para que possamos realmente pegar esses produtos todas as informações para fazer algo com ele. Ok, então vamos começar a fazer isso. Então eu estou indo agora para cá. Está bem. Ah, para os botões de apagar. Eu só vou começar a nova variável chamada números de produtos latte, e ele vai ser igual a dois pontos de armazenamento local Obter item. Está bem. E o item que eu quero pegar é se vocês voltarem para o aplicativo, eu quero pegar esses números de cartão. Então eu quero saber quantos produtos temos em nosso carrinho, então eu vou colocar aqui números de cartões. Está bem. Ah. E agora, sempre que eu clicar em um desses botões, eu só quero saber, por exemplo, eu vou fazer um registro de pontos cônsul, um, de quantos produtos nós temos. Então eu vou fazer aqui? Nós temos. Eu vou colocar um plus, e então eu vou colocar outro plus e então eu vou colocar os produtos espaciais em um carrinho. Ok, então eu vou atualizar meu aplicativo indo para o console. Vou clicar aqui, está bem? E ele me diz que temos cinco produtos no carrinho é apenas me dizendo quantos produtos temos e fora do curso, se você estiver indo para o aplicativo, temos cinco produtos no carrinho e você pode vê-lo aqui também. Temos dois de moletons pretos e três das camisetas pretas. Certo, então por que eu estava pegando isso? Eu vou te mostrar. Agora. Deixa-me livrar-me disto, Cônsul Dot Log agora. Ótima. Algum espaço. Eu quero configurar um novo armazenamento local aqui ponto Definir IDM para os números de cartão. Então eu vou fazer números de cartões. Toby é igual a quê? Para os números dos produtos. Ok, então se vocês se lembram, inicialmente nós estamos apenas pegando os valores iniciais do produto que temos aqui no nosso armazém local. E então sempre que eu clicar em um desses botões de exclusão, eu quero antes de tudo saber qual é o nome do produto, que nós apenas pegamos. E agora estou atualizando os números do cartão de armazenamento local. Este aqui que me diz o total de produtos na página, e eu quero pegar esses números totais de produtos e, em seguida, minha enfermeira, o total de produtos que temos aqui nesta linha. Certo, então como podemos fazer isso? Eu vou entrar aqui no topo e, bem, bem, deixar itens de cartões que ele vai ser igual a dois pensamento de armazenamento local recebe produtos IDM no carrinho. Certo, então se vocês se lembram dos produtos e no carrinho, , onde está? Onde é que está? Posso entrar aqui e verificar os produtos no carrinho. Temos o capuz preto e a camiseta preta. E então ele me diz que o capuz preto, por exemplo, ele me dá o nome. Me dá a conversa, me dá o preço e no carrinho o mesmo aqui pelo preço e no carrinho. Está bem, , não tenho a certeza. Por que eu estou no Talvez eu tenha algum erro, Eu acho que no ano no meu console. - Sim. Onde é que está? On-line. 151 Ah, porque eu ainda não terminei os. Isso é bom. Ok, nós ainda não terminamos isso de qualquer maneira, então eu tenho esses itens do carrinho. Então, como sempre, vou fazer um cônsul. Esse registro desses itens de cartas. Ok, então, hum, deixe-me apenas comentar isso por enquanto. Eu vou salvar isso, e como vocês podem ver, quando carregarmos a página e os botões de exclusão ficarem frios, podemos ver esses e como vocês podem ver, quando carregarmos a página e os botões de exclusão ficarem frios, podemos ver essesregistros do conselho que não temos aqui dos itens do carrinho. Obviamente, tudo o que está vindo do armazenamento local, como eu coberto antes que ele vem com todas essas cordas porque está em formato adjacente. Então, precisamos converter estes de formatos adjacentes de todas as strings em objeto JavaScript real . Então é isso que vamos fazer agora. Preciso de fazer cartas. Itens vai ser igual a Jason pontos, pars, e eu quero analisar o que esses itens carrinho. Ok, então agora quando eu fizer isso, olhe na página. Olhe aqui Agora é um objeto javascript normal. Tudo bem. Está bem. Então olhe para estes. Tenho estes nomes aqui. Moletom preto. Tenho estas camisetas de nome aqui, que é a mesma que quando eu clico em um desses botões. Olha, camiseta preta com capuz preta para que eu possa realmente pegar esse objeto do depósito local fazendo isso ? Olha, eu vou fazer um console que Locke aqui também fora. Na verdade, preciso fazer isso do avesso. Eu preciso fazer isso dentro de um ano de quando eu clicar no botão. Então itens do carrinho e, em seguida, dentro, eu vou colocar o nome do produto. Então isso vai me dar acesso a esses objetos ou acesso a esses objetos. Então eu poderia fazer, por exemplo, digamos, o que queremos pegar? Queremos pegar o nome, a etiqueta, o preço ou o carrinho. Eu vou colocar ah, primeiro de tudo o nome. Ok, então eu vou colocar o nome do ponto, e então eu vou colocar o mais para dar algum espaço e, em seguida, outro plus e eu vou fazer itens CARRINHO , nome do produto, e então eu vou colocar aqui, por exemplo, no carrinho. Quantos tem no cartão? Ok, então se eu clicar aqui, vai me dizer o nome e depois quantos há no carrinho? Vamos tentar. Olhe. Camiseta preta. Três em cartas. Ok, se eu clicar, esse capuz preto agora me dá o nome Hoodie preto e dois em cartão. Então, basicamente, agora que sabemos como pegar os valores que queremos, eu poderia apenas configurar. Deixa-me livrar-me disto. Cônsul, esses registros, eu posso apenas fazer um ponto de armazenamento local números de cartão, Toby, o número total que estava lá antes, que é cinco menos. Ok, estes produtos, Ok, itens de cartão, nome do produto no carrinho. Então ele deve apenas se livrar desses um do total na página. Mas esta é apenas uma parte do problema, porque vamos atualizar em Lee os números do carrinho e os números do cartão. Ok, vamos apenas atualizar esta parte aqui no topo e os números totais de cartões que também precisamos para atualizar o custo total. Tudo bem, então vamos fazer um item de conjunto de pontos de armazenamento local, e eu quero configurar o custo total para ser igual a dois nossos custos de cartão que já existem aqui no armazenamento local. Então eu vou entrar aqui no topo e deixar as cartas. O custo é igual a dois pontos de armazenamento local recebe item. E qual é o nome? Custo total. Agora, eu posso usar aqui os custos do meu cartão. Então este é o total que temos no momento em nossos mineiros locais de armazenamento. O preço desses dois itens que eu tenho aqui. Então eu vou fazer. Vou colocar alguns parênteses no ano. Vou colocar cartões, itens, produtos, produtos, nome, preço dos pontos. Ok, então chegamos ao preço dele por um, e então eu vou multiplicar estes pela quantidade que temos. Como podemos obter a quantidade que já vimos antes? Que podemos acessar através destes no carrinho. Bom. Portanto, estes agora devem cuidar do nosso custo total. Mas, finalmente, precisamos remover sempre que eu clicar neles, e eu quero removê-lo Eu quero removê-lo também. Do nosso armazenamento local a partir destes produtos no carrinho. Quero ler isso aí dentro. Então, para isso, eu posso apenas fazer se eu puder descer aqui, eu posso apenas fazer os itens de cartão tampas, nome do produto. Então estes vão apagar o que tenho aqui que não preciso mais. E, finalmente, eu só tenho que atualizar esses produtos no carrinho no meu armazenamento local. Como este item de conjunto de pontos de armazenamento local. Qual item? Quero os produtos em cartões. Toby é igual a Jason Dots. Estranho se eu me lembro de caras que sempre que queremos atualizar algum tipo de objetos no depósito local, eles precisam estar no formato adjacente. Soto converter do nosso objeto regular em formato Jason. Você só faz Jason ponto string Se eu e, em seguida, eu apenas passando aqui os itens do cartão. Ok, vamos fechar estes finalmente. Eu só quero chamar que este cartão de placa novamente e a função de cargas em números de cartão cargas que eles vão cuidar de nossa página para apenas recarregar com os produtos exatos que temos no armazenamento local. Então vamos experimentar estes. Vou apenas atualizar a página. Eu quero que vocês joguem muita atenção ao que temos aqui, porque depois vamos tentar com outras coisas de qualquer maneira, então nós temos os cinco melhores irmãos no cartão. Sabemos que o nosso custo total é de 80. Ok, então eu vou remover esses dois moletons pretos. Então, dois deles. Então devemos ter finalmente três no total. Quando eu remover estes e porque eu estou removendo estes dois negros que estes eles custam US $50 o total deve ser, o que, 30? Porque só há camisetas pretas lá dentro. Vamos tentar isto e ver se ele está a trabalhar. Vou clicar nele. Olha, eu tenho três irmãos na carroça aqui. São os três produtos. Só vejo estes três produtos. Eu tenho o total aqui, e é isso. Se eu atualizar a página, se vou apagar esta, tudo se foi. Ok? Então, basicamente, você pode até mesmo ir para a página inicial para fora mais coisas. Ah, e isso vai funcionar. Então deixe-me mostrar-lhe rápido. Se eu ir para a minha home page I em, por exemplo, uma grande camiseta para cinza. Quem estes. Então eu tenho três no total. Se eu clicar sobre estes. Tenho três no cartão. Se eu remover Ah, todos esses dois cinza quem? Isso que eles custam 40. Eu deveria ter um total de, o que, $15.1 produto. Então vamos tentar. Então $15 1 produto, um produto no topo. Está a funcionar como pretendido. Certo, pessoal, só resta um vídeo agora que vamos ver como podemos clicar nos botões de quantidade para mudar, aumentar as quantidades e diminuir como quiserem. Tudo bem, então eu vou em breve o próximo vídeo. 8. Uma Uma quantidade de produtos de crescente produto na página de produtos de carrinho: Muito bem, pessoal, bem-vindos de volta à parte final da construção de um carrinho de compras com JavaScript de baunilha. Então, o último vídeo que acabamos de gerenciar Teoh, se você se lembra, tipo, arte algo para as cartas, ok? E então nós poderíamos apenas, tipo, remover as coisas assim. Mas agora, neste vídeo, vamos ser capazes de clicar aqui nessas quantidades e apenas aumentá-las ou diminuí-las. Tudo bem, então se vocês se lembram aqui em cima quando fizemos nossas cartas de jogo, nós colocamos esses botões aqui. Estes vãos. Está bem, deixa-me rastejar isto. Então esses trocadilhos aqui, eles têm uma classe de decretos ou aumento, quais são esses botões aqui? Estes ícones. Então, a primeira coisa que vou fazer aqui em baixo, então eu não quero fazer esse vídeo muito longo, então eu vou começar com isso. Vou criar uma função fria. Gerencie, Kwan Teoh T. Ok, isso deve ficar bem. Então eu vou criar esta função. E a primeira coisa que eu quero fazer é pegar todos esses botões, todos esses botões , que eles vão diminuir as quantidades e também eu quero pegar todos esses botões que eles vão pegar o aumento das quantidades. Então vamos começar aqui primeiro. Vamos os crees botões vai ser iguais. Dois documentos, pontos, seletor de consulta. Tudo bem. E qual é a classe que eles têm? Se vocês se lembram, deixe-me rolar para baixo. Aqui em cima é diminuir. Ok, então nós temos Deixe-me apenas me livrar da diminuição do espaço. Então é isso que vou colocar aqui em baixo. Onde é que está? Levou a diminuir botões igual ao seletor de consulta todos. Diminuir. Então eu vou pegar todos esses botões que eles vão diminuir, e eu sou a mesma coisa para os botões que eles aumentam. Ok, então eu vou colocar aumento aumentos botões, e vai ser igual para documentar que seletor de consulta tudo e eu acho que é aumentar. Ok, deixe-me ver se foi isso que eu coloquei aqui em cima. Esta classe desses botões é aumentada, então nós os parabéns assim. Ok, agora, eu realmente vou entrar aqui e apenas olhar através de todos esses botões e Adam, um ouvinte de eventos. Então, quando clicamos neles, podemos realmente fazer algo Vamos fazer nosso quatro olhar exatamente como de costume. Vou fazer um quatro. Olha, deixe-me igual a 20 Eu preciso ser menos do que decretos Esperanças. Então eu preciso copiar o comprimento das garrafas diminuiu, porque vocês se lembram que estamos pegando um monte delas. Então era como uma matriz. Podemos realmente ver. Quantos temos aqui? E então eu vou colocar I plus plus, então vamos aumentar em um cada vez que fizermos o loop. Ok, agora, eu estou selecionando esses botões diminuídos, e eu vou colocar aqui eu para que possamos apenas olhar através de todos eles. Então, a primeira vez que isso vai ser eu vou ser zero. Então vamos pegar esses. Ah, botão Diminuir. A próxima vez vai ser esta e assim por diante. Então eu vou fazer um pensamento, artes, artes, até mesmo o ouvinte. Qual ouvinte de eventos eu quero transmitir? Aqui está apenas um clique. Só quero clicar nele. Então vamos colocar como agora eu vou apenas colocar a função normal e insight. Eu só quero fazer agora. Um console que a lei dos decretos. Buttle. Certifica-te de que isto está a funcionar, está bem? Agora, obviamente, isso não vai fazer nada até que chamemos essa função chamada gerenciar quantidade. Até chamarmos isso nunca vai adicionar esses cliques de ouvintes de eventos a nada. Então o melhor lugar para chamar essa função seria provavelmente quando fazemos nosso carrinho de exibição. Então, sempre que mostramos todas essas coisas na página, eu quero chutar essas funções. Então vamos. Os ouvintes de eventos não são para esses botões de diminuição? Então deixe-me abrir aqui. O inspetor. Vou abrir o console. Ok? Deixe-me atualizar a página. Deixe-me abrir um pouco mais. Atualizar quando ele clicar aqui, um olhar. Botão de diminuir. Vou clicar neste botão de diminuição. Então isso está funcionando. Posso fazer exatamente a mesma coisa. Agora, vou fazer mais quatro voltas, está bem? Desta vez vai ser para os botões aumentados. Ok, então eu vou apenas substituir estes. Vai ser exatamente a mesma coisa. Não consegui colocar aqui. Aumento da garrafa. Ok. Botão aumentado. Vou atualizar a página claramente. É o Cônsul. Vou clicar nos botões aumentados e olha, está funcionando. Ok, então agora que isso está feito, nós teremos que realmente começar a pegar as coisas do armazenamento local como fizemos antes e realmente começar a manipular os dados. Então vamos fazer isso agora. Primeiro, vou pegar todos os itens do carrinho que tenho no meu armazém local. Então, se você se lembra do pedido, onde está? Meu depósito local. Deixe-me abrir esses armazéns locais. E eu entrei aqui no topo. Deixe-me colocar isso. Temos alguns números de cartão, itens totais e tudo mais, então eu quero pegar meus itens de carrinho. Então é como os produtos no carrinho, este aqui. Então vamos agarrá-lo. Agora. Eu vou entrar aqui e fazer vamos itens de cartão vai ser igual. Dois pontos de armazenamento local recebe item. E o item que eu quero pegar são esses produtos no cartão. Então eu sei. Quais são os produtos que eu tenho no cartão agora? Deixe-me apenas aumentar estes um pouco mais para que possamos vê-lo melhor. Certo, então o que foi? Produtos em? Ah, cartão. Acho que esse é o nome. Deixe-me só por cima destes agora. Aumentar. Sim, exatamente. Ok. Produtos no carrinho. Está bem, deixa-me pôr o ano. E, obviamente, agora que eu peguei esses produtos no carrinho, eu preciso fazer adjacentes, não analisar, ok? Porque eles estão vindo como Ah, Jason objeto. Então eu preciso convertê-los em objeto javascript. Então, vou fazer cartas. Itens é igual a, um Jason dot pars. Ok. E eu quero analisar esses itens de cartas. Acho que fizemos isso antes em alguns vídeos atrás. Hum e é isso. Porque se vocês tentarem fazer um console, esse registro desses cartões, itens parecem próximos um pequeno registro desses itens do carrinho. Certo, pouco antes de fazermos as partes. Olha, isso ainda está indo para o console. Vamos refrescar. Olha, você vê que isso está vindo com essas coisas de cinco cordas. Isso é como no formato adjacente, então nós realmente precisamos analisá-lo em objetos javascript regulares. Veja, depois que eu fiz isso agora eu faço minha consulta de registro. Se eu atualizar a página onde nós atualizar o Beijing aqui agora eu tenho alguns bons objetos javascript como você pede. NC. Agora que temos isso, preciso saber que sempre que clicar em um desses botões, quero saber a quantidade atual que temos aqui. Agora que temos isso, preciso saber que sempre que clicar em um desses botões, Ok, então é isso que vamos fazer agora primeiro, é claro. Deixe-me só um ano antes de clicar no botão de decretos que vou fazer aqui. , Na verdade, não, eu não preciso disso. Deixe-me fazer isso aqui. Vou fazer onde a quantidade atual. Ele vai ser igual a dois. E agora eu vou fazer um documento, não um seletor queary. Oh, desculpe. Eu não preciso fazer isso. Deixa-me livrar-me disto. Eu posso apenas fazer este, ok? Este é o botão. Por exemplo, se estou a clicar neste, posso simplesmente agarrá-los. Na verdade, estes botões onde eu estou clicando e, em seguida, apenas dois adultos, elementos pais, elemento pai. Então deixe-me mostrar-lhe aqui na tela. Hum, onde eu tenho? Então este é o ferro Aiken. Ok, então eu estou clicando. Digamos, por exemplo, que estou clicando aqui. Eu quero pegar o elemento pai, que é este um thes dif. Então é isso que eu estou fazendo com esses elementos pai ponto. Então eu posso fazer um seletor de Dodds Queary. Ok. E qual é o seletor de consulta que eu quero fazer? Eu quero pegar essas frigideiras. Então eu só vou fazer aqui dentro, e então eu só quero pegar o conteúdo do texto, ok? E agora eu deveria ter o valor do que está aqui agora. , Lembrem-se, lembrem-se, rapazes que antes de tirarmos estes valores do que estava no armazém local. Mas agora, quando clicamos aqui, não temos acesso ao armazenamento local imediatamente, então precisamos pegar qualquer valor aqui. Então deixe-me fazer aqui um cônsul, não um registro desses para ter certeza de que isso está funcionando. A propósito, eu comecei essas variáveis aqui na quantidade atual, mas eu nunca inicializá-la, então eu preciso inicializá-la aqui no topo. Então vamos quantidade atual é igual a 20, por exemplo, quando você começar. Então vamos a quantidade atual. Basta colocá-lo aqui e agora eu vou apenas fazer um console. Não registre essas quantidades atuais. Então, sempre que eu clicar no botão, eu saberei no console. Ok. Então deixe-me atualizar a página. Não sei se eu clicar aqui, eu deveria ver um. Diz que o conteúdo de apostas não é uma função. Deixe-me ver o que tenho de errado aqui. Acho que sei o que pode ser. Eu coloquei conteúdo de texto é uma função. Esta não é uma função é exatamente assim. Vamos tentar de novo. OK, está claro estes. Vamos clicar aqui e eu fico com o um. Eu cliquei nele aqui Agora eu tenho o um também. Ok, então eu sempre cheguei a esse valor dessa quantidade quando eu estou tentando clicar para baixo então eu posso realmente fazer a mesma coisa aqui dentro para o aumento da quantidade. Então eu posso apenas, tipo, duplicar esse código, basicamente, então vamos fazer isso. Vamos copiar isso agora. Vou fazer isto aqui desta vez. Obviamente, vamos fazer os botões aumentados. Eu ia ser a mesma coisa porque ambos, eles têm o mesmo elemento pai. E então estamos pegando a mesma extensão do seletor de consulta e é isso OK, agora que vamos para estes, a próxima coisa seria realmente pegar o nome deste produto sempre que estamos clicando em um desses botões. Ok, então sempre que eu clicar aqui, eu quero atravessar o amanhecer. Ok? Quero subir e tentar pegar esses nomes que temos aqui. Certo, então é isso que vamos fazer agora. Eu vou dizer produtos atuais, ok? Atual para objetos. Vai ser igual a dois. Não se esqueça de inicializar este produto atual produtos, Ele vai ser igual a uma string vazia agora. Ok, agora, não perca nada. Talvez eu tenha perdido algo aqui porque não terminamos. Então o produto atual é igual a dois crees inferior. Vi nosso botão atual. Então eu preciso ir para os elementos pai. Ok, então deixe-me apenas mostrar-lhe sempre que eu clicar nestes botões, por exemplo, onde está este botão vai ser este. Quero pegar o pai. Foi o que acabamos de fazer agora. Então eu quero atravessar para o elemento anterior para os elementos irmãos anteriores. Então vamos fazer pontos. Elementos anteriores, olhar irmão, está chegando até aqui em código de estúdio visual. Então agora eu fiz isso uma vez que estamos aqui nestes viver com uma classe de preço. Agora, eu quero voltar mais uma vez para esses produtos ok para esses produtos. Então vamos dio elementos do teto anterior mais uma vez. Pontos. Ok, então agora eu quero dizer aqui neste produto dif Agora eu quero entrar neste ladrão de produtos e olhar para Deixe-me ver como eu tenho uma imagem. Eu tenho esta panela. Ok, eu tenho Oops. Eu tenho essa cobertura aqui. Então eu vou fazer, hum, pontos, seletor Queary. Eu quero pegar o elemento span, e eu quero pegar o conteúdo do texto. Ok, então agora que eu tenho isso, deixe-me apenas mostrar você fazendo um consulado de log off do produto atual. Ok? Eu só estou fazendo isso Quando eu clico esses pequenos botões, eu estou apenas atualizando a página que vai para o console. Está claro tudo isso que eu vou clicar aqui. E peguei o capuz cinza e peguei a quantidade de antes. Vou clicar na camiseta preta. Eu tenho esta e tenho uma camiseta preta agora. O que eu também quero fazer é, na verdade, porque eu tenho esses nomes, eu quero converter esses nomes de uma forma semelhante ao que temos aqui no topo, assim como esta pilha. OK, então o que posso fazer com isso? Eu posso antes de tudo, apenas encobrir todos esses nomes que temos aqui para minúsculas eu posso remover esses espaços que eu tenho entre as palavras e, em seguida, até mesmo sonhar alguns espaços nos lados se houver algum, Então eu vou ter ataque chamado Exatamente, assim como este. Porque se eu tiver os nomes das ações depois, posso , manipular os dados que tenho no meu posso manipular os dados que tenho no meuarmazém local. Então é isso que vamos fazer. Então aqui, exatamente como o que estávamos fazendo agora. E então, onde estava? Gerenciar a quantidade. Nós estávamos verificando aqui o produto atual depois que eu peguei este conteúdo de texto. Eu também vou fazer ah para minúsculas. Então nós muito minúsculas e eu acho que é como estes Se eu não estiver errado, OK, vamos tentar. Deixe-me ver o console. Quero dizer, clicar aqui. Não, olha, agora, capuz cinza é todo minúsculo, e esta camiseta preta é a mesma. Ok, a próxima coisa seria remover este espaço aqui, entre as palavras. Então vamos fazer isso agora. Vindo aqui depois das duas minúsculas, não vou substituir, então não substitua, está bem? E vamos fazer algum tipo de reggae X. Não sei se vocês já ouviram falar disso, então Oops. Não sei porquê. Isto é como saltar o tempo todo. Vou procurar por um espaço em todos os lugares. Você pode ver que eu estou apenas colocando duas vezes estes quatro barra e eu vou colocar estes g dois significa que ele vai olhar globalmente sobre esse texto. E a segunda coisa é, vamos substituí-lo com o quê? Só vou substituí-lo por uma corda vazia. Então isso significa que vai remover esse espaço. Então, como eu disse, vamos usar essa filha substituta que ele está procurando por espaço vazio. Então, o que quer que você coloque entre esses quatro barras é o que você está procurando. E então significa globalmente procurar em todos os lugares. no conteúdo de texto lá e, em seguida, basta substituí-lo com a string vazia. Ok, vamos ver se isso está funcionando. Refresque. Vou clicar aqui. Deixe-me clicar aqui. Olha, capuz cinzento agora está completamente feito e o mesmo aqui neste. Ok, camiseta preta sumiu, mas às vezes há algum tipo de espaços vazios antes e depois das palavras que não temos certeza se elas aparecem ou não. Então, só por segurança, podemos apenas adotar fluxo que se livra desses espaços antes que nossas palavras sejam suficientes. Então vamos fazer isso. Então não sonhe, ok, e deve ser isso por enquanto. Então, se você se lembra antes no início deste vídeo, nós apenas pegamos todos os nossos itens de carrinho que temos, eu estou apenas atualizando a página para vocês verem. Então, olhe, este é o item atual que eu tenho no meu armazenamento local usando esses itens de carrinho. Na verdade, eu posso descer aqui depois que eu selecionar meu produto atual. Posso fazer itens de carrinho, e agora posso selecionar os produtos atuais porque acabamos de pegar seu nome. Está bem, vou pô-lo aqui. E agora posso dizer que ponto nas cartas vai ser igual ao que estava lá de antes . O meu é um. Está bem, deixa-me mostrar-te. Porque se vocês se lembrarem, olhem, vocês têm essas propriedades de “in card”. Ok? Então, estou checando meus itens do carrinho. Estou selecionando aquele com os nomes. Então, por exemplo, este é o nome que acabamos de pegar. Eu estou acessando o ponto no carrinho, e então eu estou apenas, hum, acessando o valor que estava lá e removendo um. Então é isso que eu faço quando eu clico aqui. Ok, então vamos tentar. Vou refrescar-me. Vou clicar aqui. Só estou a ver o que acontece. Eu sou assim algo realmente não guerra corretamente. Deixe-me ver. Ah, OK, então isso é bom. Olha, agora o meu no carro t zero porque eu realmente preciso atualizar isso agora, então eu preciso ligar para o cartão de exibição logo depois que eu faço. Isso é apenas depois destes. Ok. Preciso ligar para o cartão de exibição, então nossa página será posterior depois, então olhe, deixe-me refrescar. Ok? Olha, se eu vou clicar aqui. Ok, então eu tenho estes. Agora, deixe-me ver. Ok? Algo não está funcionando exatamente como eu suspeitava. Então, vou deixar-me ver. O que eu tenho de errado aqui? Fora do curso. Eu nunca atualizei meu armazenamento local. Sim. Então, depois que eu atualizei estes, hum, estes objetos perto desta cópia do depósito local. Eu não copiei aqui. Eu atualizei esses, hum, em cartões que nós temos lá, a propósito, nós podemos até apenas, tipo, curto e estes para cima, apenas fazendo como, como fizemos de antes. Agora, preciso ir ao meu armazém local. Ok. Vou fazer um lutador de pontos de armazenamento local. Ok. E o que eu comitês são os produtos em cartões. E o que eu quero passar? Quero passar um Jason. Não encadeie. Se vocês se lembram, precisamos entrar no formato Jason fora do curso. E o que é isso? Coisas que eu quero enviar para dentro são esses itens de carros que eu acabei de atualizar. E depois que eu fiz isso, eu vou chamar os cartões de exibição que criamos antes para que possamos realmente ver na página? Eu atualizaria o cartão, então vamos atualizar a página agora. Eu atualizaria o cartão, Deveria estar funcionando. Tudo bem. Ok. Se eu clicar aqui um. Ok, nós deuses, eu só vejo um capuz cinza no carrinho. Ainda não são limites exatos. Deixe-me ver mais uma vez. Desculpe por esses caras. Deixe-me ver se isso está funcionando. Acho que sei o que pode estar errado no ano. Olha, a primeira coisa é que estas minas são uma. Ok, então nós só precisamos fazer menos iguais, então nós apenas atualizamos a disfunção. E também, eu estou colocando meus produtos no carrinho que a Sra. aqui um C maiúsculo Agora, este deve ser o problema. Então eu vou apenas atualizar a página. Eu vou clicar aqui e olhar, agora, agora, nós apenas atualizamos a quantidade destes para ser zero. Ok? O que é basicamente, tipo, não está aqui, então nós realmente não queremos isso. Nós queremos diminuir a quantidade mínima de um, porque se tivermos zero enfraquecer, apenas, tipo, entrar aqui e apagar o produto, ok, então eu vou fazer aqui dentro Então. Se declaração, eu vou dizer se Ok, se itens carrinho produto atual em cartões ok, vai ser maior do que um. Ok, se é maior do que um, o que está no carrinho destes? Na verdade, posso colocar essas coisas aqui. Porque se não for maior que um, se ele for como um, por exemplo, não quero fazer nada. Ok, então deixe-me entrar aqui. Vou clicar e olhar, nada acontece. Ok? Vamos para a página inicial. Vou adicionar algumas dessas ótimas camisetas. Talvez 312 para 3. Ok. Agora. Ah, se eu entrar aqui, eu vou apenas clicar neste aqui. Eu fiz? Quantos eu vou adicionar? Mais uma. Não tenho certeza. O que exatamente? Deixe-me só, acho que foi de antes. Deixe-me limpar tudo. Refresque entrando aqui. 123 Ok, Agora olhe para estes. Se eu for e aqui em uma imprensa este aqui, é ah, entrar em dois. Então, 30 eu vou clicar mais um. Vai para 15. E se eu tentar de novo , não fará mais nada. Ok, então esta festa aqui está tudo pronto agora, há um problema. Se vocês estão olhando aqui, eu, na verdade, quando eu diminuí essa quantidade, meus cartões aqui no topo, meu número de produtos no cartão, eles ainda são três. E minha cesta totalmente ainda 45. Por isso, precisamos também actualizar estes. Então eu vou chamar minha função de números de cartão que temos aparecido em algum lugar. Onde é que está? Custos totais com itens, números de cartão. Ok, então eu vou chamar esses cartões números logo após esses números de cartões, e eu quero passar aqui meu produto atual. Ok. E, em seguida, a segunda coisa que eu quero passar é se eu estou apenas fazendo aumentar ou diminuir função. Ok, então se eu estou diminuindo os elementos no cartão ou aumentando, então eu vou apenas dizer os Curries. Ok, então vamos para estes números de cartão aparecem números de cartão. Onde é que está? Um pouco mais de números de cartão no momento. Só vamos levar um produto. Agora, vamos também tomar uma ação. Ok, então essa ação vai ser a diminuição ou o aumento. Ok, então vamos apenas refatorar estes um pouco. Deixe-me colocar aqui como de costume. Vou pegar minhas cartas. Itens é igual a dois locais. Ah, filha de armazenamento, pegue o item. Ok. Produtos em Deus. E agora o que eu preciso fazer. Preciso passar por isso fora do curso. Tes estes a partir de Jason objeto em um objeto JavaScript. Assim como eu fiz aqui em baixo. Preciso fazer itens do carrinho iguais ao Jason. Os pontos analisam. Ok. E eu quero analisar esses itens de cartão. Ok, agora, eu vou fazer qualquer declaração. Apenas re fator estes um pouco. Eu vou dizer se tudo bem, se minha ação vai ser igual a dois decréscimos. Sabe, essa é a ação que acabamos de passar lá embaixo. O que eu quero fazer é definir meus cartões de itens de armazenamento local, cartões , números para serem os números de produtos que pegamos antes. Ok, então este é o número total de produtos que tínhamos lá de antes. Vamos dar uma olhada aqui. um Esse éumnúmero de cartão, se você se lembra. Certo, então pegamos aqui como uma variável. Então eu só vou dizer é que esses números de produtos que estavam lá de antes, e eu vou apenas remover um também, eu preciso atualizar fora do curso este texto aqui. Então o que fizemos agora foi apenas atualizar esses números de cartão de armazenamento local, como os números totais em cartões. Mas também precisamos atualizar esse número aqui em nossos cartões em nossa página, basicamente aqui no topo. Então o que eu vou fazer é eu só vou entrar em meu e não armazenamento local, mas documentos, não seletor de consulta. Ok? E eu quero selecionar meu cartão. Ok, se vocês se lembrarem deste aqui como uma classe de cartão, e eu quero pegar o espaço dentro e o conteúdo de texto dele para ser o que ser números de produto . Então, o que quer que seja isso em nossos números de cartão que pegamos aqui de antes, meu é um, e deve ser isso para esses números de cartão diminuídos. Ok, então deixe-me refrescar. Vamos tentar de novo. Obviamente, Obviamente, deixe-me limpar todas essas coisas do depósito local. Está tudo claro. Atualize a página. Indo para casa. Vou 123 disto. Agora vou clicar em um para “Ok”. Então, esqueci-me do dedo do pé, ainda neste tipo de declarações aqui, deixa-me livrar-me disto e vamos apenasrefatorar. esqueci-me do dedo do pé, ainda neste tipo de declarações aqui, deixa-me livrar-me disto e vamos apenas Então isso é o que fazemos quando executamos esses números de cartão. Isto é o que fazemos quando realmente clicamos em um desses botões. Mas também queremos fazer outra coisa. Ok, se houver alguns números de produtos. Ok. Isso significa que é como a primeira vez que carregamos a página. Se houver algum tipo de coisas aqui, eu quero definir o meu armazenamento local, não definir o item para ser. Ok. Que números de carrinho para ser O que há para ser os produtos? Os números do produto mais um número de produto mais um. Ok. Desculpe. Não números de irmãos. Eu não vou salvar ação igual a aumentar. Ok, porque nós vamos aumentar isso depois, ok, em Caries. Ok. E então nós vamos fazer estes mais um, e então nós obviamente atualizamos esses textos, Toby mais um também. E depois, se não estamos clicando em nenhum desses botões e estamos apenas carregando a página pela primeira vez,o vez, que eu quero fazer é apenas definir o item de conjuntos de pensamentos de armazenamento local. Qual é o item? Os números dos cartões para ser, hum, apenas um. Isso é o que temos nisso no início. Ok. E também basta definir a consulta selecionada do conteúdo do texto. Toby é igual a um. Ok, espero, agora, isso é tudo bom, e eu não estou perdendo nada, então deixe-me apenas me livrar deste código que temos aqui de antes, Depois de apenas definir os produtos como tivemos de antes, e acho que é isso. Ok. Eu só estou, hum limpar esta atualização. Vá para a página inicial. Eu vou ter 123 Ok, hum, algo faltando aqui. Números do carrinho. Ok. Estas podem ser, às vezes, quando estou limpo. Estes de novo. Refresque. Ok. 123 Ok. Quando entro aqui, tenho três. Ainda há mais alguma coisa aqui. Estou desaparecido. Deixe-me ver rapidamente. Eu não quero que isso é realmente o que eu quero dizer. Eu não quero colocar essas ações de aumento. Eu quero colocar se há alguns números de produto realmente. Ok. Quando clicamos nele como artes do dedo do pé, quando estamos aqui na página e clicamos reboque cartão do dedo do pé ARDS e executamos estes números de cartão . Quero ver se há alguns números de cartão aqui. Só quero aumentar a quantidade lá dentro. Porque nem precisamos de nada para o aumento,o que vou mostrar em um segundo. Porque nem precisamos de nada para o aumento, Então, isso é bom. Vamos refrescar isso. Vou clicar. 12345 Isto é bom. Agora eu vou para a página do carrinho, e eu vou clicar 123 e olha, este valor aqui é tudo mercadoria. Agora, nós só precisamos atualizar esses valores aqui fora do 100. Então vamos descer aqui, está bem? Na nossa quantidade de gestão. Então, quando estou indo para a minha quantidade de gerenciamento, um, logo depois que eu ligar para esses números de cartão, eu também posso verificar aqui o custo total. Então é isso que vamos fazer agora. O telefone fará algo muito parecido. Então vou ligar para o meu custo total. Eu vou passar a diminuição do produto itens carrinho também. Ok, então agora eu estou indo para o meu custo total. Deixe-me entrar aqui no topo. Qual é a minha função de custo total? Só este aqui. Eu preciso passar em ação também, porque vai ser o decreto ou não. E eu vou fazer uma declaração de Anethe aqui. Então, se tudo bem, minha ação, você será igual a dois decréscimos. Ok, então deixe-me colocar estes aqui agora como um outro. Se sim, vou colocar aqui. Agora o que? Vou configurar o custo do meu carrinho quando pegamos isso do depósito local. Lembre-se que isso vem em um zoológico objeto adjacente cheio dessas cordas. Então eu preciso converter estes em número real, usando uma análise em tão custo cartões. Ok. E agora eu preciso definir meu armazenamento local als, uh, uh, ponto de armazenamento local disse que eu prazo. E o item que eu quero definir se vocês se lembrarem, eu só estou checando aqui é o custo total. Custo total e vai ser igual a quê? Para o que Ele estiver lá no custo do cartão. Digamos que as nossas centenas e eu vou tirar o quê? Meu produto atual que estou passando aqui ponto preço porque se vocês se lembram de cada um desses produtos que estavam passando, eles têm um preço, um valor chave. Então eu posso apenas fazer aqui os custos de cartão, o que quer que estava lá de antes. Aqui no topo da mina está o produto que estamos passando. Ok, algo para fazer produtos preço de Deus. Ok, então deixe-me limpar todas essas coisas. Vamos para a página inicial. Eu vou adicionar 123 Ok, vamos para as cartas. Vamos verificar estes. Olha, vou clicar uma vez. Então 33 60 eu estou lendo, tipo, uma vez. E olhe 2 para 40 11 2020. E se eu clicar mais não está funcionando. Perfeito. Agora, a única coisa que nos falta é clicar aqui nesse botão de aumento. Então vamos descer aqui. Vai ser muito, muito parecido agora, então eu posso basicamente copiar todos esses casacos. Está bem, vou copiar isto. Cole aqui embaixo, e o que vou fazer é eso. Já temos essa quantidade de correntes, então podemos nos livrar delas agora. O produto atual vai ser botões aumentados. Eu tudo bem. Isto vai ser a mesma coisa, está bem? Pegando o nome. Ok, então. Eu não preciso fazer estas declarações se agora porque sempre que você clicar para aumentar a quantidade que você não precisa como quaisquer limites. Então, vai ser um item de carrinho atual produto ponto no carrinho. Agora, desta vez vai ser mais igual a um para aumentar. Agora, eu quero executar esses números de cartão de função. Só quero passar o dedo do pé desta vez. Certo, Certo, produto atual. Ok, então se eu vou entrar aqui onde estão os números dos cartões? Então eu vou dizer se a ação é igual a diminuir. Ok, hum, isso não vai ser executado então vai verificar se há alguns produtos já no banco de dados no armazenamento local, que há. Se já houver alguma coisa lá dentro, só vou executar estes que aumentarão em um. Então eu não preciso fazer isso. Na verdade, a ação é igual a aumentar. Sabe, você poderia fazer se quiser, mas está tudo bem. Agora, o que mais temos? Temos estes para os números dos cartões estarem correctos. Temos este para o total, Costas. Bem, o que não precisamos aprovar essas ações porque deixe-me mostrar os custos totais também . Portanto, custo total, podemos passar um produto em ação. Eu não passei agora em ação para aumentar. Porque olha para estes. Se a acção for igual a diminuir, não estamos a fazê-lo neste momento. Ok? Agora, eu também estou checando essas teses de outro vídeo antes de eu checar. Se o meu custo do cartão é diferente do que não, Sim é diferente do que não, porque já há produtos lá e podemos ver que o nosso carro custo total nossos custos de cartão ou o que já está com algum valor por isso é diferente do Não. Então, o que estamos fazendo lá dentro? Pegando o que está lá e, em seguida, apenas para um armazenamento local que define o item do custo total lá, mais o preço do produto que estamos apenas clicando aqui agora. Então isso deve ser tudo mercadoria. E finalmente, o que estou fazendo? Basta clicar aqui, fora do curso, configurando-os no armazenamento local para ser atualizado e depois apenas como executar a placa de exibição . Então, tudo em nossa página é atualizado, então vamos executar isso, Ok. Eu vou entrar aqui. Vou clicar uma vez. Olha, aumentou 40. Vou clicar novamente. 60. Então tenho três. Deixe-me ir para a página inicial. Vou a 1 a 2 destas camisetas pretas. Então olhe para estes. Tenho duas camisetas pretas e três destas. Ok, então temos 60 2080 Ok. E 3 a 5. Quero dizer, eu gostaria de mais quatro ou 3123 Então cinco vezes 10 é 50 60 mais 5100 e 10 e cinco e oito são oito produtos. Tudo bem, pessoal, eu sei que estes realmente foram muito grandes e são, tipo, o último da série, mas eu espero que vocês realmente gostem deste tipo de projeto. É sempre bom. Então para você praticar e aprender algo notícia. Mas sim, como sempre. Mas sim, Pessoal, muito obrigado por assistirem. Espero que goste. Se você tem algum comentário ou qualquer coisa, basta colocá-los aqui embaixo. Respondo a todas as suas perguntas, e também vou colocar o link. Acho que o link já deveria estar aqui com os arquivos desses projetos. Porque se vocês perderam alguma coisa, podem sempre assistir de novo. Mas haverá alguns links aqui é apenas opcional. Se você quiser baixar o arquivo. Então você tem tudo funcionando bem. E você pode comparar com seu próprio código também. Tudo bem, pessoal, isso é tudo para este vídeo. Muito obrigado por assistir. E vejo-te no próximo vídeo.