Dezvoltarea temelor Magento Prima pagină, Partea 1

Așa cum am stabilit etapa în articolul precedent de bootstrapping, acum este momentul să vă aruncați cu adevărat adânc în cod și să începeți să faceți modificări. Ca o alegere evidentă, vom începe procesul de editare din pagina de pornire.

În acest prim articol vom redacta parțial secțiunea antet. Vom edita fișierele de împachetare implicite și fișierul header.phtml și apoi vom începe să editați diferitele componente ale antetului, cum ar fi valuta, selectorul de limbi etc. Deci, fără a mai fi necesar, vom începe procesul de editare.

În primul rând, vom permite Sugestii pentru sugestii din panoul de administrare, mergând la Sistem> Dezvoltator> Debug, și în timp ce facem asta, vom fi siguri că Domeniul actual de configurare este setat sa Site principal. Permițând sugestiile șablonului, vom ști care șablon este responsabil pentru stilurile antetului. Acesta este modul în care va apărea pagina de pornire când sugestiile șablonului sunt activate.

Aici, după cum puteți vedea, învelișul exterior în care sunt incluse toate celelalte fișiere vine de la front-end / RWD / default / template / pagina / 1column.phtml, care este din tema RWD, așa cum am moștenit tema noastră din această temă implicită. În loc să editați acest fișier direct în tema RWD, vom crea un folder similar în tema noastră de acces la această locație: front-end / tutsplus / vstyle / șablon / pagina. Apoi vom copia aceste fișiere în acest dosar și le vom edita acolo. Deci, vom merge la front-end / RWD / default / șablon / pagină director și copiați 1column.phtml, 2column-left.phtml, 2column-right.phtml, și 3column.phtml în acest dosar nou creat.

Dacă ne uităm la codul lui 1-column.phtml, este așa:

         getChildHtml ('cap')?>  getBodyClass () '':?? ">> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?>  getChildHtml ("header")?>   getChildHtml ("breadcrumbs")?>  getChildHtml ('global_messages')?> getChildHtml ('conținut')?> 
 
 
 getChildHtml ('footer_before')?> getChildHtml ("footer")?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Acum trebuie să îl modificăm pentru a se potrivi cu fișierul index.html, așa că vom folosi clasele noastre de corp și containere și vom adăuga câteva divuri extra și codul editat va arăta astfel:

   getChildHtml ('cap')?>  getBodyClass () '':?? ">> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ("header")?>   getChildHtml ('global_messages')?> getChildHtml ('conținut')?> 
 
 
  getChildHtml ('footer_before')?> getChildHtml ("footer")?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

În mod similar vom modifica, de asemenea 2column-left.phtml, 2column-right.phtml, și 3column.phtml fișiere. Acesta este modul în care codul modificat va căuta 2-coloană-left.phtml:

   getChildHtml ('cap')?>  getBodyClass () '':?? ">> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ("header")?>     getChildHtml ("stânga")?> 
  getChildHtml ('global_messages')?> getChildHtml ('conținut')?> 
 
 
 
 
  getChildHtml ('footer_before')?> getChildHtml ("footer")?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Următor →, 2columns-right.phtml va arăta astfel după editare:

   getChildHtml ('cap')?>  getBodyClass () '':?? ">> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ("header")?>     getChildHtml ('global_messages')?> getChildHtml ('conținut')?> 
  getChildHtml ('dreapta')?> 
 
 
 
 
  getChildHtml ('footer_before')?> getChildHtml ("footer")?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

În cele din urmă, vom edita 3columns.phtml asa:

   getChildHtml ('cap')?>  getBodyClass () '':?? ">> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?> getChildHtml ("header")?>     getChildHtml ("stânga")?> 
  getChildHtml ('global_messages')?> getChildHtml ('conținut')?> 
  getChildHtml ('dreapta')?> 
 
 
 
 
  getChildHtml ('footer_before')?> getChildHtml ("footer")?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Uită-te cu atenție la schimbările pe care le-am făcut în aceste fișiere șablon. Atunci când îl comparați cu fișierul index.html al site-ului nostru HTML, acesta vă va face sens.

Acesta este modul în care site-ul ar trebui să aibă grijă de editarea acestor fișiere. Nu veți vedea prea multe diferențe, dar ne îndreptăm în direcția cea bună.

