Magento for designere del 5

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

I denne femte delen skal vi bygge en av hovedvisninger i butikken vår - produktinformasjonssiden. 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

En rask oppskrift

I den siste delen lagde vi rammen for temaet ved å bygge de repeterende delene av temaet og i hovedsak definere temaets generelle layout.

Vi tok også et praktisk blikk på hvordan temaer i Magento fungerer ved å gå gjennom hvordan utformingen er konstruert, hvordan blokkene fungerer og hvordan alle de forskjellige stykkene av puslespillet passer sammen.

Hva bygger vi i dag?

I dag lager vi den individuelle produktvisningssiden. På samme måte som tidligere er kildedataene, både forenden og bakenden, inkludert. Du kan bruke den til å se hvordan siden ser ut, men utenom det, bør temaet sees ødelagt siden du vet at vi ikke har rørt resten av visningene ennå. Så til vi bygger resten, prøv å ikke gå ut av vår sandkasse.

Mål for siden

Vårt mål for denne spesifikke siden er relativt enkel. Vi ønsker en no-nonsense side som bare gjør det viktigst. Dermed har jeg skrevet en kort liste over elementer som jeg tror det trenger:

Produktets tittel: Ganske åpenbart
Evne til å vise et bilde av produktet
En rask og full oversikt
Tilgjengelighet og pris på produktet og til slutt
En legg i handlekurven for å legge den i handlekurven

Det er det. Jeg vil holde det så enkelt som mulig og dermed valgt å ikke over gjøre det. Når du har lært de generelle prinsippene, er du velkommen til å legge til så mange whizbang-funksjoner som mulig.

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.

  
  Tilgjengelighet På lager
 Pris $ 29.00
 Legg i handlekurv 
 Photoshop til HTML
 Raskt Overblikk
  produktbeskrivelse

Først opp, legg merke til at jeg har pakket produktbildet med en div for å gjøre det enklere å legge til funksjoner i fremtiden. Anta at du vil legge til et raskt bildetekst til det viste bildet i fremtiden, på denne måten vil vi legge til dette mye raskere.

Vi har et annet div-element som holder tilgjengeligheten og prisinformasjonen sammen med Legg i handlekurv knapp. Vi vil spruce den opp med litt CSS3 på litt.

Resten av HTML er veldig grei. Tittelen ligger i en h1-seksjon mens de enkelte seksjonsoverskriftene tar opp h2. Den raske oversikten er nestet i et avsnitt mens hele oversikten tar opp en div.

Vi kan gå videre til stylingdelen nå.

Trinn 2 - CSS

 / * Produktside * / # hovedproduktbilde margin: 0 20px 10px 0; polstring: 10px; flyte: venstre; grense: 1px solid # E1E1E1; bakgrunn: # F3F3F3;  # produktdetaljer bredde: 180px; polstring: 10px; flyte: høyre; grense: 1px solid # E1E1E1; bakgrunn: # F3F3F3; margin: 0 0 0 20px;  # produkt tilgjengelighet span.available, # produkt-pris span color: # 7db000; flyte: høyre; . knapp margin: 10px auto; skjerm: blokk; bredde: 140px; polstring: 5px 10px; tekst-align: center; tekst-dekorasjon: ingen; farge: # 555; grense: 1px solid #ccc; skriftstørrelse: 18px; bakgrunn: #ddd; border-radius: 12px; -webkit-grense-radius: 12px; -moz-grense-radius: 12px; boksskygge: 1px 1px 2px rgba (0,0,0, .5); -webkit-boks-skygge: 1px 1px 2px rgba (0,0,0, .5); -moz-boks-skygge: 1px 1px 2px rgba (0,0,0, .5); tekstskygge: #fff 0px 1px 1px; bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (#eeeeee), til (#cccccc)); bakgrunn: -moz-lineær-gradient (topp, #eeeeee, #cccccc); . knapp: hover bakgrunn: # 014464; bakgrunn: -webkit-gradient (lineær, venstre topp, venstre bunn, fra (#cccccc) til (# 999999)); bakgrunn: -moz-lineær-gradient (topp, #cccccc, # 999999); farge: # 000; . knapp: aktiv -moz-boks-skygge: 0 2px 6px svart; -webkit-boks-skygge: 0 2px 6px svart;

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

