Share
In dit artikel bespreken we de basisprincipes van Magento-sjabloonbestanden. We zullen hun introductie bespreken en enkele basisaanpassingen doen.
Dit omvat het weergeven van aanbevolen producten op de startpagina en het laden van JavaScript in het voettekst.
In navolging van ons vorige artikel hebben we gezien dat de lay-outbestanden elk blok in een thema besturen en bepalen wat wel en niet wordt weergegeven. Maar wat binnen in dat blok wordt weergegeven, is waar de sjabloonbestanden in actie komen.
In dit artikel zullen we ons concentreren op de volgende mappen:
Accentsconagua
app / design / frontend ///sjabloon/ app / design / frontend /// Locale / Als je zojuist lid bent geworden, lees dan de vorige artikelen in deze serie.
Ter referentie: we hebben het volgende behandeld:
Zonder verder te doen, laten we aan de slag gaan.
Magento-sjabloonbestanden zijn PHTML-bestanden die bestaan uit een combinatie van HTML en PHP, waarvan sommige een pagina zoals weergeven 1column.phtml terwijl anderen specifieke blokken weergeven binnen een pagina zoals header.phtml.
Voor het grootste deel van de tijd tijdens de ontwikkeling van een website zijn dit de bestanden waar we vooral mee zullen werken, voor front-end ontwikkelaars. Zodra de XML op zijn plaats is en een sjabloon wordt gebeld, wordt verwacht dat het bestand dienovereenkomstig zal worden geparseerd en weergegeven.
Er zijn honderden sjabloonbestanden beschikbaar, wetende welke te bewerken en vervolgens het bestand in de hiërarchie op te sporen kan lastig zijn bij de eerste start.
Maar goed, er zijn een paar leuke instellingen voor het beheerdersgedeelte die ons kunnen helpen, ze zullen ons urenlang hoofdpijn besparen!
Belangrijk om op te merken, we kunnen alleen de volgende instellingen gebruiken bij de scope "Website" of "Winkelweergave", de instellingen zijn niet beschikbaar voor ons op het "Standaardconfiguratie" bereik, dus we moeten onthouden om de scope te veranderen zodra ingelogd Dit is echter handig, want het betekent dat we de instellingen alleen voor een bepaalde website of winkelweergave kunnen wijzigen in plaats van globaal.
Deze zullen snel identificeren welke bestanden worden geladen voor een specifieke pagina door ons het pad naar het bestand te tonen. Het in- of uitschakelen is een snelle wijziging van de instellingen in het beheerdersgedeelte.
Ga naar systeem> configuratie. Blader vervolgens in het menu aan de linkerkant helemaal naar beneden en klik op 'Ontwikkelaar' onder de kop 'Geavanceerd'. Nadat we het bereik hebben gewijzigd in 'Hoofdwebsite', hebben we de instelling beschikbaar voor ons onder 'Debug'.
Het lijkt erop dat er niets is gebeurd nadat u op save config hebt geklikt, maar als u naar de voorkant van de website gaat, bijvoorbeeld naar de startpagina, en de pagina vernieuwt, ziet u de hints die doorkomen.
Hiermee weten we nu waar de bestanden zich bevinden en als er aanpassingen nodig zijn, kopieert u het bestand van basis naar thema en wijzigt u zo nodig.
We kunnen ook "Voeg bloknaam toe aan hints" in op "Ja" als we meer informatie willen, dit wordt meestal gebruikt voor back-end ontwikkeling, dus ik zou me niet teveel zorgen maken over deze instelling.
Nu, door naar de code. Ik zal een aantal wijzigingen doornemen die vaak worden gebruikt bij de ontwikkeling van thema's, maar opnieuw zal ik alleen het oppervlak aanraken op wat mogelijk is.
Laten we beginnen…
Dit punt moet het meest voorkomende verzoek op elke website zijn, iedereen wil pronken met een handvol producten op de bestemmingspagina van hun site.?
Het is eigenlijk veel eenvoudiger dan je zou denken, met een combinatie van XML en PHP kunnen we dit in een mum van tijd bereiken. Er zijn, zoals met veel dingen in Magento, meer dan één manier om dit te doen. Ik ga je laten zien wat volgens mij de gemakkelijkste methode is.
Ten eerste moeten we onze categorie maken in het beheerdersgedeelte dat onze producten bevat. Eenmaal ingelogd ga je naar catalogus> categorieën beheren. Voor dit voorbeeld maken we een subcategorie onder root, dus we moeten klikken op 'Root Catalog' en vervolgens op de knop 'Subcategorie toevoegen' klikken. Voer een titel in voor de categorie, zorg dat "Is Actief" is ingesteld op "Ja" en klik vervolgens op "Categorie opslaan".
Noteer het categorie-ID-nummer bovenaan, want dit hebben we later nodig:
Dit is een goed moment om ook enkele producten toe te voegen aan de categorie die we zojuist hebben gemaakt. Klik hiervoor op het tabblad "Producten voor producten" en selecteer de producten die u wilt weergeven, vergeet niet te klikken op "Categorie opslaan" als we klaar zijn.
Vervolgens moeten we onze sjabloon maken waar onze foreach lus zal worden uitgevoerd.
Hiervoor baseren we ons op de productlijstsjabloon die alle benodigde code al voor ons heeft gedaan, we hoeven alleen maar een paar aanpassingen aan te brengen om aan onze behoeften te voldoen.
app / design / frontend / base / default / catalog / product / list.phtml
Kopiëren naar:
app / design / frontend /
We zullen dan enkele wijzigingen in ons bestand aanbrengen.
Het voltooide bestand ziet er als volgt uit:
belasting ($ _ categoryId); $ _productCollection = $ _category-> getProductCollection (); $ _ProductCollection-> addAttributeToSelect ( '*'); ?>getName (); ?>
count ()):?>__ ('Er zijn geen producten die voldoen aan de selectie.')?>
- getProductUrl ()?> "title ="stripTags ($ this-> getImageLabel ($ _ product, 'small_image'), null, true)?> ">
 -> init ($ _ product, 'small_image') -> formaat wijzigen (135); ?> )
getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> "> getName (); ?>
getRatingSummary ()):?> getReviewsSummaryHtml ($ _ product, 'short')?> getPriceHtml ($ _ product, true)?>isSaleable ()):?>__ ('Niet op voorraad')?>
helper ('wishlist') -> isAllow ()):?>
- helper ('wishlist') -> getAddUrl ($ _ product)?> ">__ ('Toevoegen aan verlanglijst')?>
getAddToCompareUrl ($ _ product)):?>- | ">__ ('Toevoegen aan vergelijking')?>
Vergeet niet om de waarde van de te wijzigen $ _categoryId variabele naar uw categorie-ID.
Ten slotte hoeven we alleen maar een XML-blok te maken dat wordt geladen in de sjabloon die we hierboven hebben gemaakt. We zullen dit doen in onze local.xml bestand als volgt:
Dat is alles wat er is, tamelijk rechtuit, toch? Hieronder ziet u een screenshot van het eindproduct.
Om te beginnen zouden we denken dat Magento deze mogelijkheid al heeft ingebouwd door de XML wanneer we onze scripts toevoegen, een soort parameter die we kunnen doorgeven, maar we zouden het mis hebben - Magento zal het niet zo makkelijk voor ons maken!
WordPress doet dit echter perfect via de wp_register_script. Misschien pakt een back-end ontwikkelaar dit op en voegt hij de mogelijkheid toe om een extra XML-parameter door te geven, nu is er een nevenproject voor iemand om mee te kraken.
Alle afnemers?
Dus, gelukkig is er nu een alternatieve methode om dit te laten werken.
Ik denk dat het belangrijk is om dit onderwerp te behandelen omdat het de snelheid van onze site zal verbeteren die iedereen wil. Ik heb de neiging om Magento-kern JavaScript-bestanden achter te laten zoals ze zijn in de , Ik mag ze verkleinen maar verder blijven ze zoals ze zijn.
Alles wat we toevoegen bovenop Magento, zoals jQuery en onze eigen aangepaste functies, kan geen kwaad als u deze in het voetgedeelte laadt. Bij het ontwikkelen van een website heb ik de neiging om scherp in de gaten te houden tag, wanneer een externe module wordt geïnstalleerd, voegt deze hier meestal iets aan toe. Met een beetje werk kunnen we de XML-module van de derde partij bewerken en deze in de voettekst laden. Het is de extra vijf minuten zeker waard om dit te doen.!
Eerst moeten we een XML-blok maken in onze local.xml bestand in de standaard lay-outhandvat zoals zo:
skin_js js / build / jquery.min.js
Merk op dat we dezelfde methode gebruiken om JavaScript-bestanden toe te voegen als in het vorige artikel. Als je een opfriscursus nodig hebt, klik je hier voor demonstratiedoeleinden in een lokale kopie van jQuery.
Nu kunnen we ons sjabloonbestand maken. Maak een nieuw bestand in:
app / design / frontend /
met de volgende inhoud:
getCssJsHtml ()?>
Ten slotte moeten we een enkele coderegel toevoegen aan onze sjabloonbestanden vlak voor de afsluiting label.
Onze sjabloonbestanden zijn te vinden op app / design / frontend / base / default / page / niet te vergeten om ze over te nemen naar ons eigen thema. Er zijn meerdere sjabloonbestanden, ik heb hieronder een lijst gesorteerd:
 -> init ($ _ product, 'small_image') -> formaat wijzigen (135); ?> )
1column.phtml2columns-left.phtml2columns-right.phtml3columns.phtmlHieronder ziet u een voorbeeld van hoe het eruit moet zien:
... getAbsoluteFooter ()?> getChildHtml ('footer.js')?>