Vybudujte na první pohled odpověď na první stránku s Bootstrap

Stránka nákupního košíku elektronického obchodu je nejpřirozenějším zobrazením tabulkových údajů, které obsahují název a cenu za každou položku, kterou si zákazník zvolil. Tabulky HTML však mohou být obtížné číst na smartphonech. Použití rámce jako Bootstrap může pomoci zlepšit zážitek z nakupování v mobilních zařízeních.

V souvislosti s platebním tokem je stránka nákupního košíku elektronického obchodu souhrnem všeho, co si zákazník zvolil. Je to poslední zastávka před spuštěním procesu platby. Zákazníci často používají stránku nákupního košíku ke kontrole jejich výběru nebo ke změnám.

Nákupní košík přátelský k mobilu

Na obrazovce stolního nebo přenosného počítače obsah stránky nákupního košíku často vypadá jako tabulka. Na následujícím obrázku jsou viditelné dva produkty. Každý je ve svém vlastním řádku. Každý řádek má pět sloupců, které zobrazují obrázek produktu, název produktu, jednotkovou cenu (cenu za každou), vybrané množství a celkovou cenu produktu.

Je obvyklé, že stránka elektronického nákupního košíku má tabulkový rozvržení s každou položkou v řádku.

Je obvyklé, že stránka elektronického nákupního košíku má tabulkový rozvržení s každou položkou v řádku.

Toto tabulkové uspořádání vypadá dobře na poměrně velkých obrazovkách. Ale na smartphonu se to dobře netýká.

Rozložení stránky košíku by se mělo přizpůsobit mnohem užší velikosti obrazovky. V tomto příkladu níže naleznete simulace obrazovky pro zařízení iPhone 6 a Nexus 5X. V obou případech jsou informace o výrobku zobrazeny svisle, přičemž obrázek produktu je nahoře. Název produktu je další a další informace o produktu jsou pod ním.

Rozložení tabulek nemusí na poměrně malém mobilním zařízení fungovat dobře, takže může mít větší smysl pro uložení informací.

V rovnováze v tomto článku budu popisovat, jak jsem postavil odpověď, mobilní první checkout stránku pro Shopify obchod pomocí Bootstrap 3 rámec. Cílem není dát vám recept, který byste mohli sledovat krok za krokem, ale spíše vás seznámili s Bootstrapem a jak byste mohli vymezit stránku nákupního košíku.

Základní rozložení stránky

Kontextem pro tento článek je téma Shopify. Je zde soubor master layout, theme.liquid, který přináší záhlaví stránky, zápatí, CSS a skripty. Nebudu pokrývat detaily, stačí vědět, že je zahrnut Bootstrap a hlavička, která se objeví v některých snímkách obrazovky, pochází ze samostatného souboru.

Shopifyův templovací jazyk se nazývá Liquid, tedy kapalina rozšíření. Použiji trochu tekutiny, abych získal informace o produktu, ale můj důraz bude kladen na třídy HTML, CSS a Bootstrap.

<div class = "col-xs-xNUMX"> <div class = "page-header"> <h12> Nákupní košík <small> That malý kbelík radosti </ small> </ h1> </ div> </ div> </ div> <! - end .row -> </ div> <!

Tato první část HTML nastavuje Bootstrap mřížka. Všimněte si první div prvek třídy, kontejnerová tekutina. Tato třída provede rozložení celé šířky.

<div class = "kontejner-kapalina"> ... </ div>

Další div element vytvoří řádek mřížky Bootstrap. Z každé schránky jsou v každém řádku sloupce 12.

<div class = "container-fluid"> <div class = "řádek"> ... </ div> </ div>

Třetí div třída prvku specifikuje typ mřížky, sm, a počet sloupců. Bootstrap má extra malou (xs), malou (sm), střední (md) a velkou (lg) síťovou volbu. Třída příkladů, col-xs-12, způsobí, že uzavřený obsah přebírá všechny 12 dostupných sloupců na velikosti mřížky.

<div class = "col-xs-xNUMX"> </ div> </ div> </ div>

Obsah tohoto prvního řádku je záhlaví stránky.

<div class = "page-header"> <h1> Váš nákupní košík <small> That little bucket of joy </ small> </ h1> </ div>

Ve výchozím nastavení zobrazí Bootstrap malý text v řádku a zarovná celou hlavičku stránky doleva. V případě smartphonu bych radši nechal hlavičku stránky vystředit a malý text se objevil na svém řádku. Přidávám tedy dvě směrnice CSS do vlastní šablony stylů, která převádějí Bootstrap.

.page-header {text-align: center; }}
.page-header malý {display: block; }}

Bootstrap je nejprve mobilní. Proto v příručce CSS ukládám směrnice o stylech pro mobilní zařízení a v mediálním dotazu umísťuji změny pro větší obrazovky. Zatímco upřednostňuji středové uspořádání na mobilních zařízeních, rád se mi líbí výchozí nastavení Bootstrapu pro notebooky a stolní počítače. Takže přidám níže uvedené styly, abyste zrušili změny na obrazovkách 768 pixelů široký nebo širší.

