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

<h2>ทำเว็บไซต์ขายของ ทำระบบเพิ่มสินค้าลงตะกร้า ด้วย jQuery<&sol;h2>&NewLine;<p><&sol;br><br &sol;>&NewLine;<strong>ทำเว็บไซต์ขายของ ทำระบบเพิ่มสินค้าลงตะกร้า ด้วย jQuery<&sol;strong><br &sol;>&NewLine;ระบบการเพิ่มสินค้าลงในตะกร้าสินค้า เป็นส่วนประกอบอย่างหนึ่งที่สำคัญ และเรามักจะพบอยู่ในเว็บไซต์ขายสินค้าอยู่เป็นประจำ ซึ่งมีอยู่ในเว็บไซต์ขายสินค้าขนาดเล็ก ไปจนถึงเว็บไซต์ขายสินค้าระดับโลก<&excl;--more--><&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;ธุรกิจแบบ E-Commerce &lpar; Electronic Commerce &rpar; หรือ การพาณิชย์อิเล็กทรอนิกส์ ในปัจจุบันภาพของการขายสินค้าผ่านช่องทางออนไลน์หรือที่เราเรียกกันว่าการทำธุรกิจแบบ E-Commerce มีภาพที่ชัดเจนขึ้นเรื่อย ๆ ชัดเจนมากขนาดไหน ต้องลองตั้งคำถามกับตัวเราว่า เราเคยใช้บริการอะไรบ้างที่แค่กดสั่งผ่านหน้าเว็บไซต์หรือผ่านมือถือ ชำระเงิน รอไม่กี่วันก็มีของมาส่งถึงบ้าน<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;add&lowbar;to&lowbar;cart&sol;" target&equals;"&lowbar;blank">คลิก ดูตัวอย่างการเพิ่มสินค้าลงตะกร้าของเว็บไซต์ขายสินค้าออนไลน์<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><&sol;p>&NewLine;<h4>เข้าใจโครงสร้างหลักของการทำ E-Commerce Website<&sol;h4>&NewLine;<p>&&num;8211&semi; การขาย คือ สร้างช่องทางและปัจจัยหลักที่จะทำให้เกิดการซื้อ การแสดงสินค้า การโฆษณา แบนเนอร์ เป็นต้น<br &sol;>&NewLine;&&num;8211&semi; การชำระเงิน คือ ช่องทางหรือรูปแบบการชำระเงิน เช่น ชำระด้วยบัตรเดบิตหรือเครดิต โอนเงินเข้าบัญชี เป็นต้น<br &sol;>&NewLine;&&num;8211&semi; การขนส่ง คือ ให้ข้อมูลการขนส่ง การส่งมอบสินค้า และการติดตามสถานะของสินค้า<br &sol;>&NewLine;&&num;8211&semi; บริการหลังการขาย คือ การติดต่อผู้ให้บริการ การรับประกัน สินค้าชำรุด ที่เกิดจากการขนส่ง จะต้องทำอย่างไร<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>วิธีทำระบบ Add To Cart ง่าย ๆ ด้วย jQuery<&sol;h4>&NewLine;<ul>&NewLine;<li>1&period; สร้างส่วนการแสดงรายการสินค้าและปุ่มเพิ่มสินค้า จัดเรียงด้วย col-md-3 ของ bootstrap และในปุ่มเพิ่มสินค้าใส่คลาส item ลงไปไว้สำหรับ loop ทำให้คลิกและเพิ่มเข้าไปในตะกร้าสินค้า&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;div class&equals;"container"&gt&semi; &NewLine;&Tab;&lt&semi;div class&equals;"row"&gt&semi; &NewLine; &Tab;&lt&semi;div class&equals;"col-md-3"&gt&semi; รายละเอียดสินค้า &lt&semi;button class&equals;"item"&gt&semi;ปุ่มเพิ่มสินค้า&lt&semi;&sol;button&gt&semi;&lt&semi;&sol;div&gt&semi; &NewLine; &lt&semi;div class&equals;"col-md-3"&gt&semi; รายละเอียดสินค้า &lt&semi;button class&equals;"item"&gt&semi;ปุ่มเพิ่มสินค้า&lt&semi;&sol;button&gt&semi;&lt&semi;&sol;div&gt&semi; &NewLine; &lt&semi;div class&equals;"col-md-3"&gt&semi; รายละเอียดสินค้า &lt&semi;button class&equals;"item"&gt&semi;ปุ่มเพิ่มสินค้า&lt&semi;&sol;button&gt&semi;&lt&semi;&sol;div&gt&semi; &NewLine; &lt&semi;div class&equals;"col-md-3"&gt&semi; รายละเอียดสินค้า &lt&semi;button class&equals;"item"&gt&semi;ปุ่มเพิ่มสินค้า&lt&semi;&sol;button&gt&semi;&lt&semi;&sol;div&gt&semi; &NewLine; &lt&semi;&sol;div&gt&semi; &NewLine;&lt&semi;&sol;div&gt&semi;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>2&period; ในส่วนของตะกร้าสินค้า เราจะใช้ ul element เพื่อให้สินค้าที่เพิ่มเข้าไปจัดเรียงง่าย และตั้งชื่อคลาสว่า cart&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;ul class&equals;"cart"&gt&semi; &NewLine; &NewLine; &lt&semi;&excl;-- เมื่อคลิกที่คลาส item สินค้าตัวนั้นจะเข้ามาอยู่ในนี้--&gt&semi; &NewLine; &NewLine;&lt&semi;&sol;ul&gt&semi;<&sol;pre>&NewLine;<&sol;li>&NewLine;<li>3&period; มาในส่วนของ jquery ให้เราใช้คำสั่ง &period;each ของ jquery ในการ loop คลาส item ทั้งหมดและเขียนคำสั่งเมื่อคลิกไอเทมใด ๆ ก็ตามให้ append ไอเทมนั้น ๆ ลงไปในตะกร้า คือคลาส cart โดยสามารถเขียนโค๊ดได้ดังนี้&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >var cart &equals; &dollar;&lpar;"&period;cart"&rpar;&semi; &NewLine;var cart&lowbar;number &equals; &dollar;&lpar;"&period;cart&lowbar;number"&rpar;&semi; &NewLine;var close&lowbar;id&semi; &NewLine; &NewLine;&dollar;&lpar;"&period;item"&rpar;&period;each&lpar;function&lpar;index&rpar;&lbrace; &NewLine;&Tab;&dollar;&lpar;this&rpar;&period;click&lpar;function&lpar;e&rpar;&lbrace; &NewLine;&Tab;&Tab; e&period;stopPropagation&lpar;&rpar;&semi; &NewLine;&Tab;&Tab; if &lpar;&dollar;&lpar;'&period;dropdown'&rpar;&period;find&lpar;'&period;dropdown-menu'&rpar;&period;is&lpar;"&colon;hidden"&rpar;&rpar;&lbrace; &NewLine;&Tab;&Tab;&Tab;&dollar;&lpar;'&period;dropdown-toggle'&rpar;&period;dropdown&lpar;'toggle'&rpar;&semi; &NewLine;&Tab;&Tab; &rcub; &NewLine;&Tab;&Tab; addToCart&lpar;index&rpar;&semi; &NewLine;&Tab;&rcub;&rpar;&semi; &NewLine;&rcub;&rpar;&semi; &NewLine;function addToCart&lpar;index&rpar;&lbrace; &sol;&sol; เพิ่มสินค้าลงตะกร้า &NewLine;&Tab;var html &equals; '<li id&equals;"item'&plus;index&plus;'"><a onClick&equals;"removeFromCart&lpar;'&plus;index&plus;'&rpar;">iPhone '&plus;index&plus;' <small>remove<&sol;small><&sol;a><&sol;li>'&semi; &NewLine;&Tab;cart&period;append&lpar;html&rpar;&semi; &NewLine;&Tab;cart&lowbar;number&period;text&lpar;&dollar;&lpar;"&period;cart li"&rpar;&period;length&rpar;&semi; &sol;&sol; อัพเดทตัวเลขสินค้าใน cart &NewLine;&Tab;clearTimeout&lpar;close&lowbar;id&rpar;&semi; &NewLine;&Tab;close&lowbar;id &equals; setTimeout&lpar;closeDropdown&comma;1500&rpar;&semi; &sol;&sol; ปิดการแสดงรายการสินค้าใน cart &NewLine;&rcub; &NewLine;function removeFromCart&lpar;index&rpar;&lbrace; &sol;&sol; ลบสินค้าจากตะกร้า &NewLine;&Tab;clearTimeout&lpar;close&lowbar;id&rpar;&semi; &NewLine;&Tab;&dollar;&lpar;"&num;item"&plus;index&rpar;&period;remove&lpar;&rpar;&semi; &sol;&sol; ลบสินค้า &NewLine;&Tab;cart&lowbar;number&period;text&lpar;&dollar;&lpar;"&period;cart li"&rpar;&period;length&rpar;&semi; &sol;&sol; อัพเดทตัวเลขสินค้าใน cart เมื่อลบสินค้า &NewLine;&rcub; &NewLine;function closeDropdown&lpar;&rpar;&lbrace; &NewLine;&Tab;clearTimeout&lpar;close&lowbar;id&rpar;&semi; &NewLine;&Tab;&dollar;&lpar;'&period;dropdown-toggle'&rpar;&period;dropdown&lpar;'toggle'&rpar;&semi;&Tab; &NewLine;&rcub;<&sol;pre>&NewLine;<&sol;li>&NewLine;<&sol;ul>&NewLine;<p>ลองคลิกดูตัวอย่างการทำงานด้านล่าง จะเห็นภาพชัดเจนมากขึ้นครับ<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;add&lowbar;to&lowbar;cart&sol;" target&equals;"&lowbar;blank">คลิก ดูตัวอย่างการเพิ่มสินค้าลงตะกร้าของเว็บไซต์ขายสินค้าออนไลน์<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><&sol;br><&sol;p>&NewLine;