Apoi, vom edita fișierul header.phtml, deoarece putem vedea că acesta este fișierul care conține conținutul de înfășurare din secțiunea antet. Deci, vom copia front-end / RWD / default / template / pagina / html / header.phtml fișier, mutați-l la front-end / tutsplus / vstyle / template / pagina / html și începeți să o editați. În prezent, codul său va arăta astfel:

   getChildHtml ('store_language')?> 
 getChildHtml ('currency_switcher')?> getChildHtml ("bun venit")?> getAdditionalHtml ()?>
 
 
   getUrl (")?>">     
     __('Meniul'); ?>    __('Căutare'); ?>   ajutor ( 'client') -> getAccountUrl (); ?> "date-target-element =" # header-account ">  __('Cont'); ?>    getChildHtml ( 'minicart_head'); ?> 
 
 
   getChildHtml ('topMenu')?> 
   getChildHtml ('topSearch')?> 
   getChildHtml ('topLinks')?> 
 
  getChildHtml ( 'topContainer'); ?>

Îl vom compara cu secțiunea antet a codului nostru HTML și vom începe să efectuăm aceste modificări în acesta:

     Sună-ne acum! 0800-123-456-78
 
      eng
 VNS
 Fer
 Bijuterie
 
 
   USD
 UKD
 FER
 
 
 
  
 
  cart     
  Scaun Lincoln
 Mărimea: O marime
 Cantitate: 01
 
  $ 30.00
 
 
 
   
  Scaun Lincoln
 Mărimea: O marime
 Cantitate: 01
 
  $ 30.00
 
 
 
 Total $ 60.00

Vom introduce acest HTML în fișierul header.phtml și vom înlocui secțiunile diferențiale cu etichetele șablonului dinamic, cum ar fi comutatorul de valută, limba magazinului, logo-ul, meniul, bara de căutare etc. Astfel codul va avea grijă de aceste modificări:

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

Acesta este modul în care secțiunea antet va avea grijă după editarea header.phtml fişier:

Acum, după cum puteți vedea, trebuie să modificăm codul diferitelor secțiuni pe care le folosim, cum ar fi selectorul de limbi și valută, cursorul, meniul, bara de căutare etc. Pentru început, vom edita selectorii de valută și limbă. Dacă permitem din nou sugestiile șablonului, putem vedea că secțiunea selector de limbi vine de la de bază / default / șablon / pagina / comutator / languages.phtml, așa că vom copia acest fișier în tema noastră în aceeași locație și vom începe să îl editați pentru a se potrivi cu codul nostru HTML. Originalul languages.phtml fișierul arată astfel:

getStores ())> 1):?>  __ ('Limba ta:')?>

Codul HTML original pentru selectorul de limbi și monedă arată astfel:

   eng
 VNS
 Fer
 Bijuterie
 
 
   USD
 UKD
 FER

După ce ne modificăm languages.phtml pentru a corespunde codului HTML, acesta va arăta astfel:

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

După cum puteți vedea, selectorul valutar nu se afișează pe site-ul nostru pentru moment. Trebuie să activam mai întâi selectorul valutar din panoul de administrare. Din Sistem> Configurare> General> Configurare valută, trebuie să activați mai întâi câteva limbi și apoi de la Sistem> Gestionați moneda> Ratele setați cursurile de schimb valutar. Apoi veți vedea că selectorul valutar este activat pe site-ul dvs. Web. Prin activarea șablonului din nou, putem vedea că șablonul său este RWD / default / template / director / currency.phtml, și codul actual va arăta astfel:

getCurrencyCount ()> 1):?>  __ ('Moneda dvs.:')?>

Îl vom modifica pentru a se potrivi cu codul HTML, astfel încât codul modificat va arăta astfel:

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

Apoi, vom edita mesajul nostru de bun venit pentru a se potrivi cu designul HTML. Pentru asta trebuie să mergem Sistem> Configurare / General / Design / Antet / Text de întâmpinare. După editarea acestui titlu, antetul va arăta astfel:

Dacă ați urmat toate etapele corect, sper că puteți vedea mult progres în aspectul paginii dvs. de pornire. Acum, deoarece am redactat parțial secțiunea antet, vom continua să editați secțiunea antetului în următorul articol și vom edita de asemenea glisorul principal din acel articol.

Vă rugăm să explicați experiența dvs. în secțiunea de comentarii!

Cod