Share
Da jeg i utgangspunktet planla denne serien, var det meningen å være en 15-artikkelserie, der vi planla å utvikle alle sidene av temaet, inkludert handlekurven, kassasider, innloggings- / påmeldingssider og brukerkontosider.
Men etter å ha skrevet de første 10 artiklene, innså jeg at vi allerede har forklart i detalj alle trinnene som kreves for å gjøre endringene på Magento-temasider, og redigering av de andre sidene vil bare være en gjentagelse av trinnene vi allerede har forklart før.
Derfor avslutter jeg serien i denne artikkelen, hvor vi skal fullføre produktsiden fra hvor vi forlot den i forrige artikkel, og jeg gir deg noen tips om hvordan du bruker teknikkene du har lært i denne serien å redigere resten av sidene selv.
Så la oss gjenoppta produktdetaljer siden tilpasning. Slik ser det nå ut:
Hvis vi sammenligner det med HTML-designen, har vi det slik:
For å få det til å se ut som vår HTML-design, må vi gjøre noen skriftendringer i produktrubrikken, pris og tilgjengelighet. Også i delen "Legg til i handlekurv" må vi endre bakgrunnsfargen og grensene. Annet enn det, må vi gjøre noen endringer med margene og polstring. Vi gjør det ved å legge til disse linjene i vår theme.css-fil:
/ ***** Produktdetaljer Side *********** / .more-views margin-top: 10px;. Produkt-image-thumbs text-align: center; .more- views. product-image-thumbs a: svever border-color: # b39a64; .more-views. product-image-thumbs a float: left; polstring: 3px; grense: 1px solid #cccccc; .products-detaljer font-family: Georgia, sans-serif; .products-description .name font-family: Georgia, sans-serif; skriftstørrelse: 30px; . Tilgjengelighet. På lager font-size: 11px; .products-details .products-description. price width: 50%; font-size: 25px; farge: # b39a64; font-weight: 500; .products-description. product-options border: none; polstring-venstre: 30px; .product-view .products-description .product-options .swatch-attr-etikett font-size: 11px; font-familie: arv; font-weight: normal; .products-description .product-options-bottom border: none; bakgrunn: ingen; padding-left: 30px; skriftstørrelse: 12px; polstring: 17px 0 0px 0; border-top: 1px solid #ccc; margin: 10px 30px 0 30px; . produkt-visning. produkt-alternativer-bunn .add-to-cart-knapper. knapp bakgrunn: # b39a64; farge: #fff; .product-view .products-beskrivelse .add-to-cart margin-bottom: 21px;
Koden skal se ganske selvforklarende ut. Etter å ha gjort disse endringene, bør siden se slik ut:
Nå er vi ganske nær våre krav til HTML-design. Men hvis vi ser på flippepartiet på produktsiden, skjønt det ser bra ut, samsvarer det ikke med kravet til HTML-design. Slik ser det nå ut:
For å gjøre det i samsvar med vår HTML-design, legger vi til disse CSS-linjene i vår theme.css-fil:
/ ***** Tabs-seksjon *********** / .product-view. Produkt-sivile .toggle-tabs border: none; bakgrunn: ingen; . produkt-visning. produktsikkerhet .toggle-tabs li.current . produktvisning. produktsikkerhet .toggle-tabs li float: left; grense: 1px solid #ececec; . produktvisning. produktsikkerhet> dl> dd polstring: 0 15px 15px 0px; border: none; . produkt-visning. produktsikkerhet .toggle-tabs li.current> span bakgrunnsfarve: #eee; color: # b39a64 ;;
Vi har endret bakgrunnsfargen for fanebladene, og fargen for den aktuelle kategorien. Padding og grense for disse er også redigert. Slik ser det nå ut:
Det ser ganske nær nå. Siden skal se bra ut, med unntak av en liten ting: marginen mellom flippene og de tilhørende produktene er altfor mye og ødelegger utseendet på hele siden.
Dette er på grunn av min-høyde eiendom definert for .tab-box klasse. Vi løser det med denne hurtigkoden:
/ ***** Fixing Margin Bottom Problem *********** / .product-view .tab-box min-høyde: initial;
Problemet er løst nå:
Nå er hele vår produktdetaljer-side klar, og ligger ganske nær våre HTML-designkrav. Med dette har vi fullført de tre viktigste sidene på eCommerce nettsted, som er: hjemmeside, produktoppføringsside og produktdetaljer side.
Som jeg nevnte i starten av denne artikkelen, vil jeg pakke opp denne artikkelserien her ved å gi deg noen tips om hvordan du kan tilpasse andre sider av temaet, ved å bruke de ferdighetene du har lært i denne serien.
La oss ta en titt på handlekurven. Det ser for øyeblikket ut som dette:
Men hvis vi ser på vår HTML-design, bør den se slik ut:
Nå for å tilpasse det, bruker vi samme fremgangsmåte for å slå på snøhintene og finne ut hvilke malfiler som er ansvarlige for å gjengi denne siden, og så foretar vi endringer i disse filene:
Her kan du se at den overordnede utformingen av siden kommer fra filen /template/checkout/cart.phtml. Vi må redigere den for å plassere komponentene i riktig posisjon. Vi legger HTML-koden vi har i vår HTML-fil, og begynner å erstatte koden med den dynamiske koden.
På samme måte kan vi se at produktrader blir gjengitt fra malen / kassen / cart / item / default.phtml filen. Vi må også redigere den filen. Annet enn det, tror jeg ikke vi må gjøre andre endringer i phtml-filene, fordi vi kan gjøre resten lett gjennom CSS.
La oss nå sjekke siden for utskrift. Det ser for øyeblikket ut som dette:
Ifølge vår HTML, bør det imidlertid se slik ut:
Lar gjenta samme fremgangsmåte igjen og finn ut de phtml-filene vi trenger for å endre her. Der kan du se hovedoppsettet kommer fra /template/checkout/onepage.phtml. Og fremdriftslinjen blir befolket av denne filen: mal / utskrift / onepage / progress.phtml.
Vi kan gjøre endringer i disse to filene ved å sammenligne koden med vår HTML-fil. Etter å ha gjort endringene i disse to filene, kan du gjøre resten av endringene gjennom CSS. Jeg tror ikke du må endre noen annen phtml-fil for denne siden.
Her la meg gjenta at du ikke bør gjøre endringene i standardtemaet. Du bør alltid lage en kopi av phtml-filen du vil redigere i ditt nye tema, og bare redigere det der.
Flytter til påloggingssiden, ser det nå ut som dette:
Her gjentar vi igjen alle de samme trinnene, og begynner med å aktivere malens hint:
Her kan du se hovedfilen du må redigere, er: mal \ vedvarende / kunde / skjema / login.phtml. Du kan endre det meste av oppsettet til siden fra denne filen. For stilendringene kan du gjøre det gjennom CSS.
På samme måte kan vi se hvordan du redigerer registreringssiden. Først vil vi aktivere malttipsene:
Fra malttips kan vi se det generelle oppsettet til påmeldingsdelen kommer fra mal / vedvarende / kunde / form / register.phtml. Du kan endre den ved å redigere denne filen.
Hvis du har fulgt så langt, bør du nok vite alle trinnene av hjertet. Du kan fortsette og redigere brukerkontosider ved å bruke de samme prosedyrene du har lært her.
Du kan formelt gratulere deg selv nå: Du kan kalle deg en Magento-temautvikler, fordi du faktisk har utviklet et Magento-tema og har lært alle grunnleggende metoder og prosedyrer som kreves for det.
Mens jeg skrev denne serien har jeg gjort en stor innsats for å gjøre det enkelt og klart å følge. Jeg håper denne serien var en god læreropplevelse for deg!
Gi tilbakemelding om denne serien i kommentarfeltet, og fortsett å komme tilbake til Tuts + for å sjekke ut andre nyttige artikler. Og ikke glem å se hvilke utvidelser som er tilgjengelige for å utvide arbeidet ditt med Magento.
Ha en flott læreropplevelse!
Accentsconagua