เทคนิค สร้าง effect add to cart ด้วย jQuery อย่างง่าย

เขียนเมื่อ 15 ปีก่อน โดย Ninenik Narkdee
jquery add to card

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery add to card

ดูแล้ว 22,244 ครั้ง




 ตัวอย่างต่อไปนี้เป็นแนวทางสำหรับนำไปปรับใช้ ในการทำระบบ add to cart ด้วย ajax

ตัวอย่าง

 
 
 
 

HTML Code

 

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<table width="700" border="0" align="center" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left" valign="top"><div class="wapProductBox">
        <table width="150" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="50" align="center" bgcolor="#CCCC66">&nbsp;</td>
          </tr>
        </table>
        <input type="button" name="button" id="button"  class="toCart"value="Add to Cart" />
      </div>
      <div class="wapProductBox">
        <table width="150" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="50" align="center" bgcolor="#FF9999">&nbsp;</td>
          </tr>
        </table>
        <input type="button" name="button" id="button"  class="toCart"value="Add to Cart" />
      </div>
      <div class="wapProductBox">
        <table width="150" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="50" align="center" bgcolor="#00CCFF">&nbsp;</td>
          </tr>
          </tr>
        </table>
        <input type="button" name="button" id="button"  class="toCart"value="Add to Cart" />
      </div>
      <div class="wapProductBox">
        <table width="150" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="50" align="center" bgcolor="#FFCC66">&nbsp;</td>
          </tr>
          </tr>
        </table>
        <input type="button" name="button" id="button"  class="toCart"value="Add to Cart" />
      </div>
  </td>
    <td width="200" align="left" valign="top" bgcolor="#F2F2F2">
    <form id="form_checkout" name="form_checkout" method="post" action="">
        <div id="boxOfProduct">
        </div>
      </form>
      </td>
  </tr>
</table>

jQuery Code

 

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
30
31
32
33
34
35
36
37
38
39
40
41
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
    $("input.toCart").click(function(){
        var nowOffsetX=$(this).parents("div.wapProductBox").offset().left; // หาตำแหน่งสินค้า แกน x
        var nowOffsetY=$(this).parents("div.wapProductBox").offset().top; // หาตำแหน่งสินค้า แกน y
        var moveOffsetX=$("div#boxOfProduct").offset().left; // หาตำแหน่งตะกร้าสินค้า แกน x
        var moveOffsetY=$("div#boxOfProduct").offset().top; // หาตำแหน่งตะกร้าสินค้า แกน y
        var nowObjPhoduct=$(this).parents("div.wapProductBox").clone(); // สร้าง object สินค้าใหม่ โดย copy จากตัวเดิม
 
        $(nowObjPhoduct).find("input.toCart").remove(); // เอาปุ่มเพิ่มรายการออก
 
        // จัดตำแปน่งไว้ที่เดิม แต่ซ้อนอยู่ด้านบน
        nowObjPhoduct.css({
            position:"absolute",
            left:nowOffsetX+"px",
            top:nowOffsetY+"px",
            "z-index":"900"
        });
        $(document.body).prepend(nowObjPhoduct); // แทรกลงไปในเว็บ
        // ย้ายตำแหน่ง ไปยังตะกร้าสินค้า
        nowObjPhoduct.animate({
            left:moveOffsetX+"px",
            top:moveOffsetY+"px",
            opacity:0
        },500,function(){
            // ฟังก์ชันเมื่อย้ายตำแหน่ง เสร็จต้องการให้ทำอะไร
            // สามารถนำไปประยุกต์ เพิ่มสินค้าในตะกร้าสินค้า ด้วย ajax
            var obj_remove="<button type=button class=removeCart>Remove</button>"; // เพิ่มปุ่มลบรายการ
            $("div#boxOfProduct").prepend('<div class="wapProductBox">'+nowObjPhoduct.html()+obj_remove+'</div>');
        });    
        return false;
    });
 
    $("button.removeCart").live("click",function(){ // เมื่อคลิกที่ปุ่มลบรายการ
            $(this).parents("div.wapProductBox").fadeOut(); // ลบรายการที่เลือก
    });
 
});
 
