Magento Theme Development startpagina, deel 1

Naarmate we het stadium van het vorige bootstrapping-artikel bepalen, is het nu tijd om echt diep in de code te duiken en wijzigingen aan te brengen. Als voor de hand liggende keuze starten we het bewerkingsproces vanaf de startpagina.

In dit eerste artikel zullen we het kopgedeelte gedeeltelijk bewerken. We zullen de standaard wrapper-bestanden en het header.phtml-bestand bewerken, en dan zullen we beginnen met het bewerken van de verschillende componenten van header zoals valuta, taalselector, enz. Dus, zonder verder oponthoud, zullen we het bewerkingsproces starten.

Allereerst zullen we de Sjabloon hints van het admin panel, door naar te gaan Systeem> Ontwikkelaar> Debug, en terwijl we dat doen, zorgen we ervoor dat Huidige configuratiebereik ingesteld op Hoofdwebsite. Door sjabloontoetsen in te schakelen, weten we welke sjabloon verantwoordelijk is voor de kopstijlen. Dit is hoe de startpagina eruit zal zien als de hints van de sjabloon aanstaan.

Hier ziet u, zoals u kunt zien, het buitenste omhulsel waarin alle andere bestanden zijn opgenomen frontend / RWD / default / template / page / 1column.phtml, wat uit het RWD-thema komt, omdat we ons thema hebben geërfd van dit standaardthema. In plaats van dit bestand rechtstreeks in het RWD-thema te bewerken, maken we op deze locatie een vergelijkbare map in ons vstyle-thema: frontend / tutsplus / vstyle / template / page. Daarna kopiëren we deze bestanden naar deze map en bewerken ze daar. Dus we gaan naar de frontend / RWD / default / template / page map en kopiëren 1column.phtml, 2column-left.phtml, 2column-right.phtml, en 3column.phtml in deze nieuw gemaakte map.

Als we kijken naar de code van 1-column.phtml, het is zoals dit:

         getChildHtml ('head')?>  getBodyClass () '':? ">> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?>  getChildHtml ('header')?>   getChildHtml ('breadcrumbs')?>  getChildHtml ('global_messages')?> getChildHtml ('content')?> 
 
 
 getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Nu moeten we het aanpassen zodat het overeenkomt met ons index.html-bestand, dus we gebruiken onze body- en containerklassen en voegen wat extra divs toe, en de bewerkte code ziet er als volgt uit:

   getChildHtml ('head')?>  getBodyClass () '':? ">> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ('header')?>   getChildHtml ('global_messages')?> getChildHtml ('content')?> 
 
 
  getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Op dezelfde manier gaan we ook het 2column-left.phtml, 2column-right.phtml, en 3column.phtml bestanden. Dit is hoe de gewijzigde code zal zoeken 2-kolom left.phtml:

   getChildHtml ('head')?>  getBodyClass () '':? ">> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ('header')?>     getChildHtml ('left')?> 
  getChildHtml ('global_messages')?> getChildHtml ('content')?> 
 
 
 
 
  getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

volgende, 2columns-right.phtml ziet er na de bewerking als volgt uit:

   getChildHtml ('head')?>  getBodyClass () '':? ">> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ('header')?>     getChildHtml ('global_messages')?> getChildHtml ('content')?> 
  getChildHtml ('right')?> 
 
 
 
 
  getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Ten slotte gaan we het bewerken 3columns.phtml zoals dit:

   getChildHtml ('head')?>  getBodyClass () '':? ">> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ('header')?>     getChildHtml ('left')?> 
  getChildHtml ('global_messages')?> getChildHtml ('content')?> 
  getChildHtml ('right')?> 
 
 
 
 
  getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Bekijk zorgvuldig de wijzigingen die we hebben aangebracht in deze sjabloonbestanden. Wanneer u het vergelijkt met het index.html-bestand van onze HTML-website, is het logisch voor u.

Dit is hoe de website zou moeten kijken na het bewerken van deze bestanden. Je zult niet veel verschil zien, maar we gaan in de goede richting.

