Como Criar Aplicativos Com Programação - Aula 08

muito bem pessoal então vamos agora fazer a parte lógica aqui da nossa página de carrinho e alimentar dinamicamente os itens aqui né e fazer tudo funcionar né os botõezinhos de mais e menos mostrar o total lá embaixo o botão de esvaziar carrinho pra gente poder concluir aqui esse nosso projeto que tá sensacional né tá muito legal mesmo eh eu tô meio incomodado ainda pessoal tá me incomodando a parte estética aqui desse campinho input que tá esquisito aqui né não tá legal e eu dei uma olhadinha aqui para ver qual que era o problema Por que

que ele tava se comportando dessa forma o que que acontece lá na nossa index a gente tem esse campinho input que é da busca né esse search aqui que a gente tinha a busquinha e é lá no index.css a gente usou um seletor muito genérico a gente usou um seletor do tipo input type text acontece que esse campinho aqui também é um input Type text então ele tá pegando as propriedades que a gente tem lá da nossa index.css certo então para resolver isso o que que a gente faz aqui nesse campinho que a gente tem

na nossa index a gente pode colocar aqui um seletor mais específico por exemplo um ID vamos chamar esse aqui de search é de busca e aí lá no index.css em vez de usar o seletor aqui input type text que é muito genérico a gente usa esse seletor aqui ó tipo search E aí vai ficar legal fazendo dessa forma aqui né Deixa eu salvar aqui deixa eu salvar aqui também Ah acho que bugou o meu eu acho que bugou aqui o meu Live server deixa eu rodar de novo dar um go Live aqui Ah tá é

que aqui tá in é apaguei o apaguei o t sem querer input né Beleza do tipo search aqui a gente não usa o hashtag aqui assim direto Beleza então a gente coloca um ID aqui direto e aí aqui a gente coloca né um seletor mais específico aí o que que acontece agora o nosso item lá vai ficar certo o item dentro de carrinho porque a gente tem aqui o quantidade de item que é o que a gente batizou esse item aqui e aí ele vai respeitar essas propriedades sem misturar com aquela outra lá entendeu aqui

eu só vou aumentar um pouquinho esse Edit eu vou colocar de 40 de 35 para ficar um pouquinho mais largo aqui e aí já ficou joia essa parte estética aqui aqui para nós certo então vamos lá a gente vai criar aqui na nossa pasta JS um novo arquivo que vamos chamar de carrinho PJS esse carrinho PJS ele vai ser o responsável pela lógica da nossa página de carrinho vamos referenciar ele lá dentro da nossa Roots então a gente pode pegar um esse tipo get script aqui né e colocar lá no nosso carrinho aqui quando a

página for inicializada para ele puxar o que tiver aqui dentro de carrinho PJS então a gente pode até ver aqui se vai funcionar ó app. dialog P Alert aqui dentro da nossa nosso arquivo carrin PJS só para ver se vai disparar disparou e vamos entrar lá nessa rota pra gente ver ó disparou Beleza então tá se comunicando e pra gente evitar a fadiga de ter que ficar entrando dentro da página de carrinho lá em cima na nossa rota index a gente pode indicar aqui ó para assim que a aplicação for inicializada ele já jogar a

pra rota de carrinho certo beleza então tá funcionando aí a nossa página de carrinho tá sendo chamada então aqui a gente vai fazer a nossa lógica tá pessoal então a gente vai criar funções para cada coisa que a gente vai querer que aconteça aqui a gente vai ter uma função para renderizar os itens do carrinho uma função para somar o total uma função PR esvaziar o carrinho que assim facilita o nosso trabalho então a primeira coisa a gente vai ter que pegar e recuperar os dados do nosso local Storage então a gente pode fazer uma

variável aqui ó local local carrinho por exemplo vou chamar de local carrinho e vamos pegar aqui local Storage getem e vamos pegar aqui o nosso carrinho certo aí agora a gente vai verificar vamos verificar se existe isso aqui então se local carrinho existe certo então se o local carinho existe a gente vai verificar se eh ele tem itens dentro então a gente pode fazer o seguinte a gente pode criar uma variável chamada carrinho aqui que vai fazer um Jon parse Desse nosso local carrinho que é a variável que tem aqui o nosso local Storage certo

e aí a gente vai fazer o seguinte se carrinho pon lente que a quantidade de itens for maior que zero quer dizer que a gente tem itens dentro do carrinho né Tem itens no carrinho a gente vai fazer o seguinte renderizar o carrinho e somar totais dos produtos sen não aqui vamos fazer se não quer dizer se não tiver nenhum item no carrinho mostrar carrinho vazio e aqui se não existe o local Storage né esse aqui é se existe se não existe o local Storage então aqui a gente também pode fazer mais um else e

aqui também vai ser mostrar o carrinho vazio certo Então essa vai ser a lógica aqui tá verificando que a gente tem dentro do local Storage se ele existir ele vai pegar esses dados fazer um par pra gente trabalhar vai ver quantos itens tem se tiver vai renderizar o carrinho se não vai mostrar o carrinho vazio Vamos criar agora então primeira a nossa primeira função que vai ser a de esvaziar carrinho ou carrinho vazio vou fazer assim função carrinho vazio então aqui dentro de carrinho vazio nós vamos fazer o seguinte primeiro a gente pode dar um

retorno aqui no console log dizendo carrinho está vazio só pra gente ter algum tipo de retorno e aí a gente vai esvaziar aqui a nossa área onde vai ter os itens a gente criou lá dentro de carrinho P HTML ó a gente criou esse ID que é o ID lista carrinho que vai mostrar os itens aqui então a gente pode pegar e selecionar esse item vamos pegar aqui ó lista carrinho e vamos usar o método empty que é para ele ficar vazio certo pra gente esvaziar ali e já vamos chamar aqui ó Essas funções aqui

onde é para mostrar o carrinho vazio a gente já chama aqui assim beleza por que que não tá acontecendo é porque a gente tem três itens no carrinho que a gente deixou da última aula né então a gente pode fazer assim vamos eh maximizar aqui dar um f12 pra gente abrir as questões de desenvolvedor vamos lá na nossa aba aplicativo ou dependendo do seu navegador application acha aí armazenamento local storage e aqui vamos Apagar manualmente a nossa chave de carrinho né porque a gente ainda não tem ali programaticamente como apagar ele então a gente vai

