Share
In deze serie zullen we de basis van Magento Theme Development bekijken.
Magento heeft een reputatie opgebouwd als een van de meest flexibele en krachtige eCommerce-platforms die er zijn.
Documentatie hiervoor is schaars waardoor ontwikkelaars een raadsel hebben om op te lossen. Dat wil zeggen dat het relatief eenvoudig is als je eenmaal de basisbeginselen begrijpt vooral als je iemand bent die zich op zijn gemak voelt bij de ontwikkeling van de front end.
Voordat we verder gaan, is het belangrijk om het doel van deze serie te begrijpen en waar we de komende weken naartoe gaan.
Deze serie is bedoeld voor de beginner en behandelt de basis van de ontwikkeling van het thema aan de voorkant. Als je een gevorderde Magento-ontwikkelaar bent, is dit misschien niet de serie voor jou.
In deze serie behandelen we de volgende onderwerpen:
Tegen het einde van de serie ben je goed uitgerust om tenminste een goed begrip te hebben van de Magento-themaprincipes en in staat te zijn om je eigen thema's te maken en aan te passen, zoals een professional!
Met dat gezegd, we zijn klaar om te beginnen.
Ten eerste moeten we de Magento-hiërarchie begrijpen en ons thema op zijn plaats krijgen. Er zijn honderden mappen en duizenden bestanden, veel te veel om op te noemen, ik zal me alleen concentreren op de bestanden waarmee we moeten werken.
app / ontwerp / frontend / basis / standaard / app / ontwerp / frontend / standaard / standaard / app / ontwerp / frontend // / skin / frontend / base / standaard / skin / frontend / standaard / standaard / skin / frontend / / /
Magento, in wezen, heeft twee mappen app en huid die met elkaar corresponderen. De app map bevat bestanden die bepalen hoe de paginasjablonen worden weergegeven, de structuur. De huid map bevat bestanden die het uiterlijk van de website bepalen, zoals CSS, JavaScript en afbeeldingen.
In een submap van app en huid zijn waar onze pakketten en thema's te vinden zijn, een typische installatie van Magento wordt geleverd met twee pakketten baseren en standaard.
Dus voordat we verder gaan, is het belangrijk dat we begrijpen wat pakketten en thema's zijn. Als we dit goed doen, valt al het andere op zijn plaatsaardig.
EEN pakket is een verzameling gerelateerde thema's, er is geen beperking op het aantal pakketten dat we kunnen hebben en we moeten ten minste één pakket aanwezig hebben. Magento wordt geleverd met een speciaal pakket, als je wilt, gebeld baseren. Het is een repository voor het beschikbaar maken van Magento core-bestanden aan de voorkant. Jij moet nooit bewerk de baseren pakketbestanden, doe dit op eigen risico - hier later meer over!
EEN thema aan de andere kant is een directe submap van een pakket dat de bestanden bevat waaruit je winkel bestaat, opnieuw is er geen beperking op het aantal thema's dat we binnen een pakket kunnen hebben. Een thema kan slechts tot één pakket behoren en volgens afspraak moet elk pakket een thema met de naam "standaard" bevatten, wat het hoofdthema voor dat pakket is.
De baseren pakket bevat slechts één genoemd thema standaard. Het wordt geleverd bij elke Magento-installatie en bevat de front-endbestanden die onze winkel laten draaien. Er zijn een paar regels die we moeten accepteren met het basispakket.
De eerste regel is, zoals ik eerder al zei, niet om deze bestanden te bewerken, dit betekent zowel in app / design / frontend / base / en skin / frontend / base / ze moeten alleen als referentie worden gebruikt. Bestanden die moeten worden bewerkt, moeten worden gekopieerd baseren aan jouw pakket / thema. Daar zijn een aantal redenen voor die ik zal uitleggen.
Deze bestanden maken Magento-kernbestanden app / code / kern / beschikbaar aan de voorkant. We moeten gewoon geen kernbestanden bewerken, deze theorie is niet alleen van toepassing op Magento maar ook van toepassing op andere platforms, waaronder WordPress.
De tweede is dat wanneer je Magento upgradet het waarschijnlijk de baseren pakketbestanden. Dus al je harde werk en bewerkingen om je website er tip top uit te laten zien zijn allemaal verdwenen. Tenzij je een back-up hebt genomen, heb je het wel gehad!
De tweede regel zijn de bestanden in de baseren pakket maken deel uit van het fall back-systeem, dat ik hierna zal uitleggen. Kortom, Magento zal terugvallen op de kernbestanden die zijn gevonden in baseren nadat het uw pakket en thema heeft gebruikt. Wanneer het terugvalt zou het moeten zijn naar het originele intacte bestand en niet naar een bewerkte versie.
De derde regel is om geen thema's te maken in de baseren pakket.
Samenvattend, alleen gebruiken baseren ter referentie en als u een bestand moet bewerken, kopieert u het naar uw eigen bestand pakket / thema. Als je ooit moet bewerken baseren doe dit op eigen risico en houd je wijzigingen bij, want je moet ze mogelijk handmatig herstellen na upgrades, anders laat je het goed alleen!
De standaard pakket wordt opnieuw geleverd bij elke Magento-installatie, maar deze keer zijn er meerdere thema's aan toegewezen. Vanaf community edition 1.8.1.0 zijn er vier verschillende thema's:
Net als de baseren pakket exact dezelfde regels zijn hier van toepassing. De thema's in de standaard pakket zijn in essentie puur voor demonstratiedoeleinden. Ideaal voor demo-winkels of als u wilt laten zien wat Magento voor uw klanten kan betekenen, het is een snelle installatie.
Magento vertrouwt op een fallback-logica om thema's gemakkelijker te onderhouden en meer upgrade vriendelijk te maken. Hiermee kunnen we alleen de bestanden bewerken en onderhouden die we nodig hebben binnen ons thema. Als we het bestand niet hoeven te bewerken, hebben we het niet nodig in ons thema, het bestand wordt van elders opgehaald. Om dit in detail uit te leggen, hebben we een voorbeeld uit het echte leven nodig.
Stel dat we onze eigen website hebben die is ingesteld om ons eigen pakket en thema te gebruiken, zoals:
app / ontwerp / frontend / our_package / our_theme / skin / frontend / our_package / our_theme /
Onze website vraagt om een sjabloonbestand met de naam 1column.phtml en een CSS-bestand met de naam styles.css maar Magento kan deze bestanden niet vinden binnen ons thema. Magento fallback-logica zal nu naar het volgende thema in de hiërarchie van de bestanden zoeken en doorgaan met zoeken totdat de gevraagde bestanden worden gevonden.
De volgende volgorde demonstreert de fallback-logica die Magento doorloopt bij het zoeken naar onze bestanden:
app / ontwerp / frontend / our_package / our_theme / sjabloon / pagina / 1column.phtml app / ontwerp / frontend / our_package / standaard / sjabloon / pagina / 1column.phtml app / ontwerp / frontend / basis / standaard / sjabloon / pagina / 1 kolom. phtml skin / frontend / our_package / our_theme / css / styles.css skin / frontend / our_package / default / css / styles.css skin / frontend / base / default / css / styles.css
Met deze fallback-logica op zijn plaats betekent dit dat we een schone codebasis kunnen hebben door onze thema's tot het absolute minimum te beperken. Kopieer alleen de bestanden van baseren dat we wijzigingen moeten aanbrengen om de bestanden anders uit ons thema te laten. Als onze website het bestand opvraagt en we hebben het niet in ons thema, dan wordt het gevonden door de bovenstaande logica te doorlopen.
Notitie:Als na Magento de fallback-logica en het bestand zijn doorlopen nog steeds kan niet worden gevonden. Er wordt een renderfout gegenereerd als deze in de app-map staat of als deze in de map met de skin waarschijnlijk een 404-bestand zal vinden dat niet is gevonden.
Oké, genoeg gepraat, laten we het doen om het op te zetten.
Eerst zullen we onze hele pakket- / thema-opzet maken. We beginnen met het maken van de volgende mappen:
app / ontwerp / frontend / jasonalvis / default / skin / frontend / jasonalvis / standaard /
Nu hebben we een pakket genaamd jasonalvis en een thema genaamd standaard, voel je vrij om je pakket te hernoemen om aan je behoeften te voldoen. We houden de thema-naam als standaard omdat elk pakket altijd een standaard thema, ook dat onthouden standaard maakt automatisch deel uit van de fallback-logica.
Het enige dat nu nog te doen is, is om het pakket via het Magento-admingebied in te schakelen. Eenmaal ingelogd ga je naar systeem> configuratie. Klik hier vanaf ontwerp uit het menu aan de linkerkant en voer vervolgens uw pakketnaam in de Huidige pakketnaam veld-.
Terwijl we hier beneden opmerken is er een thema's sectie. Dit is waar we onze thema-naam zouden invoeren, maar omdat we alleen maar gebruiken standaard we hoeven hier niets in te typen omdat Magento deze naam automatisch opzoekt.
Voor demonstratiedoeleinden zeggen we hadden bijvoorbeeld een thema dat we wilden gebruiken tijdens een verkoop, we zouden het thema zo maken zoals:
app / ontwerp / frontend / jasonalvis / sale / skin / frontend / jasonalvis / sale /
Alles wat we dan zouden moeten doen is het thema inschakelen in het admin-gebied, net zoals we deden met ons pakket:
Dus nu weet je hoe je je pakket / thema moet instellen, maar wat het beste is voor welk scenario?
Nou, er zijn ontelbare scenario's en ik weet zeker dat jullie allemaal een andere hebben. Het wordt ook een beetje ingewikkelder als je een Magento-installatie hebt met een installatie met meerdere winkels. Als algemene regel geldt dat de thema's van het pakket vergelijkbaar moeten zijn, anders zouden ze in pakketten moeten worden verdeeld.
De standaard thema zou de sitehub moeten zijn en de aanvullende thema's zouden gewoon aanpassingen aan de hub moeten zijn. Als je elk aspect van de site in een thema drastisch verandert, is het waarschijnlijk de bedoeling dat het geheel in een apart pakket zit.
Notitie: Bij het maken van extra thema's binnen ons pakket hoeven we het niet in zowel de app- als de huiddirectory te maken, maar alleen het thema te maken waar het relevant is. Neem bijvoorbeeld ons verkoopthema, het zijn alleen maar stylingwijzigingen, ander kleurenschema, enz. De eigenlijke sjabloonbestanden worden niet gewijzigd. Maak daarom alleen het thema in de skin directory en bewerk de relevante bestanden zoals vereist.
Met dat gezegd, laten we het een dag noemen. Je moet nu een goed begrip hebben van de Magento-hiërarchie die je in de rest van de serie in gebruik zult moeten nemen. Zoals altijd laat een vraag een bericht achter in de comments hieronder.
In het volgende artikel zullen we de basis van lay-out XML bekijken. In de tussentijd, aarzel niet om ons eventuele vragen, opmerkingen of feedback te sturen!
Accentsconagua