</script>

 



   เพิ่มเติมเนื้อหา ครั้งที่ 1 วันที่ 02-07-2020


อัพเดทการใช้งานให้เป็นปัจจุบัน ปี 2020

โค้ดไฟล์ตัวอย่าง

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!doctype html>
<html lang="th">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" >
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" >
</head>
<body>
  
<style type="text/css">
  div.wrap-product-box.added .btn-add-to-cart{
    display:none;
  }   
  div.wrap-product-box .btn-remove-from-cart{
    display:none;
  } 
  div#wrap-my-cart  .btn-remove-from-cart{
    display:inline-block;
  }
  div.product-item{
    width: 150px;height: 50px;
  }
</style> 
<div class="container mt-5">
<table width="700" class="table">
  <tr>
    <td align="left" valign="top">
      <div class="wrap-product-box" data-proid="1">
        <div class="product-item" style="background-color: #CCCC66;">
            Product A
        </div>
        <button type="button" class="btn btn-primary btn-sm btn-add-to-cart">
          <i class="fas fa-cart-plus fa-fw mr-2"></i>
          Add To Cart</button>
        <button type="button" class="btn btn-danger btn-sm btn-remove-from-cart">
          <i class="fas fa-cart-arrow-down fa-fw mr-2"></i>
          Remove</button>            
      </div>
      <div class="wrap-product-box" data-proid="2">
        <div class="product-item" style="background-color: #FF9999;">
            Product B
        </div>       
        <button type="button" class="btn btn-primary btn-sm btn-add-to-cart">
          <i class="fas fa-cart-plus fa-fw mr-2"></i>
          Add To Cart</button>
        <button type="button" class="btn btn-danger btn-sm btn-remove-from-cart">
          <i class="fas fa-cart-arrow-down fa-fw mr-2"></i>
          Remove</button>         
      </div>
      <div class="wrap-product-box" data-proid="3">
        <div class="product-item" style="background-color: #00CCFF;">
            Product C
        </div>               
        <button type="button" class="btn btn-primary btn-sm btn-add-to-cart">
          <i class="fas fa-cart-plus fa-fw mr-2"></i>
          Add To Cart</button>
        <button type="button" class="btn btn-danger btn-sm btn-remove-from-cart">
          <i class="fas fa-cart-arrow-down fa-fw mr-2"></i>
          Remove</button>         
      </div>
      <div class="wrap-product-box" data-proid="4">
        <div class="product-item" style="background-color: #FFCC66;">
            Product D
        </div>           
          <button type="button" class="btn btn-primary btn-sm btn-add-to-cart">
            <i class="fas fa-cart-plus fa-fw mr-2"></i>
            Add To Cart</button>
          <button type="button" class="btn btn-danger btn-sm btn-remove-from-cart">
            <i class="fas fa-cart-arrow-down fa-fw mr-2"></i>
            Remove</button> 
      </div>
  </td>
    <td width="200" align="left" valign="top" bgcolor="#F2F2F2">
    <form id="form_checkout" name="form_checkout" method="post" action="">
        <div id="wrap-my-cart">
        </div>
      </form>
      </td>
  </tr>
</table> 
   