selecionar ele aqui e vem aqui em cima e excluir selecionado dessa forma a gente vai zerar aqui vai eliminar né essa chave de carrinho certo vamos atualizar aqui o nosso aplicativo E aí ó quando a gente entrou dentro da página do carrinho Olha lá que legal ele já mostrou para nós o carrinho vazio aqui ele apontou um erro eu reparei aqui em cima que ele deu um erro eh não conseguiu achar a propriedade lente na linha 57 deixa eu dar uma olhadinha aqui linha 57 isso aqui tem 21 linhas Então não é aqui Ah tá

eu sei o que que é isso pessoal que tá dando esse erro aqui lá na nossa index a gente tem aqui a verificação da sacolinha né Eh para quantos itens tem dentro do nosso carrinho Só que eu acho que a gente não colocou a questão de se a gente não tiver um um local Storage de carrinho Deixa eu ver isso aqui deve ser aliha linha 57 da nossa index.js vamos ver aqui ó linha 57 tá aqui ó carrinho lente É isso mesmo ó alimentar o contador da sacola aqui em cima a gente fez a variável

carrinho pegando os dados vindo lá do local Storage de carrinho Só que talvez isso não exista tá pessoal então se ele não existir a gente vai ter que colocar uma outra condição aqui ó que é para ele mostrar um Array vazio ou um Array vazio ass a gente coloca duas Barrinhas assim que é shift e a barra que fica do lado da letra Z então ou se ele tiver um item no local Storage ele vai fazer um parce aqui para pegar o a o que tem dentro desse nosso local Storage senão ele vai mostrar um

Array vazio daí eu acho que já vai resolver esse erro aqui porque um Array vazio também é zero Então não vai ter aí ó já resolveu ó não tá aparecendo o erro mais para nós Deixa eu voltar aqui na página index isso aí ó beleza resolvido então nosso carrinho tá vazio aqui né Nós mandamos ele esvaziar a gente também vai ter que fazer sumir esses itens que tem aqui embaixo Então vamos fazer sumir esses itens tem aqui embaixo vamos voltar lá no nosso carrinho PJS aqui dentro da nossa função de carrinho vazio e vamos fazer

sumir sumir os itens de baixo botão e totais né vamos fazer isso aí isso pra gente fazer isso a gente vai ali dentro da nossa página carrinho e aqui a gente vai achar onde a gente tem esses tubar aqui ó que são esses dois tar aqui então a gente pode batizar esses tobar com um nome então eu vou colocar esse primeiro aqui eu vou chamar de toolbar checkout que seria o botão né então tob checkout e o outro eu vou chamar de tubar tbar totais certo então vamos fazer eles sumirem agora então vamos fazer assim

primeiro a gente vai pegar o nosso tub totais a gente vai adicionar uma classe nele de CSS addd Class display None essa classe ela faz desaparecer Um item então ó displ já sumiu o item aqui e o nosso botão lá de baixo que vai ser o tubar checkout né checkout checkout E aí beleza já desapareceu Então esvaziamos vamos colocar aqui esvaziar do carrinho e aqui embaixo sumir os itens de baixo de totais Ok só que assim ficaria muito sem graça né pessoal então o que que a gente vai fazer a gente vai colocar aqui uma

imagenzinha e que tá lá no google drive você vai achar aí dentro de MG né lá se você baixa do Google Drive as imagens e a gente vai ter aqui o empt pgf que é essa imagenzinha da sacolinha Vamos colocar ela aqui então a gente vai fazer o seguinte a gente vai pegar aqui lista carinho que é a área onde vai as coisas del dentro né mostrar mostrar sacolinha vazia A gente vai pegar o lista carrinho a gente vai fazer aqui um HTML para injetar alguma cois dentro dele e a gente pode usar um template

string aqui usando duas crases né E aqui vamos pedir para fazer o seguinte vamos colocar uma div com uma classe text align Center para ficar alinhado no centro essa imagem e vamos colocar aqui uma uma tag de MG IMG src apontando pra pasta IMG nosso empt pgf que é esse arquivo que nós vamos est trabalhando Vamos ver ó lá já apareceu a sacolinha só que ficou muito grande vamos dar aqui um Edit de 300 ficar menorzinho ó lá que show de bola a nossa sacolinha E aí a gente pode colocar aqui um BR ó e

colocar aqui um spam dizendo assim nada por enquanto um texto panzinha aqui ó nada por enquanto e a gente pode colocar aqui uma classe eu acho que a gente criou uma color Grey né que é para ficar cinzinha ó nada por enquanto legal show de bola então quando o carrinho tá vazio ele vai mostrar isso aqui vamos colocar um item no carrinho para ver se ele vai ficar comportar diferente ó adicionei o item ao carrinho tá adicionado vamos entrar lá na rota aí apareceu o convencional aqui para para nós tá vendo Então ele já tá

tendo comportamento aqui Claro agora a gente tem que fazer alimentar dinamicamente né vou até colocar mais itens no carrinho aqui ó eh deixa eu colocar mais esse aqui adicionar no carrinho Vamos colocar mais um aqui uns três itens beleza e a gente pode inclusive pessoal já fazer aqui ó o disparo do evento aqui do esvaziar carrinho né Porque daí a gente já vê isso funcionando então a gente pode fazer esse disparo de evento aqui E esse clique aqui do esvaziar carrinho vai est aqui ó no nosso popover menu tá vendo a gente tem aqui ó

um ID chamado esvaziar que é justamente esse esvaziar carrinho aqui então a gente pode fazer essa chamada logo aqui abaixo do esvaziar carrinho a gente pode fazer aqui deixa eu só deixar isso tudo bonitinho organizado então a gente pode fazer assim que quando clicar no esvaziar a gente vai fazer um evento de on Click quando clicou nele o que que é para acontecer function então clicou no esvaziar carrinho a gente vai pegar o nosso local Storage e Primeiro vamos fazer uma uma pergunta né pro usuário se ele tem certeza que quer esvaziar o carrinho então

