Magento Theme Development Home Page, deel 3

Nu we de eerste helft van de startpagina volledig hebben aangepast, moeten we de inhoud van de volgende startpagina wijzigen. Als we naar ons HTML-ontwerp kijken, heeft het gedeelte met de startpaginainhoud slechts één kop en een carrousel voor de nieuwste producten. Er is een Magento-widget die we kunnen gebruiken om de nieuwste producten op de startpagina te tonen. Als we naar onze huidige homepagesectie kijken, is er feitelijk al de nieuwste producten-widget ingeschakeld, maar we moeten deze aanpassen aan onze ontwerpvereisten.

Als we naar de inhoud van onze startpagina kijken door naar de Beheerderspaneel> CMS> Pagina's> Madison Island> Inhoud, we zullen zien dat er maar één regel PHP-code is (anders dan sommige stijltags), dat wil zeggen:

widget type = "catalog / product_widget_new" display_type = "new_products" products_count = "5" template = "catalogus / product / widget / nieuw / inhoud / new_grid.phtml"

Dus eigenlijk komt alle inhoud van de startpagina van deze sjabloon (die slechts een sjabloon is voor het tonen van nieuwe producten). We kopiëren dit bestand van het RWD-thema naar ons nieuwe thema, in catalogus / product / widget / new / content / new_grid.phtml, en begin met bewerken om het op ons HTML-ontwerp te laten lijken. Als we de huidige code van dit bestand bekijken, is het:

getProductCollection ()) && $ _products-> getSize ()):?> 
 
 
__ ('Nieuwe producten')?>
 
 
 getPagerHtml ()?> getColumnCount (); ?>  
 getItems () als $ _product):?> 
  getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?> ">   
 
getProductUrl ()?> "title ="stripTags ($ _ product-> getName (), null, true)?>) ">helper ('catalogus / uitvoer') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 getPriceHtml ($ _ product, true, '-widget-new-grid')?> getReviewsSummaryHtml ($ _ product, 'short')?> 
 isSaleable ()):?> __ ('Toevoegen aan winkelwagen')?>  
__ ('Niet op voorraad')?>
  
 helper ('wishlist') -> isAllow ()):?> 
getAddToWishlistUrl ($ _ product)?> ">__ ('Toevoegen aan verlanglijst')?>
  getAddToCompareUrl ($ _ product)):?> 
| ">__ ('Toevoegen aan vergelijking')?>
  
 
 
 
  
 
 
  

Wanneer we naar onze HTML-code voor deze sectie kijken, ziet het er als volgt uit:

 
 
heet producten
 
 
 
 
 
 
  
 Voeg toe aan winkelmandje 
 
Iphone 5s Gold 32 Gb 2013
 
$ 451.00
 
 
 
 
 
 

Dus we beginnen met het inpluggen van de dynamische tags in deze HTML. De reden dat ik je de huidige code van dit bestand heb getoond, is zodat je de vereiste dynamische tags uit die code kunt vinden en in de HTML kunt zetten.

We hoeven geen wijzigingen in de div-structuur aan te brengen, dus de eerste regel die moet worden gewijzigd, is de h3 label:

heet producten

We moeten de statische tekst van vervangen heet en producten met Magento $ this tags, zodat Magento deze later naar gebruikersvoorkeuren kan vertalen. Dus, deze regel zal zoiets worden als dit: 

__ ('Nieuw')?>__ ('Producten')?>

De volgende regel die moet worden gewijzigd, is de beeld tag, waar we het relevante pad van de afbeeldingsbron moeten wijzigen. Momenteel ziet het er als volgt uit:

We zullen dit hier veranderen:

Hier krijgt deze dynamische tag het werkelijke kleine beeld van het product met een afmeting van 236 x 357 pixels. Vervolgens moeten we dit veranderen Voeg toe aan winkelmandje link:

Voeg toe aan winkelmandje

We zullen dit hier veranderen:

getProductUrl ()?> "> isSaleable ()):?> __ ('Toevoegen aan winkelwagen')?>  __ ('Niet op voorraad')?>   

Het heeft een dynamische URL voor de pagina met productdetails en toont alleen 'Toevoegen aan winkelwagentje' als het product beschikbaar is. Anders wordt 'Uitverkocht' weergegeven. Ten slotte werken we de productprijs en naam bij door deze regel te vervangen:

Iphone 5s Gold 32 Gb 2013
 
$ 451.00
 

Met deze: 

helper ('catalogus / uitvoer') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 
getPriceHtml ($ _ product, true, '-widget-new-grid')?>
 

Hierdoor is onze weergave van één product gereed, maar om deze te herhalen voor alle nieuwe producten, moeten we onze item-div in een lus omsluiten, dus we voegen deze regel toe aan de bovenkant ervan:

getItems () als $ _product):?>

En deze regel aan het einde om de lus te beëindigen:

Dus de volledige code voor dat bestand wordt als volgt:

