15 paź 2016

Tworzenie nowego bloku w Magento 2

Anna Magento 2 bloki, magento, magento 2, tworzenie bloków 3

Dzisiaj pokażę jak utworzyć i dodać blok w Magento 2. Dla przykładu utworzymy blok wypisujący tekst na stronie głównej. W poprzednim wpisie pokazano jak utworzyć czysty moduł, który teraz uzupełnimy.

Spis treści

Klasa bloku

Tak jak w Magento 1, klasy bloków tworzymy w folderze Block. Stwórzmy na początek więc klasę Hello o następującej zawartości:

<?php

declare(strict_types=1);

namespace Anna\FirstModule\Block;

use Magento\Framework\Phrase;
use Magento\Framework\View\Element\Template;

class Hello extends Template
{
    /**
     * @param Template\Context $context
     * @param array $data
     */
    public function __construct(
        Template\Context $context,
        array $data = []
    ) {
        parent::__construct($context, $data);
    }

    /**
     * Say "Hello World"
     *
     * @return Phrase
     */
    public function sayHelloWorld(): Phrase
    {
        return __('Hello world!');
    }
}

<?php

declare(strict_types=1);

namespace Anna\FirstModule\Block;

use Magento\Framework\Phrase;

use Magento\Framework\View\Element\Template;

class Hello extends Template