</div> 
  
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
      
    $(document.body).on("click",".btn-add-to-cart",function(){
         var nowOffsetX=$(this).parents("div.wrap-product-box").offset().left; // หาตำแหน่งสินค้า แกน x
        var nowOffsetY=$(this).parents("div.wrap-product-box").offset().top; // หาตำแหน่งสินค้า แกน y
        var moveOffsetX=$("div#wrap-my-cart").offset().left; // หาตำแหน่งตะกร้าสินค้า แกน x
        var moveOffsetY=$("div#wrap-my-cart").offset().top; // หาตำแหน่งตะกร้าสินค้า แกน y
        $(this).parents("div.wrap-product-box").addClass("added"); 
        var nowObjPhoduct=$(this).parents("div.wrap-product-box").clone(); // สร้าง object สินค้าใหม่ โดย copy จากตัวเดิม
         
        // จัดตำแปน่งไว้ที่เดิม แต่ซ้อนอยู่ด้านบน
        nowObjPhoduct.css({
            position:"absolute",
            left:nowOffsetX+"px",
            top:nowOffsetY+"px",
            "z-index":"900"
        });
        $(document.body).prepend(nowObjPhoduct); // แทรกลงไปในเว็บ
        // ย้ายตำแหน่ง ไปยังตะกร้าสินค้า
        nowObjPhoduct.animate({
            left:moveOffsetX+"px",
            top:moveOffsetY+"px",
            opacity:0
        },500,function(){
            // ฟังก์ชันเมื่อย้ายตำแหน่ง เสร็จต้องการให้ทำอะไร
            // สามารถนำไปประยุกต์ เพิ่มสินค้าในตะกร้าสินค้า ด้วย ajax
            nowObjPhoduct[0].style.cssText = "position: relative;opacity:1";
            let obj = nowObjPhoduct[0];
            $("div#wrap-my-cart").prepend(obj.outerHTML);
            obj.remove();
        });    
        return false;     
    });
  
    $(document.body).on("click",".btn-remove-from-cart",function(){ // เมื่อคลิกที่ปุ่มลบรายการ
      let proid = $(this).parents("div.wrap-product-box").data("proid");
      $(this).parents("div.wrap-product-box").fadeOut(function(){
        $("[data-proid='"+proid+"']").removeClass("added");
      }); // ลบรายการที่เลือก
       
    }); 
   
});
</script>
</body>
</html>


   เพิ่มเติมเนื้อหา ครั้งที่ 2 วันที่ 02-07-2020


แบบเพิ่มได้เรื่อยๆ 

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!doctype html>
<html lang="th">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>Document</title>
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.0/dist/css/bootstrap.min.css" >
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" >
</head>
<body>
  
<style type="text/css">
  div#wrap-my-cart div.wrap-product-box.added .btn-add-to-cart{
    display:none;
  }   
  div.wrap-product-box .btn-remove-from-cart{
    display:none;
  } 
  div#wrap-my-cart  .btn-remove-from-cart{
    display:inline-block;
  }
  div.product-item{
    width: 150px;height: 50px;
  }
</style> 
<div class="container mt-5">
<table width="700" class="table">
  <tr>
    <td align="left" valign="top">
      <div class="wrap-product-box" data-proid="1">
        <div class="product-item" style="background-color: #CCCC66;">
            Product A
        </div>
        <button type="button" class="btn btn-primary btn-sm btn-add-to-cart">
          <i class="fas fa-cart-plus fa-fw mr-2"></i>
          Add To Cart</button>
        <button type="button" class="btn btn-danger btn-sm btn-remove-from-cart">
          <i class="fas fa-cart-arrow-down fa-fw mr-2"></i>
          Remove</button>            
      </div>
      <div class="wrap-product-box" data-proid="2">
        <div class="product-item" style="background-color: #FF9999;">
            Product B
        </div>       
        <button type="button" class="btn btn-primary btn-sm btn-add-to-cart">
          <i class="fas fa-cart-plus fa-fw mr-2"></i>
          Add To Cart</button>
        <button type="button" class="btn btn-danger btn-sm btn-remove-from-cart">
          <i class="fas fa-cart-arrow-down fa-fw mr-2"></i>
          Remove</button>         
      </div>
      <div class="wrap-product-box" data-proid="3">
        <div class="product-item" style="background-color: #00CCFF;">
            Product C
        </div>               
        <button type="button" class="btn btn-primary btn-sm btn-add-to-cart">
          <i class="fas fa-cart-plus fa-fw mr-2"></i>
          Add To Cart</button>
        <button type="button" class="btn btn-danger btn-sm btn-remove-from-cart">
          <i class="fas fa-cart-arrow-down fa-fw mr-2"></i>
          Remove</button>         
      </div>
      <div class="wrap-product-box" data-proid="4">
        <div class="product-item" style="background-color: #FFCC66;">
            Product D
        </div>           
          <button type="button" class="btn btn-primary btn-sm btn-add-to-cart">
            <i class="fas fa-cart-plus fa-fw mr-2"></i>
            Add To Cart</button>
          <button type="button" class="btn btn-danger btn-sm btn-remove-from-cart">
            <i class="fas fa-cart-arrow-down fa-fw mr-2"></i>
            Remove</button> 
      </div>
  </td>
    <td width="200" align="left" valign="top" bgcolor="#F2F2F2">
    <form id="form_checkout" name="form_checkout" method="post" action="">
        <div id="wrap-my-cart">
        </div>
      </form>
      </td>
  </tr>