a gente pode fazer um app. dialog que é aqueles balãozinhos que aparece na tela pon confirm então o dialog confirme é um dialog de confirmação que tem no Framework Seven tá ele é um padrão aqui uma chamada para aparecer um balãozinho na tela com uma confirmação então primeiro parâmetro é o que vai escrito dentro dele então tem certeza que quer esvaziar o carrinho ess é o primeiro parâmetro coloca uma vírgula o segundo parâmetro é o título então a gente pode colocar aqui assim esvaziar carrinho e aí o próximo parâmetro é uma função de back é

um retorno do que acontece se a pessoa clicar Então a gente vai fazer uma function aqui do que acontece se a pessoa clicar em sim na confirmação o cancel quer dizer que a pessoa não aceitou não acontece nada mas se ela clicar em sim que ela quer confirmar o que que é para acontecer então se ela clicou quer confirmar a gente vai apagar o local Storage do carrinho Então vamos apagar ele aqui ó então vamos fazer o local Storage aí a gente vai fazer agora o remove item o remove item é para apagar tá pessoal

a gente vai apagar o nosso carrinho e depois de apagar esse carrinho a gente vai usar um recurso aqui muito interessante que é recarregar a página porque a gente tá fazendo o roteamento aqui em cima para ele verificar se tem alguma coisa no local stor ou não e dependendo do que acontecer ele vai chamar uma dessas funções então aqui a gente pode pedir só para atualizar essa rota essa página então a gente faz assim app. views pon Main pon router ponto aí você faz assim ó refresh page com o P maiúsculo e uma chamada assim

ó refresh page Beleza o r minúsculo P maiúsculo Tudo junto esse aqui é o comandinho para atualizar a página certo vamos dar uma olhada para ver se vai funcionar então nós temos três itens no carrinho aqui não Ignora isso aqui porque não tá puxando dinamicamente é só o que a gente tem de html né Mas se a gente voltar lá no nosso index a gente vê que tem três itens lá dentro do nosso carrinho se a gente aqui entrar dentro da Aba application aqui né a gente vai verificar aqui dentro do nosso local stor de

carrinho a gente tem três itens aqui beleza então vamos agora esvaziar para ver se vai funcionar vamos clicar aqui então no esvaziar carrinho ele já apareceu aqui para nós ó o balãozinho não gostei dele achei que ficou muito grande ali o esvaziar carrinho deixar só esvaziar aqui ó e a gente pode deixar isso aqui como um strong aqui ele aceita tá HTML tá pessoal então a gente pode colocar aqui um strong que é vai ficar né vamos ver clicou em esvaziar esvaziar carrinho esvaziar Aí sim tem certeza eu não coloquei ponto interrogação mas ó que

burro vamos de novo esvaziar carrinho tem certeza que quer esvaziar o carrinho aí tem cancelar e sim vamos clicar em sim e aí olha só que legal ele já atualizou a nossa página verificou que que não tem nada no carrinho e já mostrou nada por enquanto show de bola então já tá funcionando vamos dar uma olhada lá para ver se ele apagou o nosso local stor de carrinho ó lá apagou legal beleza vamos voltar lá no nosso index e vamos colocar umas coisas aqui adicionar o carrinho vamos adicionar o carrinho beleza temos dois itens e

agora vamos fazer puxar dinamicamente esses itens Então já temos o botão de esvaziar rodando para nós já temos o botão de carrinho vazio também rodando Então o que a gente vai fazer agora é primeiro a função para renderizar o carrinho Então vamos fazer aqui a função ó vamos fazer aqui ó function function Opa fun renderizar carrinho Então a primeira coisa que a gente vai fazer na hora de renderizar o nosso carrinho vai ser esvaziar a á dos itens né porque por padrão ele vem com conteúdo que a gente deixou ali né que esse HTML depois

a gente vai tirar ele mas só para a gente ir deixando alguma coisa por enquanto ali né Vamos esvaziar então a área que vai ser o nosso lista carrinho lista deixa eu pegar aqui de baixo lista carrinho emp a gente pode copiar aqui para evitar fadiga né então ele já vai esvaziar quando der o renderizar carrinho e a gente vai fazer o seguinte a gente vai ter que percorrer percorrer o nosso carrinho e alimentar né a área então a gente pode fazer esse percorrer usando o método aqui ó it que é do próprio JavaScript do

próprio J Carry aqui ó método it Então esse método it a gente vai passar aqui então o nome de cada item vai se chamar a gente a gente vai querer percorrer na verdade o carrinho que é o nosso Nossa variável aqui que tá pegando os itens do local Storage e a gente vai fazer o seguinte vamos fazer a função que vai percorrer a gente vai pegar um índice o index e cada item vai ser chamar item carrinho cada item que a gente tem lá dentro certo aqui vamos pedir então para ele fazer isso daí percorrer

cada item dentro do nosso carrinho Então a gente vai fazer uma variável aqui a gente vai chamar de item div que vamos usar um template string e aqui a gente vai colocar o modelo de Um item desses daqui né então a gente pode pegar aqui dentro da nossa carrinho P HTML um modelinho aqui ó de item do carrinho Vamos pegar esse primeiro aqui ó item do carrinho vou colocar aqui dentro e agora nos lugares onde a gente teria os valores aqui ó a gente vai e colocar o que tá vindo lá do nosso local Storage

de carrinho né que tá aqui dentro desse item carrinho é só pra gente aí vendo o que tá acontecendo Eu vou fazer a chamada Aqui ó dessa função renderizar carrinho já pra gente ver o que tá acontecendo certo então aqui a gente vai pedir para ele mostrar os itens depois a gente tem que alimentar aqui embaixo ó alimentar o nosso lista carrinho is carrinho com cada item desse então a gente vai usar o método append e aqui a gente vai colocar a nossa item div Ah faltou aqui beleza então ele já tá detectando que tem

dois itens dentro desse nosso carrinho vamos fazer então agora ficar dinâmico isso aqui trocando aqui os valores né a gente pode usar Então como a gente tá trabalhando com template string que a gente usou crase aqui a gente pode usar o cifrão duas Chaves e aqui passar Qual que é a variável Então a gente vai passar aqui ó item carrinho ponto imagem e já não funcionou não é imagem Deixa eu lembrar como é que é o nome aqui vamos ver lá dentro do nosso carrinho aqui é imagem imagem mesmo deixa eu ver que que eu

