ทำเว็บไซต์ขายของ ทำระบบเพิ่มสินค้าลงตะกร้า ด้วย jQuery
ทำเว็บไซต์ขายของ ทำระบบเพิ่มสินค้าลงตะกร้า ด้วย jQuery
ระบบการเพิ่มสินค้าลงในตะกร้าสินค้า เป็นส่วนประกอบอย่างหนึ่งที่สำคัญ และเรามักจะพบอยู่ในเว็บไซต์ขายสินค้าอยู่เป็นประจำ ซึ่งมีอยู่ในเว็บไซต์ขายสินค้าขนาดเล็ก ไปจนถึงเว็บไซต์ขายสินค้าระดับโลก
ธุรกิจแบบ E-Commerce ( Electronic Commerce ) หรือ การพาณิชย์อิเล็กทรอนิกส์ ในปัจจุบันภาพของการขายสินค้าผ่านช่องทางออนไลน์หรือที่เราเรียกกันว่าการทำธุรกิจแบบ E-Commerce มีภาพที่ชัดเจนขึ้นเรื่อย ๆ ชัดเจนมากขนาดไหน ต้องลองตั้งคำถามกับตัวเราว่า เราเคยใช้บริการอะไรบ้างที่แค่กดสั่งผ่านหน้าเว็บไซต์หรือผ่านมือถือ ชำระเงิน รอไม่กี่วันก็มีของมาส่งถึงบ้าน
คลิก ดูตัวอย่างการเพิ่มสินค้าลงตะกร้าของเว็บไซต์ขายสินค้าออนไลน์
เข้าใจโครงสร้างหลักของการทำ E-Commerce Website
– การขาย คือ สร้างช่องทางและปัจจัยหลักที่จะทำให้เกิดการซื้อ การแสดงสินค้า การโฆษณา แบนเนอร์ เป็นต้น
– การชำระเงิน คือ ช่องทางหรือรูปแบบการชำระเงิน เช่น ชำระด้วยบัตรเดบิตหรือเครดิต โอนเงินเข้าบัญชี เป็นต้น
– การขนส่ง คือ ให้ข้อมูลการขนส่ง การส่งมอบสินค้า และการติดตามสถานะของสินค้า
– บริการหลังการขาย คือ การติดต่อผู้ให้บริการ การรับประกัน สินค้าชำรุด ที่เกิดจากการขนส่ง จะต้องทำอย่างไร
วิธีทำระบบ Add To Cart ง่าย ๆ ด้วย jQuery
- 1. สร้างส่วนการแสดงรายการสินค้าและปุ่มเพิ่มสินค้า จัดเรียงด้วย col-md-3 ของ bootstrap และในปุ่มเพิ่มสินค้าใส่คลาส item ลงไปไว้สำหรับ loop ทำให้คลิกและเพิ่มเข้าไปในตะกร้าสินค้า
12345678<div class="container"><div class="row"><div class="col-md-3"> รายละเอียดสินค้า <button class="item">ปุ่มเพิ่มสินค้า</button></div><div class="col-md-3"> รายละเอียดสินค้า <button class="item">ปุ่มเพิ่มสินค้า</button></div><div class="col-md-3"> รายละเอียดสินค้า <button class="item">ปุ่มเพิ่มสินค้า</button></div><div class="col-md-3"> รายละเอียดสินค้า <button class="item">ปุ่มเพิ่มสินค้า</button></div></div></div>
- 2. ในส่วนของตะกร้าสินค้า เราจะใช้ ul element เพื่อให้สินค้าที่เพิ่มเข้าไปจัดเรียงง่าย และตั้งชื่อคลาสว่า cart
12345<ul class="cart"><!-- เมื่อคลิกที่คลาส item สินค้าตัวนั้นจะเข้ามาอยู่ในนี้--></ul>
- 3. มาในส่วนของ jquery ให้เราใช้คำสั่ง .each ของ jquery ในการ loop คลาส item ทั้งหมดและเขียนคำสั่งเมื่อคลิกไอเทมใด ๆ ก็ตามให้ append ไอเทมนั้น ๆ ลงไปในตะกร้า คือคลาส cart โดยสามารถเขียนโค๊ดได้ดังนี้
1234567891011121314151617181920212223242526272829var cart = $(".cart");var cart_number = $(".cart_number");var close_id;$(".item").each(function(index){$(this).click(function(e){e.stopPropagation();if ($('.dropdown').find('.dropdown-menu').is(":hidden")){$('.dropdown-toggle').dropdown('toggle');}addToCart(index);});});function addToCart(index){ // เพิ่มสินค้าลงตะกร้าvar html = '<li id="item'+index+'"><a onClick="removeFromCart('+index+')">iPhone '+index+' <small>remove</small></a></li>';cart.append(html);cart_number.text($(".cart li").length); // อัพเดทตัวเลขสินค้าใน cartclearTimeout(close_id);close_id = setTimeout(closeDropdown,1500); // ปิดการแสดงรายการสินค้าใน cart}function removeFromCart(index){ // ลบสินค้าจากตะกร้าclearTimeout(close_id);$("#item"+index).remove(); // ลบสินค้าcart_number.text($(".cart li").length); // อัพเดทตัวเลขสินค้าใน cart เมื่อลบสินค้า}function closeDropdown(){clearTimeout(close_id);$('.dropdown-toggle').dropdown('toggle');}
ลองคลิกดูตัวอย่างการทำงานด้านล่าง จะเห็นภาพชัดเจนมากขึ้นครับ
คลิก ดูตัวอย่างการเพิ่มสินค้าลงตะกร้าของเว็บไซต์ขายสินค้าออนไลน์