Magento for designere Del 6

Magento er en utrolig kraftig e-handelsplattform. I disse miniseriene lærer vi hvordan vi kommer i gang med plattformen, lærer terminologiene, etablerer en butikk og alle relaterte aspekter av det og endelig lærer å tilpasse den slik at den blir vår helt egen.

I denne sjette delen skal vi bygge en av de mest etterspurte funksjonene: få en fremhevet produktregulator på hjemmesiden. Spent? La oss komme i gang!

The Full Series

Del 1: Installasjon og oppsett
Del 2: Produkter, Skatter, Kategorier, Betaling Gateways, etc.
Del 3: Theming
Del 4: Bygg temaet
Del 5: Bygg produktinformasjonssiden
Del 6: Bygg hjemmesiden, med et innholdsregulator

En rask oppskrift

I den siste delen bygget vi produktinformasjonssiden og tok en fin titt på hvordan dataene hentes ut og vises i et typisk Magento-tema.

Vi tok også en titt på de ulike kjernemetoder som vårt tema bruker for å få ulike medier og data om vårt produkt. Jeg håper du husker minst en sliver av den informasjonen, fordi vi skal bruke den igjen i dag.

Hva bygger vi i dag?

I dag bygger vi alle viktige hjemmesider. Som alltid vil jeg holde det så enkelt som mulig og utelate eventuelle ytre egenskaper. Ulike butikker har forskjellig innhold på deres hjemmesider. En av de mest populære og definitivt en av de mest etterspurte funksjonene, viser en JavaScript-slider med spesielle funksjoner. Jeg vet at det høres interessant ut og du er kløe for å komme i gang. La oss komme i gang!

Mål for siden

Som med våre andre sider er våre mål for denne spesifikke siden relativt enkle. Vi ønsker en enkel glidebryter som viser spesifikke produkter i en fin glidebryter. Dermed har jeg skrevet en kort liste over elementer som jeg tror det trenger:

JavaScript-glidebryteren på hjemmesiden
Slider trenger et fengende bilde til venstre for å tiltrekke seg oppmerksomheten til produktet
I den rette delen vil vi inkludere produktets navn, pris og en kort beskrivelse
En mini-navigasjon i glidebryteren for å bytte mellom forskjellige lysbilder
Og viktigst av alt, ikke stole på en utvidelse for å få fram de uthevede elementene

Det er det. Jeg vil holde det så enkelt som mulig og dermed valgt å ikke over gjøre det. Vi må selvfølgelig arbeide med både forenden og bakenden for å oppnå alle våre mål.

Grunnleggende utseende

Siden må i utgangspunktet se slik ut:

Trinn 1 - HTML

Vi ser først på HTML for innholdsdelen alene. Jeg antar at du er ganske flytende i HTML og CSS, så jeg hopper over til de ganske viktige delene.

       
  Zonda F
 700,000.00 
 Pagani Zonda er en sportsvogn som er produsert av Pagani i Italia.

På dette punktet er dette ganske grunnleggende. hjemme-slideshow er beholderen vi pakker inn hele lysbildeserien med og vil bli sendt videre til JavaScript som er ansvarlig for skyvekontrollen.

Hvert lysbilde er innpakket av en div som heter lysbilde. Innsiden har vi to flytende beholdere: ett for bildet og det andre for informasjonen om selve produktet.

Det handler om alt som er til det. Vi kan gå videre til stylingdelen nå.

Trinn 2 - CSS

 / * Hjemmeside * / .slide clear: both; overløp: auto; polstring: 10px; bredde: 898px; grense: 1px solid # E1E1E1; bakgrunn: # F6F6F6;  .product-image float: left; bredde: 650px; polstring: 10px; grense: 1px solid # E1E1E1; bakgrunn: #FAFAFA;  .product-detaljer float: left; bredde: 190px; margin: 0 0 0 20px;  .product-detaljer. pris margin: -15px 0 0 0; farge: # 7db000;  .product-detaljer p margin: 10px 0 0 0;  #nav posisjon: absolutt; topp: 255px; høyre: 250px; z-indeks: 2000;  #nav en margin-right: 10px; høyde: 5px; bredde: 5px; z-indeks: 1000; flyte: venstre; tekstindeks: -9999px; markør: pointer; grense: 1px solid #fff; bakgrunn: #eee;  #nav a: svever grense: 1px solid #fff; bakgrunn: # 999;  #nav a.activeSlide border: 1px solid # 444; bakgrunn: # 333;

Ikke noe fancy her. Veldig grunnleggende CSS for å plassere elementene på plass.

Det eneste poenget å merke seg er erklæring for klassen Actives. Denne klassen er tilordnet gjeldende lysbilde respektive navigasjonsanker.

