10 Ücretsiz CSS ve JavaScript e-Ticaret Alışveriş Sepeti Kullanıcı Arayüzü Örnekleri

E-ticaret sepetlerinin tüm ziyaretçiler için kullanılabilir ve erişilebilir olması gerekir. Amacınız, dönüşümleri artırmak ve ödeme sırasında insanları etkileşimde tutmaktır ve bunu yapmanın en iyi yolu, kullanıcı etkinliğini teşvik eden temiz bir tasarımdır.

Herhangi bir amaç için yeniden şekillendirebileceğiniz birçok ücretsiz açık kaynaklı alışveriş sepeti vardır. Ve favorilerimizi bu koleksiyonda toplama özgürlüğüne kavuştuk.

Düz Araba

Düz tasarımın popülaritesini inkar etmek yok. Her tür web sitesi için çalışır ve tasarımcıların estetikten çok kullanılabilirliğe odaklanmasına yardımcı olur.

Bu nedenle, bu düz araba, bir e-Ticaret ödeme sayfası oluşturan herkes için mükemmel bir kaynaktır. Renklerin güncellenmesi kolaydır ve arayüz özellikleri, yerleşim stilinden bağımsız olarak aynı şekilde çalışır.

Düz tasarımın her proje için çözüm olduğunu düşünmüyorum, ancak doğru senaryoda bu kalem bir başlangıç ​​şablonu olarak iyi çalışabilir.

Will Paige'in Kalem Düz Arabasını [codepen comp] görün

Tablosuz Kullanıcı Arayüzü

Birçok ödeme sayfası, verileri düzenlemek için tablolar kullanır, ancak Alex Rodrigues'in bu örneği, bunun yerine DIV kullanır.

Tamamen duyarlıdır, bu nedenle hangi cihazı kullanırsanız kullanın düzen harika görünmelidir. Her satır, süper küçük ekranlarda bile düzgün şekilde yeniden biçimlendirmek ve her şeyi düzenli tutmak için yeterli veriyi tutar. Ve CSS kodu, biraz stil için ücretsiz Google Yazı Tipleri ile birlikte zamandan tasarruf etmek için Pusula'yı kullanır.

alex rodrigues'in Kalem Duyarlı Tablosuz Alışveriş Sepetini görün

Lezzetli Alışveriş Sepeti

Bunun gerçek bir sitede çalıştığını hayal edemiyorum ama bir UI/UX deneyi olarak oldukça havalı. Kendi adını taşıyan Lezzetli Alışveriş Sepeti, farklı tatlıların fotoğraflarıyla çevrimiçi bir fırın/tatlı mağazası gibi davranır.

Döngüde ilerlemek veya bir mobil cihazda kaydırmak için imlecinizi sola/sağa hareket ettirebilirsiniz. Her üründe, ürün eklemek veya siparişinizden kaldırmak için artı/eksi simgeleri ve sepetinizden tamamen kaldırmak için bir 'X' simgesi bulunur.

Her şey Sass, Slim ve jQuery üzerine inşa edilmiştir, bu yüzden bu bir ön uç projesidir! Bazı harika kodları incelemek istiyorsanız, bu örnek kaydetmeye değer.

Didier'den Pen Delicious Alışveriş Sepetine Bakın

Sorumlu tasarım

İşte Sass üzerine kurulu ve masa içermeyen başka bir basit duyarlı alışveriş sepeti kullanıcı arayüzü.

Bu duyarlı ödemeyi diğerlerinden biraz daha fazla seviyorum çünkü kesme noktaları daha doğal geliyor. Daha küçük ekranlarda bile, sepet öğeleri sıkışık veya yerinde değil.

"Kaldır" düğmelerinin tümü JavaScript aracılığıyla çalışır ve sayısal giriş alanları fiyatlandırmayı otomatik olarak günceller. Bu, alıcının ödeme yapmadan önce miktarları artırmak ve toplam maliyetlerin bir tahminini görmek isteyebileceği bir ön uç alışveriş sepeti sayfası için harikadır.

Justin Klemm tarafından kaleme duyarlı alışveriş sepetine bakın

jQuery Alışveriş Sepeti

Bu kalem, tam bir ödeme sayfasından çok bir tel kafes gibi davranır, ancak bir başlangıç ​​noktası olarak mükemmeldir. Geliştirici Khurram Alvi, bu duyarlı alışveriş sepetini temel HTML/CSS ve biraz jQuery ile oluşturdu.

Tamamen duyarlıdır ve miktar girdileri beklediğiniz gibi çalışır. Güzel bir şey, bu arabanın tasarımının basitliği. Düzene herhangi bir renk, yazı tipi veya doku empoze etmez. Sıfırdan yeni bir araba inşa etmek isteyen herkes, üzerine inşa etmek ve yeniden yapılandırmak kolay olduğu için buradan başlayabilir.

Khurram Alvi'nin Kaleme Duyarlı jQuery Alışveriş Sepeti'ne bakın

Meydan Okuma Sepeti