fiz de errado aqui pera aí ele não tá localizando e tem carrinho ponto imagem Dea eu ver de novo aqui como é que tá no nosso local Storage aqui ah tá pessoal tem que ver que aqui ó dentro de cada um desses itens ó a gente tem item quantidade Total E aí dentro de item que a gente vai ter os detalhes aqui dentro então a gente tem que fazer item que é esse aqui pon item ponto imagem porque a gente tem essa entrada aqui né daí pegar os valores agora acho que vai funcionar vamos vamos

salvar aqui deixa eu só voltar aqui ao normal agora sim funcionou já tá puxando dinamicamente lá os valores que a gente tem lá dentro né então vamos colocar aqui também onde a gente tem aqui item carrinho vamos usar aqui um data index o índice que tá vindo aqui de cima né conforme a gente os itens que a gente tem dentro lá do nosso carrinho beleza e aí vamos trocar aqui onde tem o nome a gente vai usar item carrinho aqui é nome já ficou joia aqui a gente vai ter a característica principal então aqui é

característica principal Opa acho que eu errei err vamos ver aqui como é que se chama e é principal característica I tá invertido aqui ó vamos lá Vamos ajeitar aqui principal característica beleza aqui nós vamos colocar o preço promocional preço promocional e a gente vai ter que usar aquele esquema dooc string né lá na index a gente tem um um desse aí pra gente copiar aqui ó aquele método para transformar em padrão de moeda brasileira né Vamos lá stram PTBR estilo moeda real ó lá já deixou no valor de real beleza e na parte dos botões

aqui pessoal para que a gente tenha uma diferenciação entre um botão e outro para saber qual que tá clicando qual que tem que modificar a gente vai usar aqui ó no link do menos e do mais a gente vai usar aqui um atributo data index que é um in e aqui a gente vai pegar o índice Então a gente vai passar o índice dele né que que é índice pessoal que que é esse index eh só para ficar claro para vocês quando a gente tem aqui Um item dentro de um Array cada um desses itens

eles têm um índice né então o primeiro é o índice Zero O segundo é índice um e assim por diante 2 3 Então como tá numa sequência o que tá salvo aqui dentro ele vai saber que o índice se refere a esse item o outro índice é esse outro item entendeu então é assim que funciona não tem nada a ver com o ID do produto é com o índice do que como foi salvo dentro do carrinho sequência como foi salvo dentro do carrinho certo é isso que esse índice faz vamos voltar lá então a gente

vai colocar um data índice aqui um data índice aqui e no nosso campo input a gente tem que colocar aqui no valor Qual que é o a quantidade né então a gente vai pegar aqui ó e vai pegar o que a gente tem aqui salvo também dentro do local Storage eu toda hora tem que ficar voltando aqui ó que é a quantidade ó quantidade um tá vendo Então a gente vai pegar o item carrinho quantidade vamos lá aqui a gente vai pegar então o item carrinho ponto quantidade certo beleza então olha só repara só o

que que vai acontecer aqui a gente tem os itens Beleza se a gente voltar aqui e adicionar mais um airpod ó adicionei mais um vou até colocar mais um Ó coloquei mais dois né então tem que ter três agora se a gente voltar lá dentro da nossa Nossa sacolinha Olha lá em quantidade ele já viu que tem três legal olha só que interessante bem massinha isso daqui para nós né E a gente vai ter que agora fazer também a questão das somatórias pessoal então esse aqui a gente fez renderizar o carrinho Então vamos criar agora

a função aqui function calcular total e aqui a gente vai fazer da seguinte forma a gente vai começar primeiro com uma variável que a gente vai chamar de Total carrinho vai começar com zero que a gente não sabe o valor que tem dentro do carrinho acontece que cada item desses aqui dentro do nosso carrinho se a gente for lá no nosso local Storage eles vão ter aqui um campo aqui dentro chamado Total item que já tem o total calculado da quantidade vezes o valor unitário porque a gente fez isso na hora de adicionar o carrinho

já certo então tem aqui Total item então o que que a gente vai ter que fazer é percorrer cada um desses itens que a gente tem dentro do carrinho somando o total item E aí isso vai dar dar o subtotal aqui certo simples assim então a gente vai começar com ele Zerado vamos percorrer o nosso carrinho aqui ó fazendo um it Dá até para copiar aqui de cima para evitar a fadiga né então a gente tá percorrendo o nosso carrinho e a gente vai fazer aqui esse nosso Total carrinho a gente vai usar aqui o

sinal de mais e igual que é para ele pegar o que já tem e somar em cima daquilo certo e a gente vai fazer o item carrinho ponto Total item que a gente vai pegar o valor ali total né Total item então aqui a gente tá somando ele mesmo né quando a gente usa esse sinal de mais igual é como se a gente pegasse o que já tem aqui no total item e cada laço de repetição a gente vai pegando o valor e somando certo depois para esse aqui ser mostrado a gente pode fazer o

seguinte aqui onde a gente tem essa áre ainha aqui do subtotal Vamos dar um ID para ele aqui ó eh vamos achar aquela área do subtotal aqui ó subtotal aqui onde vai aparecer o valor a gente pode colocar um id subtotal e aqui a gente vai fazer o seguinte a gente vai fazer que esse nosso subtotal P HTML vai receber o total carrinho que já fez a soma aqui certo só estamos alimentando mostrar o total beleza por enquanto não funciona porque a gente não chamou em nenhum lugar esse calcular Total Então a gente vai selecionar

agora essa função calcular Total E aqui onde a gente tem renderizar o carrinho logo abaixo a gente tem que somar os totais dos produtos e vamos dar aqui um calcular total e vamos ver lá ó lá já tá mostrando para nós o total três itens desse mais um item desse só que aqui a gente vai ter que fazer aquele to string lá né Vamos copiar aqui ó desse aqui esse metodo só pra gente deixar no padrão brasileiro de moedinha vamos achar ele aqui Ah aqui ó Beleza então subtotal mostrar esse valor e olha lá que

