, magento for designere: del 4,,,,, 5,,,,,,,,,,,,,,,, det cyber - mandag envato tuts + kurser vil blive reduceret til $3.- og' t miss. denne post er en del af en serie kaldet magento for designerne. magento for designere: del 3magento for designere: del 5, magento er et utroligt stærkt e - platform.i denne miniseries, vil vi lære at gå i gang med den platform, på at lære den terminologi, oprettelse af en butik, og alle aspekter af det og endelig lære at vælge at gøre det, vores helt egen. i det fjerde del, vil vi lægge fundamentet for vores emne, hvilket vi skal bygge helt fra bunden.spændt?lad os komme i gang!,,,, fuldstændig serie, del 1: installation og fælde, del 2: produkter, skatter, kategorier, betaling gateways osv. 3. del: theming, del 4: opbygning af det tema, del 5: opbygning af produktinformationen side, en kort opsummere de sidste dele, vi lærte, hvordan for at få din magento opbevares af installeret til klar til brug, herunder hvordan til at nedsætte deres produkter, produktgrupper, skatter, skibsfart, betaling gateways og mange flere.vi tog et kig på grundlag af magento theming.vi har lært den generelle tanke bag magento emner, de forskellige terminologier bag det, og den grundlæggende struktur for et tema.,, mål for vort emne, vores mål for opbygningen af dette tema er forholdsvis ligetil: at praktisk talt forstår at opbygge et magento tema.med det i tankerne, vil jeg holde emnet så enkelt som muligt.,, alt, men bare væsentlige træk tog ud, ingen billeder end det produkt, billeder og logo, enkelt kolonne for at holde det visuelt let, hvad laver vi i dag?da magento kodning proces er forholdsvis kompliceret for nogen, der anvendes til at wordpress, vi tager det meget langsomt.i dag skal vi bygge den centrale del af vores tema, skelet, der bliver anvendt i hver på stedet.jeg vil også forklare det generelle princip bag processen, så vi kan gå videre til hver enkelt betragtning i fremtidige dele. kilden filer, både front og bagende, er medtaget, men prøv ikke at bruge den.vi skal definere de centrale dele uden at definere, hvad indholdet skal vises, hvordan det skal anføres, og hvis indhold skal være trukket fra.så hvis du prøver at bruge det her lige nu, du kommer til at se en masse volapyk, siden magento trækker alle fraværende filer fra dets misligholdelse tema således fuldstændig ødelægger vores udseende.så mit råd er, vent lidt.,, den grundlæggende model, den grundlæggende model, ligner det.vi har en generisk logo op sammen med en simpel menu, som giver brugeren adgang til hans konto, ønsker og vogn med at lukke ham ud eller logout. nedenfor, at vi har en nytteværdi bar, der indeholder en brødkrumme - navigation, så brugeren ved den kontekstuelle hierarki af lokaliteten.vi også lade brugeren søger gennem vores forretning gennem søgning input til højre. indholdet område i øjeblikket er tomt, siden dens indhold, vil variere afhængigt af, hvilken holdning der magento er læsning.så vi holder er tom nu og gøre det senere, når vi bygger hver enkelt side. den fod er temmelig generelle med et link til betænkning insekter og ophavsret oplysninger.,, trin 1 - html, vil vi først ser html til temaet skelet.jeg går ud fra, du er temmelig flydende html og css, så jeg springer frem til de vigtigste dele. <!- lumos!:). > <!DOCTYPE html> <html lang="en-GB"> <head> <title>Cirrus - Magento Theme</title> <link rel="stylesheet" href="css/cirrus.css" /> </head> <body> <div id="wrapper" class="border"> <div id="header"> <div id="logo"><img src="images/logo.gif" /></div> <div id="hud"> <h3>Welcome, Sid</h3> <ul class="links"> <li><a href="#" title="My Account">My Account</a></li> <li ><a href="#" title="My Wish list">My Wish list</a></li> <li ><a href="#" title="My Cart">My Cart</a></li> <li ><a href="#" title="Checkout">Checkout</a></li> <li><a href="#" title="Log Out" >Log Out</a></li> </ul> </div> </div> <div id="utilities"> <div id="breadcrumbs">Home » State of Fear</div> <div id="header-search"><input type="text" class="border" value="Search our store" /></div> </div> <div id="content" class="product"> <h1>Content here</h1> </div> <div id="footer" class="border"> Help Us to Keep Magento Healthy - Report All Bugs (ver. 1.4.0.1) © 2008 magento demo - butik.eneret.< /div > < /div > < /organ > < /html >, først bemærke, at jeg har pakket alt under et dæksblad div. for at gøre det lettere at styre tingene.bemærker endvidere, at den overskrift, indhold og fod afsnit får deres enkelte blokke, søgningen input er temmelig ubrugelig på dette punkt.vi finder det korrekt under, når vi er at integrere med magento.det samme med de forskellige forbindelser.for øjeblikket har jeg anbragte dem der, som placeholders.når vi grave i magento, får vi dem at arbejde.,, trin 2 - css, * {margen: 0; polstring: 0; grænse: ingen; udkast: ingen; farve:ō og skrifttype familie: "lucida sans unicode for", "lucida grande", uden serif; skriftstørrelsen: 14px; liste stil: ingen; linje højde: 1.3em;} en (farve:db000;} h1, h2, h3, h4 (font vægt: normal;} h1 (skriftstørrelse: 32px; margen nederst: 10px;} h2 (skriftstørrelse: 24px; margen: 10px 0 12px 0} h3 (skriftstørrelsen: 20px; margen nederst: 5px;} h4 (skriftstørrelse: 20px;}. grænse (grænse: 1px fastʚ} /* elementer * /&#papir (bredde: 920px; margen: 10px auto; polstring: 20px;}&#header {margen: 0 0 20px 0, oversvømmelse -&#forklarede;}:t (margen: 20px 0; overløb: auto;}&#meter (polstring: 10px; grænse: 1px fast&#e1e1e1; baggrund:&#f3f3f3; tekst tilpasse: center;} /* header indhold * /&#logo (flyde: venstre}&#hud (flyde: ret; bredde: 320px. højde: 50px; polstring: 10px; grænse: 1px fast&#e1e1e1; baggrund:&#f3f3f3;}&#hud - {flyde: venstre; skriftstørrelsen: 12px; margen: 0 10px 0 0}&#værker (klart: begge margen: 20px 0; overløb: auto; polstring: 7px 10px; grænse: 1px fast&#e1e1e1; baggrund:&#f3f3f3;}&#brødkrummer {flyde: venstre}&#header søgning (flyde: ret.}, ikke noget særligt her.meget grundlæggende css til elementerne i holdning og stil det bare en lille smule.lad os komme videre.,, trin 3 - at skabe vores page.xml fil, denne del er en smule indviklet, så bliv her hos mig.magento anvender xml - filer til at håndtere en side er layout og også til at definere, hvilke elementer der er til rådighed til at blive gjort.målet er, at i stedet for at rage rundt med hemmelige kode, du kan klippe xml - filen og blive færdig med det uden at bekymre sig om afhængighed, hver på lærredet /modul får sin egen xml - fil med en master fil for at definere den generelle indretning af byggepladsen.at master file er, page.xml, fil, vil vi skabe nu., det fuldstændige dossier for i dag ligner det.jeg skal nok forklare hver smule del af del nedenfor. <?xml - version = "0"?> <layout version="0.1.0"> <default translate="label" module="page"> <label>All Pages</label> <block type="page/html" name="root" output="toHtml" template="page/1column.phtml"> \t\t<block type="page/html_head" name="head" as="head"> <action method="addCss"><stylesheet>css/cirrus.css</stylesheet></action> </block> <block type="page/html_header" name="header" as="header"> \t\t\t\t<block type="page/template_links" name="top.links" as="topLinks"/> \t\t\t\t<block type="page/html_breadcrumbs" name="breadcrumbs" as="breadcrumbs"/> <block type="core/template" name="top.search" as="topsearch "/> < /block > < blok type =" core /text_list "navn =" indhold "= =" indhold "/> < blok type =" s /html_footer "navn =" lille "=" lille "template =" s. /html /fod. phtml "/> < /block > < /default > < //> se bort fra den oprindelige xml og layout version erklæringer.de har ingen betydning for os nu, < blok type = "s /html" navn = "rod" produktion = "tohtml" model = "s /1column. phtml" > først, skaber vi en mester blokere for alle data.mener, at dette svarer til indpakning div element, vi i vore html.næste gang, vi pålægger det at bruge, s /1column.phtml, som model for vores side.bare rolig, vi har ikke skabt den fil.vi kan gøre det senere i denne forelæsning. < blok type = "s /html_head" navn "hoved" = = "hoved" > < metode = "addcss" > < stylesheet > css /cirrus.. css < /stylesheet > < /aktion > < /block > næste definerer vi de elementer, der skal indgå i hovedet, sektion af den side.magento ved misligholdelse, omfatter en belastning af css og er sager, men vi vil ikke kræve nogen af deres funktioner i dag.så må vi bare omfatter vores css fil. < blok type = "s /html_header" navn "hoved" = = "hoved" > < blok type = "s /template_links" navn = "top. forbindelser" = "toplinks" /> < og blokere type = "s /html_breadcrumbs" navn = "brødkrummer" = "brødkrummer" /> < blok type = "kerne - model" navn = "top. -" = "topsearch" /> < /block > vi er definitionen af, hvad der foregår i overskriften på vores hjemmeside.vi vil have menuen /forbindelser på toppen, samt brødkrummer, og eftersøgningen., < blok type = "core /text_list" navn "indhold" = = "indhold" />, får vi brug for indholdet, selvfølgelig, så er vi også indholdet.vi vil ikke fastsætte noget om dette punkt her, siden magento bare belastninger, alle de nødvendige indhold i denne blok. < blok type = "s /html_footer" navn = "lille" som = "lille" template = "s /html /fod. phtml" /> og endelig er vi har medtaget vores fod.vi siger også, magento, hvor belastning sin model fra. du undrer dig sikkert, hvorfor vi angiver en model for nogle blokke, samtidig med at den vej for andre.det er en lidt højere niveau emne, men har du bemærke, at hver enkelt blok er en type, tilskriver?når det er type kampe en af de forud fastlagte af magento, du behøver ikke at angive en skabelon.det er en rig.flot, ikke?og med det, vores base, page.xml, sagens akter,.,, trin 4 - at vores skelet skabelon, okay, nu hvor vi har angivet vores layout, kan vi gå videre med at skabe, 1column.phtml, dokumentation, som vi, der er specificeret i xml - tidligere. denne sag er ikke andet end et skelet skabelon, der opfordrer i hovedet, område og fod efter behov.sagen ligner så:, <!- lumos!:). > <!doctype html > < http: //lang = "en gb" > < head > <?php echo $- > getchildhtml ('head)?> < /head > < krop > < div id = "papir" klasse = "grænse" > <?php echo $- > getchildhtml ('header)?> < div id = "indhold" klasse = "produkt" > <?php echo $- > getchildhtml ('content)?> < /div > <?php echo $- > getchildhtml ('footer)?> < /div > < /organ > < /html > det er vores oprindelige http: //- sagen, bortset fra, at vi bruger, getchildhtml, en metode til at opnå hver blok indhold.modellen skal være ret side agnostiker, som det er mester side, som hver side er gjort.,, trin 5 - at skabe de modeller for vores gader, nu bliver det lidt svært: reduktion af vores centrale html blokke af funktioner, at skabe den nødvendige templates - filer for de enkelte funktioner og derefter i de filer. vi vil tackle hver i rækkefølge, hoved afsnit, getchildhtml ('head), kort, direkte til side /html /hoved. phtml,.sagen ligner så:, < afsnit > <?php echo $- > gettitle()?> < /afsnit > < forbindelse rel = "ikon" href = "<?php echo $- > getskinurl ('favicon. ico ')?> "type =" image /x-icon "/> < forbindelse rel =" genvej ikon "href =" <?php echo $- > getskinurl ('favicon. ico ')?> "type =" image /x-icon "/> <?php echo $- > getcssjshtml()?> <?php echo $- > getchildhtml()?> <?php echo $- > getincludes()?>, vil de se, at vi lader magento dynamisk skabe overskrifter.bortset fra det, ser de, getcssjshtml, en metode, der kaldes.denne metode import alle css og er sager, som vi, der er specificeret i, page.xml, fil, side header,, getchildhtml ('header), kort, direkte til side /html /header. phtml,.sagen ligner så:, < div id = "hoved" > < div id = "logo" > < en href = "<?php echo $- > geturl ('').> "afsnit =" <?php echo $- > getlogoalt()?> "klasse =" logo "> < img src =" <?php echo $- > getlogosrc()?> "alat =" <?php echo $- > getlogoalt()?> "/> < /a > < /div > < div id =" hud > < h3 > velkommen < /h3 > <?php echo $- > getchildhtml ('toplinks)?> < /div > < /div > < div id = "værker" > <?php echo $- > getchildhtml ('breadcrumbs)?> <?php echo $- > getchildhtml ('topsearch)?> < /div >, vi bruger magento er api - til at købe logo.derefter yderligere modularize ting, vi får html til brødkrummer, forbindelser og søgefunktion. bemærker, at navnet er rent semantiske.som du kan se, du er ikke begrænset til de høster i det reneste, strenge tekniske forstand.du kan også tilføje andre elementer, som er nødvendige, side fod, getchildhtml ('footer), kort, direkte til side /html /footer.phtml, som specificeret i xml - filer.sagen ligner så:, < div id = "lille" klasse = "grænse" > <?php echo $- > __ ('help os at holde magento sundt ").> - < en href = "http://www.magentocommerce.com/bug-tracking" onclick = ". målet er ='_blank" > < stærk > <?php echo $- > __ (rapport alle kryb ").> < /stærk > < /a > <?php echo $- > __ ("(ver.%), magiker: getversion())?> <?php echo $- > getcopyright()?> < /adresse > < /div > med den fod, du er fri til at omfatte alt, du finder passende.jeg er bare optaget misligholdelse indhold, da jeg ikke kunne finde på noget at sige. med det centrale elementer er færdig, kan vi gå videre til mindre funktionelle luftrumsblokke, der er specificeret i overskriften del nu, dvs. brødkrummer, forbindelser og søgningen træk. top forbindelser, getchildhtml ('toplinks), kort, direkte til s /html /model /forbindelser. phtml,.sagen ligner så:, <?php $_links = $- > getlinks();?> <?folkesundhedsprogrammet (tæller ($_links) > 0):?> < ul klasse = "forbindelser" <?folkesundhedsprogrammet aspektet om ($- > getname()):?> id = "<?php echo $- > getname()?> "<?folkesundhedsprogrammet aspektet endif;?> > <?folkesundhedsprogrammet for hvert ($_links som $_link):?> < li <?folkesundhedsprogrammet aspektet om ($_link - > getisfirst()
magento for designere: del 4
Previous:magento for designere: del 5