Trinn 3 - Sette opp vår butikk

Det første vi må gjøre er å sette opp en egen kategori som vi kan tilordne alle produktene vi trenger å vises på skyvekontrollen. Klikk på katalog meny og så videre kategorier. Velge legg til ny rotkategori.

Skriv inn et valgfritt navn og velg deretter Nei for er aktiv fall ned. Vi ønsker ikke at det skal vises i andre deler av nettstedet.

Når den nye kategorien har blitt lagret, kan du finne den IDen den har blitt tildelt. Merk dette ned. Vi trenger det til senere.

Trinn 4 - Opprette vår kjernekode

Vi bruker en enkelt malfil for å trekke ut relevant informasjon, formatere den etter behov og vise alt. Du har full frihet angående navn og plassering av denne filen, men for å holde det enkelt, har jeg kalt det featured.phtml og plasserte den inn katalog / produkt / featured.phtml. Husk at dette går inn i malmappen din, ikke i layoutmappen din.

Innholdet i filen ser slik ut. Ikke bekymre deg for lengden, vi ser på hver del fungerer etter koden.

 addAttributeToSelect (array ('navn', 'pris', 'small_image', 'short_description'), 'indre') -> addCategoryFilter (Mage :: getModel ('katalog / kategori') -> load ($ cat_id)); hvis (! $ _ productCollection-> count ()): echo $ this -> __ ('Det finnes ingen produkter som samsvarer med valget.'); ellers:?>     getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ produkt, 'small_image'))>>> htmlEscape ($ this-> getImageLabel ($ _ produkt, 'small_image'))>> /> 
  getName (); ?>
 getFinalPrice (), 2);?> 
 getShortDescription (); ?>

Her er det første stykket:

 $ cat_id = "2";

Først må vi spesifisere IDen til kategorien som vi ønsker å trekke inn i våre produkter. I vårt tilfelle vil dette være 2, ID for kategorien vi nettopp har opprettet.

 $ _productCollection = Mage :: getResourceModel ('catalog / product_collection') -> addAttributeToSelect (array ('navn', 'pris', 'small_image', 'short_description'), 'indre') -> addCategoryFilter (Mage :: getModel 'Katalog / kategori') -> load ($ cat_id));

Dette ser litt komplisert ut, men la meg forsikre deg, det er veldig enkelt. For å si det på lekmannens vilkår, passerer vi hovedsakelig i ID-en til kategorien vi trenger gjennom variabelen cat_id og spør Magento å hente navn, pris, bilde og kort beskrivelse av produktene som passer. Akkurat nå, jeg vil råde deg til å ikke fla med resten, med mindre du er kjent med MVC og andre aspekter av Magento arkitektur.

 hvis (! $ _ productCollection-> count ()): echo $ this -> __ ('Beklager, ingen elementer samsvarer med utvelgelseskriteriene dine'); ellers:?>

Vi må sjekke om vi har matchende elementer, ikke sant? Det er det vi gjør her. Bare sørg for at vi har matchende elementer. Hvis ikke, viser vi en feil.

La oss begynne å løpe gjennom vår produktsamling!

 getProductUrl ()?> "title ="htmlEscape ($ this-> getImageLabel ($ _ produkt, 'small_image'))>>> htmlEscape ($ this-> getImageLabel ($ _ produkt, 'small_image'))>> />

 getName (); ?>
 getFinalPrice (), 2);?> 
 getShortDescription (); ?>

Hvis du har lest den forrige delen av denne serien, må denne koden være ganske kjent for deg. Vi bruker Magento's bakte metoder for å hente media relatert til produktet vårt.

Den andre brikken kan se litt annerledes ut, fordi i stedet for å bruke litt mer abstraherte metoder, brukte jeg nærmere-til-ben-metoder for å direkte skaffe dataene vi trenger.

Hvis du føler deg litt forvirret her, bare gå gjennom koden ovenfor en gang til. Navnene på metodene er ganske forklarende. Den eneste hindringen bør være hvordan vi skaffer bildet selv: vi ber en av våre hjelpere om å skaffe bildet og endre størrelsen på den størrelsen vi trenger. Ingenting mer til det.

Legg merke til at vi åpner og lukker en lysbilde div hver gang vår løkke løper. Dette er å inkapslere hvert produkts informasjon med et beholderelement for å gjøre det enkelt for oss å lage en glidebryter senere.

Og med dette er vår grunnleggende PHP-kode fullført.

Trinn 5 - JavaScript

Det gir ingen mening å helt gjenoppfinne hjulet her siden kjernen i denne serien er på Magento. Dermed bruker vi et utmerket plugin for å lage vår skyveknapp i dag: jQuery Cycle plugin.

