Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Magento
Code

Magento téma rozvoj: Domovská stránka, část 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

Czech (Čeština) translation by Tereza Foretová (you can also view the original English article)

V předchozím kurzu v této sérii jsme začali, úprava sekce záhlaví z domovské stránky. V tomto kurzu začneme, kde jsme přestali sekce se zlepšením záhlaví a potom vytvoříme nový jezdec CMS bloku a ji volat z našich souborů šablon. Máme hodně pokrýt v tomto článku, začněme bez dalšího odkladu.

Jak jsme částečně pevné záhlaví nahoře, jediná věc, která potřebuje nápravu tam je sekce horní košík. Chcete-li upravit záhlaví vozík, nejprve zkusíme zjistit soubory šablon, které jsou zodpovědné za vykreslování části. Chcete-li analyzovat to, tak nejprve přidat některé produkty do košíku, tak, že abychom mohli plně prozkoumat.

Enabling Template Tags

Jak jsme povolit odkazy na šablony, můžeme vidět, že záhlaví vozík vnější kontejner přichází z tohoto souboru šablony: frontend/rwd/default/template/checkout/cart/minicart.phtml. A pak na tlačítko, rozšířenou část je vykreslen pomocí tohoto souboru: frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Konečně, každý košík položka je vykreslena prostřednictvím tohoto souboru: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

Importovat všechny tyto soubory do naší nově vytvořené téma a pak začít jejich úprav.

Začněme procesu modifikace s vnější minicart.phtml souboru. To je aktuální kód tohoto souboru:

Teď dříve, než začneme všechny změny v něm, zkontrolujte kód naší sekce záhlaví vozík v našem původním souboru HTML. Existuje kód vypadá takto:

Tak začneme úpravou souboru PHP kód aby se podobně jako naše HTML kódu. Používáme značku ukotvení bude jen zabalit ikonu košíku a poté vám ukážeme, minicart obsah. Proto náš kód bude vypadat takto:

Zde jsme nahradili vnější obal vrchní košík, ale nyní musíme upravit rozevírací část obálky. Jak jsme již viděli, že obálka přichází z frontend/rwd/default/template/checkout/cart/minicart/items.phtml. Pojďme zkontrolovat aktuální kód tohoto souboru:

Když porovnáváme jej na našich HTML šablonu, existuje několik věcí, které musíme udělat. Za prvé uvnitř div minicart obálky, můžeme vám začít provádět naši ul, a u každé položky jsme bude iterovat pod značku li. Na konci můžeme vám Zobrazit košík celkem nebo označuje, že neexistují žádné položky v košíku. Naše konečné kód pro tento soubor bude vypadat takto:

Nyní je závěrečná část, která je ponechána styl samotné položky seznamu košíku. Jak jsme již přišel, je zodpovědný za tuto část soubor: frontend/rwd/default/template/checkout/cart/minicart/default.phtml.

Aktuální kód tohoto souboru vypadá jako docela dlouhé a těžko pochopitelné, ale nenechte se zastrašit. Nepotřebujeme k úpravám, protože hlavní část souboru kódu je jen výpočet správnou cenu a dalších možnosti produktů. Opět dáme zkontrolovat náš kód HTML, je v tomto souboru a začít statický text nahraďte dynamické hodnoty. Toto je kód pro každou položku vozík v našem HTML:

Nahradíme img tag s tímhle:

Dále budeme nahradit název s dynamickým kódem:

Chcete-li zobrazit možnosti produktu, budeme používat tento dynamický kód:

Pak zjistit a zobrazit množství pomocí tohoto kódu:

Pro výpočet ceny zadáme tento kód namísto statické cena:

A jako poslední krok, nahradíme href pro odebrání adresy URL s tímhle:

Našel jsem tento kód ze skutečné default.phtml. Není nutné zjistit všechny logiku a kód sami, ale pokud se podíváte pozorně, najdete ji v souboru, který chcete upravit.

Takže konečný kód naší default.phtml souboru vypadá takto:

Teď je-li tyto soubory uložit a znovu načíst domovskou stránku, měli byste vidět něco takového:

Top Cart Fixed

Máme nějaké problémy s styly, ale vykreslování HTML je docela blízko naší požadované HTML návrhu. Teď, když jsme dokončili sekci záhlaví nahoře, další je logo sekce. Naštěstí není nic moc co tam s výjimkou části styling (aby zarovnání na střed loga), uděláme v článku styling. Naše položky nabídky také zdá se, že dost blízko na to co jsme očekávali, takže budeme muset upravit panel Hledat a pak hlavní jezdce.

Chcete-li změnit náš vyhledávací panel, pojďme zapnout odkazy na šablony a zjistit, která část je zodpovědný za vykreslování tento kód: frontend/rwd/default/template/catalogsearch/form.mini.phtml.

V současnosti tento soubor vypadá takto:

Tak můžeme použít vnější DIV HTML a nahradit vnitřní obsah s dynamickým obsahem. Náš nový form.mini.phtml soubor bude vypadat takto:

V poslední části tohoto článku budeme upravovat hlavní jezdce. Za to, že vytvoříme nový statický blok, tím, že půjdete do CMS video statické bloky video přidat nový blok. Bude se jmenovat tento blok "Homepage jezdec" a my vám vložit identifikátor jako "home jezdec" — to je, jak bude schopen najít tento blok kódu.

Creating Homepage Slider Static Block

Teď bude vstoupíme jezdce kód z našich HTML.

Všimněte si, že jsme nahradili zdroj bitové kopie v adresáři kůže pomocí skin_url značky jako je tento:

Teď budeme přidávat tyto řádky v souboru header.phtml, jsme vytvořili v posledním článku, přímo nad posledním řádku <? php echo $this-> getChildHtml('topContainer');? video.

Posledním krokem je odstranit současné jezdce. Chcete-li to, jít na stránky, CMS video Madison ostrov a z obsahu sekce, odeberte veškerý kód až do zahájení části styl.

Removing previous Home Slider

Vše uložit a znovu načíst domovskou stránku a nyní měli vidět to všem daří velmi dobře. Některé styly jsou vypnuté, ale poradíme si s tím v kurzu odlišným vzhledem. Prozatím se jen musíme postarat o části obsah domovské stránky, kde vám ukážeme nejnovější produkty kolotoč, a pak můžeme upravit zápatí. Uděláme to vše v dalším kurzu, takže stay tuned pro 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.