, magento for designere: del 5,,,,, 1,,,,,,,,, 6,,,,,,, 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 4magento for designere: del 6, 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 femte del, bygger vi en af de vigtigste synspunkter i vores butik - produktinformationen side.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, sidste del, som vi fastsatte rammerne for tema af at gentage dele af det tema, og især fastlægge den generelle opstilling af tema.vi fandt også et konkret ser på, hvordan theming i magento virker ved at gennemgå, hvordan layout er fremstillet, hvordan de blokke, arbejde, og hvordan de forskellige brikker i puslespillet passer sammen.,, hvad bygger vi i dag?i dag skal vi bygge det enkelte produkt på side.ligesom før, kilden filer, både front og bagende, er omfattet.du kan bruge den til at se, hvordan den side ser ud, men uden for, at emnet skal se brækkede da, du ved, vi har ikke rørt resten af synspunkter endnu.så indtil vi bygge resten, prøv ikke at gå ud på vores hjemmebane.,, mål for side, vores mål for denne særlige side er relativt enkelt.vi ønsker ikke noget vrøvl side, der gør kun det mest nødvendige.derfor har jeg lavet en liste over elementer, som jeg tror, det har brug for:,, produktet er titel: ret indlysende, evne til at vise et billede af produktet, en hurtig og fuldstændig oversigt, tilgængelighed og pris ab fabrik, og endelig en tilføjelse til vogn knap til at placere det i vognen. det er det.jeg vil holde det så enkelt som muligt og dermed valgt at ikke gøre det.når du har lært de generelle principper, det er gratis at tilføje, som mange whizbang elementer som muligt. de grundlæggende se side har grundlæggende til at ligne så:,, trin 1 - html, vil vi først ser html til indhold alene.I'm assuming you're fairly fluent in HTML and CSS so I'll skip to the fairly important parts., <div id="content" class="product"> <div id="main-product-image"><img src="images/primg.gif" /></div> <div id="product-details"> <div id="product-availability">Availability <span class="available">In stock</span></div> <div id="product-price">Price <span>$29.00</span></div> <a class="button" href="#">Add to cart</a> </div> <h1>Photoshop to HTML</h1> <h2>Quick Overview</h2> <p class="quick-overview"> </p> <h2>Product Description</h2> <div class="product-description"> </div>, for det første, opmærksom på, at jeg har pakket produktet billede med en div. for at gøre det lettere at tilføje elementer i fremtiden.hvis du ønsker at tilføje en kort forklaring til det viste billede i fremtiden, på denne måde vil lad os tilføje dette meget hurtigere. har vi en anden div element med adgangen til og prisen for oplysninger sammen med føje til vognen, button.vi vil være sprucing det med lidt css3 lidt. resten af html er meget ligetil.titlen er bosat i et afsnit, mens de enkelte afsnit positioner, h1, h2, tager op.den hurtige oversigt er satte sig i et punkt, mens den fuldstændige oversigt omfatter en. kan vi gå videre til style del.,, trin 2 - css, /* produktside * /&#vigtigste produkters image (margen: 0 20px 10px 0; polstring: 10px; flyde: venstre kant: 1px fast&#e1e1e1; baggrund:&#f3f3f3;}&#vareoplysninger (bredde: 180px; polstring: 10px; flyde: ret; grænse: 1px fast&#e1e1e1; baggrund:&#f3f3f3; margen: 0 0 0 20px;}&#tilgængeligheden af produkter span.available,&#pris levetid (farve:db000; flyde:;). knap {margen: 10px auto; display: blok; bredde: 140px; polstring: 5px 10px; tekst tilpasse: center; tekst): ingen; farve:ȫ grænse: 1px fast&#ccc; skriftstørrelsen: 18px;background: #ddd; \tborder-radius: 12px; \t-webkit-border-radius: 12px; \t-moz-border-radius: 12px; \tbox-shadow: 1px 1px 2px rgba(0,0,0,.5); \t-webkit-box-shadow: 1px 1px 2px rgba(0,0,0,.5); \t-moz-box-shadow: 1px 1px 2px rgba(0,0,0,.5); \ttext-shadow: #fff 0px 1px 1px; \tbackground: -webkit-gradient(linear, left top, left bottom, from(#eeeeee), to(#cccccc)); \tbackground: -moz-linear-gradient(top, #eeeeee, #cccccc); \t} .button:hover { \tbackground: #014464; \tbackground: -webkit-gradient(linear, left top, left bottom, from(#cccccc), to(#999999)); \tbackground: -moz-linear-gradient(top, #cccccc, #999999); \tcolor: #000; \t} .button:active { \t-moz-box-shadow: 0 2px 6px black; \t-webkit-box-shadow: 0 2px 6px black; \t},Nothing fint her.meget grundlæggende css at placere elementer på plads. jeg har også brugt lidt af css3 at gøre knapper lidt bedre ud,.,, trin 3 - at skabe vores catalog.xml - sagen, som jeg nævnte i begyndelsen, hvert modul får sin egen xml - fil at diktere, hvad poster til også at omfatte og den generelle udformning af den side.den side, vi laver i dag, bygger på filen, catalog.xml, definere dens indhold og struktur. dette dokument skal være til stede i, layout, mappe, så lad os skabe en xml - fil og navn, katalog,., 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" > < catalog_product_view oversætte = "mærkning" > < etiket > katalog produkt synspunkt (eventuelle) < /etiketten > <!-- Mage_Catalog --> <reference name="root"> <action method="setTemplate"><template>page/1column.phtml</template></action> </reference> \t\t<reference name="head"> <action method="addCss"><stylesheet>css/product.css</stylesheet></action> </reference> <reference name="content"> <block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml"> <block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/> <block type="catalog/product_view_description" name="produkt. beskrivelse" = = "beskrivelse" model "catalog /produkt - /betragtning /beskrivelse. phtml" /> < blok type = "catalog /product_view_type_simple" navn = "produkt. info. simple" = "product_type_data" model = "catalog /produkt - /betragtning /type /simpelt. phtml" /> < blok type = "catalog /product_view" navn = "produkt. info. addtocart" = "addtocart" template = "catalog /produkt - /betragtning /addtocart. phtml" /> < /block > < /reference > < /catalog_product_view > < //> se bort fra den oprindelige xml og layout version erklæringer.de har ingen betydning for os nu, < catalog_product_view oversætte = "mærkning" > det første vi system ved, at vi har i sinde at ændre produktets opfattelse en del af systemet.det er fordi, catalog.xml, huse, opstilling af en række andre synspunkter, og derfor er det nødvendigt, at vi præciserer, hvilken holdning agter vi at ændre. < reference navn = "rod" > < metode = "settemplate" > < skabelon > side /1column. phtml < /skabelon > < /aktion > < /reference >, altså, vi fortæller magento til at fylde det, 1column.phtml, fil som den vigtigste mester skabelon for dette synspunkt.det er, fordi hver enkelt synspunkt kan bruge en foruddefineret struktur.for eksempel, din hjemmeside, kunne bruge en meget kompleks skik struktur, deres produkt side en dobbelt kolonne og din søgen side en enkelt kolonne layout.hvis der ikke er angivet, det vil fylde misligholdelse model nævnt i, s. xml,.vi bruger det til alt andet, denne del er overflødig, men når du ændrer denne model til eget brug, redigering filens navn er meget lettere end at dele af xml - indretningen fil. < reference navn = "hoved" > < metode = "addcss" > < stylesheet > css /produkt. css < /stylesheet > < /aktion > < /reference >, og nu er vi stødt på en af de niftier dele af magento.ja, vi kan bruge alle vores opfattelse specifikke css til en gigantisk css akter, men vi er ikke huleboere, er vi?råb af flere http anmodninger til side, denne metode giver os at strømline vores css bedre. vi først erhverve en henvisning til hoved afsnit af sagen og indsætte vores side specifikke indhold i det.her er jeg, at filen, product.css, som indeholder alle side specifikke css vi kiggede på ovenfor.noterer sig, at du ikke er begrænset til ccs.Including JS and other assets is possible too., <block type="catalog/product_view" name="product.info" template="catalog/product/view.phtml">,We now ask Magento to use a specific template for the content portion of the page, <block type="catalog/product_view_media" name="product.info.media" as="media" template="catalog/product/view/media.phtml"/> <block type="catalog/product_view_description" name="product.description" as="description" template="catalog/product/view/description.phtml"/> <block type="catalog/product_view_type_simple" name="product.info.simple" as="product_type_data" template="catalog/product/view/type/simple.phtml"/> <block type="catalog/product_view" name="product.info.addtocart" as="addtocart "template =" catalog /produkt - /betragtning /addtocart. phtml "/> dette felt definerer alle de enkelte blokke i det væsentlige indhold blok.vi er i alt væsentligt brug individuelle modeller til visning af produktets image, oversigt over og beskrivelse, tilgængelighed og pris - og endelig tilføje, at vognen funktioner. og med vores base, catalog.xml, sagens akter,.,, trin 4 - at vores vigtigste skabelon, okay, nu hvor vi har specificeret udformning kan vi flytte vores for at skabe det, catalog /produkt - /view.phtml, dokumentation, som vi, der er anført som den vigtigste skabelon for indholdet af afsnit i xml - tidligere. denne sag er lidt forskellig fra skelettet model, vi har skabt i de sidste del, fordi vi vil tilføje en lille ting direkte i stedet for at gå gennem den model for at undgå svulmer op ad vej med en antydning af api - opfordres til at hjælpe os. <?php $_helper = $- > hjælper ('catalog /produktion); $_product = $- > getproduct();?> < form handlingen = "<?php echo $- > getaddtocarturl ($_product)?> "metode =" post "id =" product_addtocart_form "<?folkesundhedsprogrammet aspektet om ($_product - > getoptions()):?> enctype = "i flere dele /form af data" <?folkesundhedsprogrammet aspektet endif;?> > < div klasse = "display" > < input type = "skjulte" navn = "produkt" værdi = "<?php echo $_product - > getid()?> "/> < input type =" skjulte "navn =" related_product "id =" beslægtede produkter område "værdi =" /> < div id = "vigtigste produkters image" > <?php echo $- > getchildhtml ('media)?> < /div > < div id = "vareoplysninger" > <?php echo $- > getchildhtml ('product_type_data)?> <?php echo $- > getchildhtml ('addtocart)?> < /div > < h1 > <?php echo $_helper - > productattribute ($_product, $_product - > getname() "navn").> < /h1 > <?folkesundhedsprogrammet aspektet om ($_product - > getshortdescription()):?> < h2 > <?php echo $- > __ ('quick oversigt).> < /h2 > < p - klassen = "hurtig oversigt" > <?php echo $_helper - > productattribute ($_product, nl2br ($_product - > getshortdescription()), short_description)?> < /p > <?folkesundhedsprogrammet aspektet endif;?> <?php echo $- > getchildhtml ('description)?> < /form > < /div >,, hvis du tager et hurtigt kig, vil i se, at vi er nogle, getchildhtml, opfordringer til at erhverve, der blokerer indhold.disse arbejder ligesom som forventet, og indholdet af disse indhold vil blive dækket lidt senere under. <?php $_helper = $- > hjælper ('catalog /produktion); $_product = $- > getproduct();?> i øjeblikket, har vi ikke brug for at vide, hvad det betyder.på lægmandssprog, vi er i det væsentlige oplyst, magento for dette specifikke produkt skal opbevare oplysninger, så vi kan behandle det og vise det på side. < form handlingen = "<?php echo $- > getaddtocarturl ($_product)?> "metode =" post "id =" product_addtocart_form "<?folkesundhedsprogrammet aspektet om ($_product - > getoptions()):?> enctype = "i flere dele /form af data" <?folkesundhedsprogrammet aspektet endif;?> >, her bruger vi en af magento er api - metoder til dynamisk skabe url form skal post. < h1 > <?php echo $_helper - > productattribute ($_product, $_product - > getname() "navn").> < /h1 >, vi bruger en anden af magento metoder til at erhverve produktet titel direkte. <?folkesundhedsprogrammet aspektet om ($_product - > getshortdescription()):?> < h2 > <?php echo $- > __ ('quick oversigt).> < /h2 > < p - klassen = "hurtig oversigt" > <?php echo $_helper - > productattribute ($_product, nl2br ($_product - > getshortdescription()), short_description)?> < /p > <?folkesundhedsprogrammet aspektet endif;?> og igen, da hurtig oversigt skal være et punktum eller to, jeg vælger at indføre den direkte i stedet for at bruge en skabelon.vi bruger den samme funktion, vi plejede at få titlen, trin 5 - at skabe de modeller for vores gader, med alle de vigtigste dele, kan vi koncentrere os om de enkelte blokke.nu, hvor vi har allerede behandlet dette ved beregningen af de vigtigste skabelon, bør dette være lettere nu. vi vil tage i rækkefølge i vores kode:, produkters image, getchildhtml ('media), kort, direkte til catalog /produkt - /betragtning /medier. phtml,.sagen ligner så:, <?php $_product = $- > getproduct(). $_helper = $- > hjælper ('catalog /produktion ").> <?php $_img = < img id = "image" src = ". $- > hjælper ('catalog /image ') - > lokalitet ($_product" ry ")." "alt =". $- > htmlescape ($- > getimagelabel()). "" afsnit = ". $- > htmlescape ($- > getimagelabel()).'" /> « echo $_helper - > productattribute ($_product, $_img "ry").> nogle enkle php kode.vi bruger hjælper metoder til at erhverve produktet image og gøre det på lærredet., tilgængelighed og pris, getchildhtml ('product_type_data), kort, direkte til catalog /produkt - /betragtning /type /simpelt. phtml,.sagen ligner så:, <?php $_product = $- > getproduct()?> < div id = "tilgængeligheden af produkter" > tilgængelighed <?folkesundhedsprogrammet aspektet om ($_product - > issaleable()):?> < over klasse = "til rådighed" > <?php echo $- > __ (')').> < /span > <?php andet:?> < over klasse = "til rådighed" > <?php echo $- > __ ('out af materiel).> < /span > <?folkesundhedsprogrammet aspektet endif;?> < /div > < div id = "pris" > pris < span > <?php echo $- > getpricehtml ($_product)?> < /span > < /div >, vi først undersøge, om det er til rådighed eller ikke, og produktionen de krævede html.erhvervelse af produktets pris er en enkel metode til væk!, tilføje vogn, getchildhtml ('addtocart), kort, direkte til catalog /produkt - /betragtning /addtocart. phtml,.sagen ligner så:, <?php $_product = $- > getproduct()?> <?folkesundhedsprogrammet aspektet om ($_product - > issaleable()):?> < knap afsnit = "<?php echo $- > __ ('add til vognen ").> "klasse =" knap btn cart "> <?php echo $- > __ ('add til vognen ").> < /knap > <?folkesundhedsprogrammet aspektet endif;?>, som er logisk, at vi kontrollerer, om et produkt er til salg, før vi produktion den krævede html.det er en simpel knap, som det fremgår, varebeskrivelse,, getchildhtml ('description), kort, direkte til catalog /produkt - /betragtning /beskrivelse. phtml,.sagen ligner så:, <?php $_description = $- > getproduct() - > getdescription();?> <?folkesundhedsprogrammet aspektet om ($_description):?> < h2 > varebeskrivelse < /h2 > < div klasse = "varebeskrivelse" > <?php echo $- > hjælper ('catalog /produktion ') - > productattribute ($- > getproduct(), nl2br ($_description),' beskrivelse ')?> < /div > <?folkesundhedsprogrammet aspektet endif;?>, svarende til, hvordan vi også hurtigt overblik over det, vi bruger magento er indbygget, metoder til at erhverve de nødvendige oplysninger.vi tjekker for den beskrivelse, der er, før vi gør det, hvis du vil vide det, jeg normalt har tendens til at indeholde en beskrivelse separat via modeller for det meste i produktionen, skabeloner, du vil næsten altid efter optog den beskrivelse, på en eller anden måde.i disse situationer er det lettere at dele denne logik af på sin egen model.et hurtigt overblik over på den anden side er normalt ganske små og er således direkte medtaget.,, hvad vi skal bygge på næste side.er helt op til dig.der er en lang række synspunkter kunne du konstruktion, men det er temmelig arrogant af mig at vælge én.derfor beder jeg dig, læseren, at foreslå med henblik på at dække i næste del gennem en bemærkning i bemærkningerne nedenfor.glem ikke at fortælle mig hvor til dækning af den næste!,, det sidste ord, og vi er færdige.i dag har vi skabt den første opfattelse af vores skik magento tema, produktet opfattelse sammen med ser en, hvor magento lad os tilføje side særlige aktiver og indhold.jeg håber, at denne har været godt for dig, og du syntes, det var interessant.da dette er et temmelig nyt emne for mange læsere, jeg vil være tæt på kommentarside så bryde ind der, hvis du har nogen tvivl, spørgsmål?gode ting at sige?kritik?slog de bemærkninger, afsnit og efterlade mig en kommentar.- kodning.,