Share
Magento is een verbluffend krachtig e-commerceplatform. In deze miniserie leren we hoe je aan de slag kunt met het platform, de terminologieën leert kennen, een winkel en alle gerelateerde aspecten ervan kunt opzetten en uiteindelijk leren hoe je het kunt aanpassen om het ons eigen te maken..
In dit vierde deel zullen we de basis leggen voor ons thema dat we volledig vanaf nul zullen opbouwen. Opgewonden? Laten we beginnen!
In de laatste delen hebben we geleerd hoe u uw Magento-winkel kunt laten installeren tot klaar voor implementatie, inclusief hoe u uw producten, productcategorieën, belastingen, verzending, betalingsgateways en nog veel meer kunt instellen.
We hebben ook de basis van Magento-thema's bekeken. We leerden het algemene idee achter Magento-thema's, de verschillende terminologieën erachter en de basisstructuur van een thema.
Ons doel voor het bouwen van dit thema is redelijk eenvoudig: praktisch begrijpen hoe een Magento-thema moet worden gemaakt. Met dat in gedachten, ga ik het thema zo eenvoudig mogelijk houden.
Omdat het codeerproces van Magento redelijk gecompliceerd is voor iemand die gewend is aan WordPress, gaan we het extreem traag doen. Vandaag zullen we alleen het kerngedeelte van ons thema bouwen, het skelet dat in elke weergave van de site wordt gebruikt. Ik zal ook het algemene principe achter het proces uitleggen, zodat we in de toekomst verder kunnen gaan naar elk afzonderlijk beeld.
De bronbestanden, zowel de voorkant als de achterkant, zijn inbegrepen, maar proberen deze nog niet te gebruiken. We zullen alleen de kerndelen definiëren zonder te definiëren welke inhoud moet worden weergegeven, hoe deze moet worden weergegeven en waar de inhoud moet worden getrokken. Dus, als je dit op dit moment probeert te gebruiken, zul je een hoop wartaal zien sinds Magento alle afwezige bestanden uit zijn standaardthema haalt en onze blik compleet verpest. Dus mijn advies is, wacht even.
De basissjabloon ziet er zo uit. We hebben een generiek logo bovenaan en een eenvoudig menu waarmee de gebruiker toegang heeft tot zijn account, verlanglijst en winkelwagen, en hem laat afrekenen of uitloggen.
Daaronder hebben we een werkbalk met een breadcrumb-stijlnavigatie om de gebruiker de contextuele hiërarchie van de site te laten weten. We laten de gebruiker ook onze winkel doorzoeken via de zoekinvoer aan de rechterkant.
Het inhoudsgebied is momenteel leeg, omdat de inhoud ervan afhankelijk is van de weergave die Magento laadt. Dus we houden het nu leeg en verwerken het later wanneer we elke afzonderlijke pagina maken.
De voettekst is redelijk generiek met een link om bugs en copyrightinformatie te melden.
We zullen eerst de HTML voor het skelet van het thema bekijken. Ik ga ervan uit dat je redelijk vloeiend bent in HTML en CSS, dus ik ga door naar de meer belangrijke delen.
Cirrus - Magento Theme Welkom, Sid
- Mijn rekening
- Mijn wenslijst
- Mijn wagen
- Uitchecken
- Uitloggen
Thuis "State of FearInhoud hier
Help ons om Magento gezond te houden - Rapporteer alle bugs (versie 1.4.0.1) © 2008 Magento Demo Store. Alle rechten voorbehouden.
Merk allereerst op dat ik alles heb ingepakt onder een wrapper-div om het gemakkelijker te maken dingen te beheren. Merk ook op dat de kop-, inhoud- en voettekst-sectie hun individuele blokken krijgen.
De zoekingang is op dit moment vrij nutteloos. We zullen het goed aansluiten wanneer we integreren met Magento. Hetzelfde met de verschillende links. Momenteel heb ik ze daar geplaatst als tijdelijke aanduidingen. Als we eenmaal in Magento zijn gegraven, krijgen we ze aan de praat.
* marge: 0; opvulling: 0; rand: geen; overzicht: geen; kleur: # 333; font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; lettergrootte: 14 px; lijststijl: geen; regelhoogte: 1.3em; a color: # 7db000; h1, h2, h3, h4 font-weight: normaal; h1 font-size: 32px; margin-bottom: 10px; h2 font-size: 24px; marge: 10px 0 12px 0; h3 font-size: 20px; margin-bottom: 5px; h4 font-size: 20px; .border border: 1px solid # 666; / * Base Elements * / #wrapper width: 920px; marge: 10px auto; opvulling: 20px; #header margin: 0 0 20px 0; overloop: automatisch; #content margin: 20px 0; overloop: automatisch; #footer opvulling: 10px; rand: 1px vast # E1E1E1; achtergrond: # F3F3F3; text-align: center; / * Headerinhoud * / #logo float: links; #hud float: right; breedte: 320 px; hoogte: 50px; opvulling: 10px; rand: 1px vast # E1E1E1; achtergrond: # F3F3F3; #hud li a float: left; lettergrootte: 12px; marge: 0 10px 0 0; #utilities duidelijk: beide; marge: 20 px 0; overloop: automatisch; opvulling: 7px 10px; rand: 1px vast # E1E1E1; achtergrond: # F3F3F3; #broodkruimels float: links; # header-search float: right;
Niets bijzonders hier. Zeer eenvoudige CSS om de elementen in positie te plaatsen en het een klein beetje te vormen. Laten we verder gaan.
Dit deel is een beetje lastig, dus blijf hier bij mij. Magento gebruikt XML-bestanden om de lay-out van een pagina af te handelen en ook om te definiëren welke elementen beschikbaar moeten zijn voor weergave. Het doel is dat u, in plaats van te morrelen met geheimzinnige code, het XML-bestand kunt bewerken en ermee kunt werken zonder u zorgen te maken over afhankelijkheden..
Elke weergave / scherm / module krijgt een eigen XML-bestand samen met een hoofdbestand om de algemene lay-out van de site te definiëren. Dat hoofdbestand is het page.xml bestand dat we nu gaan maken.
Het volledige bestand voor vandaag ziet er zo uit. Ik zal elk bitgedeelte uitleggen per onderdeel hieronder.
css / cirrus.css
Negeer de initiële XML en lay-outversieaanduidingen. Ze zijn nu niet van belang voor ons.
Eerst maken we een hoofdblok voor alle gegevens. Beschouw dit als het equivalent van het wikkel-DIV-element dat we in onze HTML hebben gebruikt. Vervolgens bevelen we het aan om te gebruiken page / 1column.phtml als de sjabloon voor onze pagina. Maak je geen zorgen, we hebben het bestand nog niet gemaakt. We doen dit later in deze tutorial.
css / cirrus.css
Vervolgens definiëren we de elementen die moeten worden opgenomen in de hoofd deel van de pagina. Magento bevat standaard een hele reeks CSS- en JS-bestanden, maar we zullen vandaag geen van hun functies nodig hebben. Dus we nemen gewoon ons CSS-bestand op.
We bepalen wat er in de kop van onze site staat. We willen het menu / de koppelingen bovenaan evenals de broodkruimels en de zoekopdracht.
We hebben natuurlijk het contentgedeelte nodig, dus we nemen het contentgedeelte mee. We zullen hier niets over dit gedeelte definiëren, omdat Magento gewoon alle benodigde inhoud in dit blok laadt.
En tot slot hebben we onze voettekst toegevoegd. We vertellen Magento ook waar het sjabloon moet worden geladen.
Je vraagt je waarschijnlijk af waarom we een sjabloonpad voor sommige blokken opgeven en dit voor anderen weglaten. Het is een onderwerp op een hoger niveau, maar merkte je op dat elk blok een type attribuut? Als het type overeenkomt met een van de vooraf gedefinieerde door Magento, hoeft u geen sjabloon op te geven. Het is automatisch geladen. Handig, nee?
En daarmee onze basis page.xml bestand is voltooid.
Okay, nu we onze lay-out hebben gespecificeerd, kunnen we verder gaan met het maken van de 1column.phtml bestand dat we eerder in de XML hebben opgegeven.
Dit bestand is niets anders dan een skeletsjabloon die naar behoefte de koptekst, het inhoudsgebied en het voettekstbericht oproept. Ons bestand ziet er zo uit:
Accentsconagua
getChildHtml ('head')?> getChildHtml ('header')?> getChildHtml ('content')?> getChildHtml ('footer')?> Dit is vrijwel ons oorspronkelijke HTML-bestand, behalve dat we de getChildHtml methode om de inhoud van elk blok te verwerven. De sjabloon moet behoorlijk pagina-agnostisch zijn, omdat dit de hoofdpagina is van waaruit elke pagina wordt weergegeven.
Nu komt het enigszins moeilijke deel: het versnipperen van onze kern HTML-blokken door functionaliteit, het creëren van de vereiste sjabloondocumenten voor elke functionaliteit en dan het vullen van die bestanden.
We pakken ze allemaal aan in volgorde van uiterlijk
getChildHtml ( 'head') kaarten direct naar page / html / head.phtml. Ons bestand ziet er zo uit:
<?php echo $this->getTitle ()?> getCssJsHtml ()?> getChildHtml ()?> getIncludes ()?>
Je zult zien dat we Magento de titels dynamisch laten maken. Anders dan dat, let op het getCssJsHtml methode wordt aangeroepen. Deze methode importeert alle CSS- en JS-bestanden die we hebben opgegeven in de page.xml het dossier.
getChildHtml ( 'header') kaarten direct naar page / html / header.phtml. Ons bestand ziet er zo uit:
getUrl (")?>" title = "getLogoAlt ()?> ">Welkom
getChildHtml ('topLinks')?>getChildHtml ('breadcrumbs')?> getChildHtml ('topSearch')?>
We gebruiken Magento's API om eerst het logo te verkrijgen. Om de dingen verder te modulariseren, krijgen we de HTML voor de broodkruimels, koppelingen en de zoekfunctie.
Merk op dat de naam puur semantisch is. Zoals je ziet, ben je niet beperkt tot de header in zijn puurste, strikt technische zin. Je kunt ook andere elementen aanpassen als dat nodig is.
getChildHtml ( 'footer') kaarten direct naar page / html / footer.phtml zoals gespecificeerd in het XML-bestand. Ons bestand ziet er zo uit:
__ ('Help Us Magento gezond te houden')?> - __ ('Rapporteer alle bugs')?> __ ('(ver.% s)', Mage :: getVersion ())?> getCopyright ()?>
Met de voettekst kunt u alle informatie opnemen die u geschikt acht. Ik heb zojuist de standaardinhoud opgenomen, omdat ik er niets slims over kon bedenken.
Nadat de kernelementen zijn voltooid, kunnen we doorgaan naar de kleinere functionele blokken die in het kopgedeelte zijn gespecificeerd, dat wil zeggen de broodkruimels, koppelingen en de zoekfunctie..
getChildHtml ( 'Topstangen') kaarten direct naar page / html / template / links.phtml. Ons bestand ziet er zo uit:
?> )
