Magento Theme Development Hjemmeside, Del 1

Når vi setter scenen i den forrige oppstartingsartikkelen, er det nå dags å dykke dypt inn i koden, og begynne å gjøre endringer. Som et åpenbart valg starter vi redigeringsprosessen fra hjemmesiden.

I denne første artikkelen vil vi delvis redigere overskriftsdelen. Vi vil redigere standard wrapper-filene og header.phtml-filen, og deretter begynner vi å redigere de forskjellige komponentene i topptekst som valuta, språkvelger osv. Så uten videre vil vi starte redigeringsprosessen.

Først av alt, aktiverer vi Meldingshint fra administrasjonspanelet, ved å gå til System> Utvikler> Feilsøking, og samtidig gjør vi det Nåværende konfigurasjonsområde er satt til Hovedside. Ved å aktivere malttips, vet vi hvilken mal som er ansvarlig for topptekstene. Slik ser hjemmesiden ut når malens hint er på.

Her, som du kan se, kommer den ytterste wrapper som alle andre filer er inkludert fra frontend / rwd / default / mal / side / 1column.phtml, som er fra RWD-temaet, ettersom vi har arvet vårt tema fra dette standardtemaet. I stedet for å redigere denne filen direkte i RWD-temaet, oppretter vi en lignende mappe i vårt vstyle-tema på dette stedet: frontend / tutsplus / vstyle / mal / side. Da kopierer vi disse filene til denne mappen, og rediger dem der. Så, vi går til frontend / rwd / default / mal / side katalog og kopi 1column.phtml, 2column-left.phtml, 2column-right.phtml, og 3column.phtml inn i denne nyopprettede mappen.

Hvis vi ser på koden til 1-column.phtml, det er slik:

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

Nå må vi endre den for å matche vår index.html-fil, så vi bruker våre kropps- og containerklasser, og legg til noen ekstra divs, og den redigerte koden vil se slik ut:

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

På samme måte skal vi også redigere 2column-left.phtml, 2column-right.phtml, og 3column.phtml filer. Slik ser den endrede koden etter To-kolonne-left.phtml:

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

neste, 2columns-right.phtml vil se slik ut etter redigering:

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

Til slutt skal vi redigere 3columns.phtml som dette:

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

Se nøye på endringene vi har gjort i disse malfilene. Når du sammenligner det med index.html-filen på HTML-nettstedet vårt, vil det være fornuftig for deg.

Slik skal nettstedet se etter redigering av disse filene. Du ser ikke mye forskjell, men vi går i riktig retning.

Deretter skal vi redigere header.phtml-filen, da vi kan se at dette er filen som har innpakningsinnholdet i overskriftsdelen. Så, vi kopierer frontend / rwd / default / mal / side / html / header.phtml fil, flytt den til frontend / tutsplus / vstyle / mal / side / html mappe, og begynn å redigere den. For tiden ser koden ut slik:

   getChildHtml ('store_language')?> 
 getChildHtml ('currency_switcher')?> getChildHtml ('velkommen')?> getAdditionalHtml ()?>
 
 
   getUrl (")?>">     
     __('Meny'); ?>    __('Søke'); ?>   helper ( 'kunde') -> getAccountUrl (); ?> "data-target-element =" # header-account ">  __('Konto'); ?>    getChildHtml ( 'minicart_head'); ?> 
 
 
   getChildHtml ('topMenu')?> 
   getChildHtml ('topSearch')?> 
   getChildHtml ('topLinks')?> 
 
  getChildHtml ( 'topContainer'); ?>

Vi sammenligner det med overskriftsdelen av HTML-en vår, og begynner å gjøre disse endringene i den:

     Ring oss nå! 0800-123-456-78
 
      Eng
 VNS
 fer
 Gem
 
 
   USD
 UKD
 FER
 
 
 
  
 
  kurven     
  Lincoln stol
 Størrelse: En størrelse
 Mengde: 01
 
  $ 30.00
 
 
 
   
  Lincoln stol
 Størrelse: En størrelse
 Mengde: 01
 
  $ 30.00
 
 
 
 Total $ 60.00

Vi legger inn denne HTML-filen i header.phtml-filen, og erstatt forskjellseksjonene med de relevante dynamiske malene som valutaveksler, butikspråk, logo, meny, søkelinje osv. Slik ser koden på disse endringene:

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

Slik ser overskriftsdelen etter at du har redigert header.phtml fil:

Nå som du kan se, må vi endre koden til forskjellige seksjoner vi bruker, som språk- og valutavelger, glidebryter, meny, søkelinje osv. Til å begynne med vil vi redigere valuta- og språkvelgerne. Hvis vi igjen aktiverer malttipsene, kan vi se at språkvelger-delen kommer fra base / default / mal / side / switch / languages.phtml, så vi kopierer denne filen til vårt tema på samme sted, og begynner å redigere det for å matche HTML-koden vår. Den opprinnelige languages.phtml filen ser slik ut:

getStores ())> 1):?>  __ ('Ditt språk:')?>

Den opprinnelige HTML-koden for språk- og valutavelger ser slik ut:

   Eng
 VNS
 fer
 Gem
 
 
   USD
 UKD
 FER

Etter at vi har endret languages.phtml for å matche HTML, ser det slik ut:

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

Som du kan se, vises valutavelgeren ikke på vår nettside for nå. Vi må aktivere valutavelgeren fra administrasjonspanelet først. Fra System> Konfigurasjon> Generelt> Valutaoppsett, du må først aktivere noen språk, og deretter fra System> Administrer valuta> Priser sett valutakurser. Da ser du at valutavalgeren er aktivert på nettstedet ditt. Ved å aktivere malens hint igjen, kan vi se at malen er rwd / default / mal / katalog / currency.phtml, og den nåværende koden vil se slik ut:

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

Vi redigerer det for å matche HTML-koden vår, så den endrede koden vil se slik ut:

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

Deretter redigerer vi vår velkomstmelding for å matche vår HTML-design. For det må vi gå til System> Konfigurasjon / Generelt / Design / Overskrift / Velkommen Tekst. Etter å ha redigert dette, vil overskriften se slik ut:

Hvis du har fulgt alle trinnene riktig, håper jeg at du kan se mye fremgang i hjemmesidens utseende. Nå som vi delvis har redigert overskriftsdelen, fortsetter vi å redigere overskriftsdelen i neste artikkel, og vi vil også redigere hovedskyven i den aktuelle artikkelen.

Vennligst forklar dine erfaringer i kommentarfeltet!

Kode