Sviluppo di temi Magento Home Page, Parte 1

Mentre impostiamo lo stage nell'articolo precedente di bootstrap, ora è il momento di immergerci profondamente nel codice e iniziare a fare cambiamenti. Come scelta ovvia, inizieremo il processo di modifica dalla home page.

In questo primo articolo modificheremo parzialmente la sezione dell'intestazione. Modificheremo i file wrapper predefiniti e il file header.phtml, quindi inizieremo a modificare i diversi componenti dell'intestazione come valuta, selezione lingua, ecc. Quindi, senza ulteriori indugi, inizieremo il processo di modifica.

Prima di tutto, abiliteremo il Suggerimenti sul modello dal pannello di amministrazione, andando a Sistema> Sviluppatore> Debug, e così facendo ci assicureremo che Ambito di configurazione corrente è impostato per Sito Web principale. Abilitando i suggerimenti del modello, sapremo quale modello è responsabile per gli stili di intestazione. Ecco come apparirà la home page quando i suggerimenti del modello sono attivi.

Qui, come puoi vedere, proviene il wrapper più esterno in cui tutti gli altri file sono inclusi frontend / RWD / default / template / page / 1column.phtml, che deriva dal tema RWD, dal momento che abbiamo ereditato il tema da questo tema predefinito. Invece di modificare questo file direttamente nel tema RWD, creeremo una cartella simile nel nostro tema vstyle in questa posizione: frontend / tutsplus / vstyle / template / page. Quindi copieremo questi file in questa cartella e li modificheremo lì. Quindi, andremo al frontend / RWD / default / template / page directory e copia 1column.phtml, 2column-left.phtml, 2column-right.phtml, e 3column.phtml in questa cartella appena creata.

Se guardiamo il codice di 1-column.phtml, è così:

         getChildHtml ('testa')?>  getBodyClass () '':?? ">> getChildHtml ('after_body_start')?>  getChildHtml ('global_notices')?>  getChildHtml ('header')?>   getChildHtml ('breadcrumb')?>  getChildHtml ('global_messages')?> getChildHtml ('contenuto')?> 
 
 
 getChildHtml ('footer_before')?> getChildHtml ('footer')?> getChildHtml ('global_cookie_notice')?> getChildHtml ('before_body_end')?> 
 
 getAbsoluteFooter ()?>

Ora dobbiamo modificarlo per adattarlo al nostro file index.html, quindi useremo le nostre classi body e container e aggiungeremo alcune div aggiuntive, e il codice modificato sarà simile al seguente:

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

Allo stesso modo modificheremo anche il 2column-left.phtml, 2column-right.phtml, e 3column.phtml File. Questo è il modo in cui il codice modificato cercherà 2-column-left.phtml:

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

Il prossimo, 2columns-right.phtml sarà simile a questo dopo il montaggio:

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

Infine, stiamo andando a modificare 3columns.phtml come questo:

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

Guarda attentamente le modifiche che abbiamo apportato in questi file modello. Quando lo paragoni al file index.html del nostro sito Web HTML, avrà senso per te.

Ecco come il sito web dovrebbe occuparsi della modifica di questi file. Non vedrai molta differenza, ma stiamo andando nella giusta direzione.

Successivamente modificheremo il file header.phtml, in quanto possiamo vedere che questo è il file che ha il contenuto del wrapper nella sezione header. Quindi, copiaremo il frontend / RWD / default / template / page / html / header.phtml file, spostalo nel frontend / tutsplus / vstyle / template / page / html cartella e iniziare a modificarlo. Attualmente il suo codice sarà simile a questo:

   getChildHtml ('store_language')?> 
 getChildHtml ('currency_switcher')?> getChildHtml ('benvenuto')?> getAdditionalHtml ()?>
 
 
   getUrl (")?>">     
     __('Menu'); ?>    __('Ricerca'); ?>   helper ( 'customer') -> getAccountUrl (); ?> "data-target-element =" # header-account ">  __('Account'); ?>    getChildHtml ( 'minicart_head'); ?> 
 
 
   getChildHtml ('topMenu')?> 
   getChildHtml ('topSearch')?> 
   getChildHtml ('toplink')?> 
 
  getChildHtml ( 'topContainer'); ?>

Lo confronteremo con la sezione dell'intestazione del nostro codice HTML e inizieremo a apportarvi queste modifiche:

     Chiamaci ora! 0800-123-456-78
 
      Eng
 VNS
 Fer
 gemma
 
 
   Dollaro statunitense
 UKD
 FER
 
 
 
  
 
  carrello     
  Sedia Lincoln
 Taglia: Taglia unica
 Quantità: 01
 
  $ 30.00
 
 
 
   
  Sedia Lincoln
 Taglia: Taglia unica
 Quantità: 01
 
  $ 30.00
 
 
 
 Totale $ 60.00

Inseriremo questo codice HTML nel file header.phtml e sostituiremo le sezioni di differenze con i tag modello dinamici pertinenti come il cambio di valuta, la lingua del negozio, il logo, il menu, la barra di ricerca, ecc. Ecco come il codice si occuperà di queste modifiche:

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

Questo è il modo in cui la sezione di intestazione si occuperà della modifica di header.phtml file:

Ora come puoi vedere, dobbiamo modificare il codice delle diverse sezioni che utilizziamo, come il selettore di lingua e valuta, il cursore, il menu, la barra di ricerca, ecc. Per iniziare, modificheremo i selettori di valuta e lingua. Se abilitiamo nuovamente i suggerimenti del modello, possiamo vedere che la sezione del selettore della lingua proviene base / default / template / page / switch / languages.phtml, quindi copieremo questo file nel nostro tema nella stessa posizione e inizieremo a modificarlo in modo che corrisponda al nostro codice HTML. L'originale languages.phtml il file assomiglia a questo:

getStores ())> 1):?>  __ ('La tua lingua:')?>

Il codice HTML originale per il selettore di lingua e valuta è simile al seguente:

   Eng
 VNS
 Fer
 gemma
 
 
   Dollaro statunitense
 UKD
 FER

Dopo aver modificato languages.phtml per abbinare l'HTML, sarà simile a questo:

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

Come puoi vedere, il selettore di valuta non viene visualizzato sul nostro sito Web per ora. Dobbiamo prima abilitare il selettore di valuta dal pannello di amministrazione. A partire dal Sistema> Configurazione> Generale> Impostazione valuta, devi prima abilitare alcune lingue e poi da Sistema> Gestisci valuta> Tariffe imposta i tassi di cambio. Quindi vedrai che il selettore di valuta è abilitato sul tuo sito web. Abilitando nuovamente i suggerimenti del modello, possiamo vedere che il suo modello è RWD / default / template / directory / currency.phtml, e il suo codice attuale sarà simile a questo:

getCurrencyCount ()> 1):?>  __ ('La tua valuta:')?>

Lo modificheremo in modo che corrisponda al nostro codice HTML, quindi il codice modificato sarà simile a questo:

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

Successivamente, modificheremo il nostro messaggio di benvenuto in modo che corrisponda al nostro design HTML. Per quello dovremo andare a Sistema> Configurazione / Generale / Design / Intestazione / Testo di benvenuto. Dopo averlo modificato, l'intestazione sarà simile a questa:

Se hai seguito correttamente tutti i passaggi, spero che tu possa vedere molti progressi nell'aspetto della tua home page. Ora, dato che abbiamo parzialmente modificato la sezione dell'intestazione, continueremo a modificare la sezione dell'intestazione nel prossimo articolo e modificheremo anche il cursore principale in quell'articolo.

Per favore, spiega le tue esperienze nella sezione dei commenti!

Codice