Lista de desejos com botão Adicionar ao carrinho

<estilo> _
 . lista de desejos - rótulo do botão , . lista de desejos - remover -- botão {
 índice z : 2 ;
 plano de fundo : { { seção. configurações . botão_background } } ; 
cor : { { seção. configurações . cor do botao } } ;
 largura : 40px ;
 altura : automático ;
 proporção de aspecto : 1 ;
 posição : absoluta ;
 margem : 1rem ;
 direita : 0 ; 
topo : 0 ;
 exibição : flexível ;
 alinhar - itens : centro ;
 justificar - conteúdo : centro ;
 borda : 3px sólido { { seção. configurações . borda_botão } } ;
 transição : escala 0,3s de facilidade ;
 } 
. lista de desejos - rótulo do botão : passar o mouse , botão. lista de desejos - remover -- botão : passar o mouse , . lista de desejos - compartilhar : hover {
 escala : 1,05 ;
 }
 . não - lista de desejos {
 Mostrar nenhum ! importante ; 
}
 . produto - imagem -- wrapper img {
 largura : 100 %;
 altura : 100 %;
 ajuste ao objeto : capa ;
 exibição : bloco ;
 }
 . produto - imagem -- wrapper {
 largura : 100 %; 
altura : automático ;
 largura máxima : 200px ;
 proporção de aspecto : 1 ;
 }
 . lista de desejos - produto -- wrapper {
 exibição : flexível ;
 coluna - gap : 2,5rem ;
 lacuna entre linhas : 5rem ; 
flex - wrap : wrap ;
 preenchimento : 0 ;
 }
 . lista de desejos - produto -- wrapper li {
 estilo de lista : nenhum ;
 posição : relativa ;
 largura : 100 %;
 altura : automático ; 
largura máxima : calc ( ( 100 % / 4 ) -1,9rem ) ;
 proporção de aspecto : 1 ;
 exibição : flexível ;
 lacuna : 1rem ;
 flex - direction : coluna ; 
alinhar - itens : centro ;
 justificar - conteúdo : espaço entre ;
 }
 informação do produto . lista de desejos -- botão > rótulo {
 exibição : flexível ;
 lacuna : 1rem ;
 largura : conteúdo máximo ;
 posição : relativa ; 
altura : automático ;
 proporção de aspecto : não definida ;
 preenchimento : 0 0,5rem ;
 }
 resumo #HeaderMenu-wish:hover svg.icon {
 transformar : escala ( 1,07 ) ;
 }
 . lista de desejos -- botão svg > caminho { 
acidente vascular cerebral : { { seção. configurações . cor do botao } } ;
 }
 . lista de desejos - entrada do botão [ id ^= "input-wish" ] : verificado ~. lista de desejos -- botão svg > caminho { 
acidente vascular cerebral : { { seção. configurações . button_check_color } } ;
 }
 . lista de desejos - remover -- botão svg {
 escala : 2,5 ;
 } 
. lista de desejos - entrada do botão [ id ^ = "input-wish" ] : verificado ~ rótulo {
 cor : { { seção. configurações . button_check } } ; 
plano de fundo : { { seção. configurações . button_check_background } } ;
 }
 . lista de desejos - entrada do botão [ id ^ = "input-wish" ] : verificado ~ rótulo > svg > caminho { 
acidente vascular cerebral : { { seção. configurações . button_check } } ;
 }
 . lista de desejos -- entrada do botão {
 Mostrar nenhum ;
 }
 . lista de desejos - produto -- wrapper h3 {
 alinhamento de texto : centro ; 
margem : 0 ;
 }
 . lista de desejos -- mensagem {
 largura : 100 %;
 largura máxima : 300px ;
 posição : fixa ;
 índice z : 10 ;
 opacidade : 0 ;
 fundo : branco ; 
exibição : bloco ;
 transformar : traduzirX ( -400px ) ;
 função de temporização de transição : bezier cúbico ( 0,29 , 1,01 , 1 , -0,68 ) ; 
transição : transformação 2s , opacidade 2s ;
 borda : 1px sólido ;
 exibição : flexível ;
 lacuna : 0,5rem ;
 margem - topo : -40px ;
 preenchimento : 0,5rem ;
 }
 . lista de desejos - mensagem. Mostrar mensagem { 
transformar : traduzirX ( 50px ) ;
 opacidade : 1 ;
 }
 . lista de desejos -- mensagem > div {
 largura : 100px ;
 altura : automático ;
 proporção de aspecto : 1 ;
 exibição : flexível ; 
alinhar - itens : centro ;
 }
 . lista de desejos -- mensagem img {
 largura : 100 %;
 altura : automático ;
 proporção de aspecto : 1 ;
 ajuste ao objeto : capa ;
 exibição : bloco ;
 } 
