ทำเว็บไซต์ขายของ ทำระบบเพิ่มสินค้าลงตะกร้า ด้วย jQuery

ทำเว็บไซต์ขายของ ทำระบบเพิ่มสินค้าลงตะกร้า ด้วย jQuery
ระบบการเพิ่มสินค้าลงในตะกร้าสินค้า เป็นส่วนประกอบอย่างหนึ่งที่สำคัญ และเรามักจะพบอยู่ในเว็บไซต์ขายสินค้าอยู่เป็นประจำ ซึ่งมีอยู่ในเว็บไซต์ขายสินค้าขนาดเล็ก ไปจนถึงเว็บไซต์ขายสินค้าระดับโลก

ธุรกิจแบบ E-Commerce ( Electronic Commerce ) หรือ การพาณิชย์อิเล็กทรอนิกส์ ในปัจจุบันภาพของการขายสินค้าผ่านช่องทางออนไลน์หรือที่เราเรียกกันว่าการทำธุรกิจแบบ E-Commerce มีภาพที่ชัดเจนขึ้นเรื่อย ๆ ชัดเจนมากขนาดไหน ต้องลองตั้งคำถามกับตัวเราว่า เราเคยใช้บริการอะไรบ้างที่แค่กดสั่งผ่านหน้าเว็บไซต์หรือผ่านมือถือ ชำระเงิน รอไม่กี่วันก็มีของมาส่งถึงบ้าน

คลิก ดูตัวอย่างการเพิ่มสินค้าลงตะกร้าของเว็บไซต์ขายสินค้าออนไลน์

เข้าใจโครงสร้างหลักของการทำ E-Commerce Website

– การขาย คือ สร้างช่องทางและปัจจัยหลักที่จะทำให้เกิดการซื้อ การแสดงสินค้า การโฆษณา แบนเนอร์ เป็นต้น
– การชำระเงิน คือ ช่องทางหรือรูปแบบการชำระเงิน เช่น ชำระด้วยบัตรเดบิตหรือเครดิต โอนเงินเข้าบัญชี เป็นต้น
– การขนส่ง คือ ให้ข้อมูลการขนส่ง การส่งมอบสินค้า และการติดตามสถานะของสินค้า
– บริการหลังการขาย คือ การติดต่อผู้ให้บริการ การรับประกัน สินค้าชำรุด ที่เกิดจากการขนส่ง จะต้องทำอย่างไร

วิธีทำระบบ Add To Cart ง่าย ๆ ด้วย jQuery

1. สร้างส่วนการแสดงรายการสินค้าและปุ่มเพิ่มสินค้า จัดเรียงด้วย col-md-3 ของ bootstrap และในปุ่มเพิ่มสินค้าใส่คลาส item ลงไปไว้สำหรับ loop ทำให้คลิกและเพิ่มเข้าไปในตะกร้าสินค้า

<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
```
<ul class="cart">
       
    
        
</ul>
```

3. มาในส่วนของ jquery ให้เราใช้คำสั่ง .each ของ jquery ในการ loop คลาส item ทั้งหมดและเขียนคำสั่งเมื่อคลิกไอเทมใด ๆ ก็ตามให้ append ไอเทมนั้น ๆ ลงไปในตะกร้า คือคลาส cart โดยสามารถเขียนโค๊ดได้ดังนี้

var 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 = 'iPhone '+index+' remove';
	cart.append(html);
	cart_number.text($(".cart li").length); // อัพเดทตัวเลขสินค้าใน cart
	clearTimeout(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');	
}

ลองคลิกดูตัวอย่างการทำงานด้านล่าง จะเห็นภาพชัดเจนมากขึ้นครับ

คลิก ดูตัวอย่างการเพิ่มสินค้าลงตะกร้าของเว็บไซต์ขายสินค้าออนไลน์

ทำเว็บไซต์ขายของ ทำระบบเพิ่มสินค้าลงตะกร้า ด้วย jQuery