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

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

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