legal então a gente já tem lá o subtotal esses botões aqui a gente vai fazer agora ele aumentar ou diminuir né A gente já vai fazer esse método mas pra gente já ver que isso aqui tá funcionando ó pessoal tem 15.689 com 96 se eu pegar um outro produto aqui ó vamos pegar mais esse aqui um Macbook de 8.000 vamos adicionar o carrinho adicionado a gente voltar lá no nosso carrinho já vai tá aqui o Macbook já colocado de forma dinâmica e aqui já tá o valor com ele adicionado aí ó éa aquele valor que

a gente tinha mais os 8699 e99 dele legal show de bola agora vamos fazer aqui os disparos de mais e menos né para que a gente possa ter um controle por aqui de adicionar e já alterar o nosso subtotal também se a pessoa colocar menos menos menos menos de um clicar para ser menos de um tipo zero daí a gente iia ter que fazer um balãozinho para dizer você quer remover esse item e também aqui no xizinho quando clicar para ele também aparecer pra pessoa deletar esse item do nosso local Storage Então vamos fazer isso

agora começar então fazendo pelo X de delete porque daí assim a gente já consegue ir deletando alguns itens individualmente a gente já vai tendo um pouquinho mais de controle né então aqui embaixo de tudo isso vamos fazer a chamadinha al pro pro botãozinho de deletar deixa eu ver como é que a gente chamou ele aqui ah na verdade ele tá aqui ó a gente constrói a lista agora de forma dinâmica aqui né então a gente vai ter aqui vamos achar o é o xinho tá aqui ó MD Close delete item é esse aqui ó essa

classe delete item Então vamos fazer a chamada do delete item então clicou no delete item P on on Click quando clicou nele que que é para acontecer function a gente pode fazer aqui um dialog de confirmação confirmar app. dialog confirm a gente pode colocar tem certeza que quer remover este item aí a gente pode colocar aqui remover E aí uma função function o que que é para acontecer né então aqui a gente vai fazer o seguinte a pessoa clicou em sim tem certeza que é remover a gente vai ter que saber qual que é o

índice desse item aqui então a gente tem aqui ó pessoal onde a gente tá montando o nosso cardz inho de item do carrinho cada um desses aqui de forma dinâmica a gente tem a classe item carrinho e dentro dessa classe item carrinho a gente tem um data Index Esse índice vai determinar para nós qual que é o item que a gente tem que deletar lá do nosso local Storage certo então a gente vai fazer o seguinte a gente vai fazer uma variável chamada index que é pra gente pegar qual que é esse índice a gente

vai pegar e vamos fazer o dis dis quer dizer desse item delete item que a gente tá clicando a gente vai querer pegar o mais perto closest que é um método aqui do J Carry para falar assim que quero pegar o item mais perto que vai ser o item carrinho então eu quero pegar o item carrinho mais próximo que eu tiver e eu quero pegar o atributo a data index certo então com esse método aqui que eu tô fazendo eu tô falando assim que ao clicar neste item cliquei no delete item eu quero que pegue

o o item carrinho mais perto que tiver dele e pegar qual que é o índice então ele vai por exemplo eu cliquei nesse primeiro ele vai olhar lá qual que é o o item carrinho mais perto que eu tenho Ah esse aqui de cima o índice dele é tal e aí a gente recupera qual que esse índice certo então esse aqui a gente tá voltando a pegar qual que é o índice dele aí a gente vai fazer um método bem simples A gente vai fazer o carrinho que é o nosso local Storage já feito parce

lá em cima ó a gente tem aqui ó carrinho a gente pegou e já tá com os dados do carrinho do local Storage e a gente vai fazer o seguinte a gente vai usar o método Splice que é para remover Um item de um Array e a gente vai passar Qual que é o que a gente quer remover que é o índice e a gente vai querer que só remova esse item certo um quer dizer para remover esse item aí legal show de bola então aqui a gente já removeu de dentro do carrinho esse item

e agora a gente vai ter que atualizar o nosso local Storage com isso aí então a gente faz o local Storage set item a gente vai fazer os sete item Opa fou aqui errado local stor pon s e a gente agora ele aqui o Jing com esse novo carinho porque aqui a gente mandou remover n gente fez um carinho quer dizer remove esse it do carinho e agora gente tem que salvar o carrinho novamente com ess it removido Então posso colocar aqui atualizar atualizar o carrinho com item removido e aqui em cima remover o item

do carrinho beleza e aí feito isso pessoal a gente pode pedir para fazer o seguinte atualizar a página e quando a gente atualiza a página ele já vai fazer todo aquele processo de renderizar novamente o carrinho verificar se tem os itens local Storage e tal ou não então ficou mais prático fazer dessa forma então app. viws pm. router refes page beleza vamos dar uma olhada se esse aqui vai funcionar Então a gente vai deletar Um item vamos escolher aqui vamos deletar o iPhone que é o que é mais impactante 14.000 vamos clicar aqui e não

aconteceu nada ah tá a gente tá burro a gente tá fazendo aqui por chamada de ID e é por classe tá pessoal aqui ó delete item uma classe ó não é um ID Então vamos resolver esse aqui por classe beleza vamos agora deletar o iPhone Ahí Agora sim remover tem certeza que quer remover este item Vamos dar um sim e removeu o primeiro deu deu ruim aqui pessoal removeu o primeiro item vamos esvaziar o carrinho e fazer um teste de novo vamos esvaziar nada por enquanto vamos volar lá para nossa index Vamos colocar um airpod

beleza aí que nós vamos fazer os testes Vamos colocar um iPhone Vamos colocar um Xbox tá bom e vamos tentar remover o Xbox aqui clicar aqui para remover tem certeza que remover esse item Sim e ele tá removendo o primeiro de todos eu acho que é por causa do seletor que a gente tá usando que é o item aqui tá pessoal vamos fazer o seguinte eu vou mudar isso aqui eu vou usar de seletor a nossa própria lista Então vamos fazer assim ó lista carrinho eu vou usar ela de seletor quando tiver um evento de