Ara sıra yeni CodePen zorlukları ortaya çıkıyor ve geliştiricilerden kayıt sayfaları veya kalıcı pencereler gibi farklı arayüzler oluşturmalarını istiyor. Ziga Miklic'in bu kalemi, alışveriş sepeti kullanıcı arayüzleri için bir meydan okumadan geldi ve bir ön uç geliştirme şaheseri.

Sepete ürün eklediğinizde/çıkardığınızda, fiyatların küçük bir kayan animasyonla otomatik olarak güncellendiğini fark edeceksiniz. Sepetten kolayca çıkarmak için herhangi bir ürün resmine de tıklayabilirsiniz. Bu küçük özellikler arayüze çok şey katar ve klonlamayı çok kolaylaştırır.

Arka uçtaki herhangi bir şeye bağlı olmamasına rağmen, ödeme işlevinin bile kendi animasyon özelliği vardır.

Ziga Miklic'in kalem alışveriş sepetine bakın [ CodePen Challange ]

Kayar Araba Kullanıcı Arayüzü

Sekmeli widget'lar, tek bir sayfaya içerik eklemenize ve kullanıcılara bu içerik üzerinde güç vermenize olanak tanır. Bu kayar arabada, arabanın kendisi ile kaydedilmiş "favori" öğelerin listesi arasında geçiş yapabilirsiniz.

Ödeme özelliklerinin hiçbiri gerçekten çalışmıyor, bu nedenle favorilere ekleyemez veya sepete ürün ekleyemez/kaldıramazsınız. Ancak arayüz öğeleri yerinde, bu yüzden biraz JavaScript büyüsü bunu düzeltebilir. Yine de, bu sepetin ne kadar temiz göründüğünden ve benzersiz, ancak kullanılabilir sekme arayüzünden etkilendim.

Alex'in kalem alışveriş sepetine (duyarlı) bakın

Dinamik Mağaza ve Sepet

Mağazayı ve alışveriş sepetini tek bir arayüzde karıştırmak zor bir iştir, ancak Olivia Cheng bunu bu kalemde yaptı.

Fareyle üzerine gelindiğinde "sepete ekle" düğmesiyle ayarlanmış bir ızgarada geniş küçük resimler kullanır. Yukarıdaki öğeyi otomatik güncelleme fiyatlarıyla eklemek için buna tıklayın. Benzersiz bir özellik, öğe küçük resminin üstüne eklenen miktardır. Bu gerçek bir arabada kafa karıştırıcı olabilir, ancak sayılar biraz daha küçük olsaydı, bu yerden tasarruf etmenin harika bir yolu olurdu.

Olivia Cheng'den Kalem Sürgülü Alışveriş Sepeti ve Mağazasına Bakın

Temiz Alışveriş Sepeti

Geliştirici Bart Veneman, bu temiz alışveriş sepetini basit bir arayüz şablonu olarak oluşturdu. Toplam fiyatı otomatik olarak hesaplar ve hatta ödeme düğmesinin yanında vergileri içerir.

Tüm bu dinamik özellikler JavaScript ile çalışır ve şaşırtıcı bir şekilde bu kalem, jQuery üzerinden Zepto kullanır. Bu, Zepto kitaplığını tercih eden geliştiriciler için harika, ancak gerçekten herkes bu kodu alıp herhangi bir şablona uyacak şekilde yeniden işleyebilir.

Bart Veneman'ın Kalem Alışveriş Sepetini Gör

Vue.js ile Basit Sepet

Vue.js ile ön uç kodlaması, şablon oluşturmayı çok daha basit hale getirir. Ve bu kalem, pratik olarak bir JavaScript temeli üzerine inşa edilmiş dinamik bir arabanın bir örneğidir.

Sepet, her tıklamada otomatik olarak güncellenir, böylece ürün ekleyebilir/kaldırabilir ve sonuçları anında görebilirsiniz. Sağ üstteki düğme, Bootstrap'in kalıcı bileşenini kullanarak geçerli sepetinizi kalıcı bir pencerede açar.

Vue.js sözdizimini beğendiyseniz, bu şablon bir alışveriş sepeti oluşturmaya başlamak için harika bir yerdir. Özelleştirmesi kolaydır ve tüm tarayıcılarda iyi çalışması gerekir.

Cristian Matos'tan Pen VueJS 2 Basit Alışveriş sepetine bakın

Alan Adı Sepeti

İşte bir alan adı kayıt kuruluşundan sonra modellenen en sevdiğim alışveriş sepeti tasarımlarından biri. Coder Jesse Bilsten, ödeme bölümü ve gerekli T&C alanını içeren bu arayüz ile detaylandırıldı.

Ödeme işlemini tamamlamadan önce "Kabul ediyorum" butonuna tıklamanız gerekmektedir. Bazı e-ticaret siteleri için küçük ama değerli bir özellik ve iki sütunlu düzeni gerçekten seviyorum. Ve bu tasarım tamamen duyarlıdır, böylece hemen hemen her e-ticaret sisteminde kullanmak üzere klonlayabilirsiniz.

Kalem Duyarlı Alışveriş Sepetini görün – Jesse Bilsten'den Brand v01