Magento Theme Development Hemsida, Del 2

I den tidigare handledningen i denna serie började vi ändra huvudrubrik på hemsidan. I den här handledningen börjar vi där vi slutade med förbättringen av rubrikavsnittet, och sedan skapar vi det nya CMS-reglaget och kallar det från våra mallfiler. Som vi har mycket att täcka i den här artikeln, låt oss börja utan ytterligare dröjsmål.

Eftersom vi delvis har fixat topphuvudet är det enda som behöver fixas där den övre vagnen. För att anpassa huvudkorgen, först försöker vi ta reda på vilka mallfiler som är ansvariga för att göra den delen. För att analysera det, låt oss först lägga till några produkter i vagnen så att vi kan undersöka det helt.

När vi aktiverar malltipsen kan vi se att huvudkärlens ytterbehållare kommer från den här mallfilen: frontend / RWD / default / mall / kassan / varukorg / minicart.phtml.Sedan klickar den expanderade delen genom den här filen: frontend / RWD / default / mall / kassan / varukorg / minicart / items.phtml. Slutligen görs varje vagnsobjekt genom denna fil: frontend / RWD / default / mall / kassan / varukorg / minicart / default.phtml.

Vi importerar alla dessa filer till vårt nyligen skapade tema och börjar sedan ändra dem.

Låt oss starta modifieringsprocessen med yttersta minicart.phtml fil. Detta är den aktuella koden för den här filen:

getSummaryCount (); om (tomt ($ _ cartQty)) $ _cartQty = 0; ?> hjälpar ('checkout / cart') -> getCartUrl (); ?> "data-target-element =" # header-cart ">  __('Vagn'); ?>    getChildHtml (minicart_content ');?>

Nu innan vi börjar några ändringar i det, låt oss kolla koden i vår huvudkorgavdelning i vår ursprungliga HTML-fil. Koden ser så här ut:

 vagn     
  Lincoln stol
 Storlek: En storlek
 Kvantitet: 01
 
  $ 30.00
 
 
 
   
  Lincoln stol
 Storlek: En storlek
 Kvantitet: 01
 
  $ 30.00
 
 
 
 Total $ 60.00

Så börjar vi ändra PHP-filkoden så att den liknar vår HTML-kod. Vi använder bara en ankare tagg här för att lägga in kundvagnen ikonen, och därefter visar vi minikortsinnehållet. Därför ser vår kod ut så här:

hjälpare (kassan / varukorg) -> getCartUrl (); ?> "> Varukorg  getChildHtml (minicart_content ');?>

Här har vi bytt ut ytterkartongen på den övre vagnen, men nu måste vi redigera rullgardinsmenyn. Som vi redan har sett kommer den omslaget från frontend / RWD / default / mall / kassan / varukorg / minicart / items.phtml. Låt oss kolla den aktuella koden för den här filen:

getSummaryCount (); om (tomt ($ _ cartQty)) $ _cartQty = 0; ?> 
 
   __ ('Nyligen tillagda objekt')?> __ ('Stäng'); ?> "> × 
 getRecentItems ()?>      getItemHtml ($ _ item)?>  
 
   getChildHtml ('cart_promotion')?> 
   canApplyMsrp ()):?> __ ('BESTÄLLNING TOTAL SKILL VISAS INNAN DU SKÄLDER ORDEN'); ?>  __ ('Cart Subtotal:')?> formatPrice ($ this-> getSubtotal ())?> getSubtotalInclTax ()):?> 
(formatPrice ($ _ subtotalInclTax)?> getIncExcText (true)?>)   
 
  isPossibleOnepageCheckout ()):?>  getChildHtml ('extra_actions')?>  __ ('Checkout')?> "Href ="getCheckoutUrl ()?> "> __ ('Checkout')?>  
 
  getUrl ( 'kassan / varukorg'); ?> "> __('Visa kundvagn'); ?>  
  __ ('Du har inga varor i din varukorg.')?>

När vi jämför det med vår HTML-mall finns det några saker vi behöver göra. Först av allt, inuti minicart-wrapper div, Vi börjar med att implementera vår ul, och för varje objekt kommer vi iterera under li märka. I slutet visar vi vagnens totala, eller indikerar att det inte finns några föremål i vagnen. Vår sista kod för den här filen kommer att se ut så här:

getSummaryCount (); om (tomt ($ _ cartQty)) $ _cartQty = 0; ?> 
 
 getRecentItems ()?>      getItemHtml ($ _ item)?>    canApplyMsrp ()):?> __ ('BESTÄLLNING TOTAL SKILL VISAS INNAN DU SKÄLDER ORDEN'); ?>  __ ('Cart Subtotal:')?> formatPrice ($ this-> getSubtotal ())?> getSubtotalInclTax ()):?> 