</table> 
   
</div> 
  
<script src="https://unpkg.com/jquery@3.3.1/dist/jquery.min.js"></script>
<script src="https://unpkg.com/bootstrap@4.5.0/dist/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(function(){
      
    $(document.body).on("click",".btn-add-to-cart",function(){
         var nowOffsetX=$(this).parents("div.wrap-product-box").offset().left; // หาตำแหน่งสินค้า แกน x
        var nowOffsetY=$(this).parents("div.wrap-product-box").offset().top; // หาตำแหน่งสินค้า แกน y
        var moveOffsetX=$("div#wrap-my-cart").offset().left; // หาตำแหน่งตะกร้าสินค้า แกน x
        var moveOffsetY=$("div#wrap-my-cart").offset().top; // หาตำแหน่งตะกร้าสินค้า แกน y
        $(this).parents("div.wrap-product-box").addClass("added"); 
 
        var nowObjPhoduct=$(this).parents("div.wrap-product-box").clone(); // สร้าง object สินค้าใหม่ โดย copy จากตัวเดิม
        nowObjPhoduct.find(".btn-add-to-cart").remove();
       
        // จัดตำแปน่งไว้ที่เดิม แต่ซ้อนอยู่ด้านบน
        nowObjPhoduct.css({
            position:"absolute",
            left:nowOffsetX+"px",
            top:nowOffsetY+"px",
            "z-index":"900"
        });
        $(document.body).prepend(nowObjPhoduct); // แทรกลงไปในเว็บ
        // ย้ายตำแหน่ง ไปยังตะกร้าสินค้า
        nowObjPhoduct.animate({
            left:moveOffsetX+"px",
            top:moveOffsetY+"px",
            opacity:0
        },500,function(){
            // ฟังก์ชันเมื่อย้ายตำแหน่ง เสร็จต้องการให้ทำอะไร
            // สามารถนำไปประยุกต์ เพิ่มสินค้าในตะกร้าสินค้า ด้วย ajax
            nowObjPhoduct[0].style.cssText = "position: relative;opacity:1";
            let obj = nowObjPhoduct[0];
            $("div#wrap-my-cart").prepend(obj.outerHTML);
            obj.remove();
        });    
        return false;     
    });
  
    $(document.body).on("click",".btn-remove-from-cart",function(){ // เมื่อคลิกที่ปุ่มลบรายการ
      let proid = $(this).parents("div.wrap-product-box").data("proid");
      $(this).parents("div.wrap-product-box").fadeOut(function(){
      //  $("[data-proid='"+proid+"']").removeClass("added");
      }); // ลบรายการที่เลือก
       
    }); 
   
});
</script>
</body>
</html>





กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ





Tags:: add to card jquery







URL สำหรับอ้างอิง












สนับสนุนเว็บไซต์เรา จ่ายด้วย Truemoney Wallet
หรือ
Terms of Service | Privacy Policy
Author
2025 © Copyright ninenik.com. All rights reserved.
เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