Dezvoltarea temelor Magento Pagina de pornire, Partea 2

În tutorialul anterior din această serie, am început să modificăm secțiunea antet a paginii de pornire. În acest tutorial, vom începe de unde am rămas cu îmbunătățirea secțiunii antet, iar apoi vom crea noul bloc CMS al slider-ului și vom apela din fișierele noastre șablon. Deoarece avem multe de spus în acest articol, să începem fără întârziere.

Pe măsură ce am fixat parțial antetul superior, singurul lucru pe care trebuie să-l fixăm este partea de sus a căruciorului. Pentru a personaliza coșul cu antet, mai întâi vom încerca să aflăm care fișiere șablon sunt responsabile pentru redarea acestei părți. Pentru a analiza acest lucru, să adăugăm mai întâi câteva produse în coș, astfel încât să putem investiga complet acest lucru.

Pe măsură ce permitem sugestiile șablonului, vedem că containerul exterior al coșului antetului vine din acest fișier șablon: front-end / RWD / default / template / checkout / cos / minicart.phtml.Apoi, pe clic, porțiunea extinsă este redată prin acest fișier: front-end / RWD / default / template / checkout / coș / minicart / items.phtml. În cele din urmă, fiecare element de coș este redat prin acest fișier: front-end / RWD / default / template / checkout / coș / minicart / default.phtml.

Vom importa toate aceste fișiere în tema nou creată și apoi vom începe să le modificăm.

Să începem procesul de modificare cu cele mai exterioare minicart.phtml fişier. Acesta este codul curent al acestui fișier:

getSummaryCount (); dacă (gol ($ _ cartQty)) $ _cartQty = 0; ?> ajutor ('checkout / cart') -> getCartUrl (); ?> "date-target-element =" # header-cart ">  __('Cart'); ?>    getChildHtml ( 'minicart_content');?>

Acum, înainte de a începe modificările, verificați codul secțiunii noastre cu antet de coș în fișierul HTML original. Codul arată astfel:

 cart     
  Scaun Lincoln
 Mărimea: O marime
 Cantitate: 01
 
  $ 30.00
 
 
 
   
  Scaun Lincoln
 Mărimea: O marime
 Cantitate: 01
 
  $ 30.00
 
 
 
 Total $ 60.00

Deci, vom începe să modificăm codul de fișier PHP pentru al face asemănător cu codul nostru HTML. Vom folosi aici doar o etichetă de ancora pentru a împacheta pictograma căruciorului și după aceea vom afișa conținutul minicart. Prin urmare, codul nostru va arata astfel:

ajutor ( 'checkout / coș') -> getCartUrl (); ?> "> Coș  getChildHtml ( 'minicart_content');?>

Aici am înlocuit învelișul exterior al coșului de sus, dar acum trebuie să editați folderele cu secțiunea drop-down. După cum am văzut deja, ambalajul vine de la front-end / RWD / default / template / checkout / coș / minicart / items.phtml. Să verificăm codul curent al acestui fișier:

getSummaryCount (); dacă (gol ($ _ cartQty)) $ _cartQty = 0; ?> 
 
   __ ("Articole adăugate recent")?> __ ("Închidere"); ?> "> × 
 getRecentItems ()?>      getItemHtml ($ _ item)?>  
 
   getChildHtml ('cart_promotion')?> 
   canApplyMsrp ()):?> __ ('TOTALUL COMANDULUI VA FI DISPLAYAT ÎNAINTE DE A FACE ORDINUL'); ?>  __ ("Subtotal de coș:")?> formatPrice ($ this-> getSubtotal ())?> getSubtotalInclTax ()):?> 
(formatPrice ($ _ subtotalInclTax)?> getIncExcText (true)?>)   
 
  isPossibleOnepageCheckout ()):?>  getChildHtml ('extra_actions')?>  __ ('Checkout')?> "Href ="getCheckoutUrl ()?> "> __ ("Checkout")?>  
 
  getUrl ( 'checkout / cart'); ?> "> __('Vezi coșul de cumpărături'); ?>  
  __ ('Nu aveți niciun produs în coșul de cumpărături.')?>

Când o comparăm cu șablonul HTML, avem câteva lucruri pe care trebuie să le facem. Mai întâi de toate, în interiorul minicart-wrapper div, vom începe să ne punem în aplicare ul, și pentru fiecare element vom itera sub Li etichetă. În final, vom afișa totalul căruciorului sau vom indica că nu există niciun element în coș. Codul nostru final pentru acest fișier va arăta astfel:

getSummaryCount (); dacă (gol ($ _ cartQty)) $ _cartQty = 0; ?> 
 
 getRecentItems ()?>      getItemHtml ($ _ item)?>    canApplyMsrp ()):?> __ ('TOTALUL COMANDULUI VA FI DISPLAYAT ÎNAINTE DE A FACE ORDINUL'); ?>  __ ("Subtotal de coș:")?> formatPrice ($ this-> getSubtotal ())?> getSubtotalInclTax ()):?> 
(formatPrice ($ _ subtotalInclTax)?> getIncExcText (true)?>)     
  __ ('Nu aveți niciun produs în coșul de cumpărături.')?>

