Temos muitas maneiras de adicionar produtos ao carrinho de compras. A prática usual é clicar no botão "Adicionar ao carrinho", que pulará para o carrinho de compras. No carrinho de compras, você pode clicar no botão "Verificar" para verificar. E hoje vou apresentar a você uma solução mais amigável.
Veja o código fonte do download de demonstração
Por padrão, o carrinho de compras está oculto e invisível. Quando o usuário clicar no botão Adicionar ao carrinho, as informações do produto serão adicionadas ao carrinho. O carrinho de compras aparecerá no canto inferior direito da página na forma de um botão. Clicar no botão expandirá o carrinho de compras para exibir as informações do produto no carrinho. Ao mesmo tempo, você também pode excluir ou estabelecer os produtos no carrinho. Os usuários também podem fechar temporariamente seus carrinhos de compras e continuar comprando.
Estrutura HTML
A estrutura HTML inclui principalmente duas partes. A primeira parte é o botão "Adicionar ao carrinho de compras" na lista de produtos. Conforme mostrado no código a seguir, usamos o atributo de dados para reunir o ID, imagem, nome, preço e outras informações do produto.
<a href = "#0" data-price = "3669.00" data-proid = "1" data-Proname = "huawei p9" data-proimg = "img/huawei_p9.jpg"> adicione ao carrinho </a>
A segunda parte é o carrinho de compras, a parte do carrinho de compras inclui o carrinho de compras de gatilho e a parte das estatísticas do carrinho de compras.
<div> <a href = "#0"> carrinho de compras <ul> <!-itens de carrinho contagem-> <li> 0 </li> <li> 0 </li> </ul> </a> <div> <div> <dideer> <h2> carrinho </spange </spange> theat! parte, inserida dinamicamente por javascript-> </ul> </div> <wower> <a href = "#0"> <em> current- ￥ <pan> 0 </span> </em> </a> </do Footer> </div> </div> </div>
A lista UL no elemento div.body está vazia por padrão. É usado para exibir as informações da lista de produtos do carrinho de compras. Sua estrutura aproximada é a seguinte. É inserido dinamicamente por JavaScript.
<div> <ul> <li> <div> <a href = "#0"> <img src = "img/pro.jpg"> </a> </div> <div> <h3> <a href = "#0"> Nome do produto </ Para = "CD-product-'+ProductId+'"> Número de itens </crety> <pan> <pan> x <i id = "cd-product-'+proid+'"> 1 </i> </span> <//DINV </div> </div> </li> </div> </div> </div> </div> </li> </div> </div>
A parte CSS não é exibida neste artigo. Você pode baixar o CSS/style.css no código -fonte para visualizá -lo.
JavaScript
O código deste exemplo é baseado no jQuery, portanto, o arquivo da biblioteca jQuery precisa ser carregado com antecedência.
Quando o usuário clicar no botão .Add-Button, acione a função addProduct () e insira as informações do produto em .body> ul.
função addProduct (proname, proid, preço, proimg) {var quantity = $ ("#cd-product-"+proid) .text (); var select = '', ProductAdded = ''; if (quantidade == '') {var select = '<pan> x <i id = "cd-product-'+proid+'"> 1 </i> </span>'; var ProductAdded = $ ('<li> <div> <a href = "#0"> <img src = "'+proimg+'"> </a> </div> <div> <h3> <a href = "#0"' '+pronome+' </a> </h3> <a span> ''+'' '' '' '' ''+'+' '</a> </h3> <pan>' '+' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '', href = "#0"> excluir </a> <div> <etiqueta para = "cd-product-'+proid+'"> número de arquivos </elabel> '+select+' </div> </div> </li> '); Cartlist.Prepend (ProductAdded); } else {quantity = parseInt (quantidade); $ ("#cd-product-"+proid) .html (quantidade+1); }}O exposto acima é a implementação baseada em JavaScript do efeito adicionado ao carrinho de compras com o download do código-fonte. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!