Wir haben viele Möglichkeiten, Produkte in den Einkaufswagen hinzuzufügen. Die übliche Praxis besteht darin, auf die Schaltfläche "zum Warenkorb hinzufügen" zu klicken, die zum Einkaufswagen springen. Im Einkaufswagen können Sie auf die Schaltfläche "Überprüfen" klicken, um zu überprüfen. Und heute werde ich Ihnen eine freundlichere Lösung vorstellen.
Sehen Sie sich den Demo -Download -Quellcode an
Standardmäßig ist der Einkaufswagen verborgen und unsichtbar. Wenn der Benutzer auf die Schaltfläche zum Warenkorb hinzufügen klickt, werden die Produktinformationen zum Warenkorb hinzugefügt. Der Einkaufswagen wird in der unteren rechten Ecke der Seite in Form einer Schaltfläche angezeigt. Wenn Sie auf die Schaltfläche klicken, erweitern Sie den Einkaufswagen, um die Produktinformationen im Karren anzuzeigen. Gleichzeitig können Sie auch die Produkte im Wagen löschen oder besiedeln. Benutzer können ihre Einkaufswagen auch vorübergehend schließen und einkaufen.
HTML -Struktur
Die HTML -Struktur enthält hauptsächlich zwei Teile. Der erste Teil ist die Schaltfläche "zum Einkaufswagen hinzufügen" in der Produktliste. Wie im folgenden Code gezeigt, verwenden wir das Datenattribut für Daten, um die ID, Bild, den Namen, den Preis und die anderen Informationen des Produkts zusammenzuführen.
<a href = "#0" Data-Price = "3669.00" data-prog = "1" data-Proname = "Huawei p9" data-proimg = "img/huawei
Der zweite Teil ist der Einkaufswagen, der Einkaufswagen-Teil umfasst den Trigger-Einkaufswagen und den Einkaufswagenstatistik-Teil.
<Div> <a href = "#0"> Einkaufswagen <ul> <!-CART-Artikel zählen-> <li> 0 </li> <li> 0 </li> </ul> </a> <div> <div> <header> <H2> Einkaufswagen </h2> <span> gelöscht <a href = "#0". Teil, dynamisch durch JavaScript-> </ul> </div> <footer> <a href = "#0"> <em> current-
Die UL -Liste im Div.Body -Element ist standardmäßig leer. Es wird verwendet, um die Produktlisteninformationen des Einkaufswagens anzuzeigen. Seine grobe Struktur ist wie folgt. Es wird dynamisch von JavaScript eingefügt.
<div> <ul> <li> <div> <a href = "#0"> <img src = "img/pro.jpg"> </a> </div> <div> <h3> <a href = "#0"> Produktname </a> </h3> <span> ￥ 3999.99 </span> </span> </span; for="cd-product-'+ productId +'">Number of items</label> <span> <span>x<i id="cd-product-'+proid+'">1</i></span> </span> </div> </div> </div> </li> </ul> </div> </div> </div> </div> </li> </div> </div> </div> </li> </div> </div> </div> </div> </li> </div> </div>
Der CSS -Teil wird in diesem Artikel nicht angezeigt. Sie können die CSS/style.css im Quellcode herunterladen, um es anzuzeigen.
JavaScript
Der Code dieses Beispiels basiert auf JQuery, sodass die JQuery -Bibliotheksdatei im Voraus geladen werden muss.
Wenn der Benutzer auf die Schaltfläche klickt.
Funktion addProduct (Proname, Proid, Preis, proimg) {var mantity = $ ("#cd-product-"+proid) .Text (); var select = '', productAdded = ''; if (mantity == '') {var select = '<span> 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">'+proname+'</a></h3><span>￥'+price+'</span><div><a href = "#0"> delete </a> <div> <label for = "cd-product-'+proid+'"> Anzahl der Dateien </label> '+select+' </div> </div> </li> '); cartlist.prepend (productAdded); } else {mantity = parseInt (Quantität); $ ("#CD-Produkt-"+proid) .html (Menge+1); }}Das obige ist die von JavaScriptbasierte Implementierung des Effekts, das dem Einkaufswagen mit Quellcode-Download hinzugefügt wurde. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!