10 ฟรี CSS & JavaScript eCommerce รถเข็นช็อปปิ้ง UI ตัวอย่าง

รถเข็นอีคอมเมิร์ซต้องใช้งานได้และเข้าถึงได้สำหรับผู้เยี่ยมชมทุกคน เป้าหมายของคุณคือการเพิ่ม Conversion และทำให้ผู้คนมีส่วนร่วมระหว่างการชำระเงิน และวิธีที่ดีที่สุดในการทำเช่นนี้คือการออกแบบที่สะอาดตาซึ่งสนับสนุนกิจกรรมของผู้ใช้

มีตะกร้าสินค้าโอเพ่นซอร์สฟรีมากมายที่คุณสามารถจัดรูปแบบใหม่เพื่อวัตถุประสงค์ใดก็ได้ และเราได้ใช้เสรีภาพในการรวบรวมรายการโปรดของเราในคอลเล็กชันนี้

รถเข็นแบน

ปฏิเสธไม่ได้ว่าความนิยมของดีไซน์เรียบๆ ใช้ได้กับเว็บไซต์ทุกประเภท และช่วยให้นักออกแบบให้ความสำคัญกับการใช้งานมากกว่าความสวยงาม

นั่นเป็นเหตุผลที่รถเข็นแบบเรียบนี้เป็นแหล่งข้อมูลที่ยอดเยี่ยมสำหรับทุกคนที่สร้างหน้าชำระเงินอีคอมเมิร์ซ สีนั้นง่ายต่อการอัปเดตและคุณสมบัติของอินเทอร์เฟซทำงานเหมือนกันโดยไม่คำนึงถึงรูปแบบเค้าโครง

ฉันไม่คิดว่าการออกแบบเรียบๆ จะเป็นทางออกสำหรับทุกโครงการ แต่ในสถานการณ์ที่เหมาะสม ปากกานี้สามารถทำงานได้ดีเป็นเทมเพลตเริ่มต้น

ดู Pen Flat Cart [codepen comp] โดย Will Paige

UI แบบไม่มีตาราง

หน้าชำระเงินจำนวนมากใช้ตารางเพื่อจัดระเบียบข้อมูล แต่ตัวอย่างนี้โดย Alex Rodrigues ใช้ DIV แทน

มีการตอบสนองอย่างเต็มที่ ดังนั้นการจัดวางจะดูดีไม่ว่าคุณจะใช้อุปกรณ์ใด แต่ละแถวเก็บข้อมูลได้มากพอที่จะจัดรูปแบบใหม่ได้อย่างเหมาะสมและจัดระเบียบทุกอย่าง แม้กระทั่งบนหน้าจอขนาดเล็กมาก และโค้ด CSS ใช้ Compass เพื่อประหยัดเวลาพร้อมกับ Google Fonts ฟรีสำหรับสไตล์เล็กๆ น้อยๆ

ดูตะกร้าสินค้าแบบไม่มีโต๊ะที่ตอบสนองต่อปากกา โดย alex rodrigues

ตะกร้าสินค้าอร่อย

ฉันนึกภาพไม่ออกว่ามันทำงานบนไซต์จริง แต่จากการทดลอง UI/UX มันค่อนข้างเจ๋ง Delicious Shopping Cart ที่มีชื่อในตัวเองทำหน้าที่เหมือนร้านเบเกอรี่/ขนมหวานออนไลน์ที่มีรูปถ่ายของหวานต่างๆ

คุณสามารถเลื่อนเคอร์เซอร์ไปทางซ้าย/ขวาเพื่อเลื่อนผ่านภาพหมุนหรือปัดบนอุปกรณ์มือถือ แต่ละรายการมีไอคอนบวก/ลบสำหรับการเพิ่มหรือลบรายการออกจากคำสั่งซื้อของคุณ รวมทั้งไอคอน 'X' เพื่อลบออกจากรถเข็นของคุณทั้งหมด

สิ่งทั้งหมดสร้างขึ้นบน Sass, Slim และ jQuery ดังนั้นจึงเป็นโปรเจ็กต์ส่วนหน้าอย่างหนึ่ง! หากคุณต้องการแยกโค้ดที่ยอดเยี่ยม ตัวอย่างนี้คุ้มค่าที่จะบันทึก

ดูรถเข็นช็อปปิ้ง Pen Delicious โดย Didier

การออกแบบที่ตอบสนอง

นี่เป็นอีกหนึ่ง UI ตะกร้าสินค้าที่ตอบสนองง่าย ๆ ที่สร้างขึ้นบน Sass และแบบไม่มีโต๊ะ