Vervolgens gaan we het header.phtml-bestand bewerken, omdat we kunnen zien dat dit het bestand is dat de wrapper-inhoud van de headersectie bevat. Dus we kopiëren het frontend / RWD / default / template / page / html / header.phtml bestand, verplaats het naar de frontend / tutsplus / vstyle / template / page / html map en begin met bewerken. Momenteel ziet de code er als volgt uit:

   getChildHtml ('store_language')?> 
 getChildHtml ('currency_switcher')?> getChildHtml ('welkom')?> getAdditionalHtml ()?>
 
 
   getUrl (")?>">     
     __('Menu'); ?>    __('Zoeken'); ?>   helper ( 'klant') -> getAccountUrl (); ?> "data-target-element =" # header-account ">  __('Account'); ?>    getChildHtml (minicart_head); ?> 
 
 
   getChildHtml ('topMenu')?> 
   getChildHtml ('topSearch')?> 
   getChildHtml ('topLinks')?> 
 
  getChildHtml (topContainer); ?>

We vergelijken het met het kopgedeelte van onze HTML en beginnen deze wijzigingen hierin aan te brengen:

     Bel ons nu! 0800-123-456-78
 
      Eng
 VNS
 Fer
 Edelsteen
 
 
   Amerikaanse Dollar
 UKD
 FER
 
 
 
  
 
  kar     
  Lincoln stoel
 Grootte: Een maat
 Aantal stuks: 01
 
  $ 30.00
 
 
 
   
  Lincoln stoel
 Grootte: Een maat
 Aantal stuks: 01
 
  $ 30.00
 
 
 
 Totaal $ 60.00

We zullen deze HTML invoegen in het bestand header.phtml en de verschilsecties vervangen door de relevante dynamische sjabloontags, zoals valutawisselaar, winkeltaal, logo, menu, zoekbalk, enzovoort. Zo ziet de code eruit na deze bewerkingen:

     getChildHtml ('welkom')?> getAdditionalHtml ()?>
 
    getChildHtml ('currency_switcher')?> getChildHtml ('store_language')?> 
  ">
 
   getChildHtml (minicart_head); ?> 
 
 
 
 
 
 
 
      getUrl (")?>">    
 
 
 
 
      getChildHtml ('topMenu')?> 
 
    getChildHtml ('topSearch')?> 
 
 
 
 
 
 getChildHtml (topContainer); ?>

Dit is hoe de koptekst er uitziet na het bewerken van de header.phtml het dossier:

Zoals u kunt zien, moeten we de code van de verschillende secties die we gebruiken wijzigen, zoals de taal- en valutakiezer, de schuifregelaar, het menu, de zoekbalk, enz. Om te beginnen zullen we de valuta- en taalselectoren bewerken. Als we de hints van de sjabloon opnieuw inschakelen, kunnen we zien dat de taalselector hier vandaan komt base / default / template / page / switch / languages.phtml, dus we kopiëren dit bestand naar ons thema op dezelfde locatie en beginnen het te bewerken om overeen te komen met onze HTML-code. Het origineel languages.phtml bestand ziet er als volgt uit:

getStores ())> 1):?>  __ ('Uw taal:')?>

De oorspronkelijke HTML-code voor taal- en valutakiezer ziet er als volgt uit:

   Eng
 VNS
 Fer
 Edelsteen
 
 
   Amerikaanse Dollar
 UKD
 FER

Nadat we het hebben gewijzigd languages.phtml om overeen te komen met de HTML, ziet het er zo uit:

getStores ())> 1):?>    getStores () als $ _lang):?>  getCurrentUrl ()?> "> escapeHtml ($ _ lang-> getName ()); $ langName = substr ("$ langName", 0, 3); $ langName = strtoupper ($ langName); echo $ langName; ?>

Zoals u ziet, wordt de valutakiezer voorlopig niet op onze website weergegeven. We moeten de valutakiezer eerst inschakelen via het beheerdersvenster. Van Systeem> Configuratie> Algemeen> Valutainstelling, u moet eerst een aantal talen inschakelen en vervolgens uit Systeem> Valuta beheren> Tarieven valutakoersen instellen. Vervolgens ziet u dat de valutakiezer is ingeschakeld op uw website. Door de sjabloon opnieuw in te schakelen, kunnen we zien dat de sjabloon dit is rwd / default / template / directory / currency.phtml, en de huidige code ziet er als volgt uit:

getCurrencyCount ()> 1):?>  __ ('Uw valuta:')?>

We zullen het aanpassen zodat het overeenkomt met onze HTML, dus de gewijzigde code zal er als volgt uitzien:

getCurrencyCount ()> 1):?>    getCurrencies () als $ _code => $ _name):?>  getSwitchCurrencyUrl ($ _ code)?> ">

Vervolgens bewerken we ons welkomstbericht dat overeenkomt met ons HTML-ontwerp. Daar zullen we naartoe moeten gaan Systeem> Configuratie / Algemeen / Ontwerp / Kop / Welkomsttekst. Na het bewerken van dit ziet de kop er als volgt uit:

Als je alle stappen correct hebt uitgevoerd, hoop ik dat je veel vooruitgang zult zien in de looks van je startpagina. Nu we het kopgedeelte gedeeltelijk hebben bewerkt, gaan we door met het bewerken van de koptekstsectie in het volgende artikel en bewerken we ook de hoofdschuifregelaar in dat artikel.

Geef alsjeblieft uitleg over je ervaringen in het opmerkingengedeelte!

Code