Aangepaste lay-outs en sjablonen met Magento

In het eerste deel van deze serie leerden we de basis van de ontwikkeling van de Magento-module, inclusief de Magento-directorystructuur, de aangepaste modulestructuur, en we creëerden een eenvoudige "Hello World" -module om te begrijpen hoe controllers in Magento werken. 

In dit artikel zullen we leren hoe blokken en lay-outs te maken. We zullen specifiek bekijken hoe lay-outbestanden en blokken werken in Magento en we kijken naar de weergave van lay-outbestanden. 

Op zoek naar een snelle oplossing?

Als u op zoek bent naar een snelle oplossing, vindt u bij Envato Market een grote verzameling Magento-thema's en -sjablonen. Het is een geweldige manier om snel een verzameling hoogwaardige low-poly-items voor uw project op te bouwen.

Je kunt ook persoonlijke hulp krijgen door een van de Magento-serviceproviders in te huren bij Envato Studio.

Maar verder met de tutorial! Eerst zullen we zien wat de lay-out en blokbestanden zijn en hoe ze nuttig zijn bij het renderen van front-end pagina's in Magento, en dan zullen we zien hoe we ze kunnen opnemen in onze aangepaste module.

Wat is het lay-outbestand?

Zoals de naam al doet vermoeden, zijn lay-outbestanden handig bij het renderen van voorpagina's van Magento. Lay-outbestanden zijn XML-bestanden die zich in app> design> frontend> uw interface> uw thema> lay-out bevinden. Hier kunt u zien dat er veel lay-outbestanden zijn voor elke module. Elke Magento-module heeft zijn eigen opmaakbestanden, net zoals de klantmodule dat heeft customer.xmllay-outbestand, catalogusmodule hebben catalog.xmllay-outbestand etc. Deze lay-outbestanden bevatten structurele blokken en inhoudsblokken. 

Als je je afvraagt ​​waarom Magento deze blokken nodig heeft, kun je hier meer over te weten komen in het eerste deel van de serie.

Laten we verder gaan met indelingsbestanden

Laten we meer in indelingsbestanden graven door naar een voorbeeld te kijken. Ga naar app> ontwerp> frontend> base> lay-outen open de customer.xmlhet dossier. Hier zijn alle blokken om main gewikkeld label. Je kunt het anders zien welke specifieke blokken bevat. 

Zie het onderstaande fragment:

  Registratieformulier klantaccount          Formuliervelden eerder    

Handvat

Handgrepen zijn de belangrijkste eenheid waardoor Magento identificeert welk blok moet worden geladen wanneer een bepaalde module wordt aangeroepen. is de module-specifieke handle. Deze handle wordt geactiveerd wanneer iemand de klantregistratiepagina opent. 

Elk verwerkt inhoud-genest blok specifiek voor de pagina. Sommige lay-outbestanden bevatten de handvat. In dit stadium kunt u vragen stellen over het verschil tussen module-specifieke grepen en standaardhandgrepen. Kort gezegd, module-specifieke handvatten geven alleen de blokken erin weer als die module in de browser wordt weergegeven, terwijl de standaard-handle op de meeste pagina's wordt geladen.

In het handvat bevinden zich de verschillende blokken die het sjabloonbestand opgeven dat moet worden gerenderd wanneer dat blok wordt aangeroepen. Blokken zijn er in twee soorten: 

1. Structuurblokken
2. Inhoudsblokken

In ons lay-outbestand definiëren we alleen de Inhoudsblokkenen dan verpakken we ze in Structurer Blokken. Als iemand bijvoorbeeld een klantregistratiepagina aanroept en we willen deze links, rechts, inhoud of voettekst laden, wikkelen we dat blok in zijn respectieve structureringsblok. Hier hebben we twee blokken ingepakt in het blok 'inhoud' dat een structurerend blok is. 

Blokken bevatten kenmerken zoals:

1. type definieert de blokklassen waarin we de verschillende functionaliteit kunnen definiëren
2. naam definieertde unieke naam van een bepaald blok, zodat de andere blokken een verwijzing naar bestaand blok op naam kunnen maken en uitbreiden
   
3. Voor na zijn attributen die we kunnen instellen waarmee we de positie van ons blok binnen het structurerblok kunnen definiëren
4. sjabloon definieert de werkelijke phtml bestandsnaam en pad waar onze HTML- en PHP-code naartoe gaat
5. actie stelt ons in staat om elke actie zoals het laden van JavaScript en alles te activeren door dit kenmerk te gebruiken.
6. zoals is een attribuut wordt voornamelijk gebruikt voor structurerblokken

De tag is gebruik om de blokken die al bestaan ​​uit te breiden. In dit geval hebben we het inhoudsblok uitgebreid en ons eigen blok erin gestopt. U moet de juiste bloknaam gebruiken die u wilt uitbreiden.

De  tag is gebruik om het specifieke blok te verwijderen. Stel bijvoorbeeld dat u op de registratiepagina van uw account niet de kolommen rechts en links wilt weergeven. In dat geval kunt u dat blok eenvoudig verwijderen met de volgende syntaxis .

Kind