ฉันชอบการชำระเงินแบบตอบสนองนี้มากกว่าแบบอื่นๆ เล็กน้อย เนื่องจากจุดพักให้ความรู้สึกเป็นธรรมชาติมากกว่า แม้ในหน้าจอที่เล็กกว่า สินค้าในรถเข็นก็ไม่รู้สึกว่าคับแคบหรืออยู่นอกสถานที่

ปุ่ม "ลบ" ทั้งหมดทำงานผ่าน JavaScript และช่องป้อนตัวเลขเป็นตัวเลขจะอัปเดตราคาอัตโนมัติ ซึ่งเหมาะสำหรับหน้ารถเข็นส่วนหน้าซึ่งผู้ซื้ออาจต้องการเพิ่มปริมาณก่อนชำระเงิน และดูค่าประมาณของต้นทุนทั้งหมด

ดูตะกร้าสินค้าที่ตอบสนองต่อปากกาโดย Justin Klemm

ตะกร้าช้อปปิ้ง jQuery

ปากกานี้ทำหน้าที่เหมือนโครงลวดมากกว่าหน้าชำระเงินแบบเต็ม แต่เหมาะที่จะเป็นจุดเริ่มต้น นักพัฒนา Khurram Alvi ได้สร้างตะกร้าสินค้าแบบตอบสนองนี้ด้วย HTML/CSS พื้นฐานและ jQuery เล็กน้อย

มันตอบสนองอย่างเต็มที่และอินพุตปริมาณทำงานตามที่คุณคาดหวัง สิ่งหนึ่งที่ดีคือความเรียบง่ายของการออกแบบรถเข็นนี้ มันไม่ได้กำหนดสี ฟอนต์ หรือพื้นผิวใดๆ ลงในเลย์เอาต์ ใครก็ตามที่ต้องการสร้างรถเข็นใหม่ตั้งแต่ต้นอาจเริ่มต้นที่นี่เพราะสร้างและปรับโครงสร้างใหม่ได้ง่าย

ดูตะกร้าช้อปปิ้ง jQuery ที่ตอบสนองต่อปากกาโดย Khurram Alvi

รถเข็นท้าทาย

ทุกๆ ครั้งที่ความท้าทายใหม่ๆ ของ CodePen ปรากฏขึ้นเพื่อขอให้นักพัฒนาสร้างอินเทอร์เฟซที่แตกต่างกัน เช่น หน้าลงทะเบียนหรือหน้าต่างโมดอล ปากกานี้โดย Ziga Miklic มาจากความท้าทายสำหรับ UI รถเข็นช็อปปิ้ง และเป็นผลงานชิ้นเอกของการพัฒนาส่วนหน้า

เมื่อคุณเพิ่ม/นำสินค้าออกจากรถเข็น คุณจะสังเกตเห็นว่าราคาจะอัปเดตโดยอัตโนมัติด้วยภาพเคลื่อนไหวแบบเลื่อนขนาดเล็ก คุณยังสามารถคลิกรูปภาพสินค้าเพื่อนำออกจากรถเข็นได้อย่างง่ายดาย ฟีเจอร์เล็กๆ น้อยๆ เหล่านี้เพิ่มส่วนต่อประสานอย่างมากและทำให้การโคลนนิ่งเป็นเรื่องง่าย

แม้แต่ฟังก์ชันเช็คเอาต์ก็มีฟีเจอร์แอนิเมชันของตัวเอง แม้ว่าจะไม่ได้เชื่อมต่อกับสิ่งใดในแบ็กเอนด์ก็ตาม

ดูตะกร้าสินค้าปากกา [ CodePen Challange ] โดย Ziga Miklic

UI รถเข็นเลื่อน

วิดเจ็ตแบบแท็บช่วยให้คุณเพิ่มเนื้อหาลงในหน้าเดียวและให้อำนาจแก่ผู้ใช้เหนือเนื้อหานั้น ในรถเข็นแบบเลื่อนนี้ คุณสามารถสลับไปมาระหว่างตัวรถเข็นและรายการ "รายการโปรด" ที่บันทึกไว้

ฟีเจอร์การเช็คเอาต์ไม่สามารถใช้งานได้จริง คุณจึงไม่สามารถตั้งเป็นรายการโปรดหรือเพิ่ม/ลบรายการลงในรถเข็นได้ แต่รายการอินเทอร์เฟซอยู่ในสถานที่ ดังนั้น JavaScript magic เล็กน้อยจะแก้ไขปัญหานั้นได้ ถึงกระนั้น ฉันประทับใจกับความสะอาดของรถเข็นนี้และอินเทอร์เฟซแท็บที่ไม่ซ้ำใครแต่ยังใช้งานได้

