I den forrige opplæringen i denne serien begynte vi å endre topptekstdelen av hjemmesiden. I denne opplæringen begynner vi hvor vi sluttet med overskriftseksjonen, og deretter oppretter vi den nye glidebryteren CMS-blokk og kaller den fra våre malfiler. Som vi har mye å dekke i denne artikkelen, la oss starte uten ytterligere forsinkelser.

Som vi har delvis festet topphovedet, er det eneste som trenger å fikse det toppkarvsnittet. For å tilpasse header-kurven, prøver vi først å finne ut hvilke malfiler som er ansvarlige for å gjengi den delen. For å analysere det, la oss først legge til noen produkter i handlekurven, slik at vi kan undersøke det fullt ut.

Når vi gjør det mulig, kan vi se at topptekkarens ytre beholder kommer fra denne malfilen: frontend / rwd / default / mal / kassa / vogn / minicart.phtml.Deretter på klikk blir den utvidede delen gjengitt gjennom denne filen: frontend / rwd / default / mal / kassa / vogn / minicart / items.phtml. Til slutt blir hver vogn gjenstand gjengitt gjennom denne filen: frontend / rwd / default / mal / kassa / vogn / minicart / default.phtml.

Vi vil importere alle disse filene til vårt nylig opprettede tema, og deretter begynne å endre dem.

La oss starte modifikasjonsprosessen med ytterste minicart.phtml fil. Dette er den nåværende koden til denne filen:

getSummaryCount (); hvis (tom ($ _ cartQty)) $ _cartQty = 0; ?> hjelper ('kassa / handlevogn') -> getCartUrl (); ?> "data-target-element =" # header-cart ">  __ ( 'handlekurv'); ?>   
 getChildHtml ( 'minicart_content');?> 
 

Nå før vi starter noen endringer i det, la oss sjekke koden i vår header-vogn-delen i vår originale HTML-fil. Koden ser slik ut:

 
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 Sjekk ut 
 
 
 
 

Så begynner vi å endre PHP-filkoden for å gjøre det likt vår HTML-kode. Vi bruker bare en ankermerke her for å pakke inn vognikonet, og etter det viser vi innholdet på minikartet. Derfor ser vår kode slik ut:

helper ( 'checkout / cart') -> getCartUrl (); ?> "> Kurven  getChildHtml ( 'minicart_content');?> 

Her har vi erstattet den ytre innpakningen på den øverste vognen, men nå må vi redigere rullegardinavsnittet. Som vi allerede har sett, kommer den innpakningen fra frontend / rwd / default / mal / kassa / vogn / minicart / items.phtml. La oss sjekke gjeldende kode for denne filen:

getSummaryCount (); hvis (tom ($ _ cartQty)) $ _cartQty = 0; ?> 
 
 
 
 __ ('Nylig lagt til element (er)')?> __ ('Lukk'); ?> "> × 
 getRecentItems ()?>   
 
  getItemHtml ($ _ item)?>  
 
  
 getChildHtml ('cart_promotion')?> 
 
 
 canApplyMsrp ()):?> __ ('ORDER TOTAL SKAL VISES FØR DU SENDER BESTILLINGEN'); ?>  __ ('Cart Subtotal:')?> formatPris ($ this-> getSubtotal ())?> getSubtotalInclTax ()):?> 
(formatPris ($ _ subtotalInclTax)?> getIncExcText (true)?>)   
 
 
 isPossibleOnepageCheckout ()):?> 
 getChildHtml ('extra_actions')?> 
 __ ('Checkout')?> "Href ="getCheckoutUrl ()?> "> __ ('Checkout')?>  
 
  getUrl ( 'kassen / handlevogn'); ?> "> __('Se handlekurven'); ?>  
  
__ ('Du har ingen varer i handlekurven din.')?>
  
 

Når vi sammenligner det med vår HTML-mal, er det noen ting vi må gjøre. Først av alt, inne i minikart-wrapper div, Vi begynner å implementere vår ul, og for hvert element vil vi iterere under li stikkord. På slutten vil vi vise kurven totalt, eller angi at det ikke er noen varer i handlekurven. Vår siste kode for denne filen vil se slik ut:

getSummaryCount (); hvis (tom ($ _ cartQty)) $ _cartQty = 0; ?> 
 
 getRecentItems ()?>  
 
   getItemHtml ($ _ item)?>  
  canApplyMsrp ()):?> __ ('ORDER TOTAL SKAL VISES FØR DU SENDER BESTILLINGEN'); ?>  __ ('Cart Subtotal:')?> formatPris ($ this-> getSubtotal ())?> getSubtotalInclTax ()):?> 
(formatPris ($ _ subtotalInclTax)?> getIncExcText (true)?>)     CheckOut 
  