(formatPrice ($ _ subtotalInclTax)?> getIncExcText (true)?>)     
  __ ('Du har inga varor i din varukorg.')?>

Nu är den sista delen som lämnas styling själva varukorgen. Som vi redan har räknat ut är filen ansvarig för den delen: frontend / RWD / default / mall / kassan / varukorg / minicart / default.phtml.

Den nuvarande koden i den här filen ser ut som ganska lång och svår att förstå, men inte skrämmas. Vi behöver inte redigera allt detta eftersom huvuddelen av filkoden bara beräknar rätt pris och andra produktalternativ. Återigen kontrollerar vi vår HTML-kod, lägger den i den här filen och börjar ersätta den statiska texten med dynamiska värden. Detta är koden för varje kundvagn i vår HTML:

  
  Lincoln stol
 Storlek: En storlek
 Kvantitet: 01
 
  $ 30.00

Vi ersätter img tagga med den här:

Därefter ersätter vi namnet med dynamisk kod:

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

För att visa produktalternativen använder vi den här dynamiska koden:

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

Då bestämmer vi och visar kvantiteten med den här koden:

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

För prisberäkning kommer vi att ange den här koden i stället för det statiska priset:

 __ ('Se pris före orderbekräftelse.'); ?>  hjälpar ('skatt') -> displayCartPriceExclTax () || $ this-> help (tax) -> displayCartBothPrices ()):?> hjälpar ('skatt') -> displayCartBothPrices ()):?> __ ("Excl. Tax"); ?>:  typOfDisplay ($ _ item, array (0, 1, 4), "försäljning")):?> hjälpare (kassan) -> formatPrice ($ _ Item-> getCalculationPrice () + $ _ Item-> getWeeeTaxAppliedAmount () + $ _ Item-> getWeeeTaxDisposition ()); ?>  hjälpar ('checkout') -> formatPris ($ _ item-> getCalculationPrice ())?>  getApplied ($ _ item)):?> 
 typOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatte [ 'beloppet'], true, true); ?>   typOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatte [ 'amount_incl_tax'], true, true); ?>
  typOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatte [ 'amount_incl_tax'], true, true); ?>
    typOfDisplay ($ _ item, 2, 'sales')):?> __('Total'); ?>:
 hjälpare (kassan) -> formatPrice ($ _ Item-> getCalculationPrice () + $ _ Item-> getWeeeTaxAppliedAmount () + $ _ Item-> getWeeeTaxDisposition ()); ?>    hjälpar ('skatt') -> displayCartPriceInclTax () || $ this-> help (tax) -> displayCartBothPrices ()):?> hjälpare (kassan) -> getPriceInclTax ($ _ post); ?> hjälpar ('skatt') -> displayCartBothPrices ()):?> 
__ ("Inkl. Moms"); ?>:  typOfDisplay ($ _ item, array (0, 1, 4), "försäljning")):?> hjälpar ('checkout') -> formatPris ($ _ incl + Mage :: hjälpen ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>  hjälpar ('checkout') -> formatPris ($ _ inkl - $ _ item-> getWeeeTaxDisposition ())>>  getApplied ($ _ item)):?> 
 typOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatte [ 'beloppet'], true, true); ?>
   typOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatte [ 'amount_incl_tax'], true, true); ?>  typOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatte [ 'amount_incl_tax'], true, true); ?>
    typOfDisplay ($ _ item, 2, 'sales')):?> __ ('Totalt inkl. Skatt'); ?>:
 hjälpar ('checkout') -> formatPris ($ _ incl + Mage :: hjälpen ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>

Och som sista steget ersätter vi href för att ta bort webbadressen med den här:

getAjaxDeleteUrl ()?>

Jag har hittat all denna kod från själva default.phtml. Du behöver inte räkna ut all logik och kod på egen hand, men om du tittar noga kan du hitta den i filen du försöker ändra.

Så, vår sista kod default.phtml filen ser så här ut:

getItem (); $ isVisibleProduct = $ _item-> getProduct () -> isVisibleInSiteVisibility (); $ canApplyMsrp = Mage :: hjälper ('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'])?>:        
  __ ( 'Antal:'); ?> getQty ()?> 
 
    __ ('Se pris före orderbekräftelse.'); ?>  hjälpar ('skatt') -> displayCartPriceExclTax () || $ this-> help (tax) -> displayCartBothPrices ()):?> hjälpar ('skatt') -> displayCartBothPrices ()):?> __ ("Excl. Tax"); ?>:  typOfDisplay ($ _ item, array (0, 1, 4), "försäljning")):?> hjälpare (kassan) -> formatPrice ($ _ Item-> getCalculationPrice () + $ _ Item-> getWeeeTaxAppliedAmount () + $ _ Item-> getWeeeTaxDisposition ()); ?>  hjälpar ('checkout') -> formatPris ($ _ item-> getCalculationPrice ())?>  getApplied ($ _ item)):?> 
 typOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatte [ 'beloppet'], true, true); ?>   typOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatte [ 'amount_incl_tax'], true, true); ?>
  typOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatte [ 'amount_incl_tax'], true, true); ?>
    typOfDisplay ($ _ item, 2, 'sales')):?> __('Total'); ?>:
 hjälpare (kassan) -> formatPrice ($ _ Item-> getCalculationPrice () + $ _ Item-> getWeeeTaxAppliedAmount () + $ _ Item-> getWeeeTaxDisposition ()); ?>    hjälpar ('skatt') -> displayCartPriceInclTax () || $ this-> help (tax) -> displayCartBothPrices ()):?> hjälpare (kassan) -> getPriceInclTax ($ _ post); ?> hjälpar ('skatt') -> displayCartBothPrices ()):?> 
