Nous avons de nombreuses façons d'ajouter des produits au panier. La pratique habituelle consiste à cliquer sur le bouton "Ajouter au panier", qui sautera dans le panier. Dans le panier, vous pouvez cliquer sur le bouton "Vérifier" pour vérifier. Et aujourd'hui, je vous présenterai une solution plus amicale.
Afficher le code source de téléchargement de démo
Par défaut, le panier est caché et invisible. Lorsque l'utilisateur clique sur le bouton Ajouter au panier, les informations du produit seront ajoutées au panier. Le panier apparaîtra dans le coin inférieur droit de la page sous la forme d'un bouton. En cliquant sur le bouton, élargira le panier pour afficher les informations du produit dans le panier. En même temps, vous pouvez également supprimer ou régler les produits dans le chariot. Les utilisateurs peuvent également fermer temporairement leurs caddages et continuer à faire du shopping.
Structure HTML
La structure HTML comprend principalement deux parties. La première partie est le bouton "Ajouter au panier" dans la liste des produits. Comme indiqué dans le code suivant, nous utilisons l'attribut Data- * pour rassembler l'ID, l'image, le nom, le prix et les autres informations du produit.
<a href = "# 0" data-price = "3669.00" data-proid = "1" data-proname = "huawei p9" data-proimg = "img / huawei_p9.jpg"> ajouter à Cart </a>
La deuxième partie est le panier de magasinage, la partie du panier comprend le panier d'achat de déclenchement et la partie statistique du panier.
<div> <a href = "# 0"> panier <ul> <! - Les articles de panier comptent -> <li> 0 </li> <li> 0 </li> </ul> </a> <div> <v> <diader> <h2> CART DE COMME </H2> <SAND> <a headler> <a div> <! Partie, insérée dynamiquement par JavaScript -> </ul> </div> <footer> <a href = "# 0"> <em> Current- ￥ <span> 0 </span> </em> </a> </ foot> </div> </div> </div>
La liste UL dans l'élément div.body est vide par défaut. Il est utilisé pour afficher les informations sur la liste des produits du panier. Sa structure approximative est la suivante. Il est inséré dynamiquement par JavaScript.
<div> <ul> <li> <div> <a href = "# 0"> <img src = "img / pro.jpg"> </a> </div> <v> <h3> <a href = "# 0"> Nom du produit </a> </h3> <span> ￥ 399999 </span> <v> <a href = "# 0"> désérer </span> <v> <a href = "# 0"> désérer </span> <v> <a href = "# 0"> Derelent pour = "CD-Product - '+ ProductId +'"> Nombre d'éléments </ Label> <span> <span> x <i id = "CD-Product - '+ proid +'"> 1 </i> </span> </span> </v> </v> </div> </li> </ul> </div> </ div> </v> </v> </li> </li> </li> </li> </li> </li> </li> </li> </li> </div> </ div> </ li> </div> </div> </div> </div> </li> </div> </div>
La partie CSS n'est pas affichée dans cet article. Vous pouvez télécharger le CSS / Style.css dans le code source pour le voir.
Javascrip
Le code de cet exemple est basé sur jQuery, donc le fichier de bibliothèque jQuery doit être chargé à l'avance.
Lorsque l'utilisateur clique sur le bouton .Add-Button, déclenchez la fonction addProduct () et insérez les informations du produit dans .body> ul.
fonction addProduct (proname, proid, prix, proMg) {var quantité = $ ("# CD-Product -" + proid) .text (); var select = '', productAdded = ''; if (quantité == '') {var select = '<span> x <i id = "CD-Product -' + proid + '"> 1 </i> </span>'; var productAdded = $ ('<li> <div> <a href = "# 0"> <img src = "' + proMg + '"> </a> </div> <div> <h3> <a href = "# 0">' + proned + '</a> </h3> <pan> ￥' + prix + '</pan> <v> href = "# 0"> delete </a> <div> <label for = "CD-Product - '+ proid +'"> Nombre de fichiers </ label> '+ select +' </div> </div> </li> '); cartlist.prepennd (productAdded); } else {quantité = paSeInt (quantité); $ ("# CD-Product -" + proid) .html (quantité + 1); }}Ce qui précède est l'implémentation JavaScript de l'effet ajouté au panier avec téléchargement de code source. J'espère que ce sera utile à tout le monde. Si vous avez des questions, veuillez me laisser un message et l'éditeur répondra à tout le monde à temps. Merci beaucoup pour votre soutien au site Web Wulin.com!