. lista de desejos -- mensagem h4 {
 texto - alinhar : centro
 }
 . lista de desejos - compartilhar {
 cursor : ponteiro ;
 largura : conteúdo máximo ;
 }
 #MegaMenu-desejo {
 posição : absoluta ;
 esquerda : 0 ; 
largura : 100 %;
 índice z : 1 ;
 overflow -y : rolar ;
 altura : automático ;
 altura máxima : 61vh ;
 }
 . desejo -- contar {
 posição : absoluta ; 
plano de fundo : { { seção. configurações . ícone_background } } ;
 cor : { { seção. configurações . cor_do_ícone } } ;
 altura : 1,7rem ;
 largura : 1,7rem ; 
borda - raio : 100 %;
 exibição : flexível ;
 justificar - conteúdo : centro ;
 alinhar - itens : centro ;
 tamanho da fonte : .9rem ;
 esquerda : 2,4rem ;
 superior : 1,9rem ; 
altura da linha : calc ( 1 + .1 / var ( -font - body - scale ) ) ;
 }
 resumo #HeaderMenu-wish:hover .wish--count {
 decoração de texto : nenhuma ;
 }
 #Detalhes-Resumo do desejo:antes { 
contente : '' ;
 posição : fixa ;
 plano de fundo : rgba ( var ( -color - foreground ) , .5 ) ;
 largura : 100vw ;
 altura : 100vh ;
 esquerda : 0 ;
 superior : 150px ; 
índice z : 1 ;
 Mostrar nenhum ;
 }
 #Details-Wish[abrir] resumo:antes {
 exibição : bloco ;
 }
 Tela @media somente e ( largura máxima : 750px ) {
 . lista de desejos - produto -- wrapper li { 
largura máxima : calc ( ( 100 % / 3 ) -1,7rem ) ;
 }
 }
 Tela @media somente e ( largura máxima : 481px ) {
 . lista de desejos - produto -- wrapper li { 
largura máxima : calc ( ( 100 % / 2 ) -1,3rem ) ;
 }
 }
 </ estilo > 
< lista de desejos - dados do componente - desejo - label = " {{ section.settings.button_label }} " dados - share - title = " {{ section.settings.share_title }} " class = "oculto" > 
< div class = "lista de desejos--mensagem" </ div >

 < div class = "lista de desejos--container {% unless request.design_mode %} oculto {% endunless %} " >
 < div class = "wishlist--wrapper page-width" > 
<div> _ _
 < h2 > { { seção. configurações . título } } < span class = "wish--warning hidden" > está vazio !</ span ></ h2 > 
< div class = "wishlist-share {% unless request.design_mode %} oculto {% endunless %} " >
 < svg
 largura = "13"
 altura = "12"
 viewBox = "0 0 13 12"
 class = "ícone ícone-compartilhamento"
 preencher = "nenhum" 
xmlns = "http://www.w3.org/2000/svg"
 aria - oculto = "verdadeiro"
 focalizável = "falso"
 > 
< caminho d = "M1.625 8.125V10.2917C1.625 10.579 1.73914 10.8545 1.9423 11.0577C2.14547 11.2609 2.42102 11.375 2.70833 11.375H10.291 7C10.579 11.375 10.8545 11.2609 11.0577 11.0577C11.2609 10.8545 11.375 10.579 11.375 10.2917V8.125" curso = traço "currentColor" - linecap = traço "redondo" - linejoin = "redondo" /> 
< preenchimento de caminho - regra = "evenodd" clipe - regra = "evenodd" d = "M6.14775 1.27137C6.34301 1.0761 6.65959 1.0761 6.85485 1.27137L9.56319 3.9797C9.75845 4.17496 9.758 45 4,49154 9,56319 4,6868C9,36793 4,88207 9,05135 4,88207 8,85609 4.6868L6.5013 2.33203L4.14652 4.6868C3.95126 4.88207 3.63468 4.88207 3.43942 4.6868C3.24415 4.49154 3.24415 4.17496 3.439 42 3.9797L6.14775 1.27137Z" fill = "currentColor" /> 
< preenchimento de caminho - regra = "evenodd" clipe - regra = "evenodd" d = "M6.5 1.125C6.77614 1.125 7 1.34886 7 1.625V8.125C7 8.40114 6.77614 8.625 6.5 8.625C6.22386 8.625 6 8.401146 8.125V1.625C6 1,34886 6,22386 1,125 6,5 1,125Z" fill = "currentColor" />
 </svg> _
 <span> COMPARTILHE </span> _ 