clique nela e eu vou especificar que dentro do evento de clique ainda vai ser dentro do delete item que vai ser o item do X aqui porque daí ele vai procurar por pela lista carrinho Qual que é o item carrinho mais perto e aí vai dar certo porque pelo delete item Talvez ele tá achando mais perto um outro item ali alguma coisa do tipo deixa eu ver deixa eu salvar aqui vamos vamos adicionar aqui mais uns itens aqui adicionar o carrinho pera aí vamos limpar primeiro vamos esvaziar sim esvaziamos e vamos fazer uma ordem diferente

vou colocar um Macbook depois eu vou colocar aqui o iPhone e aí vamos colocar o Xbox beleza vamos deletar o iPhone agora vamos ver se vai dar certo clicou aqui tem certeza que remover esse item Sim e ele não quer de jeito nenhum deletar o certo né pessoal tá muito louco isso aqui deixa eu ver airpod vou adicionar remover o airpod o XBox e o iPhone beleza vamos tentar tirar o Xbox Então vamos lá Momentos de tensão cliquei para remover o XBox e ele removeu o primeiro que que a gente tá fazendo de errado aqui

hein pessoal deixa eu ver item carrinho data index lista carrinho um clique delete item tem certeza quer remover aqui as coisas pessoal vamos fazer o seguinte aqui onde a gente tem o delete item Vamos colocar o data index nele aqui ó pegar aqui e colocar aqui dentro dele delete item beleza coloquei um um data index nele agora aqui embaixo Então a gente vai vamos fazer como a gente tava fazendo isso antes pegou o delete item vamos lá são as Pedreiras que vão acontecendo enquanto a gente tá desenvolvendo né clicou nele a gente vai recuperar o

índice pegando dis ponto att vamos pegar data index Então pegamos Qual que é o índice E aí vamos fazer um Splice quer dizer simplificamos para caramba né vamos ver se vai dar certo isso aqui vamos colocar mais um Macbook aqui beleza vamos tentar apagar o maldito do iPhone que não quer apagar nem a pau né Vamos clicar aqui em fechar quer remover esse item sim e fechou o errado mas que coisa rapaz deixa eu ver o que que tá acontecendo aqui vamos inspecionar os elementos aqui ó vamos dar um inspecionar e ver o que que

tá vindo aqui dentro desse de cada um desses itens carrin Então a gente tem o item carrinho aqui a gente tem aqui vamos ver se ele tá pegando data index zero beleza esse segundo aqui details superior data index um agora tá certo mas vamos vamos colocar um outro item aqui Xbox adicionei Então eu tenho o iPhone vamos inspecionar para ver se vai aparecer data índice zero beleza segundo aqui tem que ser um um e o último tem que ser dois dois beleza lá no nosso local Storage no zero tá o iPhone no um tá o

Macbook e no dois tá o Xbox certo certo então beleza tá certinho então a gente tá aqui pegando Qual que é o índice delete item clicou vai pegar esse vai pegar o atributo data index Vamos só ver se ele tá pegando aqui ó console.log o índice é dois pontos e aqui vamos colocar qual esse índice só pra gente vê se vai vai pegar certinho e aí a gente tá pegando o nosso carrinho dando um spli nesse índice quer dizer remover o item do carrinho estamos atualizando o nosso carrinho e dando refresh na página Aparentemente parece

Tá tudo certo vamos ver se vai funcionar aqui deixa eu f12 aqui vamos lá no nosso console cliquei aqui ten certeza que remover esse item sim o índice é undefined olha só que curioso índice é Indefinido ele não conseguiu pegar qual que é o índice deixa eu ver o que que a gente fez de errado clicamos no delete item diz att data index aqui a gente não chamou de data index data index ah pessoal eu acho que eu sei o que que tá acontecendo aqui a gente tá fazendo esse ess esse disparo de evento aqui

pessoal fora da construção dinâmica do nosso app porque que que acontece isso aqui ele tá tentando pegar o delete item original que a gente tem lá no nosso HT ml não que foi montado pelo nosso JC Então a gente tem que pegar esse disparo de evento aqui e a gente vai ter que colocar logo aqui abaixo da onde ele fez esse it então aqui no renderizar carrinho ó a gente vai ter o it que montou ali a nossa estrutura Fecha aqui e aqui embaixo a gente vai ter que colocar esse delete item aqui porque daí

agora ele vai entender que ele tem que pegar o delete item do que foi renderizado vamos ver se é isso mesmo vamos fazer o teste aqui vou colocar um airpod Vamos tentar agora deletar o Xbox aqui momento de tensão clicou quer remover esse item e não não funcionou também mas que coisa rapaziada deixa eu ver aqui o que que tá acontecendo eu vou dar uma olhadinha geral pra gente não se delongar muito aqui e já volto beleza pessoal voltei aqui o que que tá acontecendo a gente tava tentando usar o método dis aqui dentro do

dialog de confirmação E aí ele não tava funcionando aqui tá pessoal não tava dando certo então a gente colocou agora do lado de fora antes do diálogo de confirmação eu passei o parâmetro data agora em vez de usar o att data index E aí tô pedindo para ele mostrar qual que é esse índice antes de fazer a confirmação de de deletar Tá então vamos ver se agora vai funcionar ó então aqui a gente tem esse primeiro item vai ser o índice zer já tá mostrando índice é zero o segundo índice é um terceiro índice do

Beleza então vamos tentar deletar uma audito do iPhone agora que não quer ser deletado de jeito nenhum cliquei aqui vamos dar um sim então é o índice um vamos remover aí agora sim foi removido o índice certo beleza vamos deletar o Macbook aqui deletar Agora sim agora funcionou vamos deletar o airpod aí nada por enquanto agora funcionou deu certo que sufoco né mas é isso que acontece no nosso dia a dia de desenvolvimento né pessoal vai dando os problemas aí e a gente tem que encontrar a solução né isso que eu já tinha feito esse

projeto antes e tinha e mais ou menos feito dessa forma aqui e não sei porque não tava funcionando né Mas é bom que a gente vai vendo as realidades aí de quando tem problemas também né ainda que dá uma alongada um pouquinho na aula vamos adicionar novamente os itens aqui vamos lá tô quase com vontade de nem pôr um iPhone aqui da Desgraça não funciona esses iPhone da miséria Vamos colocar aqui uns itens beleza aqui ficou meio bagunçado deixa eu limpar esse console aqui e agora a gente tem que fazer os botões de menos e

