Building HD Shop: A Custom TYPO3 E-Commerce Extension

The holiday season often leaves limited time for big side projects when family takes priority. However, small, focused improvements can still be rewarding. One such opportunity is creating a custom e-commerce extension for TYPO3: HD Shop.

While TYPO3 already offers robust e-commerce solutions, building a custom extension is a fantastic way to learn and tailor functionality to specific needs. Here's how to start developing an extendable, variant-friendly e-commerce extension.

The Plan

Before diving into code, it's essential to define the project goals. Our extension, HD Shop, should:

1. Be easily extendable for future customizations.
2. Support multiple product variants.
3. Start small and grow in complexity.

Step 1: Setting Up the Extension Base

We'll name our extension HD Shop, so the folder name will be hd_shop. Using a Composer-based TYPO3 installation, place your custom extension in a directory, e.g., Packages, under your project root.

Since this is a custom extension not available on Packagist or TYPO3 Extension Repository (TER), you must inform Composer about the local repository. Add the following to your root composer.json:

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

Creating Essential Files

composer.json: This file makes the extension installable.

{
 "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 uses this for extension configuration.

<?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',
       ],
   ],
];

With these files in place, install the extension by running:

composer req hyperdigital/hd_shop @dev

Verify the installation in the TYPO3 backend under the Extensions module.

Step 2: Backend Configuration for Products

TYPO3 uses Table Configuration Arrays (TCA) to define backend forms for database tables. Start by creating a file for your product table:
Configuration/TCA/tx_hdshop_domain_model_product.php

Here’s a simplified TCA example for products:

<?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',
           ],
       ],
   ],
];

After adding the TCA, clear the TYPO3 cache, update the database schema, and try creating a product record in the backend.

Step 3: Setting Up Frontend Listing and Details

Registering the Plugin

Add a new plugin in ext_localconf.php to display product listings and details.

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

Define the plugin in Configuration/TCA/Overrides/tt_content.php:

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

Adding a Controller

Create Classes/Controller/ProductController.php for the plugin logic:

<?php
namespace Hyperdigital\HdShop\Controller;

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

Fluid Templates

Set up templates in Resources/Private/Templates/Product/:

• List.html for the product list.
• Detail.html for individual product details.

Finally, run:

composer dumpautoload
vendor/bin/typo3 cache:flush

What’s Next?

In the next installment, we’ll dive into fetching products from the database and displaying details in the frontend. Stay tuned!