</div> _ _
 </div> _ _
 < ul class = "lista de desejos--wrapper" >
 { % para produtos em coleções. todos . produtos % } 
< li data - handle = " {{ product.handle }} " class = " {% unless request.design_mode and forloop.index < 5 %} não-wishlisted {% endunless %} " >
 < div class = "imagem do produto--wrapper" > 
<a href = "{{ product.url }} "title = "{{ product.title }} " > _ {{ product.url }} _ {{ product.title }} _
 < imagem
 srcset = "
 {%- if product.featured_media.width >= 165 -%} {{ product.featured_media | image_url: width: 165 }} 165w, {%- endif -%}
 {%- if product.featured_media.width >= 360 -%} {{ product.featured_media | image_url: width: 360 }} 360w, {%- endif -%} 
{%- if product.featured_media.width >= 533 -%} {{ product.featured_media | image_url: width: 533 }} 533w, {%- endif -%}
 {%- if product.featured_media.width >= 720 -%} {{ product.featured_media | image_url: width: 720 }} 720w, {%- endif -%}
 {%- if product.featured_media.width >= 940 -%} {{ product.featured_media | image_url: width: 940 }} 940w, {%- endif -%}
 {%- if product.featured_media.width >= 1066 -%} {{ product.featured_media | image_url: width: 1066 }} 1066w, {%- endif -%} 
{{ product.featured_media | image_url }} {{ product.featured_media.width }} w
 "
 src = " {{ product.featured_media | image_url: width: 533 }} "
 tamanhos = "(largura mínima: {{ settings.page_width }} px) {{ settings.page_width | minus: 130 | divided_by: 4 }} px, (largura mínima: 990px) calc((100vw - 130px) / 4 ), (largura mínima: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
 alt = " {{ product.featured_media.alt | escape }} " 
class = "redução de movimento"
 carregando = "preguiçoso"
 largura = " {{ product.featured_media.width }} "
 altura = " {{ product.featured_media.height }} "
 >
 </a> _
 </div> _ _ 
<h3> { { produto . título } } </ h3 >
 { % render 'preço' , produto : produto , price_class : '' , show_compare_at_price : true % } 
< button class = "wishlist-remove--button" data - remove = " {{ product.handle }} " title = "Remover da lista de desejos" >
 < svg
 aria - oculto = "verdadeiro"
 focalizável = "falso"
 largura = "12" 
altura = "13"
 class = "ícone ícone-fechar-pequeno"
 viewBox = "0 0 12 13"
 preencher = "nenhum"
 xmlns = "http://www.w3.org/2000/svg"
 > 
< caminho d = "M8.48627 9.32917L2.82849 3.67098" curso = curso "currentColor" - linecap = curso "redondo" - linejoin = "redondo" /> 
< caminho d = "M2.88539 9.38504L8.42932 3.61524" curso = curso "currentColor" - linecap = curso "redondo" - linejoin = "redondo" />
 </svg> _
 </ botão > 
{ % se produto. has_only_default_variant % }
 { % -form 'produto' , produto , classe : 'formulário' , novalidate : 'novalidate' -% } 
