Tvorba HD Shopu: Nastavení produktů a zobrazení detailů

2. 2. 2025

TYPO3, HD Shop

Příprava modelu produktu a repository

V předchozím kroku jsme nastavili základní strukturu rozšíření a integrovali tabulku produktů. Nyní se blíže podíváme na manipulaci s produkty ve frontendu.

Abychom mohli načíst všechny dostupné produkty, musíme připravit dvě základní součásti:

Product Model: Reprezentuje data produktu jako objekt.
Product Repository: Spravuje databázové operace pro produkty.

Definice Product Modelu

Model produktu slouží jako předloha pro objekty produktu. Získává data z databáze a vytváří strukturované objekty. Tento model je definován v:

Classes/Domain/Model/Product.php

<?php
namespace Hyperdigital\HdShop\Domain\Model;
class Product extends \TYPO3\CMS\Extbase\DomainObject\AbstractEntity
{
    /**
     * @var string
     */
    protected $title = '';

    /**
     * @return string
     */
    public function getTitle()
    {
        return $this->title;
    }

    /**
     * @param string $title
     */
    public function setTitle($title)
    {
        $this->title = $title;
    }
}

Vytváříme Product Repository

Úložiště je zodpovědné za načítání produktů z databáze. Na začátku definujeme základní úložiště v:

Classes/Domain/Repository/ProductRepository.php

<?php
namespace Hyperdigital\HdShop\Domain\Repository;

class ProductRepository extends \TYPO3\CMS\Extbase\Persistence\Repository
{

}

Rozšiřujeme Product Controller

Nyní rozšíříme náš ProductController tak, aby načítal a zobrazoval produkty ve frontendu.

Napojíme Repository

Pro přístup k úložišti ProductRepository přidáme konstruktor s funkcí dependency injection:

public function __construct(
    protected readonly \Hyperdigital\HdShop\Domain\Repository\ProductRepository $productRepository
){}

To umožní proměnné $this->productRepository přístup k repositáři.

Implementujeme akci List

Získáváme všechny produkty a předáváme je do zobrazení - rozuměj do templatu:

$products = $this->productRepository->findAll();
$this->view->assign('products', $products);

Ladíme výstup

Pro ověření dat přidáme debuggovací příkaz:

Resources/Private/Templates/Product/List.html

<f:debug>{_all}</f:debug>

Ujistěte se, že v nastavení plugin jste nastavili správnou složku pro Storage Page. Jedná se o složku, kde máte uloženy v backendu produkty.

Řešená problému s Debuggerem

Pokud narazíte na error jako cannot access protected property $_localizeduid, zkontrolujte své globální nastavení:

config/system/settings.php

Ujistěte se, že konfigurace ['SYS']['fluid']['namespace']['f'] upřednostňuje TYPO3\CMS\Fluid\ViewHelpers před TYPO3Fluid\Fluid\ViewHelpers. Pokud je potřeba, upravte jejich pořadí.

Vytvoření šablony seznamu produktů

Nyní upřesníme šablonu výpisu produktů.

Hlavní šablona seznamu produktů

Resources/Private/Templates/Product/List.html

<html data-namespace-typo3-fluid="true">
    <f:render section="Main" partial="List/List1" arguments="{products: products}" />
</html>

Tím se vyvolá Partial umístěný na adrese:

Resources/Private/Partials/List/List1.html

Partial pro seznamu produktů

<html data-namespace-typo3-fluid="true" xmlns:f="http://www.w3.org/1999/html">
    <f:section name="Main">
        <f:if condition="{products}">
            <div>
                <f:for each="{products}" as="product">
                    <f:render section="product" arguments="{product: product}" />
                </f:for>
            </div>
        </f:if>
    </f:section>

    <f:section name="product">
        <div>
            {product.title}
        </div>
    </f:section>
</html>

Tato šablona:

Zkontroluje, zda existují produkty.
Prochází seznam.
Každý produkt vykreslí v samostatné sekci “product”.

V tomto okamžiku by se měl na úvodní straně zobrazit seznam názvů produktů.

Implementace zobrazení detailu produktu

Dále vytvoříme zobrazení detailů, které zobrazuje informace o jednotlivých produktech.

Definujeme akci Detail

Z existujícího souboru ext_localconf.php máme nadefinováno, že se akce bude jmenovat detail a ta mapuje v controlleru:

public function detailAction(\Hyperdigital\HdShop\Domain\Model\Product $product)
{
   $this->view->assign('product', $product);
   return $this->htmlResponse();
}

Tato akce přiřadí vybraný produkt z parametru k zobrazení.

Abychom si ověřili data, přidáme debugger do zobrazení detailu:

Resources/Private/Templates/Product/Detail.html

<f:debug>{_all}</f:debug>

Nalinkování produktů do jejich detailů

Upravíme partial pro zobrazení produktu. V sekci product přidáme link.action viewhelper, což je základní linkovací funkce pro napojení akcí:

<f:section name="product">
    <div>
        <f:link.action action="detail" arguments="{product: product}">{product.title}</f:link.action>
    </div>
</f:section>

Tím se vygenerují klikací názvy produktů, které odkazují na příslušné stránky s podrobnostmi.

Testování detailu

Po kliknutí na název produktu by se mělo zobrazit podrobné zobrazení s výstupem debuggeru.

Další kroky

V dalším kroku rozšíříme zobrazení detailů o obrázky produktů, ceny a další atributy.

Předchozí

Tvorba HD Shopu: Vlastní rozšíření elektronického obchodu pro TYPO3

Následující

Tvorba HD Shopu: Integrace mediálních souborů