/ * Malá zařízení (tablety, 768px a nahoru) * / @ media (min-šířka: 768px) {
  .page-header {text-zarovnání: vlevo; }}
  .page-header malý {display: inline; }}
}

Na stránce nákupního košíku se zobrazí záhlaví obsahu. Vlastní deklarace CSS centrum textu a umístit malé titulky na jeho vlastní řádek.

Na stránce nákupního košíku se zobrazí záhlaví obsahu. Vlastní deklarace CSS centrum textu a umístit malé titulky na jeho vlastní řádek.

Formulář nákupního košíku

Poté vytvořím nový řádek a nastavím šířku sloupce 12 div živel. Bude to mateřský prvek, který bude obsahovat obsah košíku.

<div class = "row"> <div class = "col-xs-xNUMX"> </ div>

Když shopper navštíví stránku s košíkovou, chci mu dát možnost aktualizovat jeho výběr. Existuje několik způsobů, jak bych to mohl dosáhnout, ale zde jsem použil jednoduchý formulář HTML, který bude při změně volat server Shopify. Tento formulář by měl být vnořen uvnitř řádku a sloupce 12, který jsem právě napsal.

<div class = "row"> <div class = "col-xs-xNUMX"> <

Vnořené řádky a informace o produktu v košíku

Jen uvnitř prvku formuláře vložím značku iteračního nápisu Shopify Liquid. Tato značka pro tekutiny bude mít přístup k předmětu košíku a smyčce nad každým produktem v košíku. Jakýkoli kód umístěný uvnitř otevřených a zavíracích kapalinových štítků se jednou pro každý produkt v košíku opakuje. Aktuální produkt ve smyčce bude označován jako položka.

{% pro položku v cart.items%}
{% endfor%}

Bootstrap nám umožňuje vnořit řádky a sloupce v řádcích a sloupcích. Nesting umožňuje rozdělit stránku. Vytvořil jsem sloupec 12 div živel. Vložil jsem do něj formulář a teď se chystám rozdělit tento prostor tak, aby obsahoval informace o produktu.

{% pro položku v cart.items%} <div class = "row-row row"> <div class = "col-xs-12 col-sm-2" <a href= "/ cart / change? line = {{forloop.index}} & amp; quantity = 0"> <span class = "glyphicon glyphicon-remove-sign" a> </ div> <a href="{{ item.url | v rámci: collections.all }}"> <img src = "{{item | img_url: 'medium'}} alt =" {{item. title = escape}} "class =" img-responsive "> </a> </ div> </ div> <!

V tomto bloku kódů je třeba uvést několik věcí.

Nejprve si všimněte řádku div má další třídu, řádek košíku. Toto je třída, kterou jsem vytvořil pro přidání některých vlastních stylů a přepisů.

<div class = "řádek košíku-řádek">

Za druhé, v další části jsou dvě třídy sloupců div živel. Zde informuji prohlížeč (prostřednictvím tříd Bootstrap), aby přiložený obsah vyplnil všechny sloupce 12, když je obrazovka menší než 768 pixelů. Ale když je obrazovka 768 pixelů široká nebo širší (sm grid), chci, aby přiložený obsah pouze obsadil dva ze sloupců dostupných pro 12.

<div class = "kol-xs-12 col-sm-2">

Uvnitř toho div prvek, mám malý odkaz, který má odstranit aktuální položku z nákupního košíku a obrázek produktu. Tekutina tahá těžké zvedání. Všimněte si však, že obraz má třídu img-responsive. Jedná se o třídu Bootstrap, která změní velikost obrázku tak, aby nepřeplňovala svůj nadřazený prvek.

K tomuto kódu přidám tři vlastní deklarace CSS do mého stylu. První z nich upravuje okraj a polstrování řady, čímž účinně překračuje výchozí hodnoty Bootstrapu. Třetí popis stylu bude zaměřovat citlivý obraz v jeho nadřazeném prvku, pokud je nadřazený prvek širší než obraz v plné velikosti.

.cart-řádek {margin: 10px 0; polstrování: 10px 0; border-bottom: 1px solid #e1e1e1; }}
.kart-řádek div {text-align: center; }}
.cart-řádek img.img-reagující {margin: 0 auto; }}

Pokud jsme se zatím zastavili, abychom se na stránku našeho nákupního košíku podívali, objevili by se pro každou položku v košíku poměrně velký obrázek produktu.

V mobilním uspořádání je obrázek produktu zobrazen v horní části každého &quot;řádku&quot; informací o produktu.

V mobilním uspořádání je obrázek produktu zobrazen v horní části každého "řádku" informací o produktu.

Další část značky přidá název produktu, barvu a velikost. The div element, opět má dvě specifikace sloupce. Na obrazovce, která je užší než 768 pixelů, bude titul přebírat celou šířku (všechny 12 dostupných sloupců mřížky), ale na větší obrazovce vyplní pouze čtyři dostupné sloupce mřížky.

<div class = "col-xs-12 col-sm-4"> <h3> <a href="{{ item.url }}"> {{item.product.title}} </a> </ h3 > {% pokud item.variant.title neobsahuje výchozí hodnotu%} {{item.variant.title}} {% endunless%} </ div>

Bit značky Liquid přidává název produktu, název a variantu produktu, což je v tomto příkladu informace o velikosti a barvě.

Pro každou položku v nákupním košíku se pod zobrazením produktu zobrazí název produktu a kombinace barev a velikostí.

Pro každou položku v nákupním košíku se pod zobrazením produktu zobrazí název produktu a kombinace barev a velikostí.

Odtud prostě přidávám bloky. Každý blok v mřížce obsahuje některé informace o produktu v košíku.

Další blok, pokud chcete, zobrazuje jednotkovou cenu produktu v košíku. Všimněte si, že na nejmenších obrazovkách a dvou sloupcích na větších obrazovkách zabírá pět dostupných sloupců. Tekutina dostane cenu (která je uložena v penny) a převede ji na dolary, včetně dolaru a desetinné čárky.

<div class = "col-xs-5 col-sm-2"> <h3 class = "h3-price"> {{item.price | money}} </ h3> <small> každý </ small> </ div>

Chci, aby se cena zobrazovala ve speciálním písmu. Takže používám zvyk h3-cena třída. Zde jsou deklarace stylů, které odkazuje.

.h3-cena {barva: rgb (20, 80, 150); font-family: "Kyslík Mono", monospace; }}

Oxygen Mono je volné písmo k dispozici ve fontech Google.

Jako stranou služba Shopify umožňuje používat Sass, který je předzpracován pro CSS. Tak jsem schopen používat proměnné reprezentovat věci jako barva písma a rodina. Výsledkem toho je, že můj skutečný SCSS (syntaxe Saas) vypadal následovně a to, co vidíte, bude výsledek po zpracování CSS.

@import 'https://fonts.googleapis.com/css?family=Oxygen+Mono';
$ sweet-blue-primární: rgb (20, 80, 150); $ sweet-monospaced: "kyslík mono", monospace;
.h3-cena {barva: $ sweet-blue-primární; font-family: $ sweet-monospaced; }}

Vzhledem k tomu, že cenový blok zabírá pouhých pět dostupných sloupců mřížky, je zarovnán doleva pod názvem produktu a obrázkem.

Vzhledem k tomu, že cenový blok zabírá pouhých pět dostupných sloupců mřížky, je zarovnán doleva pod názvem a obrazem produktu.

Další část uvádí informace o množství vybraném pro konkrétní produkt v košíku. Tento blok sleduje stejný vzorec jako předchozí bloky, ačkoli používá vstupní prvek formuláře.

<div class = "form-group"> <input type = "number" název = "aktualizace []" id = "updates _ {{item.id }} "value =" {{item.quantity}} "min =" 7 "class =" cart-qty-input "

Společnost div zabalení tohoto bloku zabere sedm dostupných sloupců mřížky 12 na extra malých obrazovkách. V kombinaci s jednotkovou cenou div, který zabírá pět mřížkových sloupců, budou vyplněny všechny sloupce 12. Na větších obrazovkách vstupní množství zachycuje dva sloupce mřížky.

Všimněte si, že forma-skupina třída je vestavěna do Bootstrap a poskytuje základní styly pro vstup. The košík-qty-vstup je moje vlastní třída. Nahradí některé výchozí styly Bootstrap a přidá několik vlastních. Všimněte si, že proměnná rodiny fontů je dalším příkladem SSS CSS a vyžaduje předběžný procesor Sass.

.cart-qty-input {velikost písma: 1em; font-family: $ sweet-monospaced; horní okraj: 10px; polstrování: 10px; šířka: 95%; hranice: 1px černá; }}

Počet vybraných jednotek nebo množství se vyskytuje napravo od ceny na stejné lince.

Počet vybraných jednotek nebo množství se vyskytuje napravo od ceny na stejné lince.

Pokud budeme držet blokovou analogii, v konečném bloku se zobrazí součet daného produktu. Není zde nic nového.

<div class = "col-xs-12 col-sm-2"> <h3 class = "h3-cena"> {{item.line_price | money}} </ h3> <small> položka celkem </ small> </ div>

Celková cena za tuto položku v košíku je uvedena v dolní části. V tomto příkladu, jelikož množství je jedno, jednotková cena a celková cena jsou stejné. Pokud by množství bylo větší, celková cena by byla větší.

Celková cena za tuto položku v košíku je uvedena v dolní části. V tomto příkladu, jelikož množství je jedno, jednotková cena a celková cena jsou stejné. Pokud by množství bylo větší, celková cena by byla větší.

Sčítání

S trochou HTML a CSS a nějakou nápovědou od Bootstrapu jsem dokázala vytvořit skvěle vypadající stránku košíku, která zobrazuje informace o výrobku vertikálně na malých mobilních obrazovkách, ale jako tabulka na relativně větších obrazovkách.

Na větších obrazovkách položí Bootstrapova mřížka produkty ve vozíku jako stůl.

Na větších obrazovkách položí Bootstrapova mřížka produkty ve vozíku jako stůl.

Zdroj

Napsat komentář

Tyto stránky používají Akismet k omezení spamu. Zjistěte, jak jsou vaše údaje komentářů zpracovávány.