< tipo de entrada = "oculto" nome = "id" valor = " {{ product.variants.first.id }} " /> 
< tipo de entrada = "oculto" min = "1" tipo = "número" id = "quantidade" nome = "quantidade" valor = "1" /> 
< button type = "submit" class = "button" name = "add" > Adicionar ao carrinho </ button >
 < noscript > { { produto | json } } </ noscript > 
{ % formulário final % }
 { % outro % }
 < a href = " {{ product.url }} " title = " {{ product.title }} " class = "button" > Escolha opções </ a > 
{ % fim se % }
 </ li >
 { % fim para % }
 </ul> _
 </div> _ _
 </div> _ _
 </ lista de desejos - componente > 
{ % esquema % }
 {
 "name" : "Seção da lista de desejos" ,
 "configurações" : [
 {
 "tipo" : "texto" ,
 "label" : "Título da lista de desejos" , 
"id" : "título" ,
 "default" : "Lista de desejos"
 } ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "Configurações do botão de desejo"
 } ,
 { 
"tipo" : "cor" ,
 "id" : "botão_background" ,
 "label" : "Cor de fundo do botão"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "cor_botão" , 
"label" : "Cor do texto do botão" ,
 "padrão" : "#3EA1E2"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "button_check" ,
 "label" : "Botão verificado cor do texto" , 
"default" : "#ffffff"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "button_check_background" ,
 "label" : "Botão verificado cor de fundo" ,
 "padrão" : "#3EA1E2" 
} ,
 {
 "tipo" : "cor" ,
 "id" : "botão_border" ,
 "label" : "Cor da borda do botão" ,
 "default" : "#3EA1E2" ,
 "info" : "Deixe em branco para remover a borda" 
} ,
 {
 "tipo" : "texto" ,
 "label" : "Etiqueta do botão" ,
 "id" : "button_label" ,
 "default" : "Lista de desejos" ,
 "info" : "Aplica-se apenas na página do produto" 
} ,
 {
 "tipo" : "cabeçalho" ,
 "content" : "Contagem de ícones de cabeçalho de desejo"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "icon_background" , 
"label" : "Fundo da contagem de ícones" ,
 "padrão" : "#000000"
 } ,
 {
 "tipo" : "cor" ,
 "id" : "icon_color" ,
 "label" : "Cor do texto da contagem de ícones" , 
"default" : "#ffffff"
 } ,
 {
 "tipo" : "texto" ,
 "label" : "Compartilhar título ao enviar" ,
 "id" : "share_title" ,
 "info" : "O título é exibido ao enviar por email" , 
"default" : "Chama minha atenção"
 }
 ] ,
 "predefinições" : [
 {
 "nome" : "Lista de desejos"
 }
 ]
 }
 { % termina o esquema % } 

classe Lista de desejos estende HTMLElement {
 construtor ( ) {
 super ( ) ;
 esse . mensagem = isto . querySelector ( '.wishlist--message' ) ; 
esse . localItems = localStorage. getItem ( 'lista de desejos' ) ;

 window.addEventListener('carregar', this.init.bind(this))
 }

 iniciar ( ) { 
if ( ! document.querySelector ( '#Wish-header--icon' ) ) isso . addWishIcon ( ) ; 
documento. querySelector ( '#MegaMenu-desejo' ) . innerHTML = isto . querySelector ( '.wishlist--container' ) . HTML interno ; 
const formulários = documento. querySelector ( '#MegaMenu-desejo' ) . querySelectorAll ( 'formulário' ) ; 
formulários. forEach ( ( form ) => form.addEventListener ( 'enviar' , this . showSubmitted . bind ( this ) ) )) ;
 
const removeBtns = documento. querySelectorAll ( '.wishlist-remove--button' ) ; 
removerBtns. forEach ( ( btn ) => btn.addEventListener ( 'clique' , this . removeProduct . bind ( this ) ) )) ;
 
const lista de desejosShareBtn = documento. querySelector ( '.wishlist-share' ) ;
 lista de desejosCompartilharBtn. addEventListener ( ' clique ' , isto.shareWish.bind ( este ) ) ;
 
if ( isto.localItems ) isto . getProduto ( ) ;
 esse . addProductToProductPage ( ) ;
 
esse . innerCards = documento. querySelectorAll ( '.product-card-wrapper' ) . comprimento > 0 ? documento. querySelectorAll ( '.product-card-wrapper' ) : documento. querySelectorAll ( '.card-wrapper' ) ; 
esse . cartões internos . forEach ( ( cartão , índice ) => {
 esse . addWishButtonToCard ( cartão , índice ) ;
 } ) ;
 
