เรามีหลายวิธีในการเพิ่มผลิตภัณฑ์ลงในตะกร้าสินค้า การปฏิบัติตามปกติคือคลิกปุ่ม "เพิ่มลงในรถเข็น" ซึ่งจะข้ามไปที่ตะกร้าสินค้า ในตะกร้าสินค้าคุณสามารถคลิกปุ่ม "ตรวจสอบ" เพื่อตรวจสอบ และวันนี้ฉันจะแนะนำคุณเกี่ยวกับทางออกที่เป็นมิตรมากขึ้น
ดูซอร์สโค้ดดาวน์โหลดตัวอย่าง
โดยค่าเริ่มต้นตะกร้าสินค้าจะถูกซ่อนและมองไม่เห็น เมื่อผู้ใช้คลิกปุ่มเพิ่มลงในรถเข็นข้อมูลผลิตภัณฑ์จะถูกเพิ่มลงในรถเข็น ตะกร้าสินค้าจะปรากฏที่มุมล่างขวาของหน้าในรูปแบบของปุ่ม การคลิกปุ่มจะขยายตะกร้าสินค้าเพื่อแสดงข้อมูลผลิตภัณฑ์ในรถเข็น ในเวลาเดียวกันคุณสามารถลบหรือชำระผลิตภัณฑ์ในรถเข็น ผู้ใช้ยังสามารถปิดตะกร้าสินค้าชั่วคราวและช็อปปิ้งต่อไปได้
โครงสร้าง HTML
โครงสร้าง HTML ส่วนใหญ่มีสองส่วน ส่วนแรกคือปุ่ม "Add to Shopping Cart" ในรายการผลิตภัณฑ์ ดังที่แสดงในรหัสต่อไปนี้เราใช้แอตทริบิวต์ Data-* เพื่อนำ ID รูปภาพชื่อชื่อราคาและข้อมูลอื่น ๆ มารวมกัน
<a href = "#0" data-price = "3669.00" data-proid = "1" data-proname = "Huawei P9" data-proimg = "img/huawei_p9.jpg"> เพิ่มลงในรถเข็น </a>
ส่วนที่สองคือตะกร้าสินค้าชิ้นส่วนของตะกร้าสินค้ารวมถึงตะกร้าสินค้าทริกเกอร์และส่วนสถิติตะกร้าสินค้า CD-CART-TRIGGER และส่วนเนื้อหาของ Body Catt.CD-CART
<div> <a href = "#0"> ตะกร้าสินค้า <ul> <!-รายการรถเข็นนับ-> <li> 0 </li> <li> 0 </li> </ul> </a> <li> <live> <header> <h2> รถเข็น </h2> <pan> ส่วนหนึ่งแทรกแบบไดนามิกโดย JavaScript-> </ul> </div> <footer> <a href = "#0"> <em> Current- ￥ <Span> 0 </span> </em> </a>
รายการ UL ในองค์ประกอบ div.body ว่างเปล่าโดยค่าเริ่มต้น มันถูกใช้เพื่อแสดงข้อมูลรายการผลิตภัณฑ์ของตะกร้าสินค้า โครงสร้างคร่าวๆของมันมีดังนี้ มันถูกแทรกแบบไดนามิกโดย JavaScript
<div> <ul> <li> <div> <a href = "#0"> <img src = "img/pro.jpg"> </a> </div> <div> <h3> <a href = "#0"> </a> </h3> <pan> ￥ 399999 สำหรับ = "CD-product-'+productId+'"> จำนวนรายการ </label> <span> <span> x <i id = "cd-roduct-'+proid+'"> 1 </i> </span> </pan> </div> </div> </div> </li> </div> </div> </div> </div> </li> </div> </div>
ส่วน CSS ไม่แสดงในบทความนี้ คุณสามารถดาวน์โหลด css/style.css ในซอร์สโค้ดเพื่อดูได้
จาวาสคริปต์
รหัสของตัวอย่างนี้ขึ้นอยู่กับ jQuery ดังนั้นไฟล์ jQuery library จะต้องโหลดล่วงหน้า
เมื่อผู้ใช้คลิกปุ่ม. ADD-BUTTON ให้เรียกใช้ฟังก์ชัน addProduct () และแทรกข้อมูลผลิตภัณฑ์ลงใน. Body> ul
ฟังก์ชั่น addProduct (ชื่อชื่อ, proid, ราคา, proimg) {ปริมาณ var = $ ("#cd-roduct-"+proid) .text (); var select = '', productadded = ''; if (quantity == '') {var select = '<span> x <i id = "cd-roduct-'+proid+'"> 1 </i> </span>'; var productadded = $ ('<li> <div> <a href = "#0"> <img src = "'+proimg+'"> </a> </div> <div> <h3> <a href = "#0">'+proname+'</a> </h3> href = "#0"> ลบ </a> <div> <label for = "cd-product-'+proid+'"> จำนวนไฟล์ </label> '+select+' </div> </div> </li> '); cartlist.press (productadded); } else {ปริมาณ = parseInt (ปริมาณ); $ ("#cd-product-"+proid) .html (ปริมาณ+1); -ข้างต้นคือการใช้งานตาม JavaScript ของเอฟเฟกต์ที่เพิ่มเข้ามาในตะกร้าสินค้าพร้อมดาวน์โหลดซอร์สโค้ด ฉันหวังว่ามันจะเป็นประโยชน์กับทุกคน หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!