Men først, gå til rot / js og opprett en mappe som heter cirrus. Ulike mennesker har forskjellige metoder for å organisere her. Jeg foretrekker å ha et temas JS-skilt i stedet for å organisere dem ved kilde. Vi trenger en kopi av jQuery [1.4 forhåpentligvis], den nyeste syklusplugin og en egendefinert skriptfil, som jeg navngir mocha.

Her er innholdet i vår JS-fil.

 (funksjon ($) $ (dokument) .ready (funksjon () $ ('# home-slideshow') .before ('') .cycle (fx:' fade ', hastighet: 1500, timeout: 5000, pause: 1, forsinkelse: 5000, personsøker:' #nav '); ); ) (JQuery)

Først opp, legg merke til at vi pakker alt inn i en (funksjon ($) // kode) (jQuery) blokkere. Dette sørger for at jQuery ikke er i konflikt med andre inkluderte bibliotek.

Dokumentet klar blokk, som alltid, er å sørge for at vår kode kjøres bare etter at alle sidens eiendeler er lastet siden Magento liker å sette våre JavaScript-filer øverst.

Initialisering av plugin er ganske enkelt. Bare skriv inn IDen til hovedbeholderen, hjemme-slideshow i vårt tilfelle, og vekk vi går. Jeg har akkurat tweaked noen av alternativene for å få det til å gjøre budgivning.

Noe å merke seg er at vi dynamisk lager og plasserer vår container for navigasjonselementene i DOM med JavaScriptS. Dette elementet er kun nødvendig hvis JavaScript er aktivert. Hvis det ikke er det, vil vi ikke ha tom, ubrukelig kode på vår side.

Vi sender også i selgeren navigasjonsbeholderen til glidebryteren.

Det er det. JavaScript-delen av koden er ferdig.

Trinn 6 - Sette opp vår hjemmeside

Nå som alt vårt grunnlag er fullført, kan vi endelig konfigurere vår hjemmeside nå.

Klikk på CMS-menyen og velg sider alternativ. Klikk på hjemmesiden i den resulterende siden.

Den første kategorien skal være ganske selvforklarende. Pass på at siden vår er aktivert.

På innholdsfanen, må du passe på følgende når du har deaktivert redigeringen:

 blokk type = "katalog / produkt_list" block_id = "featured.products" template = "catalog / product / featured.phtml"

Dette er Magento metode for å inkludere nødvendige blokker. Vi gir bare den en ID for å referere den til og peke den til vår egendefinerte mal.

I designfanen endrer du layoutmalen til 1 kolonne, siden vi bruker den til alt, og deretter skriver du inn følgende i Oppsettoppdatering xml felt.

  css / home.css

Husk hvordan vi bygde produktsiden med tilpasset CSS i sidens layoutfil for å sikre at hele kodebasen ikke er lastet for hver side? Vi gjør stort sett det samme her. I stedet for å lage en XML-fil bare for dette, lar Magento oss skrive dette direkte gjennom grensesnittet.

Vi laster bare inn vår egendefinerte CSS, våre JS-biblioteker og skriptfilen som inneholder all vår kode.

Klikk på "Lagre" for å lagre all vår fremgang, tom Magento's cache og se den vakre skyveknappen på hjemmesiden din glide gjennom i sin uhyggelige herlighet!

Hva vi skal bygge i neste del

... er helt opp til deg. Jeg har allerede dekket nesten all relevant informasjon for å tilpasse hvilken som helst visning og gjennomgå hver eneste visning er helt motstridende. Således har jeg konkludert med at alt som er igjen, er hvordan man lager en tilpasset modul, og jeg tror da vil denne serien ha sin kurs. Jeg kan skrive en rask Magento tweaks og optimalisering hvordan-om nok personer viser interesse for en slik artikkel.

Hvis du føler at noe annet må dekkes før denne serien kommer til slutt, ikke nøl med å legge igjen en kommentar nedenfor for å gi meg beskjed!

Det siste ordet

Og vi er ferdige! I dag lærte vi å lage en tilpasset startside komplett med en glidebryter som viser kjente produkter. Vi lærte også å gjøre alt dette uten å stole på en tredjepartsutvidelse og istedenfor kodet alt dette selv. Forhåpentligvis har dette vært nyttig for deg, og du fant det interessant. Siden dette er et ganske nytt emne for mange lesere, vil jeg være nøye med å se på kommentarseksjonen så chime der inne hvis du har noen tvil.

Spørsmål? Hyggelige ting å si? Kritikk? Treff kommentar delen og la meg et notat. Glad koding!

Kode