if ( este . localItems ) isto . botãoWishDesign ( ) ;
 }

 compartilharDesejo ( e ) {
 if ( navegador. compartilhar ) { 
let textMessage = "Compartilhei minha lista de desejos com você! \n " ;
 documento. querySelectorAll ( '#MegaMenu-wish li:not(.not-wishlisted)' ) . forEach ( ( lista , índice ) => { 
const a = lista. querySelector ( 'a' ) ;
 const link = a. href ;
 const título = a. título ; 
mensagem de texto += ` $ { índice + 1 } . $ { título } - $ { link } \n` ;
 } ) ;

 navegador. compartilhar ( {
 título : este . conjunto de dados . compartilharTítulo , 
texto : mensagem de texto
 } )
 . então ( ( ) => console. log ( 'Compartilhado com sucesso' ) ) 
. catch ( ( erro ) => console.erro ( 'Erro de compartilhamento:' , erro ) ) ;
 } outro {
 const message = '<small> Desculpe, a API de compartilhamento não está disponível neste navegador!</small>' ; 
e. atualTarget . insertAdjacentHTML ( 'antes do fim' , mensagem ) ;
 }
 }

 mostrarEnviado ( e ) {
 e. preventDefault ( ) ;
 const formulário atual = e. alvo atual ; 
const jsonForm = JSON. analisar ( currentForm.querySelector ( 'noscript' ) . textContent ) ;

 const adicionadoHTML = ` < div > 
< img src = "${jsonForm.media[0].src}" alt = "${jsonForm.media[0].alt}" altura = "100" largura = "100" >
 </div> _ _ 
< h4 >< forte > $ { jsonForm. título } </ strong > foi adicionado ao carrinho !</ h4 > ` ;
 esse . mensagem . innerHTML = adicionadoHTML ; 
esse . mensagem . lista de classes . add ( 'mostrar-mensagem' ) ;
 setTimeout ( ( ) => {
 esse . mensagem . lista de classes . remover ( 'mostrar-mensagem' ) ; 
} , 2500 ) ;
 Forma Atual. enviar ( )
 }

 botãoDesejoDesign ( ) {
 const wishButtonInputs = documento. querySelectorAll ( '.wishlist - entrada do botão' ) ; 
desejoButtonInputs. forEach ( ( entrada ) => entrada. verificado = falso ) ;
 const armazenadoWish = JSON. analisar ( localStorage.getItem ( 'lista de desejos' ) ) ; 
armazenadoDesejo. forEach ( ( identificador ) => {
 const lista de desejosInput = documento. querySelector ( `. lista de desejos -- botão input [ data - button - handle = "${handle}" ] ` ) ; 
if ( wishlistedInput ) wishlistedInput. verificado = verdadeiro ;
 } ) ;
 }

 getProduto ( ) { 
const desejoStorage = JSON. analisar ( localStorage.getItem ( 'lista de desejos' ) ) ;
 const desejoBubble = documento. querySelector ( '.wish--count' ) ;
 const desejoCount = desejoStorage. comprimento ; 
if ( desejoContagem > 0 ) {
 desejoBubble. textContent = desejoCount ;
 desejoBubble. lista de classes . remover ( 'oculto' ) ;
 } outro { 
desejoBubble. lista de classes . adicionar ( 'oculto' ) ;
 }

 documento. querySelectorAll ( ` #MegaMenu-wish [data-handle]`).forEach((wish) => wish.classList.add('not-wishlisted'));
 if ( desejoArmazenamento ! = nulo ) { 
if ( desejoStorage. comprimento > 0 ) {
 documento. querySelector ( '#MegaMenu-wish.wish--warning' ) . lista de classes . adicionar ( 'oculto' ) ; 
documento. querySelector ( '#MegaMenu-wish.wishlist-share' ) . lista de classes . remover ( 'oculto' ) ;
 } outro { 
documento. querySelector ( '#MegaMenu-wish.wish--warning' ) . lista de classes . remover ( 'oculto' ) ;
 documento. querySelector ( '#MegaMenu-wish.wishlist-share' ) . lista de classes . adicionar ( 'oculto' ) ;
 } 
desejoArmazenamento. forEach ( ( desejo ) => {
 documento. querySelector ( ` #MegaMenu-wish [data-handle="${wish}"]`).classList.remove('not-wishlisted');
 } ) ;
 }
 }

 removerProduto ( e ) {
 e. preventDefault ( ) ; 
identificador const = e. atualTarget . conjunto de dados . remover ;
 const armazenadoWish = JSON. analisar ( localStorage.getItem ( 'lista de desejos' ) ) ; 
const newArray = armazenadoWish. filtro ( ( item ) => item != identificador ) ;
 armazenamento local. setItem ( 'lista de desejos' , JSON.stringify ( newArray ) ) ; 
esse . botãoWishDesign ( ) ;
 esse . getProduto ( ) ;
 }

 addWishIcon ( ) {
 const headerIconsWrapper = documento. querySelector ( '.header__icons.header__search' ) ; 
deixe desejoCount = 0 ;
 if ( localStorage. getItem ( 'lista de desejos' ) ) wishCount = JSON. analisar ( localStorage. getItem ( 'lista de desejos' ) ) . comprimento ;
 deixe desejoBubble = ' ' ; 
if ( desejoCount <= 0 ) desejoBubble = 'oculto' ;

 const wishIcon = ` < detalhes id = "Detalhes-Wish" class = "mega-menu" > 
< sumário id = "HeaderMenu-wish" class = "header__menu-item link focus-inset" role = "button" ária - expandido = "false" ária - controles = "MegaMenu-wish" >
 < estilo div = "display: flex" > 
< svg class = "icon" id = "Wish-header--icon" aria - hidden = "true" focusable = "false" xmlns = "http://www.w3.org/2000/svg" width = "20 " altura = "20" viewBox = "0 0 20 20" > 
< caminho d = "M10 5.2393L8.5149 3.77392C6.79996 2.08174 4.01945 2.08174 2.30451 3.77392C0.589562 5.4661 0.589563 8.2097 2.30451 9.9 0188L10 17.4952L17.6955 9.90188C19.4104 8.2097 19.4104 5.4661 17.6955 3.77392C15.9805 2.08174 13.2 2.08174 11.4851 3.77392L 10 5.2393ZM10.765 3.06343C12.8777 0.978857 16.3029 0.978856 18.4155 3.06343C20.5282 5.148 20.5282 8.52779 18.4155 10.6124L10 ... 343C3.69708 0,978859 7,12233 0,978858 9,23495 3,06343L10 3,81832L10,765 3,06343Z" preenchimento - regra = "par par" />
 </svg> _ 
< span class = "wish--count ${wishBubble}" > $ { wishCount } </ span >
 </div> _ _
 </ resumo > 
< div id = "MegaMenu-wish" class = "mega-menu__content color-background-1 gradiente motion-reduce global-settings-popup" tabindex = "-1" >
 </div> _ _
 </ detalhes > ` ;
 
headerIconsWrapper. insertAdjacentHTML ( 'afterend' , wishIcon ) ;
 }

 addProductToProductPage ( ) {
 const páginaproduto = documento. querySelector ( 'informações do produto> .produto__título' ) ;
 if ( página do produto ) { 
deixe desejarBoxProduct ;
 deixe desejarInputProduct ;
 if ( ! document.querySelector ( '.wishlist--button' ) ) {
 desejoBoxProduto = documento. criarElement ( "div" ) ; 
desejoInputProduto = documento. createElement ( "entrada" ) ;
 }
 desejoBoxProduto. className = "lista de desejos--botão" ;
 desejoInputProduto. id = "entrada-desejo-produto" ;
 desejoInputProduto. nome = "entrada-desejo-produto" ; 
desejoInputProduto. tipo = "caixa de seleção" ;
 const desejoLabelProduto = documento. createElement ( "rótulo" ) ;
 desejoLabelProduto. htmlFor = "entrada-desejo-produto" ; 
desejoLabelProduto. innerHTML = ` < svg class = "icon" ária - hidden = "true" focusable = "false" xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" viewBox = "0 0 20 20" > 
< caminho d = "M10 5.2393L8.5149 3.77392C6.79996 2.08174 4.01945 2.08174 2.30451 3.77392C0.589562 5.4661 0.589563 8.2097 2.30451 9.9 0188L10 17.4952L17.6955 9.90188C19.4104 8.2097 19.4104 5.4661 17.6955 3.77392C15.9805 2.08174 13.2 2.08174 11.4851 3.77392L 10 5.2393ZM10.765 3.06343C12.8777 0.978857 16.3029 0.978856 18.4155 3.06343C20.5282 5.148 20.5282 8.52779 18.4155 10.6124L10 ... 343C3.69708 0,978859 7,12233 0,978858 9,23495 3,06343L10 3,81832L10,765 3,06343Z" preenchimento - regra = "par par" />
 </svg> _ 
< span > $ { isto . conjunto de dados . desejoLabel } </ span > ` ;

 desejoBoxProduto. anexar ( desejoInputProduto ) ;
 desejoBoxProduto. anexar ( desejoLabelProduto ) ; 
página do produto. acrescentar ( desejoBoxProduto ) ;


 const handleArray = wishBoxProduct. parentElement . querySelector ( 'a' ) . href . dividir ( '/' ) ; 
const handle = handleArray [ handleArray. comprimento - 1 ] ;
 desejoInputProduto. setAttribute ( 'handle-botão de dados' , handle ) ;

 desejoInputProduto. addEventListener ( "alterar" , ( e ) => { 
deixe antigo = localStorage. getItem ( "lista de desejos" ) ;
 deixe matriz = [ ] ;

 if ( e. alvo . verificado ) { 
if ( antigo ! == nulo ) matriz = matriz. concat ( JSON.parse ( antigo ) ) ;
 variedade. empurrar ( alça ) ; 
armazenamento local. setItem ( "lista de desejos" , JSON.stringify ( array ) ) ;
 } outro {
 identificador const = e. atualTarget . conjunto de dados . botãoHandle ; 
const armazenadoWish = JSON. analisar ( localStorage.getItem ( "lista de desejos" ) ) ;
 const newArray = armazenadoWish. filtro ( item => item ! = identificador ) ; 
armazenamento local. setItem ( "lista de desejos" , JSON.stringify ( newArray ) ) ;
 }
 esse . botãoWishDesign ( ) ;
 esse . getProduto ( ) ; 
} ) ;
 }
 }

 addWishButtonToCard ( cartão , índice ) {
 const wishBox = documento. criarElement ( "div" ) ;
 caixa de desejos. title = "Adicionar à lista de desejos" ; 
caixa de desejos. className = "lista de desejos--botão" ;
 const desejoInput = documento. createElement ( "entrada" ) ;
 desejoInput. id = "entrada-desejo--" + índice ;
 desejoInput. nome = "entrada-desejo--" + índice ; 
desejoInput. tipo = "caixa de seleção" ;
 const desejoLabel = documento. createElement ( "rótulo" ) ;
 desejoLabel. setAttribute ( 'tabindex' , 1 ) ; 
desejoLabel. htmlFor = "entrada-desejo--" + índice ; 
desejoLabel. innerHTML = ` < svg class = "icon" ária - hidden = "true" focusable = "false" xmlns = "http://www.w3.org/2000/svg" width = "20" height = "20" viewBox = "0 0 20 20" > 
< caminho d = "M10 5.2393L8.5149 3.77392C6.79996 2.08174 4.01945 2.08174 2.30451 3.77392C0.589562 5.4661 0.589563 8.2097 2.30451 9.9 0188L10 17.4952L17.6955 9.90188C19.4104 8.2097 19.4104 5.4661 17.6955 3.77392C15.9805 2.08174 13.2 2.08174 11.4851 3.77392L 10 5.2393ZM10.765 3.06343C12.8777 0.978857 16.3029 0.978856 18.4155 3.06343C20.5282 5.148 20.5282 8.52779 18.4155 10.6124L10 ... 343C3.69708 0,978859 7,12233 0,978858 9,23495 3,06343L10 3,81832L10,765 3,06343Z" preenchimento - regra = "par par" />
 </ svg > ` ;
 
const handleArray = cartão. querySelector ( 'a' ) . href . dividir ( '/' ) ;
 const handle = handleArray [ handleArray. comprimento - 1 ] ; 
desejoInput. setAttribute ( 'handle-botão de dados' , handle ) ;
 caixa de desejos. anexar ( desejoInput ) ;
 caixa de desejos. anexar ( desejoLabel ) ;
 desejoInput. addEventListener ( "alterar" , ( e ) => { 
deixe antigo = localStorage. getItem ( "lista de desejos" ) ;
 deixe matriz = [ ] ;

 if ( e. alvo . verificado ) { 
if ( antigo ! == nulo ) matriz = matriz. concat ( JSON.parse ( antigo ) ) ;
 variedade. empurrar ( alça ) ; 
armazenamento local. setItem ( "lista de desejos" , JSON.stringify ( array ) ) ;
 } outro {
 identificador const = e. atualTarget . conjunto de dados . botãoHandle ; 
const armazenadoWish = JSON. analisar ( localStorage.getItem ( "lista de desejos" ) ) ;
 const newArray = armazenadoWish. filtro ( item => item ! = identificador ) ; 
armazenamento local. setItem ( "lista de desejos" , JSON.stringify ( newArray ) ) ;
 }
 esse . botãoWishDesign ( ) ;
 esse . getProduto ( ) ;
 } ) ; 
cartão. acrescentar ( wishBox ) ;
 }
 }

 elementos personalizados. define ( 'componente da lista de desejos' , lista de desejos ) ;