Wanneer u een blok onder een ander blok wikkelt, wordt dat ingepakte blok child block genoemd. Wanneer ons ouderblok door onze module wordt aangeroepen, wordt het onderliggende blok automatisch gebeld.

U kunt ook een child block apart met de onderstaande syntaxis in uw sjabloonbestand callen
echo $ this-> getChildHtml ('child');

wortel

Open page.xmllay-outbestand, vindt u de blok dat eruit ziet als hieronder

Magento begint met renderen vanuit het wortelblok. Alle andere blokken zijn onderliggende blokken van het wortelblok. Het root-blok definieert de structuur van de pagina. Hier kun je zien dat het momenteel is ingesteld op 3columns.phtml, u kunt dit wijzigen in 1column.phtml, 2columns-right.phtml of 2columns-left.phtml.

CSS en JavaScript toevoegen aan de lay-out-XML

Voor elke specifieke pagina kunt u CSS- en JavaScript-bestanden als volgt in de lay-outtag toevoegen:

  css / styles.css    

Hier kunt u zien dat we een CSS-bestand en een JavaScript-bestand hebben toegevoegd binnen de hoofd van onze klantaccountpagina.

Wat zijn de blokklassen?

Blokklassen worden gebruikt om de functies te definiëren die specifiek zijn voor een bepaald blok. Het bestand met de blokklassen bevindt zich in app> code> local / community / core> uw modulenaamruimte> uw modulenaam> Blokkerendirectory. Dit bestand bevat de functies waarmee we rechtstreeks kunnen werken $ thistrefwoord in blokspecifiek sjabloonbestand. Laten we een voorbeeld nemen om de blokklassen te begrijpen.

Ga naar review.xml bestand dat zich in bevindt app> ontwerp> frontend> base> standaard> layout map en zoek de onderstaande regel code:

Hier kun je het blok zien review / customer_recentdie verwijzen naar de sjabloon recent.phtml. Ga naar app> ontwerp> frontend> base> standaard> sjabloon> review> klanten open recent.phtml. 

In dit bestand ziet u twee functies die worden aangeroepen met $ this trefwoord. Zij zijn $ This-> getCollection () en $ This-> count (). Deze functies worden gedefinieerd in hun blokklassenbestand recent.php dat woont in app> code> kern> Mage> recensie> Blokkeren> klantdirectory.

Hier, het blok type = "recensie / klant_recent" verwijst naar de  Mage_Review_Block_Customer_Recent blokklasse die gedefinieerd is in recent.php het dossier. Welke functies u ook in deze klasse definieert, u kunt deze rechtstreeks gebruiken in het bijbehorende sjabloonbestand $ this.

Aangepaste module-indeling en blokbestanden maken

Ten slotte hebben we een aangepaste "Hello World" -module met controller achtergelaten. Hier maken we het lay-outbestand van onze aangepaste module. Dus laten we het maken.

Om het lay-outbestand te maken, moeten we eerst het blokklassebestand maken. Voordat we het klassenbestand toevoegen, moeten we onze module laten weten dat we de blokbestanden opnemen. Dus ga naar app> code> lokaal> Chiragdodia> Mymodule> etc>config.xmlen voeg de onderstaande regel code toe:

    mymodule.xml         Chiragdodia_Mymodule_Block   

Het uiteindelijke XML-bestand bevat de volgende coderegels:

    0.1.0       standaard-  Chiragdodia_Mymodule mymodule       mymodule.xml         Chiragdodia_Mymodule_Block    

Maak het blokklassebestand

Ga vervolgens naar app> code> lokaal> Chiragdodia> Mymodule> Blocken maak het bestand Mymodule.phpdie onder regels code bevat

Hier hebben we de klas uitgeroepen Chiragdodia_Mymodule_Block_Mymodule die de functie bevat myFunction die we rechtstreeks vanuit ons lay-outsjabloonbestand kunnen bellen.
Maak het XML-lay-outbestand
Ga naar app> ontwerp> frontend> standaard> standaard> lay-outen maak de mymodule.xml bestand dat onderstaande coderegels bevat
        
Maak het sjabloonbestand
Ga naar app> ontwerp> frontend> standaard> standaard> sjabloonen maak de mymodule.phtml het dossier. In dit bestand zullen we de functie bellen myFunction die we hebben verklaard in onze blokklasse.
myFunction (); ?>
Als alles tot nu toe correct is, ziet u de uitvoer met de indeling van drie kolommen door de URL yoursite.com/index.php/mymodule/index te openen.
In sommige Magento-versies bevatten standaardthema's niet de lay-out- en sjabloondirectory's. In dat geval kunt u uw lay-out en sjabloonbestand maken app> ontwerp> frontend> basisdirectory.
Dit is hoe lay-outs werken in Magento. In het vorige artikel hebben we de eenvoudige "Hello World" -module gemaakt, in dit artikel hebben we het gemaakt met behulp van een lay-outbestand. De lay-outstructuur van Magento is in het begin een beetje moeilijk te begrijpen, maar zodra je eraan begint te sleutelen, krijg je gemakkelijk het idee erachter. 
In dit bericht heb ik de modeldemo-bestanden bijgevoegd die we tot nu toe hebben gemaakt. Aarzel niet om commentaar te geven en vragen te stellen over dit specifieke probleem.



		
			
	   
	




Code