{

/**

* @param Template\Context $context

* @param array $data

public function __construct(

Template\Context $context,

array $data = []

) {

parent::__construct($context, $data);

}

/**

* Say "Hello World"

* @return Phrase

public function sayHelloWorld(): Phrase

{

return __('Hello world!');

}

Mamy tutaj naszą metodę sayHello(). Tekst jest wewnątrz wywołania funkcji __(), która zwraca obiekt o klasie Magento\Framework\Phrase. Daje nam to możliwość stworzenia tłumaczenia dla tekstu.

Na samym początku dodałam również konstruktor, w którym można dodać inne zależności, które Magento 2 w razie potrzeby nam zainicjalizuje. Jak przyjrzymy się klasie Magento\Framework\View\Element\Template\Context obiektu $context, to w swoim konstruktorze przyjmuje trochę tych parametrów, dzięki czemu możemy odwołać się do metod na przykład klasy Magento\Framework\Filesystem. Aby odwołać się do wspomnianej klasy, wystarczy, że w konstruktorze wykorzystamy kod:

$context->getFilesystem()

1	$context->getFilesystem()

Teraz utwórzmy foldery, które będą nam potrzebne. Na początek stwórz nowe katalogi w folderze modułu:

Anna\FirstModule\view 
Anna\FirstModule\view\frontend 
Anna\FirstModule\view\frontend\layout 
Anna\FirstModule\view\frontend\templates

Anna\FirstModule\view

Anna\FirstModule\view\frontend

Anna\FirstModule\view\frontend\layout

Anna\FirstModule\view\frontend\templates

W folderze layout znajdują się pliki xml, dla których definiujemy, między innymi, jakie bloki dla poszczególnych akcji będziemy ładować.

Definicja templaty

W folderze templates lądują pliki .phtml.

Stwórzmy więc potrzebny nam plik .phtml. Zdefinujmy go w Anna\FirstModule\view\frontend\templates\cms\index\hello.phtml

<?php
/**
 * @var \Anna\FirstModule\Block\Hello $block
 * @var \Magento\Framework\Escaper $escaper
 */
?>

<div class="hello-world">
    <h2>
        <?php echo $escaper->escapeHtml($block->sayHelloWorld()); ?>
    </h2>
</div>

<?php

/**

* @var \Anna\FirstModule\Block\Hello $block

* @var \Magento\Framework\Escaper $escaper

<h2>

<?php echo $escaper->escapeHtml($block->sayHelloWorld()); ?>

</h2>

</div>

W Magento 1 do metod bloku odwoływaliśmy się za pomocą zmiennej $this, w Magento 2 używamy zmiennej $block. Zmienna $this to obiekt klasy Magento\Framework\View\TemplateEngine\Php.

Gdzie podpiąć blok?

Teraz potrzeba znaleźć miejsce, gdzie podpiąć nasz blok. Pokażę, do jakiego zajrzeć modułu i w jakie pliki konfiguracyjne zaglądnąć. Możliwe jest tutaj też użycie dedykowanego narzędzia, które oferuje Magento, a mianowicie Template path hints.

Layout strony głównej

Moduł, który definiuje akcję wyświetlania strony głównej to Magento_Cms i zadanie to wykonywane jest domyślnie przez akację index kontrolera Index. Przyjrzyjmy się, jak wygląda definicja interesującego nas bloku. Zaglądnijmy do katalogu tego modułu: \vendor\magento\module-cms.

Jak wiemy z Magento 1, url danej akcji ma wzór: frontName/controllerName/actonName. Przy czym, jeśli nie podamy jednego lub dwóch ostatnich parametrów, domyślnie, zarówno dla controllerName i actionName będzie wartość index. Aby odczytać frontName, zaglądamy do pliku routes.xml z katalogu /etc/frontend/.

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:App/etc/routes.xsd">
    <router id="standard">
        <route id="cms" frontName="cms">
            <module name="Magento_Cms" />
        </route>
    </router>
</config>

<?xml version="1.0"?>

<!--

/**

* See COPYING.txt for license details.

-->

</route>

</router>

</config>

Szukany frontName to cms. Akcja wyświetlająca stronę główną ma postać: cms/index/index. Teraz w tym samym katalogu, możemy zauważyć plik page_types.xml. W nim mamy definicję poszczególnych stron:

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page_types xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_types.xsd">
    <type id="cms_index_defaultindex" label="CMS Home Default Page"/>
    <type id="cms_index_defaultnoroute" label="CMS No-Route Default Page"/>
    <type id="cms_index_index" label="CMS Home Page"/>
    <type id="cms_index_nocookies" label="CMS No-Cookies Page"/>
    <type id="cms_index_noroute" label="CMS No-Route Page"/>
    <type id="cms_page_view" label="CMS Pages (All)"/>
</page_types>

<?xml version="1.0"?>

<!--

/**

* See COPYING.txt for license details.

-->

<page_types xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_types.xsd">

</page_types>

Wyróżniona przez nas linijka, to nazwa pliku xml, którego potrzebujemy.

W katalogu view\layout\frontend\layout tego modułu znajduje się plik cms_index_index.xml. Tutaj w zasadzie nie ma nic zdefiniowane w elemencie <body>. Za to przykład, jak się do tego podpiąć znajdziemy w pliku cms_index_defaultindex.xml:

<?xml version="1.0"?>
<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Magento\Framework\View\Element\Template" name="default_home_page" template="Magento_Cms::default/home.phtml"/>
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<!--

/**

* See COPYING.txt for license details.

-->

<body>

</referenceContainer>

</body>

</page>

Aby odnieść się do danego kontenera, tutaj do głównej zawartość na stronie głównej, używa się elementu <referenceContainer> (jeśli będzie nas interesowało podpięcie się do bloku, potrzebujemy skorzystać z <referenceBlock>). Odnosi się on do definicji kontenera, która znajduje się w pliku default.xml, w katalogu: \vendor\magento\module-theme\view\frontend\layout. Poniżej fragment tego pliku:

<!-- (...) -->
 <referenceContainer name="main">
            <container name="content.top" label="Main Content Top">
                <block name="main_css_preloader" as="main_css_preloader" template="Magento_Theme::html/main_css_preloader.phtml" ifconfig="dev/css/use_css_critical_path"/>
            </container>
            <container name="content" label="Main Content Area"/>
            <container name="content.aside" label="Main Content Aside"/>
            <container name="content.bottom" label="Main Content Bottom"/>
        </referenceContainer>
<!-- (...) -->

</container>

</referenceContainer>

Za pomocą elementu <referenceContainer> podpinamy się do istniejącego kontenera strony. Wewnątrz niego możemy stworzyć kolejny kontener bądź też — co jest naszym celem — dodać blok. Definicja danego bloku znajduje się, oczywiście, w elemencie <block>, gdzie możemy zdefiniować następujące atrybuty:

class (opcjonalny) — ścieżka do klasy bloku. Domyślna klasa to: Magento\Framework\View\Element\Template.
name (opcjonalny) — nazwa dla bloku (musi być unikalna). Jeśli nie podamy nazwy, blok podczas generowania otrzyma losową nazwę.
template (opcjonalny) — ścieżka do naszego pliku .phtml według wzoru. Atrybut opcjonalny, w przypadku gdy klasa bloku lub jego rodzic mają ustawioną template w zmiennej klasowej $_template. Format jest następujący:
NazwaProducenta_NazwaModulu::sciezka/do/templaty.

Konfiguracja pliku layoutu

W swoim module, w katalogu view\frontend\layout, utwórz plik xml o nazwie cms_index_index.xml.

Wróćmy do modułu module-cms. Skopiuj zawartość pliku cms_index_defaultindex.xml. Teraz podstawmy w konfiguracji nasz blok i plik .phtml:

<?xml version="1.0"?>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" layout="1column" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            <block class="Anna\FirstModule\Block\Hello" name="first_module_hello" template="Anna_FirstModule::cms/index/hello.phtml"/>
        </referenceContainer>
    </body>
</page>

<?xml version="1.0"?>

<body>

</referenceContainer>

</body>

</page>

Dla atrybutu class nasza klasa: Anna\FirstModule\Block\Hello. Atrybutowi name nadaliśmy wartość: first_module_hello. Dla atrybutu template wartość Anna_FirstModule::cms/index/hello.phtml oznacza, że plik templatki znajduję się w katalogu:
code\Anna\FirstModule\view\frontend\templates\cms\index\hello.phtml.

3 komentarze

Kontroler i menu w adminie w Magento 2 - Web Porgramming
6 sierpnia 2018 @ 13:30

[…] w katalogu AnnaAdminControllerBlock (tworzenie bloków zostało omówione w tym wpisie) oraz w katalogu AnnaAdminControllerviewadminhtmltemplatesfirstcontroller plik […]

View model w Magento 2 - Web Porgramming
14 października 2020 @ 00:14

[…] Magento 1 mieliśmy tylko bloki, tak od Magento 2 mamy dodatkowo view model (od wersji 2.2). W notce o blokach opisano proces tworzenia, jego definicję w pliku xml layoutu oraz wykorzystanie z templatami […]

Magento 2: dodanie własnej zakładki na stronie produktu - Web Programming
14 grudnia 2023 @ 00:36

[…] Standardowo tworzymy klasę bloku, templatę do niej i dołączamy ją do layoutu. Jak stworzyć przykładowy blok znajdziesz w notce: Tworzenie nowego bloku w Magento 2. […]

Tworzenie nowego bloku w Magento 2

Klasa bloku

Definicja templaty

Gdzie podpiąć blok?

Layout strony głównej

Konfiguracja pliku layoutu

Related Posts

Magento 2: Object Manager

Pluginy w Magento 2

Magento 2: dynamiczna inicjalizacja komponentu UI

3 komentarze

Leave a Reply Close