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

ทำเว็บไซต์ขายของ ทำระบบเพิ่มสินค้าลงตะกร้า ด้วย 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">
         
      <!-- เมื่อคลิกที่คลาส item สินค้าตัวนั้นจะเข้ามาอยู่ในนี้-->
          
  </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');	
  }

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

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