CART ICON kod HTML

• CSS3 jQuery Raul Dronca • • 8 komentarzy

Jak utworzyć Koszyk UI Za pomocą CSS i JavaScript

Wątek: HTML / CSS3 / JavaScript
Trudność: Intermediate
Przewidywany czas realizacji: 30 minut

W tym tutorialu, będziemy tworzyć Koszyk przy użyciu HTML i CSS3 . Mamy zamiar korzystać z Google Czcionki na tym kursie, a dokładniej „Roboto”.

HTML

Krok 1: Stwórzmy naszą strukturę HTML.

Po pierwsze, musimy div kontenera, który będziemy nazywać „.shopping-koszyk”.
Wewnątrz pojemnika, będziemy mieć tytuł i trzy elementy, które będą obejmować:

  • dwa przyciski - przycisk i ulubiony przycisk Usuń
  • obraz produktu
  • nazwa produktu i opis
  • przyciski, które będą regulować ilość produktów
  • cena całkowita
 
Shopping Bag
Common Projects Bball High White
$549
Maison Margiela Future Sneakers White
$870
Our Legacy Brushed Scarf Brown
$349

CSS

Upewnij się, że obejmują czcionki używamy do tego poradnika.
Teraz dodajmy trochę stylu do naszego organizmu z następujących linii:

* { box-sizing: border-box;
}
html,
body { width: 100%; height: 100%; margin: 0; background-color: #7EC855; font-family: 'Roboto', sans-serif;
}

Świetnie, teraz zróbmy nasz Koszyk być 750 x 423 i styl to ładnie wyglądać. Zauważ, że używamy schematu flexbox, więc ustawić go wyświetlić Flex i zrobić kolumnę elastycznego kierunku, ponieważ domyślnie flex kierunek jest ustawiony jako rzędzie.

.shopping-cart { width: 750px; height: 423px; margin: 80px auto; background: #FFFFFF; box-shadow: 1px 2px 3px 0px rgba(0,0,0,0.10); border-radius: 6px; display: flex; flex-direction: column;
}

Następnie niech styl pierwszy element, który jest tytuł, zmieniając wysokość do 60px i nadając mu pewne podstawowe stylizacji, a następne trzy elementy będące Koszyk produktów, pozwoli im 120 pikseli wysokość każdego i ustawić je w celu wyświetlenia Flex ,

.title { height: 60px; border-bottom: 1px solid #E1E8EE; padding: 20px 30px; color: #5E6977; font-size: 18px; font-weight: 400;
}
.item { padding: 20px 30px; height: 120px; display: flex;
}
.item:nth-child(3) { border-top: 1px solid #E1E8EE; border-bottom: 1px solid #E1E8EE;
}

Teraz mamy stylizowany podstawową strukturę naszego koszyka.
Załóżmy, projektować nasze produkty w porządku.

Zaskocz swoją publiczność animowanych stron internetowych i prezentacji internetowych.

Ze zjeżdżalniami, nie sprawi, że zaczynają się od pustego łupków. Wszystko co musisz zrobić, to wybrać elementy, które najbardziej lubisz i połączyć je. Każdy slajd został starannie dobrany, aby spełniać trzy podstawowe kryteria: estetyczne, funkcjonalność i użyteczność. W ten sposób wiesz każdy element współpracuje bezproblemowo przy jednoczesnym zwiększeniu wpływu treści.

Tworzenie strony internetowej

Pierwsze elementy są ulubione Usuwanie i przyciski.
Zawsze uwielbiałem Twittera serca przycisk animacji, myślę, że to będzie wyglądać świetnie w naszym koszyku, niech jego realizacji.

.buttons { position: relative; padding-top: 30px; margin-right: 60px;
}
.delete-btn,
.like-btn { display: inline-block; Cursor: pointer;
}
.delete-btn { width: 18px; height: 17px; background: url("delete-icn.svg") no-repeat center;
}
.like-btn { position: absolute; top: 9px; left: 15px; background: url('twitter-heart.png'); width: 60px; height: 60px; background-size: 2900%; background-repeat: no-repeat;
}

Stawiamy klasy „jest aktywny”, gdy klikniemy przycisk, aby animować go za pomocą jQuery, ale jest to dla następnej sekcji.

.is-active { animation-name: animate; animation-duration: .8s; animation-iteration-count: 1; animation-timing-function: steps(28); animation-fill-mode: forwards;
}
@keyframes animate { 0% { background-position: left; } 50% { background-position: right; } 100% { background-position: right; }
}

