Magento Theme Development Hemsida, Del 1

När vi ställer in scenen i föregående bootstrapping-artikeln är det dags att faktiskt dyka djupt in i koden och börja göra ändringar. Som ett uppenbart val startar vi redigeringsprocessen från hemsidan.

I den här första artikeln kommer vi delvis att redigera rubrikavsnittet. Vi ska redigera standard wrapper-filerna och header.phtml-filen, och sedan börjar vi redigera de olika komponenterna i header som valuta, språkväljare etc. Så, utan vidare, startar vi redigeringsprocessen.

Först av allt kommer vi att aktivera Mallanvisningar från adminpanelen, genom att gå till System> Utvecklare> Felsökning, och samtidigt gör vi det så Nuvarande konfigurationsområde är satt till Huvudwebbplats. Genom att möjliggöra malltips kan vi veta vilken mall som är ansvarig för rubrikstegen. Så här ser startsidan ut när malltipsen är på.

Här, som du kan se, kommer den yttersta omslaget som alla andra filer ingår från frontend / RWD / default / mall / sida / 1column.phtml, vilket är från RWD-temat, eftersom vi har ärft vårt tema från detta standardtema. Istället för att redigera den här filen direkt i RWD-temat skapar vi en liknande mapp i vårt vstyle-tema på den här platsen: frontend / tutsplus / vstyle / mall / sida. Då kopierar vi dessa filer till den här mappen och redigerar dem där. Så ska vi gå till frontend / RWD / default / mall / sida katalog och kopia 1column.phtml, 2column-left.phtml, 2column-right.phtml, och 3column.phtml i den här nyskapade mappen.

Om vi tittar på koden för 1-column.phtml, det är så här:

         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 måste vi ändra det för att matcha vår index.html-fil, så vi använder våra kropps- och behållarklasser och lägger till några extra div, och den redigerade koden kommer att se ut så här:

   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 ()?>

På samma sätt kommer vi också att redigera 2column-left.phtml, 2column-right.phtml, och 3column.phtml filer. Så här söker den modifierade koden efter 2-kolonn-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 ()?>

Nästa, 2columns-right.phtml kommer att se ut så här efter redigering:

   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 ()?>

Slutligen kommer vi att redigera 3columns.phtml så här:

   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 ()?>

Titta noggrant på de förändringar som vi gjort i dessa mallfiler. När du jämför det med index.html-filen på vår HTML-webbplats, så är det meningsfullt för dig.

Så här ska webbplatsen se efter att du redigerar dessa filer. Du kommer inte se mycket skillnad, men vi är på väg i rätt riktning.

Nästa kommer vi att redigera header.phtml-filen, eftersom vi kan se att det här är filen som har wrappinnehållet i rubrikavsnittet. Så ska vi kopiera frontend / RWD / default / mall / sida / html / header.phtml fil, flytta den till frontend / tutsplus / vstyle / mall / sida / html mappen och börja redigera den. För närvarande ser koden ut så här:

   getChildHtml ('store_language')?> 
 getChildHtml ('currency_switcher')?> getChildHtml ('välkommen')?> getAdditionalHtml ()?>
 
 
   getUrl (")?>">     
     __('Meny'); ?>    __('Sök'); ?>   hjälpare ( 'kund') -> getAccountUrl (); ?> "data-target-element =" # header-account ">  __('Konto'); ?>    getChildHtml ( 'minicart_head'); ?> 
 
 
   getChildHtml ('topMenu')?> 
   getChildHtml ('topSearch')?> 
   getChildHtml ('topLinks')?> 
 
  getChildHtml ( 'topContainer'); ?>

Vi jämför det med rubrikrubriken i vår HTML och börjar göra ändringarna i den:

     Ring oss nu! 0800-123-456-78
 
      Eng
 VNS
 Fer
 Pärla
 
 
   USD
 UKD
 FER
 
 
 
  
 
  vagn     
  Lincoln stol
 Storlek: En storlek
 Kvantitet: 01
 
  $ 30.00
 
 
 
   
  Lincoln stol
 Storlek: En storlek
 Kvantitet: 01
 
  $ 30.00
 
 
 
 Total $ 60.00

Vi lägger in den här HTML-filen i header.phtml-filen och ersätter skillnadsavsnitt med relevanta dynamiska mallkoder som valutaomkopplare, butiksspråk, logotyp, meny, sökfält, etc. Så här ser koden ut efter dessa ändringar:

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

Så här kommer rubrikavsnittet att se efter att du har redigerat header.phtml fil:

Nu som du kan se behöver vi ändra koden för olika sektioner som vi använder, som språk- och valutaväljare, skjutreglage, meny, sökfält etc. Till att börja med redigerar vi valuta- och språkväljare. Om vi återigen aktiverar malltipsen kan vi se att språkväljarsektionen kommer ifrån bas / default / mall / sida / switch / languages.phtml, så vi ska kopiera den här filen till vårt tema på samma plats och börja redigera det för att matcha vår HTML-kod. Originalet languages.phtml filen ser så här ut:

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

Den ursprungliga HTML-koden för språk- och valutaväljare ser ut så här:

   Eng
 VNS
 Fer
 Pärla
 
 
   USD
 UKD
 FER

När vi ändrar languages.phtml för att matcha HTML-filen så kommer det att se ut så här:

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

Som du kan se visas valutaväljaren inte på vår hemsida för tillfället. Vi måste aktivera valutaväljaren från adminpanelen först. Från System> Konfiguration> Allmänt> Valutainställningar, du måste först aktivera vissa språk och sedan från System> Hantera Valuta> Priser Ange valutakurser. Då ser du att valutaväljaren är aktiverad på din webbplats. Genom att aktivera malltipsen igen kan vi se att mallen är RWD / default / mall / katalog / currency.phtml, och dess nuvarande kod kommer att se ut så här:

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

Vi redigerar det för att matcha vår HTML, så den ändrade koden kommer att se ut så här:

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

Därefter redigerar vi vårt välkomstmeddelande för att matcha vår HTML-design. För det måste vi gå till System> Konfiguration / Allmänt / Design / Header / Welcome Text. Efter att ha redigerats så ser rubriken ut så här:

Om du har följt alla steg korrekt, hoppas jag att du kan se mycket framsteg i din startsida. Nu när vi delvis har redigerat rubrikavsnittet fortsätter vi med att redigera rubrikavsnittet i nästa artikel och vi kommer också att redigera huvudreglaget i den artikeln.

Vänligen förklara dina erfarenheter i kommentarfältet!

Koda