de mais funcionarem né então a gente vai colocar os eventinhos aqui só que isso aqui era uma coisa importante que a gente não tava fazendo mesmo esses eventos é bom ficarem logo abaixo do it aqui do de onde percorre e monta tá então aqui a gente vai ter o Minus e o Plus né Cada um tem o seu data índice Então vou copiar aqui ó o do delete V copiar esse aqui colar aqui embaixo única coisa que a gente vai vai tirar esse essa confirmação então aqui a gente só vai ver para ver o índice

né o índice aqui a gente vai colocar [Música] minos só para ver se ele tá pegando Qual é o índice correto quando clicar aqui no no minos né Então aqui tem que dar zero í é zero aqui tem que dar um e aqui tem que dar dois Beleza então ele tá pegando Qual que é o índice certinho pra gente não ter aquele problema que tava dando antes então agora a gente vai ter que fazer a questão do cálculo né de se diminuir Um item aqui e fazer as devidas atualizações também lá no nosso local Storage

de carrinho Então a gente vai fazer o seguinte a gente vai fazer uma condição assim ó se o carrinho na posição que vai ser esse índice que é a posição conforme a gente tem ali a montagem o índice 0 1 2 conforme a gente viu ali depende da onde o pessoa vai clicar Qual dos itens então ele vai ver no carrinho na posição índice se a quantidade for maior que um O que é para acontecer então se a quantidade for maior do que um é pra gente Diminuir a quantidade né então a gente vai fegar

o nosso carrinho nessa posição índice nós vamos pegar a quantidade e a gente vai usar aqui o menos menos que é para ele diminuir um feito isso a gente vai ter que atualizar o nosso Total item Então a gente vai pegar o carrinho na posição índice nós vamos pegar o nosso campo total e item e a gente vai fazer agora que ele vai ser o carrinho na posição índice quantidade ponto quantidade vezes carrina posição índice pon item.on preço promocional para que a gente possa atualizar o total daquele item certo então a gente diminuiu uma quantidade

a gente agora Qual que é o total desse item agora vamos atualizar o nosso local Storage Então vamos fazer local Storage it carrinho E aí vamos fazer um Jon string Salvar esse nosso carrinho beleza e agora a gente pode mandar aqui atualizar nossa página views pon Main P router P refresh page Beleza então aqui a gente pode fazer assim né se tem mais de um item na quantidade se não quer dizer se não tem mais de um item na quantidade quer dizer que a pessoa apertou o botão de menos e vai ter menos do que

um ou vai ter um certo porque aqui é maior que um então se tiver um ou menor que um é para aparecer isso aqui então só vai acontecer se tiver no um na verdade né então a gente pode fazer assim uma confirmação né a gente pode fazer assim app. dialog confirm e aqui a gente vai fazer assim gostaria de remover e aqui a gente até pode pegar aqui qual que é o nome do item né então a gente pode pegar assim ó item name vai ser igual a gente vai pegar o carrinho nesse índice e

a gente vai pegar o item ponto nome então gostaria de remover daí aqui a gente pode colocar um assim com t b mesmo que é bold né Ou pode usar o strong também vamos usar o strong que é melhor né gostaria de remover a aqui a gente pode usar vamos usar primeiro template string aqui pera aí deixa eu recortar is aqui vamos usar as duas crases gostaria de remover aqui a gente vai passar o item name gostaria de remover o item name fazer ponto interrogação aqui remover e aqui uma função se a pessoa concordar né

function caso isso aí realmente aconteça Então se acontecer gostaria de remover a gente vai pegar o nosso carrinho e vai dar um spli nesse índice E aí vai atualizar esse carrinho pegar aqui de cima atualizar esse carrinho e atualizar a nossa página certo então beleza então esse aqui é o botão de menos a pessoa clicou no botão de menos vamos copiar esse daqui control c e agora vamos fazer o botão de aqui vai ser o Plus Então a gente vai Opa Plus a gente vai recuperar Qual que é o índice aí aqui a gente não

vai precisar fazer essa validação aqui ó a gente vai fazer assim a gente recupera qual que o índice vai fazer o carinho nessa posição índice e vai aumentar a quantidade quantidade mais mais aumentar mais um E aí a gente só vai ter que fazer esse cálculo aqui ó já copiar aqui de cima que vai ficar mais fácil pegar o cálculo para ele saber qual que é o total item novamente nesse índice vai ter que atualizar o nosso local Storage e vai ter que atualizar a nossa página refrescar a página né salvamos o novo local Storage

Beleza então o o Plus né o aumentar a quantidade é mais fácil nada a gente vai fazer nada mais do que aumentar a quantidade que a gente tem lá no índice do nosso carrinho ver lá qual que é o valor do total item novamente Salvar esse novo carrinho atualizar ele então atualizar a nossa página certo é na verdade pessoal não vai ser legal a gente atualizar a página tava pensando nessa parte aqui dos botões de menos e de mais não é legal atualizar a página porque senão a gente vai ter que atualizar tudo de novo

Cada vez que a pessoa clicar no botão renderizar novamente na verdade a gente pode fazer só o seguinte aqui a gente pode usar os métodos que a gente já criou que é o renderizar carrinho e o calcular Total carrinho né calcular Total esses dois métodos aqui em vez de atualizar a página beleza vamos ver se isso aqui funcionou vamos lá então vamos começar pela desgraça desse iPhone aqui então vamos ver o total lá já tá dando 19.000 tal vamos colocar mais um dois ó foi para 14 mais um mais um Beleza então tá calculando lá

certinho 94 109 beleza vamos tirar aqui o Xbox vamos bom vamos botar um menos para ver ó menos tá diminuindo vamos remover aqui um só beleza e vamos clicar aqui para remover gostaria de remover o iPhone sim aí removido Beleza já tá dando o valor certinho lá embaixo certo legal ele tá dando essas piscada agora não piscou mas de vez em quando dá umas piscada aqui pessoal porque no navegador ele faz isso Tá Mas quando você for testar no celular você vai ver que ele não acontece isso ele tá piscando porque ele tá renderizando novamente

