การใช้ฟังก์ชันใน AJAX สร้างตะกร้าสินค้า (Shopping Cart)

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

theoneozz
PHP Super Member
PHP Super Member
โพสต์: 313
ลงทะเบียนเมื่อ: 07/01/2019 12:19 pm

การใช้ฟังก์ชันใน AJAX สร้างตะกร้าสินค้า (Shopping Cart)

โพสต์ที่ยังไม่ได้อ่าน โดย theoneozz »

AJAX Shopping Cart คือ การใช้งานตะกร้าสินค้าโดยแสดงโครงสร้างไดเรกทอรีผลิตภัณฑ์ใช้การลากและวางเพื่อเพิ่มสินค้าในตะกร้าช้อปปิ้งผลิตภัณฑ์รถเข็นที่มีการจัดเรียง

การทำงานของโค้ดะเเบ่งเป็น 2 ส่วนได้เเก่
1.ส่วนของหน้าเว็บ จะเป็นการสร้างประเภทของสินค้า โดยในตัวอย่างจะประกอบด้วย T-Shirts Bags และ Gadgets
2.ส่วนของฟังก์ชั่น JavaScript จะเป็นฟังก์ชั่นสำคัญในการทำให้ตะกร้าสินค้าของเราใช้งานได้

ตัวอย่างโค้ดเว็บตะกร้าสินค้า

โค้ด: เลือกทั้งหมด

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI(Droppable) -</title>
  <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquery-ui.min.css">
  <script src="//apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="//apps.bdimg.com/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <link rel="stylesheet" href="jqueryui/style.css">
  <style>
  h1 { padding: .2em; margin: 0; }
  #products { float:left; width: 500px; margin-right: 2em; }
  #cart { width: 200px; float: left; margin-top: 1em; }
  /* droppable */
  #cart ol { margin: 0; padding: 1em 0 1em 3em; }
  </style>
  <script>
  $(function() {
    $( "#catalog" ).accordion();
    $( "#catalog li" ).draggable({
      appendTo: "body",
      helper: "clone"
    });
    $( "#cart ol" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function( event, ui ) {
        $( this ).find( ".placeholder" ).remove();
        $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
      }
    }).sortable({
      items: "li:not(.placeholder)",
      sort: function() {
        // droppable sortable
        //connectWithSortable  active/hoverClass 
        $( this ).removeClass( "ui-state-default" );
      }
    });
  });
  </script>
</head>
<body>
 
<div id="products">
  <h1 class="ui-widget-header">ประเภทสินค้า</h1>
  <div id="catalog">
    <h2><a href="#">T-Shirts</a></h2>
    <div>
      <ul>
        <li>Lolcat Shirt</li>
        <li>Cheezeburger Shirt</li>
        <li>Buckit Shirt</li>
      </ul>
    </div>
    <h2><a href="#">Bags</a></h2>
    <div>
      <ul>
        <li>Zebra Striped</li>
        <li>Black Leather</li>
        <li>Alligator Leather</li>
      </ul>
    </div>
    <h2><a href="#">Gadgets</a></h2>
    <div>
      <ul>
        <li>iPhone</li>
        <li>iPod</li>
        <li>iPad</li>
      </ul>
    </div>
  </div>
</div>
 
<div id="cart">
  <h1 class="ui-widget-header">ตะกร้าสินค้า</h1>
  <div class="ui-widget-content">
    <ol>
      <li class="placeholder">ลากวางสินค้า</li>
    </ol>
  </div>
</div>
 
 
</body>
</html>
ตัวอย่างโค้ด JavaScript ที่มช้ในการทำให้ตะกร้าสินค้าทำงานได้

โค้ด: เลือกทั้งหมด

 <script>
  $(function() {
    $( "#catalog" ).accordion();
    $( "#catalog li" ).draggable({
      appendTo: "body",
      helper: "clone"
    });
    $( "#cart ol" ).droppable({
      activeClass: "ui-state-default",
      hoverClass: "ui-state-hover",
      accept: ":not(.ui-sortable-helper)",
      drop: function( event, ui ) {
        $( this ).find( ".placeholder" ).remove();
        $( "<li></li>" ).text( ui.draggable.text() ).appendTo( this );
      }
    }).sortable({
      items: "li:not(.placeholder)",
      sort: function() {
        // droppable sortable
        //connectWithSortable  active/hoverClass 
        $( this ).removeClass( "ui-state-default" );
      }
    });
  });
  </script>
ผลลัพธ์ที่ 1 เมื่อยังไม่ได้ลากสินค้ามาวางในตะกร้า
c1.png
c1.png (59.15 KiB) Viewed 2316 times
ผลลัพธ์ที่ 2 เมื่อทำการลากสินค้ามาวางไว้ในตะกร้าสินค้าเเล้ว
c2.png
c2.png (62.47 KiB) Viewed 2316 times
จากภาพเมื่อเราเลือกสินค้าที่ต้องการได้เเล้วให้เพิ่มสินค้าลงตะกร้า โดยการลากมาวางที่ช่องตะกร้าสินค้า

(ที่มา : http://www.w3big.com)
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : jQuery & Ajax
- สอนการใช้งาน jQuery & Ajax
- ถาม-ตอบปัญหาเกี่ยวกับ jQuery & Ajax
- ศึกษาบทเรียนเกี่ยวกับ JavaScript
- ศึกษาบทเรียนเกี่ยวกับ jQuery
- ศึกษาบทเรียนเกี่ยวกับ Ajax
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 67