Następnie obraz jest produktem, który potrzebuje 50px prawego marginesu.

.image { margin-right: 50px;
}
Let’s add some basic style to product name and description.
.description { padding-top: 10px; margin-right: 60px; width: 115px;
}
.description span { display: block; font-size: 14px; color: #43484D; font-weight: 400;
}
.description span:first-child { margin-bottom: 5px;
}
.description span:last-child { font-weight: 300; margin-top: 8px; color: #86939E;
}

Następnie musimy dodać element ilość, gdzie mamy dwa przyciski służące do dodawania lub usuwania ilość produktu. Po pierwsze, upewnij CSS i wtedy będziemy robić to działa poprzez dodanie JavaScript.

.quantity { padding-top: 20px; margin-right: 60px;
}
.quantity input { -webkit-appearance: none; border: none; text-align: center; width: 32px; font-size: 16px; color: #43484D; font-weight: 300;
}
button[class*=btn] { width: 30px; height: 30px; background-color: #E1E8EE; border-radius: 6px; border: none; cursor: pointer;
}
.minus-btn img { margin-bottom: 3px;
}
.plus-btn img { margin-top: 2px;
}
button:focus,
input:focus { outline:0;
}

I ostatni, który jest całkowitą cenę produktu.

.total-price { width: 83px; padding-top: 27px; text-align: center; font-size: 16px; color: #43484D; font-weight: 300;
}

Załóżmy również, że czuły dodając następujące wiersze kodu:

@media (max-width: 800px) { .shopping-cart { width: 100%; height: auto; overflow: hidden; } .item { height: auto; flex-wrap: wrap; justify-content: center; } .image img { width: 50%; } .image, .quantity, .description { width: 100%; text-align: center; margin: 6px 0; } .buttons { margin-right: 20px; }
}

To wszystko na CSS.

JavaScript

Zróbmy ożywione serca kiedy klikamy na nim, dodając następujący kod:

$('.like-btn').on('click', function() { $(this).toggleClass('is-active');
});

Chłodny! Teraz zróbmy pracę Liczba przycisków.

$('.minus-btn').on('click', function(e) { e.preventDefault(); var $this = $(this); var $input = $this.closest('div').find('input'); var value = parseInt($input.val()); if (value > 1) { value = value - 1; } else { value = 0; } $input.val(value);
});
$('.plus-btn').on('click', function(e) { e.preventDefault(); var $this = $(this); var $input = $this.closest('div').find('input'); var value = parseInt($input.val()); if (value < 100) { value = value + 1; } else { value =100; } $input.val(value);
});

I to jest nasza ostateczna wersja:

Zapowiedź

Tutorial jest zrobiona! Mam nadzieję, że się podobało i dowiedziałem się czegoś nowego. Jeśli masz jakieś pytania, ping mnie!

Pobierz Koszyk UI

Pobieranie

HTML - jak wyświetlić na zakupy Wózek po prawej strony - stos ...

Na naszej stronie transakcji mamy listę produktów i opcje wysyłki obrębie składanego menu .
I nie wydaje się, aby ją rozszerzyć. Znalazłem odpowiednie przejście w _cart.less .

Czy ktoś jest w stanie mi pomóc w tej kwestii?

wprowadzić opis obrazu tutaj

 //
