Share
Wat je gaat creërenIn deze tutorialserie zullen we vanaf het begin een Magento-thema ontwikkelen. Aangezien Magento een enorm eCommerce CMS is met tal van aanpassingsmogelijkheden, worden Magento-thema's gewoonlijk als zeer complex beschouwd om te ontwikkelen, maar ik hoop dat als je eenmaal deze reeks volgt, je heel goed vertrouwd raakt met Magento-terminologie en hoe dingen daarin worden ontwikkeld . Ik zal proberen alles uit te leggen terwijl we verder gaan, stap voor stap elk onderdeel van de pagina ontwikkelen.
De eerste stap naar elke ontwikkeling van Magento is het hebben van een kopie van Magento op uw lokale server. Je kunt ook een kopie van Magento op je webserver laten installeren, maar dat zal je ontwikkelsnelheid alleen maar vertragen. Dus ik raad altijd aan om een lokale server te gebruiken voor ontwikkeling, en als je klaar bent met de ontwikkeling en het eindproduct grondig hebt getest, dan zou je het op je server moeten uploaden.
Ik zal het wiel niet opnieuw uitvinden door uit te leggen hoe je Magento op je lokale server moet installeren. Daarvoor zijn veel goede artikelen op internet beschikbaar. Je kunt ook Magento-installatieartikelen vinden op onze site, zoals dit Tuts + -artikel, dat je zal helpen bij het installeren van Magento op je lokale server.
Je moet ook Magento's voorbeeldgegevens installeren tijdens het installeren van Magento. Deze voorbeeldgegevens zullen vele catalogi, producten, recensies, enz. Toevoegen en daardoor kunnen we verschillende scenario's testen tijdens de ontwikkeling.
Als je eenmaal klaar bent met het installeren van Magento, is de volgende stap om de gereedschappen voor ontwikkeling gereed te hebben. U kunt hier de code-editor of IDE van uw keuze gebruiken. Elke code-editor waar je je prettig bij voelt, werkt hier prima. Als je nog nooit een code-editor hebt gebruikt, zou ik aanraden om Notepad ++ te installeren, omdat het een zeer lichte, gebruiksvriendelijke en gratis code-editor is.
We hebben ook een elementinspecteur nodig om CSS-stijlen op de webpagina's te controleren en bewerken. Als u Firefox gebruikt, kunt u daarvoor de Firebug-extensie installeren. Als u Chrome echter gebruikt, werkt Chrome Web Inspector uitstekend. Het wordt geleverd met Chrome, dus u hoeft hiervoor geen extensies te installeren. Voor deze serie gebruik ik Chrome Web Inspector om CSS-stijlen te debuggen en bewerken.
Ik heb wat HTML ontwikkeld voor het doel van deze serie. De HTML bevat de ontwerppatronen en elementen die meestal worden gebruikt in eCommerce-thema's, zoals topkarretje, headerschuifregelaar, valuta- en taalkiezer, etc. We zullen deze HTML stap voor stap omzetten in een werkend Magento-thema. Het HTML-themapakket is hier bijgevoegd om te downloaden.
Voordat we ingaan op de feitelijke ontwikkelingsfase, raad ik u ten zeerste aan om deze Tuts + -artikelserie over Magento-thema-ontwikkeling door te nemen. Deze serie met drie lessen maakt je bekend met de theorie achter Magento-thema's en de basisprincipes. Deze kennis van Magento-thema-ontwikkeling zal vooral nuttig zijn voordat je je handen vies gaat maken met echte thema-codering.
Nu dat je een werkende Magento-installatie en gereedschappen voor ontwikkeling klaar moet hebben en je de basisbeginselen van thema-ontwikkeling hebt doorlopen door de hierboven aanbevolen serie te lezen, wil ik je in het kort laten kennismaken met de mappen waarin we bestanden gaan bewerken..
Wanneer u uw Magento-hoofdmap opent, ziet u een lijst met mappen daaronder. Van deze mappen zijn de mappen waarin we bestanden gaan bewerken gewoon de app map en de huid map.
We kunnen af en toe ook de js-map gebruiken om JavaScript-bibliotheekbestanden zoals jQuery te plaatsen, als ze daar nog niet zijn. Ga je gang en maak je vertrouwd met de mappen in de app- en skinmappen voordat je de stappen in de volgende artikelen van deze serie gaat volgen.
We moeten enkele instellingen in Magento wijzigen, wat ons zal helpen ons Magento-thema sneller te ontwikkelen en ons laat weten of er iets mis gaat in Magento.
Allereerst zullen we Magento Cache uitschakelen. Ga daarvoor naar Systeem> Cache Management, en selecteer alle soorten caches. Selecteer vanuit de acties onbruikbaar maken, en indienen.
Zodra we alle caches hebben uitgeschakeld, is de volgende stap om de gegevens opnieuw te indexeren. Ga daarvoor naar Systeem> Indexbeheer. Selecteer alle indexen en selecteer uit de geselecteerde acties Gegevens opnieuw indexeren, en indienen.
Nu zullen we logs inschakelen en hints blokkeren in Magento. Ga naar Systeem> Configuraties, en in de linkerzijbalk is het laatste item Ontwikkelaar. Klik op dat. Op de volgende pagina, van Log instellingen, logs inschakelen en raken Config opslaan knop rechtsboven.
Vervolgens zie je bovenaan de linker zijbalk het Huidige configuratiebereik selecteer balk. kiezen Hoofdwebsite vanaf daar.
Nu van de debug sectie, inschakelen Tips voor sjabloonnet, en druk op de Config opslaan knop opnieuw.
Ga ten slotte naar de hoofdmap van Magento en open daar het index.php-bestand. Op regel 77, reageer met deze regel code:
ini_set ( 'display_errors', 1);
Dat is het voor nu. Je realiseert je dit misschien niet, maar we hebben een goede basis opgebouwd voor de daadwerkelijke ontwikkeling van thema's in de volgende tutorials in deze serie. Uiteindelijk zal ik je opnieuw aanmoedigen om de Magento Theme Development-serie die ik hierboven heb aanbevolen, van dichtbij te bekijken, als je dat nog niet hebt gedaan.
In de volgende zelfstudie maken we de mappenstructuur van onze nieuwe thema's. We kopiëren de CSS-, JS- en afbeeldingsbestanden van HTML naar ons thema en maken het local.xml-bestand van ons thema om ervoor te zorgen dat onze thematische links naar deze bestanden.
Dat is alles, en ik hoop dat u ons in de volgende zelfstudies zult volgen.
Accentsconagua