Share
När jag ursprungligen planerade den här serien var det tänkt att vara en 15-artikelserie där vi planerade att utveckla alla sidor av temat, inklusive kundvagnen, kassan, inloggnings- och anmälningssidorna och sidorna för användarkonton.
Men efter att ha skrivit de första 10 artiklarna insåg jag att vi redan har förklarat i detalj alla steg som krävs för att göra ändringar i dina Magento-temasidor, och redigering av de andra sidorna kommer bara att vara en repetition av de steg vi redan har förklarat innan.
Därför avslutar jag serien i den här artikeln, där vi slutar produktsidan från var vi lämnade den i föregående artikel och jag ger dig tips om hur du använder de tekniker du har lärt dig i den här serien att redigera resten av sidorna själv.
Så låt oss återuppta produktinformationssidan anpassning. Så här ser det ut:
Om vi jämför det med den HTML-design som vi har, så ska det se ut:
För att se ut som vår HTML-design behöver vi göra några teckensnittsändringar i produktrubrik, pris och tillgänglighet. I avsnittet "Lägg till i kundvagnen" måste vi också ändra bakgrundsfärgen och gränserna. Annat än det måste vi göra vissa ändringar med marginalerna och vadderingen. Vi gör det genom att lägga till dessa rader i vår theme.css-fil:
/ ***** Produktdetaljer Sida *********** / .more-views margin-top: 10px; .product-image-thumbs text-align: center;. views. product-image-thumbs a: svep gränsvärde: # b39a64; .more-views. product-image-thumbs a float: left; vaddering: 3px; gränsen: 1px solid #cccccc; .products-detaljer font-family: Georgia, sans-serif; .products-description .name font-family: Georgia, sans-serif; typsnittstorlek: 30px; . availability.in-stock font-size: 11px; .products-details. products-description. price width: 50%; font-size: 25px; färg: # b39a64; font-weight: 500; .products-description. product-options border: none; padding-left: 30px; .product-view .products-description .product-options .swatch-attr-etikett font-size: 11px; fontfamilj: ärv; typsnitt: normal; .products-description. product-options-bottom border: none; bakgrund: ingen; padding-vänster: 30px; fontstorlek: 12px; vaddering: 17px 0 0px 0; border-top: 1px solid #ccc; marginal: 10px 30px 0 30px; . produktvy. produkt-alternativ-botten .add-to-cart-knappar. knapp bakgrund: # b39a64; färg: #fff; .product-view .products-description .add-to-cart margin-bottom: 21px;
Koden ska se ganska självförklarande ut. Efter att ha gjort dessa ändringar ska sidan se ut så här:
Nu är vi ganska nära våra HTML-designkrav. Men om vi tittar på flikavsnittet på produktsidan, trots att det ser bra ut, stämmer det inte med vårt krav på HTML-design. Så här ser det ut:
För att matcha den med vår HTML-design lägger vi till dessa CSS-linjer i vår theme.css-fil:
/ ***** Tabs avsnitt *********** / .product-view. Produkt-säkerheter .toggle-flikar border: none; bakgrund: ingen; . produkt-visning. produkt-säkerhet .toggle-flikar li.current . produktvy. produkt-säkerheter .toggle-flikar li float: left; gränsen: 1px solid #ececec; . produktvy. produkt-säkerhet> dl> dd vaddering: 0 15px 15px 0px; kant: none; . produktvy. produkt-säkerhet .toggle-flikar li.current> span bakgrundsfärg: #eee; color: # b39a64 ;;
Vi har ändrat bakgrundsfärgen för flikrubrikerna och färgen för den aktuella fliken. Vadderingen och gränsen för dessa redigeras också. Så här ska det se ut nu:
Det ser ganska nära nu. Sidan ska se bra ut utom en liten sak: marginalen mellan flikavsnittet och de relaterade produkterna är alldeles för mycket och förstör hela sidans utseende.
Detta beror på min-höjd egendom definierad för .tab-box klass. Vi fixar det med den här snabbkoden:
/ ***** Fixing Margin Bottom Problem *********** / .product-view .tab-box min-höjd: initial;
Problemet är nu löst:
Nu är vår fullständiga produktdetaljer sida klar och ligger ganska nära våra HTML-designkrav. Med detta har vi genomfört de tre viktigaste sidorna på e-handelswebbsidan, som är: hemsida, produktinformationssida och produktdetaljer sida.
Som jag nämnde i början av denna artikel kommer jag att pakka upp denna artikelserie här genom att ge dig några tips om hur du kan anpassa andra sidor av temat genom att använda de färdigheter du har lärt dig i den här serien.
Låt oss ta en titt på kundvagnssidan. Det ser för närvarande ut så här:
Men om vi tittar på vår HTML-design ska det se ut så här:
För att anpassa det använder vi samma procedur för att aktivera malltipsen och bestämmer vilka vilka mallfiler som är ansvariga för att göra denna sida, och vi gör då ändringar i dessa filer:
Här kan du se att den övergripande layouten på sidan kommer från filen /template/checkout/cart.phtml. Vi behöver redigera det för att placera komponenterna i rätt läge. Vi lägger HTML-koden vi har i vår HTML-fil och börjar ersätta koden med den dynamiska koden.
På samma sätt kan vi se att produktraderna görs från mallen / checkout / cart / item / default.phtml-filen. Vi måste också redigera den filen. Annat än det tror jag inte vi behöver göra några andra ändringar i phtml-filer, eftersom vi kan göra resten lätt via CSS.
Nu ska vi kolla kassan. Det ser för närvarande ut så här:
Enligt vår HTML ska det dock se ut så här:
Låt oss upprepa samma procedur igen och ta reda på de phtml-filer som vi behöver ändra här. Där kan du se att huvudlayouten kommer från /template/checkout/onepage.phtml. Och statusfältet befolker sig av den här filen: mall / checkout / onepage / progress.phtml.
Vi kan göra ändringar i dessa två filer genom att jämföra koden med vår HTML-fil. Efter att ha gjort ändringarna i dessa två filer kan du göra resten av ändringarna via CSS. Jag tror inte att du behöver ändra någon annan phtml-fil för den här sidan.
Här låt mig upprepa att du inte borde göra ändringarna i standardtemat. Du ska alltid göra en kopia av den phtml-fil du vill redigera i ditt nya tema och bara redigera det där.
När du går vidare till inloggningssidan ser den ut så här ut:
Här återkommer vi igen alla samma steg, och börja med att aktivera malltipset:
Här kan du se huvudfilen du behöver redigera är: mall \ beständig / kund / formulär / login.phtml. Du kan ändra det mesta av sidans layout från den här filen. För stiländringarna kan du göra det via CSS.
På samma sätt kan vi se hur du redigerar anmälningssidan. Först aktiverar vi malltipsen:
Från malltips kan vi se att den övergripande layouten av registreringsdelen kommer från mall / ihållande / kund / form / register.phtml. Du kan ändra den genom att redigera den här filen.
Om du har följt så länge, borde du noga veta alla steg av hjärtat. Du kan fortsätta och redigera sidorna för användarkonton med samma procedurer som du har lärt dig här.
Du kan formellt gratulera dig själv nu: du kan kalla dig Magento-temaproducerare, för du har faktiskt utvecklat ett Magento-tema och har lärt dig alla grundläggande metoder och förfaranden som krävs för det.
Samtidigt som jag skrev denna serie har jag gjort en stor insats för att göra det enkelt och tydligt att följa. Jag hoppas att den här serien var en bra lärande för dig!
Ge din feedback om den här serien i kommentarfältet och fortsätt tillbaka till Tuts + för att kolla andra användbara artiklar. Och glöm inte att se vilka tillägg som finns tillgängliga för att utöka ditt arbete med Magento.
Ha en bra lärande erfarenhet!
Accentsconagua