__ ("Inkl. Moms"); ?>:  typOfDisplay ($ _ item, array (0, 1, 4), "försäljning")):?> hjälpar ('checkout') -> formatPris ($ _ incl + Mage :: hjälpen ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>  hjälpar ('checkout') -> formatPris ($ _ inkl - $ _ item-> getWeeeTaxDisposition ())>>  getApplied ($ _ item)):?> 
 typOfDisplay ($ _ item, 1, 'sales')):?>  getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatte [ 'beloppet'], true, true); ?>
   typOfDisplay ($ _ item, 2, 'sales')):?> getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatte [ 'amount_incl_tax'], true, true); ?>  typOfDisplay ($ _ item, 4, 'sales')):?>  getApplied ($ _ item) som $ skatt):?> : formatPrice ($ skatte [ 'amount_incl_tax'], true, true); ?>
    typOfDisplay ($ _ item, 2, 'sales')):?> __ ('Totalt inkl. Skatt'); ?>:
 hjälpar ('checkout') -> formatPris ($ _ incl + Mage :: hjälpen ('weee') -> getWeeeTaxInclTax ($ _ item)); ?>     
 getAjaxDeleteUrl ()?> ">

Nu om du sparar alla dessa filer och uppdaterar startsidan bör du se något så här:

Vi har några problem med stilar, men HTML-rendering ligger ganska nära vår nödvändiga HTML-design. Nu när vi har slutfört topprubrikavsnittet, är nästa logosektionen. Lyckligtvis finns det inget mycket att göra där förutom stylingdelen (för att göra logotypcentralen anpassad) som vi ska göra i stylingartikeln. Våra menyalternativ verkar också ganska nära vad vi förväntar oss, så vi behöver bara ändra sökfältet och sedan huvudreglaget.

För att ändra sökfältet, slår vi på malltipsen och ser vilken del som är ansvarig för att göra den här koden: frontend / RWD / default / mall / catalogsearch / form.mini.phtml.

För tillfället ser den här filen ut:

  __ ('Sök:')?>   
 
  
 Om vi tittar på HTML i sökfältet i vår HTML-designfil ser det ut så här:

Så vi använder de yttre delarna av HTML och ersätter det inre innehållet med det dynamiska innehållet. Vår nya form.mini.phtml filen kommer att se ut så här:

I den sista delen av den här artikeln kommer vi att redigera huvudreglaget. För det ska vi skapa ett nytt statiskt block genom att gå till CMS> Statiska block> Lägg till nytt block. Vi heter detta block "Hemsida Slider", och vi lägger in identifieraren som 'Hem-reglaget'-så kommer koden att kunna hitta det här blocket.

Nu ska vi ange sliderkoden från vår HTML.


 
    
 
   
  stråle av ljus
 Lorem Ipsum är helt enkelt dummy text av tryckeriet och typesetting industrin.
 Shoppa nu 
 
   stråle av ljus
 Lorem Ipsum är helt enkelt dummy text av tryckeriet och typesetting industrin.
 Shoppa nu

Observera att vi har ersatt bildkällan i förhållande till hudkatalogen med hjälp av skin_url tagg så här:

Nu lägger vi till dessa rader i den header.phtml-filen som vi skapade i den senaste artikeln, strax ovanför den sista raden getChildHtml ( 'topContainer'); ?>.

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

Det sista steget är att ta bort den aktuella reglaget. För att göra det, gå till CMS-sidor> Madison Island, och från Innehåll avsnittet, ta bort all kod upp till början av stilavsnittet.

Spara allt och ladda om hemsidan, och nu borde du se allting som följer mycket bra. Vissa stilar är avstängd, men vi kommer att ta itu med det i en separat styling handledning. För tillfället behöver vi bara ta hand om innehållsdelen på hemsidan, där vi visar en senaste karusell, och sedan anpassar vi sidfoten. Vi gör allt detta i nästa handledning, så håll dig uppdaterad!

Koda