getProductCollection ()) && $ _products-> getSize ()):?> 
 
 
__ ('Nieuw')?>__ ('Producten')?>
 
 
 getItems () als $ _product):?> 
 
 
 
  
 getProductUrl ()?> "> isSaleable ()):?> __ ('Toevoegen aan winkelwagen')?>  __ ('Niet op voorraad')?>   
 
helper ('catalogus / uitvoer') -> productAttribute ($ _ product, $ _product-> getName (), 'name')?>
 
getPriceHtml ($ _ product, true, '-widget-new-grid')?>
 
 
 
 
  
 
 
  

Ververs je startpagina nu. Het zou een perfect werkende en gestileerde nieuwe productensectie moeten hebben, die er als volgt uitziet:

Nu moeten we de voettekst wijzigen voordat we klaar zijn met de startpagina. Als we naar ons HTML-ontwerp kijken, heeft het voettekst vier secties. De eerste toont 'Onze merken', de tweede toont een abonneerbox en links naar sociale media, de derde toont enkele URL's en de vierde geeft alleen de auteursrechtkennisgeving weer.

De vierde sectie is al aanwezig in ons thema, dus we moeten alleen de inhoud en stijlen aanpassen, maar de andere drie componenten moeten we toevoegen in ons thema. 

Als u een component wilt toevoegen, maken we een nieuw statisch blok in het beheerdersdashboard en plaatsen daar onze inhoud. Dus we gaan naar Beheerderspaneel> Statische blokken> Nieuw blok toevoegen, en voeg een nieuw blok toe voor de Onze merken sectie. We zullen de Block-titel veranderen in 'Our Brands', de identifier instellen op 'our_brands', de winkelweergave van 'Alle winkel-views' selecteren en dit in de content-sectie plaatsen:

Onze  merken
 
<>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Als je goed kijkt, is het dezelfde code als in onze HTML voor deze sectie - we hebben zojuist de relatieve paden van de afbeeldingen gewijzigd, terwijl we de nieuwe afbeeldingen handmatig uploaden vanuit de WYSIWYG-editor. Sla het blok op en begin met het maken van een nieuw blok voor het aanmeldgedeelte.

Voor dit tweede blok gebruiken we de bloktitel 'Above Footer'. Voor de ID gebruiken we 'above_footer' en voor de inhoud voeren we deze code in:

Nu moeten we het koppelingenblok op dezelfde manier maken. We zullen een nieuw blok maken met de Block-titel 'Footer Links', met de identifier als 'footer_links', en plaats deze code daarin:

 
Klant Ondersteuning
 
 
FAQ
 
Betalingsmogelijkheid
 
Boekingstips
 
Infomation
 
 
 
 
Klant Ondersteuning
 
 
FAQ
 
Betalingsmogelijkheid
 
Boekingstips
 
Infomation
 
 
 
 
Klant Ondersteuning
 
 
FAQ
 
Betalingsmogelijkheid
 
Boekingstips
 
Infomation
 
 
 
 
Contact info
 
Anwar ul Haq, Californië
 
Bel ons: (123) 398 5063
 
Bel ons: (123) 398 5063
 
E-mail: abs @ tutsplus
 
 

Al deze links linken nu nergens, maar je kunt ze later aanpassen. De afbeeldingskoppelingen worden opnieuw dynamisch gegenereerd met behulp van de uploadfunctie van de WYSIWYG-editor. De rest van de code wordt gewoon gekopieerd en geplakt vanuit de HTML.

Sla dit blok ook op en controleer de startpagina, maar toch zie je deze drie blokken niet verschijnen. Dit komt omdat je Magento expliciet moet vertellen waar deze nieuwe blokken moeten worden getoond, en dat kunnen we doen vanuit de lay-outsectie. Ga hiervoor naar de layout / local.xml bestand en voeg deze regels toe, vlak voor het sluiten van de standaard label.

  footer_links   above_footer   onze merken   

Deze XML-code vertelt Magento in wezen om deze twee nieuwe blokken toe te voegen aan de Magento footer-sectie. Ten slotte moeten we deze blokken bellen vanuit het phtml-bestand van voettekst. Hiervoor maken we een nieuw footer.phtml-bestand op deze locatie: template / page / html / footer.phtml.

Voeg deze code hierin toe footer.phtml het dossier: 

 
 
 getChildHtml ("our_brands")?> 
 
 
 
 
 
 
 getChildHtml ("above_footer")?> 
 
 
 
 
 
 getChildHtml ("footer_links_sm")?> getChildHtml ()?> 
 
 
 
 
 
 
 
getCopyright ()?>
 
 
 
 
 
 
 

Dit is wederom alleen maar een HTML-code, waarbij alle sectiekaders worden vervangen door relevante links naar Static Blocks. En de auteursrechtsectie is vervangen door een dynamische tag voor auteursrecht.

Controleer de startpagina nu en deze zou nu deze nieuw gecreëerde statische blokken moeten tonen, en zou er als volgt uit moeten zien:

Onze startpagina is nu voltooid. Het enige dat overblijft, is een aantal stijlfixaties, en dat doen we in het volgende artikel.