, magento for designere: del 6,,,,, 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 5magento for designere: multi - butik funktionalitet, magento er en fantastisk magtfulde e - platform.i denne miniseries, vil vi lære at gå i gang med den platform, komme til at kende den terminologi, der er oprettet en butik, og alle aspekter af det og endelig lære at vælge at gøre det, vores helt egen. i sjette del, vi skal bygge et af de læser om træk: en var en vare i hjemmeside.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, del 6: opbygning af hjemmesiden, med et indhold, der slider, en kort opsummere, sidste del, vi byggede den produktinformation side og tog et godt kig på, hvordan dataene er ekstraheret og vises i en typisk magento tema.vi tog et kig på de forskellige centrale metoder, at vores tema bruger til at få forskellige medier og oplysninger om vores produkt.jeg håber, du kan huske, i det mindste en rest af disse oplysninger, fordi vi vil bruge det igen i dag.,, hvad bygger vi i dag?i dag skal vi bygge den vigtige hjemmeside.som altid, jeg vil holde det så enkelt som muligt, og at udelade nogen fremmede elementer.forskellige butikker har forskelligt indhold på deres hjemmesider.en af de mest populære og helt sikkert et af de ønskede egenskaber, udviser en javascript drevet indhold slider anført særlige var produkter.jeg ved, det lyder interessant, og du er på spring for at komme i gang.lad os komme i gang!,, mål for side, som med vores andre sider af vores mål for denne særlige side er relativt enkle.vi ønsker en enkelt kiks, der udviser særlige produkter i en pæn slæde.derfor har jeg lavet en liste over elementer, som jeg tror, det har brug for:,, javascript slider på hjemmesiden, slider har brug for en god billede til venstre for at tiltrække opmærksomhed på produktet, i den rigtige mængde, vil vi være, herunder produktets navn, pris og en kort beskrivelse, en mini - navigation i skyder for at skifte mellem forskellige lysbilleder, og vigtigst af alt, ikke påberåbe sig en forlængelse for at opnå de var produkter, det er det.jeg vil holde det så enkelt som muligt og dermed valgt at ikke gøre det.vi vil naturligvis skal arbejde med både front og bagende, til at opnå vores mål.,, grundlæggende se, den side har grundlæggende til at ligne så:,, trin 1 - html, vil vi først ser html til indhold alene.jeg går ud fra, du er temmelig flydende html og css, så jeg springer frem til de temmelig vigtige dele. < div id = "hjem lysbilleder" > < div klasse = "glider" > < div klasse = "produkters image" > < href = "#" afsnit = "zonda f" > < img src = "billeder /zonda jpg" alat = "zonda f" afsnit = "zonda f" /> < /a > < /div > < div klasse = "vareoplysninger" > < h2 > zonda f < /h2 > < div klasse = "pris" > 700000.00 < /div > < p > pagani zonda er midt under sportsvogn produceret af pagani i italien.< /p > < /div > < /div > <!- mere objektglas til flere på hinanden følgende produkter - > < /div > på dette punkt, er det helt grundlæggende.hjem, lysbilleder, beholder vi pakker hele lysbilleder med og vil blive videregivet til javascript ansvarlig for slider. hvert objektglas er viklet ind i en div ringede, så.i har vi to flød beholdere: én for det image og den anden for oplysninger om selve produktet. det er alt der er til det.vi kan gå over til modetendenser del.,, trin 2 - css, /* hjemmeside * /. glid {klart: begge overløb: auto; polstring: 10px; bredde: 898px; grænse: 1px fast&#e1e1e1; baggrund:&#f6f6f6;} produkters image (flyde: venstre; bredde: 650px; polstring: 10px; grænse: 1px fast&#e1e1e1; baggrund:&#fafafa;} vareoplysninger (flyde: venstre; bredde: 190px; margen: 0 0 0 20px;} vareoplysninger. pris (margen: - 15px 0 0 0; farve:db000;} vareoplysninger p {margen: 10px 0 0 0}&#nav (holdning: absolutte, top. 255px; ret: 250px; z-index: 2000;}&#nav en {margen: 10px 5px; bredde, højde:- 5px; z-index: 1000, flyde: venstre; tekst led: - 9999px; markør: pointer, grænse: 1px fast&#fff; baggrund:&#eee)&#nav a: den {grænse: 1px fast&#fff; baggrund:ϧ}&#nav a.activeslide {grænse: 1px fastƼ baggrund:ō.}, ikke noget særligt her.meget grundlæggende css for de elementer i position. det eneste punkt at bemærke er angivelsen til den klasse, activeslide,.denne klasse er overdraget til den nuværende glide respektive navigation anker.,, trin 3 - oprettelse af vores butik, er det første, vi skal gøre, er at fælde en særskilt kategori, som vi kan give alle de produkter, som vi skal anføres på vores slæde.klik på menuen, katalog, og derefter på kategorier.vælg, tilføje nye grundlæggende kategori,.,, nøglen i navn af deres valg, og så vælger nr. for det er aktiv, dropdown.vi vil ikke have det med i andre dele af lokaliteten.,, når den nye kategori er blevet reddet, du kan finde det id, det har fået tildelt.bemærk, at dette ned.vi får brug for det senere.,, trin 4 - at skabe vores centrale kode, vi vil være ved hjælp af en fælles skabelon fil at trække de relevante oplysninger, den, som er nødvendig og udviser alt format.du har fuld frihed med hensyn til navn og sted for denne sag, men med henblik på at holde det enkelt, jeg har givet det et navn, featured.phtml, og lagt det i kataloget /produkt - /spillet. phtml,.husk, det er din model mappe, ikke din indretning mappe.indholdet af sagen ser ud.du skal ikke bekymre dig om længde, vil vi se på hver del arbejder efter koden. <?php $cat_id = "2". $_productcollection = magiker: getresourcemodel ('catalog /product_collection ') - > addattributetoselect (array ('name "," pris "," small_image "," short_description ")," indre') - > addcategoryfilter (magiker: getmodel ('catalog /kategori) - > belastning ($cat_id)); hvis (!$_productcollection - > count()): echo $- > __ (der er ingen produkter svarer til udvælgelse. '); andre:?> < div id = "hjem lysbilleder" > <?php $jeg = 0; for hvert ($_productcollection som $_product):?> < div klasse = "glider" > < div klasse = "produkters image" > < en href = "<?php echo $_product - > getproducturl()?> "afsnit =" <?php echo $- > htmlescape ($- > getimagelabel ($_product, small_image ')?> "> < img src =" <?php echo $- > hjælper ('catalog /image ') - > lokalitet ($_product, small_image') - > resize (650, 250).> "alat =" <?php echo $- > htmlescape ($- > getimagelabel ($_product, small_image ')?> "afsnit =" <?php echo $- > htmlescape ($- > getimagelabel ($_product, small_image ')?> "/> < /a > < /div > < div klasse =" vareoplysninger "> < h2 > <?php echo $_product - > getname();?> < /h2 > < div klasse = "pris" > <?php echo number_format ($_product - > getfinalprice(), 2).> < /div > < p > <?php echo $_product - > getshortdescription();?> < /p > < /div > < /div > <?folkesundhedsprogrammet aspektet endforeach?> < /div > <?folkesundhedsprogrammet aspektet endif;?> her er det første stykke: $cat_id = "2", for det første, vi bliver nødt til at angive id for den kategori, som vi vil have i vores produkter.i vores tilfælde, vil det være 2, id for den kategori, vi har lige skabt. $_productcollection = magiker: getresourcemodel ('catalog /product_collection ') - > addattributetoselect (array ('name "," pris "," small_image "," short_description ")," indre') - > addcategoryfilter (magiker: getmodel ('catalog /kategori«) - > belastning ($cat_id), det er lidt kompliceret, men lad mig forsikre dem om, at det er meget simpelt.for at sige det på lægmandsterm, vi hovedsagelig bestå i id for den kategori, vi har brug for, gennem den variabel, cat_id, og spørge magento at indhente navn, pris, image og en kort beskrivelse af de produkter, der matcher.lige nu, ville jeg råde dig til ikke at rode med resten, medmindre du er velbevandret i mvc og andre aspekter af magento arkitektur, hvis (!$_productcollection - > count()): echo $- > __ ('sorry, ingen, der matchede din udvælgelseskriterier); andre:?>, bliver vi nødt til at undersøge, om vi ikke har ens produkter, gør vi ikke?det er, hvad vi laver her.for at sikre, at vi har tilsvarende poster.hvis ikke vi har en fejl., <?php $jeg = 0; for hvert ($_productcollection som $_product):?> lad os begynde at manipulere igennem vores produkt, samling!, < en href = "<?php echo $_product - > getproducturl()?> "afsnit =" <?php echo $- > htmlescape ($- > getimagelabel ($_product, small_image ')?> "> < img src =" <?php echo $- > hjælper ('catalog /image ') - > lokalitet ($_product, small_image') - > resize (650, 250).> "alat =" <?php echo $- > htmlescape ($- > getimagelabel ($_product, small_image ')?> "afsnit =" <?php echo $- > htmlescape ($- > getimagelabel ($_product, small_image ')?> "/> < /a >, < h2 > <?php echo $_product - > getname();?> < /h2 > < div klasse = "pris" > <?php echo number_format ($_product - > getfinalprice(), 2).> < /div > < p > <?php echo $_product - > getshortdescription();?> < /p > hvis de har læst den sidste del af denne serie, koden må være meget bekendt.vi bruger magento er bagt i metoder til at hente medier vedrørende vores produkt. den anden snippet kan se lidt anderledes, for i stedet for at bruge lidt mere abstrakt metoder, jeg var tættere på ben metoder til direkte erhverve de data, vi har brug for. hvis du er lidt forvirret her, bare gå gennem ovennævnte kode 1 mere.navnet på de metoder, der er rimelig begrundelse.den eneste hindring bør være, hvordan vi får billedet selv. vi beder om, er en af vores hjælpere til at erhverve det image, og resize den størrelse, vi har brug for.ikke mere i det., bemærke, at vi er åbne og lukke, glide, div., hver gang vi sløjfe løber.det er at sammenfatte de enkelte produkters oplysninger sammen med en container element for at gøre det let for os at skabe en slider. og med vores base på kode er fuldstændig,.,, løntrin 5 - javascript, giver det ingen mening helt at genopfinde hjulet her siden det centrale fokus i denne serie er på magento.vi vil bruge en fremragende stik af, til at skabe vores slider i dag: den jquery cyklus, stik af. men først, skal du gå til, rod - /er, og skabe en folder, der hedder cirrus.,.forskellige folk har forskellige metoder for tilrettelæggelse af her.jeg foretrækker at have et tema er er separat i stedet for tilrettelæggelse af kilde.vi får brug for en kopi af jquery [1,4 forhåbentlig], den sidste cyklus, stik af og sædvane manuskript - fil, der udnævner jeg, mokka. her er indholdet af vores er fil.(funktion ($) {$(dokument). klar (function() {$('# hjem lysbilleder). før (< div id = "nav" > «). cyklus ((fx: "forsvinder", hastighed: 1500, timeout: 5000, pause: 1, forsinkelse: 5000, personsøger: "# nav«)))))) (jquery), for det første, at bemærke, at vi pakker alt indenfor en (funktion ($) (//kode}) (jquery), block.det er sikre, jquery ikke i konflikt med andre omfattede bibliotek. dokumentet klar blok, som altid, for at sikre, at vores kode kun kører efter alle side aktiver er ladt siden magento kan lide at sætte vores javascript filer på toppen, starter de stik af, er ganske enkel.bare skriv i id af de vigtigste container, lysbilleder, i vores sag, og lad os komme af sted.jeg har lige smadret nogle af de muligheder for at gøre det skal vores befaling, noget at bemærke, er, at vi er dynamisk at skabe og placering vores beholder til navigation elementer i dom af javascripts.dette element er kun nødvendig, hvis javascript er aktiveret.hvis ikke, vil vi ikke have tomme, ubrugelig kode på vores side.har vi også bestå i gearvælgeren sejlads beholder til en stik af. det er det.den javascript del af vores kodeks er gjort.,, trin 6 - oprettelse af vores hjemmeside, nu hvor alle vores arbejde er afsluttet, kan vi endelig få vores hjemmeside.,, klik på cms menu og vælge den side, mulighed.klik på hjemmeside i den deraf følgende side. de første tab skal være temmelig selvforklarende.sørg for, at vores side er aktiveret, i indholdet regning, sørg for at anføre følgende efter invaliderende redaktør: {{blok type = "catalog /product_list" block_id = "var." varer model = "catalog /produkt - /spillet. phtml"), er det magento er metode herunder krævede blokke.vi giver det en id - kort for at henvise det af og til vores skik skabelon., i design, tab, ændring, model 1 kolonne, eftersom vi bruger det til alting og anføre følgende i, layout ajourføre xml - område., <reference name="head"> <action method="addCss"><stylesheet>css/home.css</stylesheet></action> <action method="addJs"><script>cirrus/jquery-1.4-min.js</script></action> <action method="addJs"><script>cirrus/cycle.js</script></action> <action method="addJs"><script>cirrus/mocha.js</script></action> </reference>,Remember how when building the product page, we included custom CSS in the page's layout file to make sure the entire codebase isn't loaded for every page? vi laver stort set det samme her.i stedet for at skabe en xml - sagen for denne, magento lader os komme direkte gennem grænsefladen. vi lader bare vores skik css, vores js, biblioteker og det dossier, som indeholder alle vores kodeks. klik på "red" at redde alle vores fremskridt, tom magento lager og se den smukke slider på din hjemmeside glide gennem i dens dræbende smukke storhed!,, hvad vi skal bygge på næste side.er helt op til dig.jeg har allerede dækket næsten alle relevante oplysninger for selv at bygge en betragtning og går gennem hver eneste synspunkt er helt i modstrid med sund fornuft.derfor har jeg konkluderet, at alle, der er tilbage, er at skabe en skik - modulet, og jeg tror, så denne serie vil have løber sin vej.jeg kan skrive en hurtig magento justeringer og optimering "sådan" - hvis nok vise interesse for en sådan artikel.hvis du tror, at noget andet behov, der skal dækkes, før denne serie drejer sig om en tæt, ikke tøve med at lade en bemærkning nedenfor for at fortælle mig det!,, det sidste ord, og vi er færdige.i dag har vi lært, hvordan man skaber en skik hjemmeside, komplet med en skyder, der figurerer produkter.vi har også lært, at gøre alt dette uden at være afhængige af en tredjepart, udvidelse og i stedet kodning alt det her selv.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 lægge en besked.- kodning.,