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

ตอบกระทู้

รูปแสดงอารมณ์
:icon_plusone: :like: :plusone: :gfb: :-D :) :( :-o 8O :? 8) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: :angry: :baa: :biggrin:
รูปแสดงอารมณ์อื่นๆ
BBCode เปิด
[img] เปิด
[url] เปิด
[Smile icon] เปิด
กระทู้แนะนำ
   

มุมมองที่ขยายได้ กระทู้แนะนำ: การใช้ฟังก์ชันใน AJAX สร้างตะกร้าสินค้า (Shopping Cart)

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

โดย theoneozz » 10/01/2019 4:40 pm

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 2327 times
ผลลัพธ์ที่ 2 เมื่อทำการลากสินค้ามาวางไว้ในตะกร้าสินค้าเเล้ว
c2.png
c2.png (62.47 KiB) Viewed 2327 times
จากภาพเมื่อเราเลือกสินค้าที่ต้องการได้เเล้วให้เพิ่มสินค้าลงตะกร้า โดยการลากมาวางที่ช่องตะกร้าสินค้า

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

ข้างบน