// Shopping cart
// ---------------------------------------------
.checkout-cart-index { .page-main { padding-left: 0; padding-right: 0; } .page-title-wrapper { padding-left: @layout__width-xs-indent; padding-right: @layout__width-xs-indent; }
}
// Cart container
.cart-container { .form-cart { &:extend(.abs-shopping-cart-items all); }
}
// Summary block
.cart-summary { &:extend(.abs-add-box-sizing all); .lib-css(background, @sidebar__background-color); margin-bottom: @indent__m; padding: 1px 0 @indent__m; background: #fbfbfb; border: 1px solid #ddd; border-radius: 8px; > .title { .lib-font-size(24); display: none; font-weight: @font-weight__light; margin: 12px 0; } .block { form:not(:last-of-type) { .fieldset { margin: 0 0 @indent__m; } } .price { font-weight: @font-weight__bold; } .field { margin: 0 0 16px; &.note { display: none; } } .actions-toolbar { > .primary { text-align: left; .action.primary { &:extend(.abs-revert-to-action-secondary all); width: auto; } } } .fieldset.estimate { > .legend, > .legend + br { &:extend(.abs-no-display all); } } &:extend(.abs-cart-block all); .title { strong { .lib-font-size(14); font-weight: @font-weight__semibold; } } .item-options { margin: 0 0 16px; .field { .radio { float: left; margin-right: 8px; } .radio { + .label { display: block; margin: 0; overflow: hidden; font-weight: 400; } } } } } .page-main & { .block { margin-bottom: 0; } } .checkout-methods-items { &:extend(.abs-reset-list all); margin: @indent__base 0 0; padding: 0 @mobile-cart-padding; text-align: center; .action.primary.checkout { &:extend(.abs-button-l all); width: 100%; } .item { margin-bottom: @indent__m; &:last-child { margin-bottom: 0; } } } .message { padding-left: @indent__base; > *:first-child:before { display: none; } } &:extend(.abs-adjustment-incl-excl-tax all);
}
// Totals block
.cart-totals { &:extend(.abs-sidebar-totals all); tbody, tfoot { .mark { text-align: left; } }
}
// Products table
.cart { &.table-wrapper { .product-item-name > a { font-size: 14px; &, &:hover { color: @_link-color; } } .product-image-container { border: 1px solid #ccc; border-radius: 5px; padding: 3px; } .cart { thead { tr th.col { border-bottom: @border-width__base solid @border-color__base; padding-bottom: 12px; padding-top: 24px; font-size: 14px; font-weight: 600; } } tbody { td { border: 0; } } > .item { border-bottom: @border-width__base solid @border-color__base; position: relative; } } .col { vertical-align: middle; &.price, &.subtotal, &.msrp { font-size: 14px; text-align: center; &:extend(.abs-incl-excl-tax all); } &.subtotal .price { color: @theme-color; } &.qty { text-align: center; .label { &:extend(.abs-visually-hidden all); } .input-text { text-align: center; width: 45px; } .field.qty { min-width: 67px; } } > .price { .lib-css(color, @primary__color__lighter); .lib-font-size(18); font-weight: @font-weight__bold; } } .item-actions { td { padding-bottom: 0; padding-left: @mobile-cart-padding; padding-right: @mobile-cart-padding; white-space: normal; } } .item { .col.item { display: block; min-height: 75px; padding: 15px @mobile-cart-padding @indent__s 90px; position: relative; } } .actions-toolbar { &:extend(.abs-add-clearfix all); min-height: 20px; padding-bottom: 30px; position: relative; > .action-edit, > .action-delete { position: absolute; right: 16px; top: 0; .lib-icon-font( @icon-edit, @_icon-font-size: 18px, @_icon-font-line-height: 20px, @_icon-font-text-hide: true, @_icon-font-color: @minicart-icons-color, @_icon-font-color-hover: @primary__color, @_icon-font-color-active: @minicart-icons-color ); } > .action-delete { &:extend(.abs-action-button-as-link all); right: 0; .lib-icon-font-symbol( @_icon-font-content: @icon-trash ); } } .action { margin-right: 15px; &:last-child { margin-right: 0; } &.help.map { &:extend(.abs-action-button-as-link all); font-weight: @font-weight__regular; } } .product { &-item-photo { display: block; left: @mobile-cart-padding; max-width: 65px; padding: 0; position: absolute; top: 15px; width: 100%; border: 0; border-radius: 0; } &-item-name { .lib-font-size(18); display: block; margin: 0; margin-top: 10px; } } .gift-registry-name-label { &:after { content: ':'; } } // Product options .item-options { margin-bottom: 0; &:extend(.abs-product-options-list all); &:extend(.abs-add-clearfix all); } .product-item-name + .item-options { margin-top: @indent__base; } .cart-tax-total { &:extend(.abs-tax-total all); &-expanded { &:extend(.abs-tax-total-expanded all); } } .product-image-wrapper { &:extend(.abs-reset-image-wrapper all); } .action.configure { display: inline-block; margin: @indent__s 0 0; } .item .message { margin-top: @indent__base; } }
}
// Discount
.cart-discount { border-bottom: @border-width__base solid @border-color__base; clear: left; &:extend(.abs-discount-block all);
}
// Empty cart
.cart-empty { padding-left: @layout__width-xs-indent; padding-right: @layout__width-xs-indent;
}
.cart-tax-info + .cart-tax-total { display: block;
}

}

Jak stworzyć KOSZYK UI za pomocą CSS i JavaScript ...

wózki eCommerce muszą być użyteczne i dostępne dla wszystkich użytkowników. Twoim celem jest zwiększenie konwersji i trzymać ludzi zaangażowanych podczas kasy, a najlepszym sposobem na to jest czystą projekt, który zachęca do aktywności użytkowników.

Czytaj więcej:   DR internecie LIGHT dla Mac

CodePen ma mnóstwo wolnych open source koszyków można liftingu nadwozia na dowolny cel. I wziąłem wolność gromadzenia moich ulubionych w tym artykule.

The Web Designer Toolbox
nieograniczony pobrania: Szablony 500,000+ sieci, motywy, Wtyczki & Design Aktywa


płaski Koszyk

Nie ma jednak zaprzeczyć popularność płaskiej konstrukcji. To działa dla wszystkich typów stron internetowych, a to pomaga projektantom skupić się bardziej na funkcjonalności zamiast estetyki.

Dlatego ten płaski koszyk sprawia doskonałe źródło dla każdego budynku stronę eCommerce realizacji transakcji. Kolory są łatwe do aktualizacji i funkcje interfejsu działają tak samo, niezależnie od stylu układu.

Nie sądzę, płaska konstrukcja jest rozwiązaniem dla każdego projektu, ale w dobrym tego scenariusza pióra może pracować również jako szablon wyjściowej.

Tabela-Free UI

Wiele stron kasowe użyciu tabel do porządkowania danych, ale ten przykład Alex Rodrigues wykorzystuje div zamiast.

Jest w pełni reaguje, więc powinien wyglądać świetnie bez względu na to, z jakiego urządzenia używasz. Każdy rząd posiada wystarczająco dużo danych, aby prawidłowo liftingu nadwozia i utrzymać wszystko zorganizowane, nawet na bardzo małe ekrany. A kod CSS korzysta z kompasu, aby zaoszczędzić czas oraz bezpłatne Google Czcionki Webfonts dla trochę stylu.

Układ jest bardzo goły jeszcze łatwo dostosować z odrobiną tłuszczu łokcia.

Koszyk Koszyk pyszne

Nie mogę sobie wyobrazić tej pracy na prawdziwym miejscu, ale na UI / UX eksperymentu to jest to całkiem fajne. Self-zatytułowanych Koszyk Pyszne Koszyk działa jak pieczywo / Słodycze sklepu internetowego ze zdjęciami różnych deserów.

Można przesunąć kursor w lewo / w prawo, aby przejść przez karuzeli lub machnięcia na urządzeniu mobilnym. Każdy element posiada Plus / Minus ikony dodawania elementów lub usuwanie ich z zamówieniem, plus ikonę X, aby usunąć go całkowicie z koszyka.

Całość zbudowana jest na Sass, szczupły, i jQuery, więc jest to jeden kawał projektu frontend! Jeśli szukasz wnikliwie jakiś wielki kod, to pióro jest warte oszczędności.

Elastyczny projekt

Oto kolejny prosty koszyk reagujący interfejs zbudowany na Sass i stolik-free.

Lubię ten czuły kasę trochę więcej niż inni, ponieważ wartości graniczne czują się bardziej naturalne. Nawet na mniejszych ekranach koszyka pozycje nie czuć ścisku lub na miejscu.

Wszystkie przyciski „Usuń” działa poprzez JavaScript i wejście numeryczne pól ceny automatycznej aktualizacji. To jest dobre dla frontend koszyka strony, na której kupujący może chcesz zwiększyć ilości przed zapłatą i zobaczyć oszacowanie całkowitych kosztów.

Czytaj więcej:   Jak zobaczyć hasło logowania do Google

jQuery Koszyk

Pióro działa bardziej jak szkielet niż pełny stronie transakcji, ale jest to doskonały punkt wyjścia. Twórca Khurram Alvi stworzył ten czuły koszyk z podstawowego HTML / CSS i trochę jQuery.

Jest w pełni czułe i wejścia ilość pracy jak można się spodziewać. Jedną miłą rzeczą jest prostota tego koszykiem projektu. To nie nakłada żadnych kolorów, czcionek i tekstur w układzie.

Ktoś chce zbudować nowy wózek od podstaw może zacząć tutaj, ponieważ jest to łatwe do zbudowania i na restrukturyzację.

CodePen Wyzwanie Koszyk

Co jakiś czas pojawiają się nowe wyzwania CodePen się pytaniem deweloperów do tworzenia różnych interfejsów, takich jak strony rejestracyjny lub modalnych okien. Pióro przez Žiga Miklič pochodzi wyzwanie dla koszyka UIs i to arcydzieło rozwoju frontend.

Podczas dodawania / usuwania elementów z wózka zauważysz ceny automatycznie aktualizować z małym animacji przesuwnych. Można także kliknąć dowolny obraz produktu, aby usunąć go z wózka bez problemów. Te małe cechy dodać wiele do interfejsu i uczynić klonowanie wietrze.

Nawet funkcja kasa ma swój własny animowany funkcji, chociaż nie jest podłączony do niczego na backend.

Ten interfejs jest fantastyczny we wszystkich obszarach kodu, projektowania, użyteczności i dodatkowych animacji posypać na wierzchu.

Przesuwane Cart UI

Kartach widżetów umożliwiają dodawanie treści na jednej stronie i dać użytkownikom władzę nad tą treścią. W tym koszyku przesuwnych można przełączać między samego koszyka oraz listę zapisanych „Ulubione” przedmiotów.

Żadna z cech kasowych rzeczywiście działa, więc nie można fave lub dodać / usunąć elementy do koszyka. Ale elementy interfejsu są na miejscu, więc trochę jQuery magia naprawić.

Nadal jestem pod wrażeniem, jak czysty to koszyk wygląda i niepowtarzalny-jeszcze-użyteczny interfejs tab.

Dynamiczny Store & Koszyk

Mieszanie sklepu i na zakupy Wózek na jednego interfejsu to trudne zadanie, ale Olivia Cheng got to zrobić w tym piórem.

Wykorzystuje szerokie miniatury w konfiguracji sieci w przycisk „dodaj do koszyka” przy aktywowaniu. Kliknij, aby dodać pozycję wyżej z auto-aktualizacji cen. Unikalną cechą jest ilość dodanej na górze miniatury poz.

To może się okazać niejasna na prawdziwym koszyka ale jeśli numery były nieco mniejszy byłby to świetny sposób na zaoszczędzenie miejsca.

Czysty Koszyk

Twórca Bart Veneman stworzył ten czysty koszyk jako prosty szablon interfejsu. To automatycznie oblicza łączną cenę i nawet zawiera podatki obok przycisku transakcji.

Wszystkie te funkcje działają poprzez dynamiczne JavaScript i zaskakująco to pióro wykorzystuje Zepto nad jQuery. To jest dobre dla deweloperów, którzy preferują biblioteki Zepto, ale tak naprawdę każdy może odebrać ten kod i przerobienie go do potrzeb każdego szablonu.

Proste Koszyk z Vue.js

kodowanie nakładka z Vue.js sprawia templating dużo prostsze. I to pióro jest przykładem dynamicznego koszyka praktycznie zbudowany na fundamencie JavaScript.

Wózek z każdym kliknięciem automatycznych aktualizacji, dzięki czemu można dodawać / usuwać elementy i zobaczyć wyniki natychmiast. Górny prawy przycisk otwiera aktualny koszyk w modalnego okna modalnego przy użyciu komponentu Bootstrap za.

Jeśli podoba Ci się składni Vue.js następnie ten szablon jest doskonałym miejscem, aby rozpocząć budowę koszyk. Łatwo dostosować i powinien działać dobrze we wszystkich przeglądarkach.

Koszyk domeną

Oto jeden z moich ulubionych sklepów koszyka projekty wzorowane rejestratora domeny. Coder Jesse Bilsten został szczegółowo z tego interfejsu w tym dziale płatności i wymaganego obszaru T & C.

Trzeba kliknąć przycisk „Zgadzam się” przed zakończeniem procesu finalizacji transakcji. To niewielka jeszcze cenną cechą dla niektórych witryn e-commerce, i bardzo podoba mi się układ dwukolumnowy.

I ten projekt jest całkowicie reaguje więc można sklonować go do użytku w prawie każdym systemie eCommerce.

Każdy fragment na tym stanowisku obejmuje genialny projekt koszyk UI, ale istnieje wiele innych dostępnych w Internecie. Kopać nieco głębiej realizacji transakcji strony wyszukiwania CodePen i przeglądanie powiązanych tagów więcej.

Wybierz swój język

polskiangielski niemiecki hiszpański francuski włoski portugalski turecki arabski ukraiński szwedzki węgierski bułgarski estoński Chiński (uproszczony) wietnamski rumuński tajski słoweński słowacki serbski malajski norweski łotewski litewski koreański japoński indonezyjski hinduski hebrajski fiński grecki holenderski Czech duński chorwacki Chiński (tradycyjny) Filipińska urdu Azeybardzhansky ormiański Białoruski bengalski gruziński kazachski Kataloński mongolski rosyjski Tadzhitsky Tamil'skij telugu Uzbetsky


Dodaj komentarz

Twój e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *