Byg en Responsive, Mobil-første Kurvside med Bootstrap

En side med e-handels-indkøbskurv er naturligvis et display af tabulardata, der angiver titlen og prisen for hvert element, som en shopper har valgt. Men HTML-tabeller kan være vanskelige at læse på smartphones. Brug af en ramme som Bootstrap kan hjælpe med at forbedre mobil shopping oplevelsen.

I forbindelse med betalingsstrøm er e-handels-indkøbskurven en oversigt over alt, hvad en shopper har valgt. Det er det sidste stop, inden du starter checkout processen. Shoppere bruger ofte indkøbskurvsiden til at gennemgå deres valg eller foretage ændringer.

Mobilvenlig kurvside

På en stationær eller bærbar computerskærm ser et indhold på indkøbskurvets side ofte ud som et bord. I eksemplet nedenfor er der to produkter synlige. Hver er i sin egen række. Hver række har fem kolonner, der viser et billede af produktet, produktets titel, enhedsprisen (pris hver), den valgte mængde og den samlede pris for produktet.

Det er almindeligt for en e-handels-indkøbskurvside at have et bordlignende layout med hvert emne i træk.

Det er almindeligt for en e-handels-indkøbskurvside at have et bordlignende layout med hvert emne i træk.

Dette bordlignende layout ser godt ud på relativt store skærme. Men det oversætter ikke godt på en smartphone.

Et vogn side layout skal tilpasse sig en meget smalere skærmstørrelse. I dette eksempel nedenunder er der skærm simuleringer til en iPhone 6 og Nexus 5X. I begge tilfælde vises produktoplysningerne lodret, med produktbilledet ovenpå. Produktets titel er næste, og yderligere produktoplysninger er under det.

Tabulære layouter fungerer muligvis ikke godt på en relativt lille mobilenhed, så det kan være mere fornuftigt at stable informationen.

I balancen i denne artikel vil jeg beskrive, hvordan jeg opbyggede en lydhør, mobil-første udkørselsside for en Shopify-butik ved hjælp af Bootstrap 3 ramme. Målet er ikke at give dig en opskrift, som du kan følge trin for trin, men snarere at introducere dig til Bootstrap, og hvordan du kan lægge en indkøbskurvside.

Grundlæggende sidelayout

Konteksten til denne artikel er et Shopify-tema. Der er en master layout fil, theme.liquid, der bringer i sidens overskrift, footer, CSS og scripts. Jeg kommer ikke til at dække oplysningerne, bare ved at Bootstrap er inkluderet, og overskriften, der vises i nogle af skærmbillederne, kommer fra en separat fil.

Shopify's templerende sprog hedder Væske, således væske udvidelse. Jeg vil bruge lidt væske til at hjælpe med at få produktinformation, men min vægt vil være på HTML, CSS og Bootstrap-specifikke klasser.

<div Class = "container-fluid"> <div class = "row"> <div class = "col-xs-12"> <div class = "side-header"> <h1> Din indkøbskurv <small> At lille spand af glæde </ small> </ h1> </ div> </ div> </ div> <! - end .row -> </ div> <! - end .container-fluid ->

Denne første sektion af HTML opretter Bootstrap gitter. Bemærk den første div elementets klasse, beholder-væske. Denne klasse vil gøre layoutet fuld bredde.

<div class = "container-fluid"> ... </ div>

Den næste div elementet etablerer rutenettet Bootstrap. Ud af boksen har hver række 12 kolonner.

<div class = "container-fluid"> <div class = "række"> ... </ div> </ div>

Den tredje div element klasse angiver gitter type, sm, og antallet af kolonner. Bootstrap har en ekstra lille (xs), lille (sm), medium (md) og stor (lg) gitter option. Eksemplet klassen, col-xs-12, får det medfølgende indhold til at optage alle 12 af de tilgængelige kolonner på gitterstørrelserne.

<div class = "container-fluid"> <div class = "row"> <div class = "col-xs-12"> ... </ div> </ div> </ div>

Indholdet i denne første række er en sideoverskrift.

<div class = "page-header"> <h1> Din indkøbskurv <small> Den lille skov med glæde </ small> </ h1> </ div>

Bootstrap vil som standard vise den lille tekst inline og justere hele sideoverskriften til venstre. For en smartphone vil jeg hellere have sidens overskrift centreret, og den lille tekst vises på sin egen linje. Så jeg tilføjer to CSS-direktiver til mit eget stylesheet for at tilsidesætte Bootstrap.

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

Bootstrap er mobil først. Jeg placerer derfor stildirektiver for mobile enheder i hovedafsnittet i CSS'en og sætter ændringer til større skærme i en medieforespørgsel. Mens jeg foretrækker det centrerede layout på mobil, kan jeg godt lide Bootstraps standardindstillinger bedre til bærbare computere og desktops. Så jeg tilføjer stilarterne nedenfor for at fortryde mine ændringer på skærme 768 pixels bred eller bredere.

/ * Små enheder (tabletter, 768px og op) * / @media (min bredde: 768px) {
  .page-header {text-align: left; }
  .page-header small {display: inline; }
}

Indkøbskurvsiden viser indholdsoverskriften. De brugerdefinerede CSS-deklarationer centrerer teksten og sætter den lille undertekst på sin egen linje.

Indkøbskurvsiden viser indholdsoverskriften. De brugerdefinerede CSS-deklarationer centrerer teksten og sætter den lille undertekst på sin egen linje.

Indkøbskurvformularen

Derefter opretter jeg en ny række og opretter en 12-kolonne bred div element. Dette vil være forælderelementet, som vil indeholde indholdet af indkøbskurven.

<div class = "row"> <div class = "col-xs-12"> ... </ div> </ div>

Når en shopper besøger vognsiden, vil jeg give ham mulighed for at opdatere sine valg. Der er et par måder, jeg kunne have opnået dette, men her brugte jeg en simpel HTML-formular, der vil kalde Shopify-serveren, når der foretages en ændring. Denne formular skal nestes inde i rækken, og 12-kolonneelementet jeg skrev lige.

<div class = "row"> <div class = "col-xs-12"> <form handling = "/ cart" metode = "post" novalidate> ... </ form> </ div> </ div>

Nested Rows og Indkøbskurv Produkt Information

Lige inde i formelementet indsætter jeg en Shopify Liquid iteration tag. Dette væske-tag åbner vognobjektet og sløjfer over hvert produkt i vognen. Enhver kode placeret inde i de åbne og lukkende væsketags vil gentages en gang for hvert produkt i vognen. Det aktuelle produkt i løkken vil blive omtalt som vare.

{% for element i cart.items%}
{% endfor%}

Bootstrap gør det muligt for os at nede rækker og kolonner inden for rækker og kolonner. Nesting gør det muligt at opdele en side. Jeg har lavet en 12-kolonne bred div element. Jeg lægger en form inde i det, og nu skal jeg opdele det rum for at udarbejde produktinformationen.

{% for element i cart.items%} <div class = "row cart-row"> <div class = "col-xs-12 col-sm-2"> <div class = "pull-left"> <a </ span> = glyphicon glyphicon-remove-sign "aria-hidden =" true "> </ span> </ span> a> </ div> <a href="{{ item.url | inden: collections.all }}"> <img src = "{{item | img_url: 'medium'}}" alt = "{{item. title | escape}} "class =" img-responsive "> </a> </ div> </ div> <! - slut .row.cart-row -> {% endfor%}

Der er et par ting at bemærke i denne kodeblok.

Først bemærk at rækken div har en ekstra klasse, vogn-rækken. Dette er en klasse, jeg oprettede for at tilføje nogle brugerdefinerede styles og overrides.

<div class = "row cart-row">

For det andet er der to kolonne klasser i det næste div element. Her fortæller jeg browseren (via Bootstrap-klasser) for at lade det vedlagte indhold fylde alle 12-kolonner, når skærmen er mindre end 768 pixels bred. Men når skærmen er 768 pixels bred eller bredere (sm grid), vil jeg have det vedlagte indhold til blot at optage to af de tilgængelige 12 kolonner.

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

Inde i dette div element, jeg har et lille link, hvilket er meningen at fjerne den aktuelle vare fra indkøbskurven og produktbilledet. Væske løfter tungt her. Bemærk dog, at billedet har en klasse af img-responsive. Dette er en Bootstrap-klasse, der vil ændre billedets størrelse, så den ikke overlader dens overordnede element.

Til denne kode tilføjer jeg tre brugerdefinerede CSS-erklæringer i mit stylesheet. Den første af disse justerer rækkenes margen og polstring, hvilket effektivt overstyrer Bootstraps standardindstillinger. Den tredje stilbeskrivelse vil centrere det responsive billede i dets overordnede element, når dette overordnede element er bredere end billedet i fuld størrelse.

.cart-row {margin: 10px 0; polstring: 10px 0; grænse-bund: 1px solid #e1e1e1; }
.cart-row div {text-align: center; }
.cart-row img.img-responsive {margin: 0 auto; }

Hvis vi stoppede for at se på vores indkøbskurvside indtil videre, ville vi finde et relativt stort produktbillede, der vises for hver vare i vognen.

I mobillayoutet vises produktbilledet øverst på hver &quot;række&quot; af produktinformation.

I mobillayoutet vises produktbilledet øverst på hver "række" af produktinformation.

Det næste afsnit med markering vil tilføje produktnavn, farve og størrelse. Det div element har igen to søjle specifikationer. På en skærm, der er snævrere end 768 pixels, vil titlen tage hele bredden (alle 12 af de tilgængelige gittersøjler) op, men på en større skærm fylder den kun fire af de tilgængelige gittersøjler.

</ div> > {% medmindre item.variant.title indeholder 'Default'%} {{item.variant.title}} {% endunless%} </ div>

Bættet af væskemarkering tilføjer produktets URL, titel og variant titel, som i dette eksempel er størrelsen og farveinformationen.

For hver vare i indkøbskurven vises produktnavnet og farve- og størrelseskombinationen under produktbilledet.

For hver vare i indkøbskurven vises produktnavnet og farve- og størrelseskombinationen under produktbilledet.

Herfra er jeg blot ved at tilføje blokke. Hver blok i gitteret indeholder nogle oplysninger om et produkt i vognen.

Den næste blok, hvis du vil, viser enhedsprisen for produktet i vognen. Bemærk at det tager fem af de tilgængelige kolonner på den mindste af skærme og to kolonner på større skærme. Væske får prisen (som er opbevaret i pennies) og konverterer den til dollars, herunder dollartegnet og decimaltegnet.

<div class = "col-xs-5 col-sm-2"> <h3 class = "h3-pris"> {{item.price | penge}} </ h3> <small> hver </ small> </ div>

Jeg vil gerne have prisen til at vise i en special skrifttype. Så jeg bruger brugerdefineret h3-pris klasse. Her er de stilerklæringer, den refererer til.

.h3-pris {farve: rgb (20, 80, 150); font-familie: 'Oxygen Mono', monospace; }

Oxygen Mono er en gratis skrifttype tilgængelig på Google Fonts.

Som en side tillader Shopify mig at bruge Sass, som er en præprocessor til CSS. Således kan jeg bruge variabler til at repræsentere ting som skrifttypens farve og familie. Som følge heraf lignede min faktiske SCSS (Saas syntaks) som følgende, og hvad du ser ville være resultatet, efter at CSS blev behandlet.

@import 'https://fonts.googleapis.com/css?family=Oxygen+Mono';
$ søde-blå-primære: rgb (20, 80, 150); $ sweet-monospaced: 'Oxygen Mono', monospace;
.h3-pris {farve: $ søde-blå-primære; font-family: $ sweet-monospaced; }

Da prisblokken tager op kun fem af de tilgængelige gittersøjler, er den justeret til venstre under produktnavnet og billedet.

Da prisblokken tager op kun fem af de tilgængelige gittersøjler, er den justeret til venstre under produktnavnet og billedet.

Næste afsnit tilføjer oplysninger om den valgte mængde for et bestemt produkt i vognen. Denne blok følger samme mønster som tidligere blokke, selvom det anvender et formindgangselement.

<div class = "col-xs-7 col-sm-2"> <div class = "form-group"> <input type = "number" name = "opdateringer []" id = "opdateringer _ {{item.id } </ small> </ div> </ div> </ div>} "value =" {{item.quantity}} "min =" 0 "class =" cart-qty-input "> <small>

Den div Indpakning af denne blok optager syv af de tilgængelige 12-gittersøjler på ekstra små skærme. Når det kombineres med enhedsprisen div, der optager fem gitter kolonner, vil alle 12 kolonner blive udfyldt. På større skærme tager mængden input to grid kolonner.

Bemærk at formular-gruppe klassen er indbygget i Bootstrap og vil give de grundlæggende stilarter til input. Det cart-qty-input er min brugerdefinerede klasse. Det tilsidesætter nogle af standard Bootstrap-stilarter og tilføjer nogle få af mine egne. Bemærk skrifttype familie variabel er et andet eksempel på Sass CSS og kræver Sass preprocessor.

.cart-qty-input {font-size: 1em; font-family: $ sweet-monospaced; margin-top: 10px; polstring: 10px; bredde: 95%; grænse: 1px solid black; }

Antallet af valgte enheder eller mængder ligger til højre for prisen på samme linje.

Antallet af valgte enheder eller mængder ligger til højre for prisen på samme linje.

Hvis vi holder sammen med blokanalogi, viser den endelige blok totalen for et givet produkt. Der er ikke noget nyt her.

<div class = "col-xs-12 col-sm-2"> <h3 class = "h3-pris"> {{item.line_price | penge}} </ h3> <small> element i alt </ small> </ div>

Den samlede pris for denne vare i kurven er vist nederst. I dette eksempel, da mængden er en, er enhedsprisen og den samlede pris den samme. Hvis mængden var større, ville den samlede pris have været større.

Den samlede pris for denne vare i kurven er vist nederst. I dette eksempel, da mængden er en, er enhedsprisen og den samlede pris den samme. Hvis mængden var større, ville den samlede pris have været større.

Opsummering

Med blot en smule HTML og CSS og nogle hjælp fra Bootstrap kunne jeg oprette en flot cart-side, der viser produktinformation lodret på små mobilskærme, men som et bord på relativt større skærme.

På større skærme lægger Bootstraps gitter produkterne i vognen som et bord.

På større skærme lægger Bootstraps gitter produkterne i vognen som et bord.

Kilde

Giv en kommentar

Dette websted bruger Akismet til at reducere spam. Lær, hvordan dine kommentardata behandles.