Jeg har også brukt litt av CSS3 for å få knappene litt bedre utseende.

Trinn 3 - Opprett vår catalog.xml-fil

Som nevnt i den tidligere delen, får hver modul sin egen XML-fil for å diktere hvilke elementer som skal inkluderes og den generelle utformingen av siden. Siden vi bygger i dag er avhengig av en fil som heter catalog.xml å definere innhold og struktur.

Denne filen skal være til stede i oppsett mappe så la oss lage en XML-fil og gi den navnet katalog.

Den komplette filen for i dag ser ut som det. Jeg skal forklare hver bit del av del nedenfor.

    Katalog Produktvisning (Enhver)      css / product.css

Se bort fra de første XML- og layoutversjonsdeklarasjonene. De har ingen betydning for oss nå.

Først lar vi systemet vite at vi har til hensikt å endre produktvisningen del av systemet. Dette er fordi catalog.xml huser oppsettet for en rekke andre synspunkter, og det er derfor viktig at vi spesifiserer hvilken visning vi har til hensikt å endre.

Nå forteller vi Magento å laste opp 1column.phtml filen som hovedmestermal for denne visningen. Dette skyldes at hver enkelt visning kan bruke en forhåndsdefinert struktur. For eksempel kan hjemmesiden din bruke en svært kompleks tilpasset struktur, produktsiden din en dobbel kolonne og søkesiden din i en enkelt kolonneoppsett.

Hvis ingenting er angitt, vil det laste opp standardmalen nevnt i page.xml. Siden vi bruker det for alt annet, er denne delen overflødig, men når du modifiserer denne malen for personlig bruk, er redigering av filnavnet mye enklere enn å legge biter av XML til layoutfilen.

  css / product.css

Og nå kommer vi over en av de niftere delene av Magento. Ja, vi kan kaste alle våre visningsspesifikke CSS til en gigantisk CSS-fil, men vi er ikke cavemen, er vi? Kryss av flere HTTP-forespørsler til side, denne metoden lar oss effektivisere vårt CSS bedre.

Først får vi en referanse til hovedenheten av filen, og deretter legger vi inn vårt sidespesifikt innhold i det. Her legger jeg inn en fil som heter product.css som inneholder alle sidespesifikke CSS vi så på ovenfor.

Merk at du ikke er begrenset til CSS. Inkludert JS og andre eiendeler er også mulig.

Vi ber nå Magento å bruke en bestemt mal for innholdsdelen av siden

Denne blokken definerer alle de enkelte blokkene inne i hovedinnholdsblokken. I hovedsak bruker vi individuelle maler for å vise produktets bilde, oversikt og beskrivelse, tilgjengelighet / pris og til slutt funksjonen legg til i handlekurven.

Og med dette, vår base catalog.xml filen er fullført.

Trinn 4 - Opprett vår hovedmal

Ok, nå som vi har angitt vårt oppsett, kan vi fortsette å opprette katalog / produkt / view.phtml fil som vi angav som hovedmal for innholdsdelen i XML tidligere.

Denne filen er litt forskjellig fra skjelettmalen vi opprettet i den siste delen fordi vi vil legge til noen små ting direkte i stedet for å gå gjennom malbanen for å unngå oppblåsthet sammen med en smidgen av API-anrop for å hjelpe oss.

 helper ( 'katalogen / output'); $ _product = $ this-> getProduct (); ?> getOptions ()):?> enctype = "multipart / form-data">    getChildHtml ('media')?>
  getChildHtml ('product_type_data')?> getChildHtml ('addtocart')?> 
 productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getShortDescription ()):?> __ ('Quick Oversikt')?>
 productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>
  getChildHtml ('description')?>

Hvis du tar en rask titt, vil du legge merke til at vi lager en rekke getChildHtml samtaler for å skaffe seg det som blokkerer innhold. Disse fungerer akkurat som forventet, og innholdet i disse innholdene vil bli dekket litt senere.

 helper ( 'katalogen / output'); $ _product = $ this-> getProduct (); ?>

For øyeblikket trenger vi ikke å vite hva dette betyr. På lekmannens vilkår skjønner vi i hovedsak Magento for dette bestemte produktets butikkinformasjon, slik at vi kan behandle det og deretter vise det på siden.

 getOptions ()):?> enctype = "multipart / form-data">

