วันจันทร์ที่ 12 ธันวาคม พ.ศ. 2554

ทำระบบ Add to Cart โดยใช้เทคนิค AJAX และลูกเล่นแบบเทพช็อป ด้วย jQuery


หลังจากที่เคยสอนทำระบบ Add to Cart ซึ่งเป็นระบบในร้านค้าออนไลน์หรือเว็บขายของ(E-Commerce Website)ด้วยตัวแปรแบบ Cookie และ Session มาแล้ว ต่อไปผมจะสอนการทำ Add to Cart อีกแบบนึง คือการใช้เทคนิค AJAX เข้ามาช่วย ทำให้หน้าเว็บเพจมีการโต้ตอบกับผู้ใช้ได้สะดวกและรวดเร็วยิ่งขึ้น และปัจจุบันเทคนิคได้รับความนิยมเป็นอย่างมาก โดยจะเห็นได้จากหลายๆเว็บไซต์ ที่ได้นำเทคนิคนี้มาใช้
มาเริ่มทำกันเลยดีกว่าครับ
อันดับแรกต้องดาวน์โหลด jQuery มาติดตั้งที่เครื่องก่อน
จากนั้น ให้สร้างไฟล์ .php ขึ้นมา 3 ไฟล์ คือ showproduct.php ,chkcart.php,mycart.php
ไฟล์ showproduct.php ->สำหรับแสดงรายการสินค้า และจำนวนรายการตะกร้าสินค้า ให้พิมพ์ code ดังนี้

จาก Code ข้างบนจะได้ผลลัพธ์ดังนี้
ไฟล์ showproduct.php ->แสดงรายการสินค้าและตะกร้าสินค้า
สามารถคลิกที่ ไอคอนรูปตะกร้าสินค้า เพื่อ หยิบสินค้าใส่ตะกร้า
ไฟล์ chkcart.php ->ไฟล์ประมวลผลข้อมูลการสั่งซื้อ คือ เพิ่มสินค้าลงตะกร้า,แก้ไขจำนวนสินค้าที่สั่งซื้อ , ลบรายการสินค้าที่สั่งซื้อ  ให้พิมพ์โค๊ดดังนี้

ไฟล์ mycart.php ->สำหรับแสดงรายการสินค้าในตะกร้าสินค้า มีช่องจำนวนให้เพิ่ม แก้ไข และลบ รายการสั่งซื้อได้  ให้พิมพ์โค๊ดดังนี้

เมื่อพิมพ์โค๊ดถูกต้องได้ได้ผลลัพธ์ ดังนี้
ไฟล์ mycart.php->แสดงรายการสินค้าในตะกร้สินค้า
โดยคลิกที่ สินค้าในตะกร้า จะปรากฎไดอะล็อกรายการสั่งซื้อ สามารถแก้ไขจำนวนและลบรายการสั่งซื้อได้

ความสามารถของโปรแกรม
1.สามารถ Add to cart สินค้าลงตะกร้า โดยแสดงผลแบบ animate รูปภาพของสินค้าจะลอยไปที่ตะกร้าสินค้าแล้วค่อยๆเลือนหาย พร้อมกับแสดงจำนวนรายการสั่งซื้อและจำนวนสินค้าที่สั่งซื้อในตะกร้า
2.สามารถแก้ไขจำนวนสินค้าและลบรายการสินค้าที่สั่งซื้อได้ โดยคลิกที่ตะกร้าสินค้า จะปรากฎDialogรายการสั่งซื้อขึ้นมา เราสามารถเข้าไปแก้ไขข้อมูลตรงนี้ได้ การทำงานจะเป็นแบบ Real time อัพเดทและแสดงผลทันที ไม่มีการRefreshหน้าWeb page แต่อย่างใด

นี่เป็นแค่กรณีศึกษาสำหรับคนที่ต้องการConceptในการทำระบบตะกร้าสินค้าด้วยเทคนิคAJAX ครับCodeจึงยังไม่สมบูรณ์มากนัก คุณสามารถนำCodeเหล่านี้ไปต่อยอดได้ เนื่องจากผมไม่ได้เขียนCodeยืนยันการสั่งซื้อสินค้า คุณสามารถศึกษาได้จากบทความนี้ครับ -> http://php-for-ecommerce.blogspot.com/2011/01/shopping-cart-2.html

ดูตัวอย่างของโปรแกรมได้จากที่นี่ http://pluto.host22.com/a2c/showproduct.php ->Host Free อาจมีปัญหาตอนโชว์Dialogของตะกร้าสินค้าครับ แต่ทดสอบที่เครื่อง (localhost) ไม่มีปัญหาครับ
หรือ สามารถดูตัวอย่างเต็มๆ ได้จากเว็บไซต์นี้เลยครับ http://beautydelicious.lnwshop.com/

