Jak stworzyć własny layout w Magento?

Jak stworzyć własny layout w Magento? 4.45/5 / 29

Ten wpis jest przeznaczony zarówno dla programistów Magento jak i twórców szablonów w tym systemie. “Szabloniarzom” Magento przyda się, gdyż wiedza tu zawarta wystarczy do stworzenia własnej “paczki” (modyfikacja plików .phtml i .css). Dla programistów jest to absolutny początek w przygodzie z Magento.

Zaczynamy od stworzenia nowego katalogu dla naszego szablonu:

app/design/frontend/magentos/default/template/

Tutaj znajdą się wszystkie nasze nowe pliki .phtml

Drugim krokiem jest skopiowanie plików z katalogu

skin/frontend/default/default/

do

skin/frontend/magentos/default/

Trzeci krok to powiadomienie Magento, że ma używać naszego szablonu… Jedziemy do admina…

System->Configuration->Design

Tutaj ustawiamy w polu “Current Package Name” naszą nazwę (magentos).

magento_layout

Jak na razie efekt naszej pracy jest niewidoczny. Co dalej?

Magento w swojej koncepcji jest napisane tak, żeby nie nadpisywać “corowych” plików. Jeśli wiesz jak działa ten system to wystarczy dodanie kilku plików, aby osiągnąć swój cel i nie być narażonym na ciągłe poprawki związane z aktualizacją. Tak też jest w przypadku szablonów.

Minimum już zrobiliśmy.

Powiedzmy, że chcesz dodać coś do pliku nagłówka strony:

app/design/frontend/base/default/template/page/html/header.phtml

zamiast edytować ten plik tworzymy nowy, we własnym katalogu:

app/design/frontend/magentos/default/template/page/html/header.phtml

i wrzucamy nasze modyfikacje:

<div class="header-container">
    <div>
    	<a href="http://magentos.pl"><img src="http://magentos.pl/wp-content/uploads/2013/11/cropped-logo.gif"></a>
    </div>
    <div class="header">
        <?php if ($this->getIsHomePage()):?>
        <h1 class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a></h1>
        <?php else:?>
        <a href="<?php echo $this->getUrl('') ?>" title="<?php echo $this->getLogoAlt() ?>" class="logo"><strong><?php echo $this->getLogoAlt() ?></strong><img src="<?php echo $this->getLogoSrc() ?>" alt="<?php echo $this->getLogoAlt() ?>" /></a>
        <?php endif?>
        <div class="quick-access">
            <?php echo $this->getChildHtml('topSearch') ?>
            <p class="welcome-msg"><?php echo $this->getChildHtml('welcome') ?> <?php echo $this->getAdditionalHtml() ?></p>
            <?php echo $this->getChildHtml('topLinks') ?>
            <?php echo $this->getChildHtml('store_language') ?>
        </div>
        <?php echo $this->getChildHtml('topContainer'); ?>
    </div>
</div>
<?php echo $this->getChildHtml('topMenu') ?>

Efekt naszej pracy powinien wyglądać mniej więcej tak:

jak_stworzyc_layout_w_magento

https://github.com/magentos-pl/nauka.git