Share
Hva du skal skapeI denne opplæringsserien utvikler vi et Magento-tema fra bunnen av. Som Magento er et enormt eCommerce CMS med tonnevis av tilpasningsalternativer, er Magento-temaene vanligvis ansett som svært komplekse å utvikle, men jeg håper at når du følger med denne serien, vil du bli kjent med Magento-terminologien og hvordan det utvikles i det . Jeg skal prøve å forklare alt mens vi går sammen, og utvikle hver enkelt komponent av siden trinnvis.
Det første skrittet mot en Magento-utvikling er å ha en kopi av Magento installert på din lokale server. Du kan også ha en kopi av Magento installert på din webserver, men det vil bare redusere utviklingshastigheten din. Så jeg anbefaler alltid å bruke en lokal server for utvikling, og når du har fullført utviklingen og grundig testet sluttproduktet, bør du bare laste det opp på serveren din.
Jeg vil ikke gjenoppfinne hjulet ved å forklare hvordan du skal installere Magento på din lokale server. Det er mange gode artikler tilgjengelig på internett for det. Du kan også finne Magento installasjonsartikler på vår side, som denne Tuts + artikkelen, som vil veilede deg gjennom hvordan du installerer Magento på din lokale server.
Du må også installere Magento eksempeldata, mens du installerer Magento. Denne eksempeldata vil legge til mange kataloger, produkter, anmeldelser, etc., og gjennom det kan vi teste forskjellige scenarier under utviklingen.
Når du er ferdig med å installere Magento, er neste trinn å ha verktøyene for utvikling klar. Du kan bruke kodeditoren eller IDE til ditt valg her. Enhver kodeditor du er komfortabel med vil fungere bra her. Hvis du ikke har brukt noen kodeditor før, vil jeg anbefale å installere Notepad ++, da det er en veldig lett, brukervennlig og gratis kodeditor.
Vi trenger også en elementinspektør for å sjekke og redigere CSS-stiler på nettsidene. Hvis du bruker Firefox, kan du installere Firebug-utvidelsen for det. Men hvis du bruker Chrome, fungerer Chrome Web Inspector flott. Den leveres med Chrome, så du trenger ikke installere utvidelser for det. I forbindelse med denne serien bruker jeg Chrome Web Inspector til å feilsøke og redigere CSS-stiler.
Jeg har utviklet noe HTML for formålet med denne serien. HTML-en inneholder designmønstre og -elementer som hovedsakelig brukes i eCommerce-temaer, for eksempel toppkurv, header-glidebryter, valuta- og språkvelger, etc. Vi vil trinnvis konvertere denne HTML-en til et fungerende Magento-tema. HTML-temapakken er vedlagt her for å laste ned.
Før vi dykker inn i selve utviklingsfasen, vil jeg sterkt anbefale at du går gjennom denne Tuts + artikkelserien om Magento-temautvikling. Denne tre-tutorial serien vil gjøre deg kjent med teorien bak Magento tema og dens grunnleggende prinsipper. Denne kunnskapen om Magento-temautvikling vil være spesielt nyttig før du begynner å få hendene skitne med faktisk temakoding.
Nå som du burde ha en fungerende Magento-installasjon og verktøy for utvikling klar, og du har gått gjennom grunnleggende temautvikling ved å lese serien anbefalt ovenfor, la meg kort legge merke til mappene der vi skal redigere filer.
Når du åpner Magento-rotmappen din, ser du en liste over mapper under det. Ut av disse mappene er mappene der vi redigerer filer, bare app mappe og hud mappe.
Vi kan noen ganger også bruke js-mappen, for å plassere JavaScript-biblioteksfiler som jQuery, hvis de ikke allerede er der. Gå videre og bli kjent med mappene i app- og hudmappene, før du begynner å følge trinnene i de neste artiklene i denne serien.
Vi må endre noen innstillinger i Magento, som vil hjelpe oss med å utvikle Magento-temaet raskere, og vil fortelle oss om noe går galt i Magento.
Først av alt vil vi deaktivere Magento Cache. For det, gå til System> Cache Management, og velg alle typer cacher. Fra handlingene velger du Deaktiver, og sende inn.
Når vi har deaktivert alle Caches, er neste trinn å re-indeksere dataene. For det, gå til System> Indeksstyring. Velg alle indekser, og velg fra handlingene Reindex Data, og sende inn.
Nå aktiverer vi logger og blokkere hint i Magento. Gå til System> Konfigurasjoner, og i venstre sidefelt vil det siste elementet være Utvikler. Klikk på det. På neste side, fra Logginnstillinger, aktiver logger, og klikk Lagre konfig knappen øverst til høyre.
Deretter ser du øverst på venstre sidefelt Nåværende konfigurasjonsområde velg bar. Å velge Hovedside derfra.
Nå fra Debug delen, aktiver Meldingsveiledning for mal, og treffer Lagre konfig knappen igjen.
Til slutt, gå til Magento rotkatalogen, og åpne index.php filen derfra. På linje 77, uncomment denne linjen med kode:
ini_set ( 'display_errors', 1);
Det er det for nå. Du kan kanskje ikke skjønne det, men vi har bygget opp et godt grunnlag for faktisk temautvikling i de neste opplæringsprogrammene i denne serien. Til slutt vil jeg igjen oppmuntre deg til å gå gjennom Magento Theme Development-serien jeg har anbefalt ovenfor, hvis du ikke allerede har det.
I den neste opplæringen lager vi vårt nye mappes mappestruktur. Vi kopierer CSS, JS og bildefiler fra HTML til temaet vårt, og lager temaet vårt local.xml-fil for å sikre at temaet vårt kobler til disse filene.
Det er det, og jeg håper du følger med oss i de neste opplæringsprogrammene.
Accentsconagua