Her bruker vi en av Magento API-metoder for å dynamisk generere nettadressen skjemaet må poste til.

 productAttribute ($ _ product, $ _product-> getName (), 'name')?>

Vi bruker en annen av Magento's metoder for å kjøpe produktets tittel direkte.

 getShortDescription ()):?> __ ('Quick Oversikt')?>
 productAttribute ($ _ product, nl2br ($ _ product-> getShortDescription ()), 'short_description')?>

Og igjen, siden den raske oversikten bare skal være en setning eller to, velger jeg å importere den direkte i stedet for å bruke en mal. Vi bruker den samme funksjonen som vi brukte til å skaffe tittelen.

Trinn 5 - Opprette maler for våre blokker

Med alle hoveddelene gjort, kan vi konsentrere oss om de enkelte blokkene nå. Nå som vi allerede har håndtert dette ved konstruksjon av hovedmalen, bør dette være mye enklere nå.

Vi takler hver i rekkefølge av utseende i vår kode:

Produktbilde

getChildHtml ( 'media') kart direkte til katalog / produkt / syn / media.phtml. Vår fil ser slik ut:

 getProduct (); $ _helper = $ this-> hjelper ('katalog / utgang'); ?> helper ('katalog / bilde') -> init ($ _ produkt, 'bilde'). "" alt = "'. $ this-> htmlEscape ($ this-> getImageLabel ()).'" title = "'. this-> htmlEscape ($ this-> getImageLabel ()). '"/>'; echo $ _helper-> productAttribute ($ _ produkt, $ _img, 'bilde');?>

Enkel PHP-kode. Vi bruker hjelpemetoder for å skaffe produktets bilde og deretter gjøre det på skjermen.

Tilgjengelighet / Pris

getChildHtml ( 'product_type_data') kart direkte til katalog / produkt / syn / type / simple.phtml. Vår fil ser slik ut:

 getProduct ()?> Tilgjengelighet isSable ()):?> __ ('På lager')?>  __ ('Ikke på lager')?>  
 Pris getPriceHtml ($ _ produkt)?>

Vi kontrollerer først om varen er tilgjengelig eller ikke, og send deretter ut nødvendig HTML. Å anskaffe prisen på produktet er en enkel metode å ringe unna!

Legg i handlekurv

getChildHtml ( 'AddToCart') kart direkte til katalog / produkt / syn / addtocart.phtml. Vår fil ser slik ut:

 getProduct ()?> isSable ()):?>

Som det er logisk, kontrollerer vi om et element er til salgs før vi sender ut nødvendig HTML. Det er en enkel knapp som er tydelig.

produktbeskrivelse

getChildHtml ( 'beskrivelse') kart direkte til katalog / produkt / syn / description.phtml. Vår fil ser slik ut:

 getProduct () -> getDescription (); ?>  produktbeskrivelse
 helper ('katalog / utgang') -> productAttribute ($ this-> getProduct (), nl2br ($ _ beskrivelse), 'beskrivelse')?>

I likhet med hvordan vi inkluderte rask oversikt, bruker vi Magento sine innebygde metoder for å skaffe den nødvendige informasjonen. Vi ser etter beskrivelsens eksistens før vi gjør det.

I tilfelle du er nysgjerrig, har jeg vanligvis en tendens til å inkludere beskrivelsen separat via maler, for det meste fordi i produksjonsmaler vil du nesten alltid være postprosess beskrivelsen på en eller annen måte. I disse scenariene er det enklere å dele denne logikken på sin egen mal. En rask oversikt, derimot, er vanligvis ganske liten og er derfor inkludert direkte.

Hva vi skal bygge i neste del

... er helt opp til deg. Det er ganske mange synspunkter du kan designe, men det er ganske presumptuøst av meg å velge en. Dermed ber jeg deg, leseren, å foreslå et syn for å dekke i neste del gjennom en kommentar i kommentarfeltet nedenfor. Ikke glem å fortelle meg hvilken som skal dekke neste!

Det siste ordet

Og vi er ferdige! I dag opprettet vi den første visningen av vårt tilpassede Magento-tema, produktvisningen sammen med å se hvordan Magento lar oss legge til side-spesifikke eiendeler og innhold. 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 en kommentar. Glad koding!

Kode