ดูตะกร้าสินค้าปากกา (ตอบสนอง) โดย Alex

Dynamic Store & Cart

การผสมผสานร้านค้าและตะกร้าสินค้าไว้ในอินเทอร์เฟซเดียวเป็นงานที่ยาก แต่ Olivia Cheng ทำได้โดยใช้ปากกานี้

ใช้ภาพขนาดย่อแบบกว้างในตารางที่ตั้งค่าด้วยปุ่ม "หยิบใส่ตะกร้า" บนโฮเวอร์ คลิกที่นี่เพื่อเพิ่มรายการด้านบนด้วยราคาที่อัปเดตอัตโนมัติ คุณลักษณะเฉพาะอย่างหนึ่งคือปริมาณที่เพิ่มไว้ด้านบนของภาพขนาดย่อของรายการ สิ่งนี้อาจทำให้สับสนในรถเข็นจริง แต่ถ้าตัวเลขมีขนาดเล็กลงเล็กน้อย นี่จะเป็นวิธีที่ดีในการประหยัดพื้นที่

ดูรถเข็นและร้านค้าแบบเลื่อนปากกาโดย Olivia Cheng

ทำความสะอาดตะกร้าสินค้า

นักพัฒนา Bart Veneman ได้สร้างตะกร้าสินค้าที่สะอาดนี้เป็นเทมเพลตอินเทอร์เฟซที่เรียบง่าย โดยจะคำนวณราคารวมโดยอัตโนมัติและรวมภาษีไว้ใกล้กับปุ่มชำระเงิน

คุณลักษณะแบบไดนามิกทั้งหมดเหล่านี้ทำงานผ่าน JavaScript และน่าประหลาดใจที่ปากกานี้ใช้ Zepto เหนือ jQuery สิ่งนี้ยอดเยี่ยมสำหรับนักพัฒนาที่ชอบไลบรารี Zepto แต่จริงๆ แล้วใครๆ ก็สามารถรับโค้ดนี้และทำงานใหม่เพื่อให้เหมาะกับเทมเพลตใดก็ได้

ดูรถเข็นปากกาโดย Bart Veneman

รถเข็นง่าย ๆ ด้วย Vue.js

การเข้ารหัสส่วนหน้าด้วย Vue.js ทำให้การสร้างเทมเพลตง่ายขึ้นมาก และปากกานี้เป็นตัวอย่างหนึ่งของรถเข็นแบบไดนามิกที่สร้างขึ้นจากพื้นฐาน JavaScript

รถเข็นจะอัปเดตอัตโนมัติทุกครั้งที่คลิก คุณจึงเพิ่ม/ลบรายการและดูผลลัพธ์ได้ทันที ปุ่มขวาบนจะเปิดตะกร้าสินค้าปัจจุบันของคุณในหน้าต่างโมดอลโดยใช้ส่วนประกอบโมดอลของ Bootstrap

หากคุณชอบรูปแบบ Vue.js เทมเพลตนี้เหมาะสำหรับเริ่มสร้างตะกร้าสินค้า ปรับแต่งได้ง่ายและควรทำงานได้ดีกับทุกเบราว์เซอร์

ดูตะกร้าสินค้า Pen VueJS 2 Simple โดย Cristian Matos

รถเข็นโดเมน

นี่คือการออกแบบรถเข็นช็อปปิ้งชิ้นหนึ่งที่ฉันโปรดปรานซึ่งจำลองมาจากผู้รับจดทะเบียนโดเมน Coder Jesse Bilsten ได้รับรายละเอียดเกี่ยวกับอินเทอร์เฟซนี้ รวมถึงส่วนการชำระเงินและพื้นที่ T&C ที่จำเป็น

คุณต้องคลิกปุ่ม "ฉันยอมรับ" ก่อนดำเนินการชำระเงินให้เสร็จสิ้น เป็นคุณลักษณะเล็กน้อยแต่มีค่าสำหรับไซต์อีคอมเมิร์ซบางแห่ง และฉันชอบรูปแบบสองคอลัมน์มาก และการออกแบบนี้ตอบสนองได้อย่างสมบูรณ์ ดังนั้นคุณจึงสามารถโคลนมันเพื่อใช้ในระบบอีคอมเมิร์ซแทบทุกประเภท

ดูตะกร้าสินค้าที่ตอบสนองต่อปากกา – ยี่ห้อ v01 โดย Jesse Bilsten