Acum, partea finală care este lăsată este aceea de a modela elementul listei de cărucioare în sine. După cum am aflat deja, dosarul responsabil pentru această parte este: front-end / RWD / default / template / checkout / coș / minicart / default.phtml.

Codul actual al acestui fișier pare destul de lung și greu de înțeles, dar nu fi intimidat. Nu este nevoie să editați toate aceste lucruri, deoarece partea principală a codului de fișier este doar calculul prețului potrivit și alte opțiuni de produs. Din nou, vom verifica codul nostru HTML, îl vom pune în acest fișier și vom începe să înlocuim textul static cu valori dinamice. Acesta este codul pentru fiecare element de coș în HTML:

  
  Scaun Lincoln
 Mărimea: O marime
 Cantitate: 01
 
  $ 30.00

Vom înlocui img eticheta cu aceasta:

Apoi vom înlocui numele cu codul dinamic:

hasProductUrl ()):?> getProductUrl ()?> ">escapeHtml ($ this-> getProductName ())?>hasProductUrl ()):?>

Pentru a afișa opțiunile de produs, vom folosi acest cod dinamic:

getOptionList ()):?>  escapeHtml ($ _ opțiune ['label'])?>:

Apoi vom determina și vom arăta cantitatea folosind acest cod:

__ ( 'Cantitate:'); ?> getQty ()?>

Pentru calcularea prețurilor, vom introduce acest cod în locul prețului static:

 __ ('A se vedea prețul înainte de confirmarea comenzii.'); ?>  ajutor ('tax') -> displayCartPriceExclTax () || $ this-> helper ("tax") -> displayCartBothPrices ()):?> ajutor ('tax') -> displayCartBothPrices ()):?> __ ("Taxa excl."); ?>:  typeOfDisplay ($ _ element, array (0, 1, 4), "vânzări")):?> ajutor ( 'checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>  ajutor ('checkout') -> formatPrice ($ _ item-> getCalculationPrice ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) ca taxă de $):?> : formatPrice (impozit [ 'sumă'] $, adevărat, adevărat); ?>   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) ca taxă de $):?> : formatPrice ($ impozit [ 'amount_incl_tax'], adevărat, adevărat); ?>
  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) ca taxă de $):?> : formatPrice ($ impozit [ 'amount_incl_tax'], adevărat, adevărat); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __('Total'); ?>:
 ajutor ( 'checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>    ajutor ('tax') -> displayCartPriceInclTax () || $ this-> helper ("tax") -> displayCartBothPrices ()):?> ajutor ( 'checkout') -> getPriceInclTax ($ _ element); ?> ajutor ('tax') -> displayCartBothPrices ()):?> 
__ ("inclusiv taxa"); ?>:  typeOfDisplay ($ _ element, array (0, 1, 4), "vânzări")):?> helper ('checkout') -> formatPrice ($ _ incl + Mage :: ajutor ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>  helper ('checkout') -> formatePrice ($ _ incl - $ _ item-> getWeeeTaxDisposition ())>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) ca taxă de $):?> : formatPrice (impozit [ 'sumă'] $, adevărat, adevărat); ?>
   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) ca taxă de $):?> : formatPrice ($ impozit [ 'amount_incl_tax'], adevărat, adevărat); ?>  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) ca taxă de $):?> : formatPrice ($ impozit [ 'amount_incl_tax'], adevărat, adevărat); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __ ("Total inclusiv taxa"); ?>:
 helper ('checkout') -> formatPrice ($ _ incl + Mage :: ajutor ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>

Și ca ultimul pas, vom înlocui href-ul pentru a elimina adresa URL cu acesta:

getAjaxDeleteUrl ()?>

Am găsit tot acest cod de la real default.phtml. Nu trebuie să dați seama de toate logica și codul pe cont propriu, dar dacă vă uitați atent, puteți găsi în fișierul pe care încercați să îl modificați.

Deci, codul final al nostru default.phtml fișierul arată astfel:

getItem (); $ isVisibleProduct = $ _item-> getProduct () -> isVisibleInSiteVisibilitate (); $ canApplyMsrp = Mage :: ajutor ('catalog') -> canApplyMsrp ($ _ item-> getProduct (), Mage_Catalog_Model_Product_Attribute_Source_Msrp_Type :: TYPE_BEFORE_ORDER_CONFIRM); ?>   
  hasProductUrl ()):?> getProductUrl ()?> ">escapeHtml ($ this-> getProductName ())?>hasProductUrl ()):?>
  getOptionList ()):?>  escapeHtml ($ _ opțiune ['label'])?>:        
  __ ( 'Cantitate:'); ?> getQty ()?> 
 
    __ ('A se vedea prețul înainte de confirmarea comenzii.'); ?>  ajutor ('tax') -> displayCartPriceExclTax () || $ this-> helper ("tax") -> displayCartBothPrices ()):?> ajutor ('tax') -> displayCartBothPrices ()):?> __ ("Taxa excl."); ?>:  typeOfDisplay ($ _ element, array (0, 1, 4), "vânzări")):?> ajutor ( 'checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>  ajutor ('checkout') -> formatPrice ($ _ item-> getCalculationPrice ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) ca taxă de $):?> : formatPrice (impozit [ 'sumă'] $, adevărat, adevărat); ?>   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) ca taxă de $):?> : formatPrice ($ impozit [ 'amount_incl_tax'], adevărat, adevărat); ?>
  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) ca taxă de $):?> : formatPrice ($ impozit [ 'amount_incl_tax'], adevărat, adevărat); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __('Total'); ?>:
 ajutor ( 'checkout') -> formatPrice ($ _ item-> getCalculationPrice () + $ _ item-> getWeeeTaxAppliedAmount () + $ _ item-> getWeeeTaxDisposition ()); ?>    ajutor ('tax') -> displayCartPriceInclTax () || $ this-> helper ("tax") -> displayCartBothPrices ()):?> ajutor ( 'checkout') -> getPriceInclTax ($ _ element); ?> ajutor ('tax') -> displayCartBothPrices ()):?> 