__ ('Du har ingen varer i handlekurven din.')?>
  
 
 

Nå er den siste delen som er igjen styling selve handlekurven. Som vi allerede har funnet ut, er filen ansvarlig for den delen: frontend / rwd / default / mal / kassa / vogn / minicart / default.phtml.

Den nåværende koden til denne filen ser ut som ganske lang og vanskelig å forstå, men vær ikke skremt. Vi trenger ikke å redigere alt dette, fordi hoveddelen av filkoden bare beregner riktig pris og andre produktalternativer. Igjen, vi sjekker HTML-koden vår, legger den i denne filen, og begynner å erstatte den statiske teksten med dynamiske verdier. Dette er koden for hvert kurvelement i vår HTML:

 
 
 
 
Lincoln stol
 
Størrelse: En størrelse
 Mengde: 01
 
 
 
$ 30.00
 
 
 
 

Vi erstatter img tag med denne:

Deretter erstatter vi navnet med dynamisk kode:

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

For å vise produktalternativer bruker vi denne dynamiske koden:

getOptionList ()):?>  escapeHtml ($ _ option ['label'])?>:        
  

Da bestemmer vi og viser mengden ved hjelp av denne koden:

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

For prisberegning legger vi inn denne koden i stedet for statisk pris:

 __ ('Se pris før bestillingsbekreftelse.'); ?>  hjelper ('skatt') -> displayCartPriceExclTax () || $ this-> hjelper ('skatt') -> displayCartBothPrices ()):?> hjelper ('skatt') -> displayCartBothPrices ()):?> __ ('ekskl. Skatt'); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'salg')):?> helper ( 'checkout') -> formatPrice ($ _ element-> getCalculationPrice () + $ _ element-> getWeeeTaxAppliedAmount () + $ _ element-> getWeeeTaxDisposition ()); ?>  hjelpeprogram ('kassa') -> formatpris ($ _ item-> getCalculationPrice ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatt [ 'mengde'], sann, sann); ?>   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatt [ 'amount_incl_tax'], true, true); ?>
  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatt [ 'amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __('Total'); ?>:
 helper ( 'checkout') -> formatPrice ($ _ element-> getCalculationPrice () + $ _ element-> getWeeeTaxAppliedAmount () + $ _ element-> getWeeeTaxDisposition ()); ?>    hjelper ('skatt') -> displayCartPriceInclTax () || $ this-> hjelper ('skatt') -> displayCartBothPrices ()):?> helper ( 'checkout') -> getPriceInclTax ($ _ element); ?> hjelper ('skatt') -> displayCartBothPrices ()):?> 
__ ('Inkludert skatt'); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'salg')):?> hjelper ('checkout') -> formatPris ($ _ incl + Mage :: hjelper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>  hjelpeprogram ('checkout') -> formatPris ($ _ incl - $ _ item-> getWeeeTaxDisposition ())>>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatt [ 'mengde'], sann, sann); ?>
   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatt [ 'amount_incl_tax'], true, true); ?>  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatt [ 'amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __ ('Totalt inkl. Skatt'); ?>:
 hjelper ('checkout') -> formatPris ($ _ incl + Mage :: hjelper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>     

Og som siste skritt erstatter vi href for å fjerne nettadressen med denne:

getAjaxDeleteUrl ()?>

Jeg har funnet all denne koden fra selve default.phtml. Du trenger ikke å finne ut alle logikken og koden på egen hånd, men hvis du ser nøye ut, kan du finne den i filen du prøver å endre.

Så, den endelige koden til vår default.phtml filen ser slik ut:

getItem (); $ isVisibleProduct = $ _item-> getProduct () -> isVisibleInSiteVisibility (); $ canApplyMsrp = Mage :: hjelper ('katalog') -> canApplyMsrp ($ _ item-> getProduct (), Mage_Catalog_Model_Product_Attribute_Source_Msrp_Type :: TYPE_BEFORE_ORDER_CONFIRM); ?> 
 
 
 
 
hasProductUrl ()):?> getProductUrl ()?> ">escapeHtml ($ this-> getProductName ())?>hasProductUrl ()):?>
 
 getOptionList ()):?>  escapeHtml ($ _ option ['label'])?>:        
  __ ( 'Ant:'); ?> getQty ()?> 
 
 
 
  __ ('Se pris før bestillingsbekreftelse.'); ?>  hjelper ('skatt') -> displayCartPriceExclTax () || $ this-> hjelper ('skatt') -> displayCartBothPrices ()):?> hjelper ('skatt') -> displayCartBothPrices ()):?> __ ('ekskl. Skatt'); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'salg')):?> helper ( 'checkout') -> formatPrice ($ _ element-> getCalculationPrice () + $ _ element-> getWeeeTaxAppliedAmount () + $ _ element-> getWeeeTaxDisposition ()); ?>  hjelpeprogram ('kassa') -> formatpris ($ _ item-> getCalculationPrice ())?>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatt [ 'mengde'], sann, sann); ?>   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatt [ 'amount_incl_tax'], true, true); ?>
  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatt [ 'amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __('Total'); ?>:
 helper ( 'checkout') -> formatPrice ($ _ element-> getCalculationPrice () + $ _ element-> getWeeeTaxAppliedAmount () + $ _ element-> getWeeeTaxDisposition ()); ?>    hjelper ('skatt') -> displayCartPriceInclTax () || $ this-> hjelper ('skatt') -> displayCartBothPrices ()):?> helper ( 'checkout') -> getPriceInclTax ($ _ element); ?> hjelper ('skatt') -> displayCartBothPrices ()):?> 
