10가지 무료 CSS 및 JavaScript 전자 상거래 장바구니 UI 예제

전자 상거래 카트는 모든 방문자가 사용할 수 있고 접근할 수 있어야 합니다. 당신의 목표는 전환을 늘리고 사람들이 결제하는 동안 계속 참여하도록 하는 것이며, 이를 위한 가장 좋은 방법은 사용자 활동을 장려하는 깔끔한 디자인을 사용하는 것입니다.

어떤 목적으로든 스타일을 바꿀 수 있는 무료 오픈 소스 쇼핑 카트가 많이 있습니다. 그리고 우리는 이 컬렉션에서 우리가 가장 좋아하는 것을 자유롭게 모았습니다.

플랫 카트

평면 디자인의 인기를 부정할 수 없습니다. 모든 유형의 웹 사이트에서 작동하며 디자이너가 미학보다 사용성에 더 집중할 수 있도록 도와줍니다.

그렇기 때문에 이 플랫 카트는 전자 상거래 결제 페이지를 구축하는 모든 사람에게 훌륭한 리소스가 됩니다. 색상은 업데이트하기 쉽고 인터페이스 기능은 레이아웃 스타일에 관계없이 동일하게 작동합니다.

평면 디자인이 모든 프로젝트의 솔루션이라고 생각하지는 않지만 올바른 시나리오에서 이 펜은 시작 템플릿으로 잘 작동할 수 있습니다.

Will Paige의 Pen Flat Cart [codepen comp] 보기

테이블 없는 UI

많은 체크아웃 페이지는 테이블을 사용하여 데이터를 구성하지만 Alex Rodrigues의 이 예에서는 대신 DIV 를 사용합니다.

완전히 반응하므로 어떤 장치를 사용하든 레이아웃이 멋지게 보일 것입니다. 각 행은 초소형 화면에서도 스타일을 적절하게 변경하고 모든 것을 정리할 수 있는 충분한 데이터를 보유합니다. CSS 코드는 Compass를 사용하여 약간의 스타일을 위한 무료 Google 글꼴과 함께 시간을 절약합니다.

Alex rodrigues의 펜 반응형 테이블리스 쇼핑 카트 보기

맛있는 장바구니

나는 이것이 실제 사이트에서 작동하는 것을 상상할 수 없지만 UI/UX 실험으로서 그것은 꽤 멋지다. 자체 제목 딜리셔스 쇼핑 카트는 다양한 디저트의 사진이 있는 온라인 베이커리/과자 가게와 같은 역할을 합니다.

커서를 왼쪽/오른쪽으로 이동하여 캐러셀을 이동하거나 모바일 장치에서 스와이프할 수 있습니다. 각 항목에는 항목을 추가하거나 주문에서 제거하기 위한 플러스/마이너스 아이콘과 장바구니에서 완전히 제거하기 위한 'X' 아이콘이 있습니다.

모든 것이 Sass, Slim 및 jQuery를 기반으로 하므로 프론트엔드 프로젝트 중 하나입니다! 훌륭한 코드를 분석하려는 경우 이 예제를 저장할 가치가 있습니다.

디디에의 펜 딜리셔스 장바구니 보기

반응형 디자인

다음은 Sass를 기반으로 하고 테이블이 필요 없는 또 다른 간단한 반응형 장바구니 UI입니다.

중단점이 더 자연스럽게 느껴지기 때문에 이 반응형 체크아웃이 다른 것보다 조금 더 마음에 듭니다. 작은 화면에서도 장바구니 항목이 비좁거나 제자리에 있지 않은 느낌이 들지 않습니다.

모든 "제거" 버튼은 JavaScript를 통해 작동하고 숫자 입력 필드는 가격을 자동으로 업데이트합니다. 이는 구매자가 지불하기 전에 수량을 늘리고 예상 총 비용을 확인하려는 프론트엔드 장바구니 페이지에 유용합니다.

Justin Klemm의 펜 반응형 쇼핑 카트 보기

jQuery 장바구니

이 펜은 전체 결제 페이지보다 와이어프레임처럼 작동하지만 시작점으로 완벽합니다. 개발자 Khurram Alvi는 기본 HTML/CSS와 약간의 jQuery를 사용하여 반응형 장바구니를 만들었습니다.

완벽하게 반응하며 수량 입력이 예상대로 작동합니다. 한 가지 좋은 점은 이 카트의 디자인이 단순하다는 것입니다. 레이아웃에 색상, 글꼴 또는 질감을 적용하지 않습니다. 처음부터 새로운 카트를 만들려는 사람은 구축 및 재구성이 쉽기 때문에 여기에서 시작할 수 있습니다.

Khurram Alvi의 Pen Responsive jQuery Shopping Basket 보기

도전 카트

