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

  1 2 3 4 5 6 7 8

  <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>

  1 2 3 4 5

  <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 = '<li id="item'+index+'"><a onClick="removeFromCart('+index+')">iPhone '+index+' <small>remove</small></a></li>'; 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'); }

  1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

  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 = '<li id="item'+index+'"><a onClick="removeFromCart('+index+')">iPhone '+index+' <small>remove</small></a></li>'; 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'); }

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

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