19 ความคิดเห็น :

  1. คลิ๊กเข้าไปที่ลิงค์ jquery แล้ว ค่ะ เลือก
    1.7.2 (Release Notes)
    Minified, Uncompressed
    แล้ว คลิกที่ uncom แล้ว ก๊อปโค้ด ไปเก็บที่ โฟลเดอร์ ของเราใช่มั้ยค่ะ

    ตอบลบ
    คำตอบ
    1. ใช้ครับ ให้เลือก Minifield หรือ Uncompresed เลือกอันใดอันนึงครับ
      สร้างไฟล์ชื่อ jquery.js ขึ้นมา แล้วก๊อปปี้โค๊ดไปวางได้เลยครับ

      ลบ
    2. สามารถสอบถามปัญหากับผมได้อีกช่องทางนึงครับ คือที่นี่ ->http://pluto.host22.com/wb/
      ข้อดี คือ สามารถติดโค๊ด html,PHP,อื่นๆได้ (Blog spot ติดโค๊ดได้เช่นกัน แต่ต้องแปลงให้เป็น Spacial Charecter ก่อน)
      ข้อเสีย คือ ป๊อปอัพโฆษณาเด้งขึ้นมากวนใจทุกครั้ง เมื่อมีการโหลดหน้าเว็บเพจใดๆ (ต้องทำใจครับเพราะใช้ของฟรี T T)

      ลบ
  2. หน้า ไดอะล๊อกตะกร้าสินค้า mycart.php เปิดได้แต่ IE เท่านั้นอ่ะค่ะ เปิดใน chrome firefox ไม่ได้อ่ะค่ะ

    ตอบลบ
  3. โทษทีค่ะ ตอนนี้มันโชว์ ใน chrome ได้แล้วอ่ะค่ะ เมื่อคืน ยังไม่ได้อยู่เลย เดียวมีปัญหาอะไรจะถามใหม่นะค่ะ

    ตอบลบ
  4. ถ้าเราไม่มี สต๊อกสินค้า pd_amount คือหมายถึงให้ บวกสินค้าเพิ่มไปเลย ต้องแก้ไขโค้ด ตรงไหนบ้าง แล้วเปลี่ยนเป็นตัวแปรอะไร

    ตอบลบ
    คำตอบ
    1. หมายถึง ถ้าจำนวนสินค้าเป็น0(หมด) ตอนสั่งซื้อก็สามารถบวกจำนวนเพิ่มได้ใช่ไหมครับ
      --------------------------------------------
      ไฟล์ chkcart.php สังเกตุคำสั่ง

      if($pamount>0){#เอาเฉพาะจำนวนสินค้าที่มากกว่า0
      $rs_record=mysql_fetch_array(mysql_query("SELECT pd_amount,pd_amount FROM tb_product WHERE pd_id=".$pdid.""));
      if($pamount>$rs_record[1]){#หากจำนวนที่ลูกค้าระบุมากกว่าจำนวนที่มีอยู่ในร้าน
      $_SESSION[$cartRows][1] = $rs_record[1];#เซตจำนวนสินค้าใหม่ให้มีค่าเืท่ากับจำนวนสินค้าในร้าน
      }else{#หากจำนวนสินค้าที่ลูกค้าระบุน้อยกว่าหรือเืท่ากับจำนวนสินค้าที่มีอยู่ในร้าน
      $_SESSION[$cartRows][1] = $pamount ; #เซตจำนวนสินค้าใหม่ให้มีค่าเท่ากับจำนวนที่ลูกค้าระบุ
      }
      }

      เปลี่ยนเป็น

      if($pamount>0){#เอาเฉพาะจำนวนสินค้าที่มากกว่า0
      $_SESSION[$cartRows][1] = $pamount ; #เซตจำนวนสินค้าใหม่ให้มีค่าเท่ากับจำนวนที่ลูกค้าระบุ
      }
      ###################################################
      ไฟล์ mycart.php เอาคำสั่งบรรทัดนี้ออก

      if($rs_showpd["pd_amount"]<1){#ตรวจสอบจำนวนสินค้า หากจำนวนสินค้าเท่ากับ0
      echo "<script>";
      echo "alert('ขออภัยสินค้า \"".$rs_showpd["name_pd"]."\" หมดแล้ว');window.location='chkcart.php?del=".$RowCount."';";
      echo "</script>";
      exit();
      }else if($_SESSION[$RowCount][1]>$rs_showpd["pd_amount"]){#จำนวนสินค้ามากกว่าจำนวนสินค้าในร้าน
      echo "<script>";
      echo "alert('จำนวนสินค้าของ \"".$rs_showpd["pd_name"]."\" มีมากกว่าจำนวนสินค้าในร้าน');";
      echo "</script>";
      $_SESSION[$RowCount][1]=$rs_showpd["pd_amount"];#เซตจำนวนสินค้าใหม่ให้มีค่่าเท่ากับจำนวนสินค้าในร้าน
      }

      ลบ
  5. ไม่ระบุชื่อ25 เมษายน 2555 21:36

    คลิกแล้วไปแสดงภาพเลื่อนครับ

    ตอบลบ
    คำตอบ
    1. ในไฟล์ showproduct.php ตอนเรียกใช้ไฟล์ jquery คุณได้ระบุที่อยู่ของไฟล์ ถูกหรือป่าวครับ และในเครื่องของคุณมีไฟล์ jquery หรือยังครับ
      สังเกตุคำสั่งนี้นะครับ <script type="text/javascript" src="../../js/jquery.js"></script>
      คุณต้องระบุที่อยู่ดังนี้นะครับ <script type="text/javascript" src="ที่อยู่ไฟล์ jquery ของคุณ"></script>

      ลบ
    2. ไม่ระบุชื่อ25 เมษายน 2555 22:40

      มีแล้วครับ src="jquery.js"
      ไฟล์ jquery.js อยู่ใน parth เดียวกันกับ showproduct.php

      ลบ
    3. ผมได้ก๊อปปี้โค๊ดมาทดลองที่เครื่อง ก็ไม่มีปัญหาอะไรเลยนะครับ ภาพก็เลื่อนปกติ และคอมเม้นท์ข้างบนก็ทำได้กันนะครับ
      ลองก๊อปโค๊ดไปวางใหม่นะครับ หรือลองอัปเกรด jquery ให้เป็นเวอร์ชั่นใหม่ล่าสุดดูนะครับ

      ลบ
    4. ไม่ระบุชื่อ25 เมษายน 2555 23:00

      เรื่องฐานข้อมูลละครับ ต้องตามนี้หรือป่าวครับ หรือว่าชื่อยังไงก็ได้

      ลบ
    5. ชื่อฐานข้อมูล,ชื่อเทเบิล,ชื่อฟิลด์ จะใช้ชื่ออะไรก็ได้ครับ แต่ต้องแก้ไขคำสั้งsqlให้ตรงกับชื่อของคุณนะครับ

      ลบ
    6. สำหรับโครงสร้างฐานข้อมูลที่ผมใช้ในบทความนี้ ดูได้จากลิงค์นี้นะครับ ->http://php-for-ecommerce.blogspot.com/2010/10/1_19.html

      ลบ
  6. ไม่ระบุชื่อ27 เมษายน 2555 10:44

    ขอบคุณครับ

    ตอบลบ
  7. ไม่ทราบว่าจะแก้ปัญหาเรื่อง การแสดงผลของ สินค้าในตะกร้าได้อย่างไรครับ

    เช่น ในกรณีที่สั่งซื้อสินค้าเกินกว่า stock จะ alert เตือนก็จริง แต่ในส่วนของ popup สินค้าในตะกร้า แสดงตัวเลขไม่ตรงกันครับ

    ตอบลบ
  8. @iaunz
    นี่เป็นแค่กรณีศึกษาน่ะครับ ต้องขออภัย วิธีแก้คือ ไม่ต้องทำ popup ให้ลิงค์ไปหน้าตะกร้าสินค้าแทนดีกว่า

    ตอบลบ
  9. พี่ครับ ผมเอาโค้ดของพี่ไปประยุกใช้ ใช้ได้ดีเลยครับ แต่มันติดจุดเดียวนะครับตรง ราคารวม ของสินค้าแต่ละชนิด พอแก้จำนวนใน popup เลขของราคา มันไม่อัพเดททันทีน่ะครับ ต้องปิดก่อนแล้วก็เปิดใหม่เลขราคามันถึงจะเปลี่ยนน่ะครับ พี่ช่วยดูโค้ดให้หน่อยได้ป่าวครับ ผมลองแก้เองแล้ว มันไม่ได้ ไมมีความรู้ Ajax เลย T_T ลองดูรูปที่ผมแนบมาดูครับพี่ ตรงที่ผมวงไว้น่ะครับ
    http://www.uppic.org/share-8ABD_52F5BADA.html

    ตอบลบ
  10. ไม่ระบุชื่อ27 มิถุนายน 2557 20:32

    ขอบคุณมากครับ
    ขอบคุณที่เป็นแสงเทียนส่องสว่างให้ ในยามที่ผมกำลังมืดมิดครับ

    ตอบลบ