__ ('Inkludert skatt'); ?>:  typeOfDisplay ($ _ item, array (0, 1, 4), 'salg')):?> hjelper ('checkout') -> formatPris ($ _ incl + Mage :: hjelper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>  hjelpeprogram ('checkout') -> formatPris ($ _ incl - $ _ item-> getWeeeTaxDisposition ())>>  getApplied ($ _ item)):?> 
 typeOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatt [ 'mengde'], sann, sann); ?>
   typeOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatt [ 'amount_incl_tax'], true, true); ?>  typeOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatt [ 'amount_incl_tax'], true, true); ?>
    typeOfDisplay ($ _ item, 2, 'sales')):?> __ ('Totalt inkl. Skatt'); ?>:
 hjelper ('checkout') -> formatPris ($ _ incl + Mage :: hjelper ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>     
 getAjaxDeleteUrl ()?> ">
 
 
 

Nå, hvis du lagrer alle disse filene, og oppdaterer startsiden, bør du se noe slikt:

Vi har noen problemer med stilene, men HTML-gjengivelsen er ganske nært til vår nødvendige HTML-design. Nå som vi har fullført topptekstdelen, er det neste logoseksjonen. Heldigvis er det ikke så mye å gjøre der, med unntak av stylingdelen (for å gjøre logo-senteret justert) som vi skal gjøre i stylingsartikkelen. Våre menyelementer virker også ganske nær hva vi forventer, så vi trenger bare å endre søkefeltet, og deretter hovedskyven.

For å endre søkefeltet, la vi slå på hintene for malen og se hvilken del som er ansvarlig for å gjengi denne koden: frontend / rwd / default / mal / catalogsearch / form.mini.phtml.

For øyeblikket ser denne filen ut slik:

 
 __ ('Søk:')?>  __ ('Søk')?> 
 
  
 Hvis vi ser på HTML på søkefeltet i vår HTML-designfil, ser det slik ut: 
 
   
 
 

Så, vi bruker de ytre delene av HTML, og erstatter det indre innholdet med det dynamiske innholdet. Vår nye form.mini.phtml filen vil se slik ut:

I den siste delen av denne artikkelen vil vi redigere hovedskyven. For det vil vi opprette en ny statisk blokk ved å gå til CMS> Statiske blokker> Legg til ny blokk. Vi nevner denne blokken 'Hjemmeside Slider', og vi legger inn identifikatoren som 'Hjem-glidebryteren'-Slik kan koden finne denne blokken. 

Nå kommer vi inn i gliderkoden fra vår HTML.

 
 
 
 
 
 
 
 
 
 
 
lysstråle
 
Lorem Ipsum er rett og slett dummy tekst av utskrift og typesetting industrien.
 Handle nå 
 
 
 
 
lysstråle
 
Lorem Ipsum er rett og slett dummy tekst av utskrift og typesetting industrien.
 Handle nå 
 
 
 
 
 
 
 
 

Legg merke til at vi har erstattet bildekilden i forhold til hudkatalogen ved hjelp av skin_url merk som dette:

Nå legger vi til disse linjene i header.phtml filen vi opprettet i den siste artikkelen, like over den siste linjen getChildHtml ( 'topContainer'); ?>.

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

Det siste trinnet er å fjerne den nåværende skyveknappen. For å gjøre det, gå til CMS-sider> Madison Island, og fra Innhold delen, fjern all koden opp til starten av stilavsnittet.

Lagre alt og last nytt på hjemmesiden, og nå bør du se at alt kommer sammen veldig godt. Noen stiler er av, men vi skal håndtere det i en separat stylingveiledning. For nå trenger vi bare å ta vare på innholdsseksjonen på hjemmesiden, der vi skal vise en siste karusell, og deretter tilpasser vi bunnteksten. Vi gjør alt dette i neste opplæring, så hold deg oppdatert for det!