a página aqui né E aí por isso que ele dá essas piscadas aí eh daria pra gente só fazer aumentar aqui nessa parte do input só um número e só fazer a soma sem ter que renderizar novamente mas aí vai dar mais trabalho né assim já tá funcionando bonitinho e já tá legal Vamos esvaziar o carrinho beleza vamos ver então pessoal se deu certo aqui o nosso projeto né Vamos comear do começo que deu um sufoco nessa parte do carrinho aí mas deu certo né É assim mesmo vamos comentar essa parte de mandar a gente

direto com carrinho aqui e vamos voltar lá na nossa página inicial então entramos na nossa página inicial vai puxar os itens aqui para nós vamos adicionar um Macbook um iPhone Xbox e um airpod certo então tem quatro itens lá entramos os os itens estão alistados né se a gente adicionar mais um de qualquer item Vamos colocar mais um Mac por exemplo aqui ele vai ver que tem dois na quantidade lá então tá vendo certinho aqui tá dando os totais certinho né 36.42 1995 se a gente adicionar mais ele já vai atualizando lá o nosso subtotal

né lá 62.000 beleza aqui a gente se colocar menos ele vai também removendo lá do total se clicar aqui no menos ele vai verificar que tem um só tá perguntando se a pessoa quer remover sim dá para remover também no x aqui de fechar para remover só esse item e temos aqui o esvaziar carrinho que pergunta se quer esvaziar o carrinho sim e aí nada por enquanto E aí fechou beleza pessoal Então esse é o nosso projetinho aqui né Aí se fosse um projeto real você precisaria aí ter o a parte de checkout para fazer

o pagamento né Claro antes dessa etapa aqui de entrar no app você teria que ter algum sistema de login para ter os dados desse usuário né fazer as páginas de busca de favoritos aqui né para na página do usuário por exemplo ele saber o que ele comprou onde que os itens dele estão né e várias coisas que ainda precisariam ser implementadas e agora para concluir Vamos pro momento de Glória né que é pegar esse nosso app aí e rodar no nosso celular instalar ele no celular Afinal a gente esta construindo ele justamente para ter um

aplicativo para Android né então você vai pegar aí o teu celular vai pegar um cabo USB né conectar lá no computador a gente viu isso na aula de número três aqui né esse processo de como é que a gente gera para colocar no celular as coisas mas vamos fazer aqui também então a gente vai encontrar aqui na nossa Roots lá na linha vamos achar agora onde é que ficou agora tá na linha 197 cresceu um pouco mais aqui o nosso código né a gente vai comentar esse aqui que é o de testes no navegador a

gente vai comentar esse aqui salvar então esse varmen viw aqui né a gente vai comentar agora ele não vai funcionar direito porque ele ele tá sendo específico para rodar no Android a gente pode até fechar o Live server aqui parar né e agora a gente vai rodar essa aplicação no nosso celular então a gente vai dar aquele comando adb devices aqui para a gente ver se o nosso celular tá se comunicando com o computador então ó não apareceu deixa eu botar minha cara aqui desse lado não apareceu ele alistado ali deixa eu desbloquear ele aqui

ó agora deu o barulho vamos ver se ele vai DB devices agora ele tá conectado com o meu device e vamos dar o comando cordova Run Android para que ele compile a nossa o nosso projeto e rode no celular pra gente ver ele rodando no celular né Vamos aguardar aqui ele terminar a compilação e vamos ver se deu certo então tá lá mostrar para vocês aqui ó como é que ficou no celular olha só que bonitinho né que top rapaziada como é que ele ficou né Vamos fazer um testezinho vou tentar fazer por aqui para

ver ó clicou aqui no item abriu olha só que bonitinho vamos ver se eu consigo aqui e navegando por aqui ô meu Deus do céu tá difícil de ver por aqui ó carregou viu vamos clicar aqui no Mac vamos adicionar ele no carrinho aqui aí deu certo vamos voltar lá ó sacolinha lá em cima vamos ver se vai focar deu o nosso carrinho vamos vamos adicionar mais uma coisa vou adicionar aqui o Xbox adicionei beleza adicionado vamos voltar vamos lá pra nossa sacolinha oh meu Deus do céu é difícil esse espelhamento hein oh não tô

conseguindo vou clicar aqui aí nosso carrinho de compras nosso Total ali né Vamos aumentar aqui vamos ver se eu consigo deixa eu ver se eu consigo fazer um um jeito que vocês conseguem ver e eu também aqui ó no mais oh meu Deus do céu tá difícil é melhor quando eu espelho com o programa ali ó vamos colocar aqui ó mais ó adicionando mais Aí lá embaixo dá o total vamos esvaziar o carrinho vamos clicar aqui no canto esvaziar carrinho Tem certeza Sim esvaziou nada por enquanto enfim o que a gente tinha feito ali antes

né rodando no nosso celular muito legal a gente vê ele rodando bonitinho aí né no nosso celular bem bonito mesmo Isso aqui é uma sensação indescritível de você ver um app de alta qualidade rodando aí no seu celular eu espero do fundo do meu coração que você tenha gostado dessa série que ela tem ajudado você a entender como funciona aí para desenvolver aplicativos usando essa técnica de desenvolvimento híbrido lá no meu curso completo de desenvolvimento de apps você encontra muito mas muit muito mais coisas interessantes como usar os plugins do sistema do celular né a

câmera geolocalização mandar notificações como você faz sistema de pagamento eh tanto para checkout como por exemplo num projeto como esse aqui de vendas de produtos físicos como também um checkout de produtos digitais como você faz para fazer anúncios né naqueles aplicativos que são gratuitos e aparecem as propagandas Para você ganhar dinheiro como você publica na loja da Google Play tudo isso e muito mais a gente ensina no meu curso completo de criação de aplicativos então se você tiver interesse clica aqui no ícone que você vai poder acessar a página de vendas e conhecer um pouco

mais do meu curso beleza esse projeto vai tá o código fonte disponível lá dentro do meu curso Então se você quiser também pode fazer o curso e também pegar esse projeto para você caso você queira beleza Um forte abraço e até a próxima valeu