개발자에게 등록 페이지나 모달 창과 같은 다양한 인터페이스를 만들도록 요청하는 새로운 CodePen 문제가 자주 나타납니다. Ziga Miklic의 이 펜은 장바구니 UI에 대한 도전에서 나온 것으로 프론트엔드 개발의 걸작입니다.

장바구니에서 항목을 추가/제거할 때 작은 슬라이딩 애니메이션과 함께 가격이 자동으로 업데이트되는 것을 알 수 있습니다. 제품 이미지를 클릭하여 장바구니에서 쉽게 제거할 수도 있습니다. 이러한 작은 기능은 인터페이스에 많은 것을 추가하고 복제를 쉽게 만듭니다.

체크 아웃 기능에도 자체 애니메이션 기능이 있지만 백엔드의 어떤 것과도 연결되어 있지는 않습니다.

Ziga Miklic의 펜 쇼핑 카트 보기 [ CodePen Challange ]

슬라이딩 카트 UI

탭 위젯을 사용하면 단일 페이지에 콘텐츠를 추가하고 사용자에게 해당 콘텐츠에 대한 권한을 부여할 수 있습니다. 이 슬라이딩 카트에서 카트 자체와 저장된 "즐겨찾기" 항목 목록 사이를 전환할 수 있습니다.

어떤 체크아웃 기능도 실제로 작동하지 않으므로 장바구니에 항목을 즐겨찾기에 추가/제거할 수 없습니다. 그러나 인터페이스 항목이 제자리에 있으므로 약간의 JavaScript 마술로 해결할 수 있습니다. 그래도 이 카트가 얼마나 깨끗한지, 독특하면서도 사용하기 쉬운 탭 인터페이스에 깊은 인상을 받았습니다.

Alex의 펜 쇼핑 카트(반응형) 보기

다이내믹 스토어 & 카트

상점과 장바구니를 하나의 인터페이스로 혼합하는 것은 힘든 일이지만 Olivia Cheng은 이 펜으로 해냈습니다.

호버에 "장바구니에 추가" 버튼으로 설정된 그리드에서 넓은 썸네일을 사용합니다. 자동 업데이트 가격으로 위의 항목을 추가하려면 이것을 클릭하십시오. 한 가지 독특한 기능은 항목 축소판 위에 추가된 수량입니다. 실제 카트에서는 혼동될 수 있지만 숫자가 조금 더 작으면 공간을 절약할 수 있는 좋은 방법입니다.

Olivia Cheng의 펜 슬라이딩 쇼핑 카트 및 스토어 보기

깨끗한 장바구니

개발자 Bart Veneman은 이 깔끔한 장바구니를 간단한 인터페이스 템플릿으로 만들었습니다. 총 가격을 자동으로 계산하고 체크아웃 버튼 근처에 세금도 포함합니다.

이러한 모든 동적 기능은 JavaScript를 통해 작동하며 놀랍게도 이 펜은 jQuery보다 Zepto를 사용합니다. 이것은 Zepto 라이브러리를 선호하는 개발자에게 적합하지만 실제로 누구나 이 코드를 선택하여 모든 템플릿에 맞게 재작업할 수 있습니다.

Bart Veneman의 펜 쇼핑 카트 보기

Vue.js가 있는 간단한 카트

Vue.js를 사용한 프론트엔드 코딩은 템플릿을 훨씬 더 간단하게 만듭니다. 그리고 이 펜은 실제로 JavaScript 기반에 구축된 동적 카트의 한 예입니다.

장바구니는 클릭할 때마다 자동으로 업데이트되므로 항목을 추가/제거하고 결과를 즉시 확인할 수 있습니다. 오른쪽 상단 버튼은 Bootstrap의 모달 구성 요소를 사용하여 모달 창에서 현재 장바구니를 엽니다.

Vue.js 구문이 마음에 든다면 이 템플릿을 사용하여 장바구니 구축을 시작할 수 있습니다. 사용자 정의하기 쉽고 모든 브라우저에서 잘 작동해야 합니다.

Cristian Matos의 Pen VueJS 2 Simple Shopping cart 보기

도메인 장바구니

다음은 도메인 등록 기관을 모델로 한 내가 가장 좋아하는 장바구니 디자인 중 하나입니다. Coder Jesse Bilsten은 결제 섹션과 필수 T&C 영역을 포함하여 이 인터페이스에 대해 자세히 설명했습니다.

체크아웃 절차를 완료하기 전에 "동의함" 버튼을 클릭해야 합니다. 일부 전자 상거래 사이트에서는 사소하지만 중요한 기능이며 2열 레이아웃이 정말 마음에 듭니다. 그리고 이 디자인은 완전히 반응하므로 거의 모든 전자 상거래 시스템에서 사용하기 위해 복제할 수 있습니다.

펜 반응형 쇼핑 카트 보기 – Jesse Bilsten의 브랜드 v01