__ ("inclusiv taxa"); ?>:  typeOfDisplay ($ _ element, array (0, 1, 4), "vânzări")):?> helper ('checkout') -> formatPrice ($ _ incl + Mage :: ajutor ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>  helper ('checkout') -> formatePrice ($ _ incl - $ _ item-> getWeeeTaxDisposition ())>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) ca taxă de $):?> : formatPrice (impozit [ 'sumă'] $, adevărat, adevărat); ?>
   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) ca taxă de $):?> : formatPrice ($ impozit [ 'amount_incl_tax'], adevărat, adevărat); ?>  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) ca taxă de $):?> : formatPrice ($ impozit [ 'amount_incl_tax'], adevărat, adevărat); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __ ("Total inclusiv taxa"); ?>:
 helper ('checkout') -> formatPrice ($ _ incl + Mage :: ajutor ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>     
 getAjaxDeleteUrl ()?> ">

Acum, dacă salvați toate aceste fișiere și reîncărcați pagina de pornire, ar trebui să vedeți ceva de genul:

Avem unele probleme cu stilurile, dar redarea HTML este destul de aproape de designul nostru HTML necesar. Acum că am terminat secțiunea antet superior, următoarea este secțiunea de logo. Din fericire, nu este nimic de-a face cu excepția părții de styling (pentru a face alinierea centrului logo-ului) pe care o vom face în articolul de styling. Elementele noastre de meniu, de asemenea, par destul de aproape de ceea ce ne așteptăm, așa că va trebui doar să modificăm bara de căutare, apoi glisorul principal.

Pentru a modifica bara de căutare, să activați sugestiile șablonului și să vedeți ce parte este responsabilă pentru redarea acestui cod: front-end / RWD / default / template / catalogsearch / form.mini.phtml.

În prezent, acest fișier arată astfel:

  __ ('Căutați:')?>   
 
  
 Dacă ne uităm la HTML-ul barei de căutare din fișierul nostru de design HTML, vom arăta astfel:

Deci, vom folosi divs exterioare ale HTML, și vom înlocui conținutul interior cu conținutul dinamic. Noul nostru form.mini.phtml fișierul va arăta astfel:

În ultima parte a acestui articol, vom edita cursorul principal. Pentru asta, vom crea un nou bloc static, mergând la CMS> Blocuri statice> Adăugați un nou bloc. Vom numi acest Bloc "Slider pentru pagina de start", și vom introduce identificatorul ca 'Home-slider'-acesta este modul în care codul va putea găsi acest bloc.

Acum vom introduce codul de cursor din codul nostru HTML.


 
    
 
   
  rază de lumină
 Lorem Ipsum este pur și simplu un text fals al industriei de imprimare și de tipărire.
 Cumpără acum 
 
   rază de lumină
 Lorem Ipsum este pur și simplu un text fals al industriei de imprimare și de tipărire.
 Cumpără acum

Rețineți că am înlocuit sursa de imagine în raport cu directorul skin utilizând skin_url eticheta de genul:

Acum vom adăuga aceste linii în fișierul header.phtml pe care l-am creat în ultimul articol, chiar deasupra ultimei linii getChildHtml ( 'topContainer'); ?>.

getIsHomePage ()):?> getLayout () -> createBlock ('csms / bloc') -> setBlockId ('home-slider') -> toHtml (); ?>

Ultimul pas este eliminarea cursorului curent. Pentru a face asta, du-te la CMS-Pagini> Insula Madison, și de la Conţinut , eliminați tot codul până la începutul secțiunii de stil.

Salvați totul și reîncărcați pagina de pornire, iar acum ar trebui să vedeți că totul se desfășoară foarte bine. Unele stiluri sunt dezactivate, dar vom aborda acest lucru într-un tutorial de styling separat. Pentru moment, trebuie să avem grijă de secțiunea de conținut din pagina de pornire, unde vom arăta un carusel de produse mai recent și apoi vom personaliza subsolul. Vom face toate astea în următorul tutorial, deci stați la dispoziție!

Cod