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

V období dovolených často nezbývá čas na velké vedlejší projekty, protože rodina má přednost. Malá, cílená zlepšení však mohou být stále přínosná. Jednou z takových příležitostí je vytvoření vlastního rozšíření elektronického obchodu pro TYPO3: HD Shop.

Přestože systém TYPO3 již nabízí robustní řešení pro elektronické obchodování, vytvoření vlastního rozšíření je fantastický způsob, jak se naučit a přizpůsobit funkčnost konkrétním potřebám. Zde se dozvíte, jak začít s vývojem rozšiřitelného rozšíření elektronického obchodu vhodného pro různé varianty.

Plán

Než se pustíte do tvorby kódu, je nutné definovat cíle projektu. Naše rozšíření HD Shop by mělo:

• být snadno rozšiřitelný pro budoucí úpravy.
• Podporovat více variant produktů.
• Začít v malém měřítku a růst v komplexnosti.

Krok 1: Nastavení základu rozšíření

Naše rozšíření pojmenujeme HD Shop, takže název složky bude hd_shop. Při použití instalace TYPO3 založené na nástroji Composer umístěte své vlastní rozšíření do adresáře, např. do adresáře Packages, v kořenovém adresáři projektu.

Protože se jedná o vlastní rozšíření, které není k dispozici v úložišti Packagist nebo TYPO3 Extension Repository (TER), musíte o místním úložišti informovat program Composer. Do kořenového souboru composer.json přidejte následující nastavení:

"repositories": [
  {
     "type": "path",
     "url": "./Packages/*/"
  }
],

Vytváření základních souborů

composer.json: Tento soubor umožňuje instalaci rozšíření.

{
 "name": "hyperdigital/hd_shop",
 "type": "typo3-cms-extension",
 "description": "E-commerce extension for TYPO3",
 "license": "GPL-2.0-or-later",
 "require": {
   "typo3/cms-core": "^13.0"
 },
 "autoload": {
   "psr-4": {
     "Hyperdigital\\HdShop\\": "Classes/"
   }
 },
 "extra": {
   "typo3/cms": {
     "extension-key": "hd_shop"
   }
 }
}

ext_emconf.php: TYPO3 ho používá pro konfiguraci rozšíření.

<?php
$EM_CONF[$_EXTKEY] = [
   'title' => 'HD Shop',
   'description' => 'E-commerce extension for TYPO3',
   'category' => 'plugin',
   'author' => 'Martin Pribyl',
   'author_email' => 'developer@hyperdigital.de',
   'author_company' => 'Hyperdigital',
   'state' => 'alpha',
   'version' => '0.0.1',
   'constraints' => [
       'depends' => [
           'typo3' => '13.0.0-13.4.99',
       ],
   ],
];

Po instalaci těchto souborů nainstalujte rozšíření spuštěním:

composer req hyperdigital/hd_shop @dev

Ověřte instalaci v backendu TYPO3 v modulu Rozšíření.

Krok 2: Konfigurace backendu pro produkty

TYPO3 používá pole konfigurace tabulek (Table Configuration Arrays, TCA) k definování backendových formulářů pro databázové tabulky. Začněte vytvořením souboru pro tabulku produktu:
Configuration/TCA/tx_hdshop_domain_model_product.php

Zde je zjednodušený příklad TCA pro produkty:

<?php
return [
   'ctrl' => [
       'title' => 'Product',
       'label' => 'title',
       'tstamp' => 'tstamp',
       'delete' => 'deleted',
       'enablecolumns' => [
           'disabled' => 'hidden',
           'starttime' => 'starttime',
           'endtime' => 'endtime',
       ],
       'searchFields' => 'title,slug',
   ],
   'columns' => [
       'title' => [
           'label' => 'Title',
           'config' => [
               'type' => 'input',
               'size' => 50,
               'eval' => 'trim,required',
           ],
       ],
       'slug' => [
           'label' => 'Slug',
           'config' => [
               'type' => 'slug',
               'generatorOptions' => [
                   'fields' => ['title'],
               ],
               'eval' => 'uniqueInSite',
           ],
       ],
   ],
];

Po přidání TCA vymažte cache, aktualizujte schéma databáze a zkuste vytvořit záznam o produktu v backendu.

Krok 3: Nastavení frontendu

Registrace pluginu

Přidání nového pluginu do ext_localconf.php:

\TYPO3\CMS\Extbase\Utility\ExtensionUtility::configurePlugin(
   'HdShop',
   'Product',
   [
       \Hyperdigital\HdShop\Controller\ProductController::class => 'list, detail'
   ]
);

Definice plugin jako obsahový prvek skrze Configuration/TCA/Overrides/tt_content.php:

(static function (): void {
   \TYPO3\CMS\Extbase\Utility\ExtensionUtility::registerPlugin(
       'HdShop',
       'Product',
       'HD Shop: Product listing and detail'
   );
})();

Přidání Controlleru

Vytvořte Classes/Controller/ProductController.php pro základní logiku pluginu:

<?php
namespace Hyperdigital\HdShop\Controller;

class ProductController extends \TYPO3\CMS\Extbase\Mvc\Controller\ActionController
{
   public function listAction()
   {
       return $this->htmlResponse();
   }
}

Fluid Templaty

Přidejte soubory pro budoucí šablony Resources/Private/Templates/Product/:

• List.html pro seznam produktů.
• Detail.html pro detail konkrétního produktu.

Na závěr spusťte:

composer dumpautoload
vendor/bin/typo3 cache:flush

Co bude dál?

V příštím díle se budeme věnovat načítání produktů z databáze a zobrazování podrobností ve frontendu. Zůstaňte naladěni!