Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Code
  2. Magento
Code

Magento tému rozvoja: domovskú stránku, časť 2

by
Length:LongLanguages:
This post is part of a series called Magento Theme Development.
Magento Theme Development: Home Page, Part 1
Magento Theme Development: Home Page, Part 3

Slovak (Slovenčina) translation by Tereza Foretová (you can also view the original English article)

V predchádzajúcich tutoriál v tejto sérii, sme začali, úprava časti hlavičke domovskú stránku. V tomto tutoriále, začneme, kde sme prestali so zlepšením časti hlavičke, a potom vytvoríme nový jazdec CMS blokovať a volanie z nášho súbory šablón. Ako máme veľa na pokrytie v tomto článku, začnime bez ďalšieho odkladu.

Ako máme čiastočne pevnú hornej časti stránky, jediné, ktoré potrebuje stanovením tam je sekcia horný košík. Ak chcete prispôsobiť hlavičky košík, najprv pokúsime zistiť šablóny súborov, ktoré sú zodpovedné za vykresľovanie časť. Analyzovať to, poďme najprv pridať niektoré produkty do košíka, tak, aby sme ho mohli plne prešetriť.

Enabling Template Tags

Ako sme umožnili šablóny tipy, môžeme vidieť, že hlavička košíka vonkajšou nádobou pochádza tento súbor šablóny: frontend/rwd/default/template/checkout/cart/minicart.phtml. A potom na tlačidlo, rozšírená časť vykresľuje cez tento súbor: frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Napokon, každá položka košík vykresľuje cez tento súbor: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

Importovať všetky tieto súbory do našej novo vytvorené tému a potom začať modifikuje.

Začnime súbore najvzdialenejších minicart.phtml zmene procesu. Toto je aktuálny kód tohto súboru:

Teraz skôr, ako začneme akékoľvek zmeny v tom, Poďme skontrolovať kód sekcii Hlavička košíka v našej pôvodný súbor HTML. Kód tam vyzerá takto:

Takže začneme úpravou kód PHP súbor aby bolo podobné ako HTML kód. Budeme len používať značku kotvou wrap ikonu košíka a potom ukážeme minicart obsahu. Preto náš kód bude vyzerať takto:

Tu sme nahradili najvzdialenejších wrapper horný košík, ale teraz musíme upraviť drop-dole časti obalu. Ako sme už videli, že obal je z frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Poďme skontrolovať aktuálny kód tohto súboru:

Keď to porovnáme naše šablóny HTML, existuje pár vecí, ktoré musíme urobiť. Po prvé, vnútri minicart-wrapper div, začneme realizáciu našich ul a pre každú položku My budem opakovať podľa li značku. Na konci, ukážeme košíka celkové, alebo naznačujú, že neexistujú žiadne položky v košíku. Náš konečný kód pre tento súbor bude vyzerať takto:

Teraz v záverečnej časti, ktorá je ponechaná je štýl položky zoznamu košík, sám. Ako sme už vymyslel, je zodpovedná za tú časť súboru: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

Aktuálny kód tohto súboru vyzerá pomerne dlhé a ťažké pochopiť, ale nenechajte sa zastrašiť. Nebudeme musieť upraviť toto všetko, pretože Hlavná časť súboru kód len počíta za správnu cenu a ďalšie možnosti produktu. Opäť budeme kontrolovať náš HTML kód, ju v tomto súbore, a začne nahradzovať statický text s dynamické hodnoty. To je kód pre každú položku košík v našich HTML:

My budem nahradiť img tag:

Názov budem nahradiť ďalej dynamický kód:

Zobrazte možnosti produktov, použijeme tento dynamický kód:

Potom budeme zistiť a zobraziť množstvo pomocou tohto kódu:

Pre cenová kalkulácia, my uvidíme zadajte tento kód namiesto statickej cena:

A ako posledný krok vám vymeníme href odstrániť URL s tymto:

Našiel som tento kód od skutočného default.phtml. Nemusíte zistiť logiku a kód na vlastnú päsť, ale ak sa pozriete pozorne môžete nájsť v súbore, ktorý sa pokúšate upraviť.

Takže, hotového kódu náš default.phtml súbor vyzerá takto:

Teraz, ak všetky tieto súbory uložiť a načítať domovskú stránku, mali by ste vidieť niečo takéto:

Top Cart Fixed

Máme nejaké problémy so štýlmi, ale HTML rendering je dosť blízko našich konštrukčných HTML. Teraz, keď sme dokončili top hlavičky, ďalšie je v časti logo. Našťastie nie je nič moc robiť tam, okrem časti styling (aby logo centrovaný) ktoré budeme robiť v článku styling. Naše menu položky tiež zrejme dosť blízko na to, čo očakávame, takže sme jednoducho potrebné zmeniť vyhľadávací panel a hlavné jazdca.

Upraviť náš vyhľadávací panel, poďme zapnúť šablóny tipy, a vidieť, ktorá časť je zodpovedné za vykresľovanie tento kód: frontend/rwd/default/template/catalogsearch/form.mini.phtml.

V súčasnosti tento súbor vyzerá takto:

Takže, budeme používať vonkajšie divs HTML, a nahradiť vnútorný obsah s dynamickým obsahom. Náš nový súbor form.mini.phtml bude vyzerať takto:

V poslednej časti tohto článku, sme upraviť hlavný jazdca. Za to, že vytvoríme nový statický blok, prechodom na CMS > statické bloky > pridajte nový blok. My budem názov tohto bloku "Domovskú stránku jazdec" a budete vložíme identifikátor ako "home-jazdec"-to je, ako budú môcť nájsť tento blok kódu.

Creating Homepage Slider Static Block

Teraz my uvidíme zadajte kód jazdec z nášho HTML.

Všimnite si, že sme nahradili zdrojového obrazu k adresßru pokožky pomocou skin_url tag takhle:

Teraz budeme pridávať tieto riadky v súbore header.phtml sme vytvorili v poslednom článku, tesne nad poslednom riadku <? php echo $this-> getChildHtml('topContainer');? >.

Posledný krok je odstrániť súčasné jazdca. To urobiť, prejdite na CMS-stránky > Madison Island, a z časti obsahu, odstráňte celý kód až do začiatku časti štýl.

Removing previous Home Slider

Uložiť všetko a reload na domovskej stránke, a teraz ste mali vidieť všetky prichádza spolu veľmi dobre. Niektoré štýly sú vypnuté, ale budeme zaoberať ktoré v samostatných styling tutorial. Teraz musíme sa postarať o sekcii obsah domovskej stránky, kde vám ukážeme najnovšie produkty kolotoč a potom prispôsobíme päty. Budeme robiť to v budúcom tutoriále, takže zostaňte naladení na to!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.