Разработка кастомной темы PrestaShop

Разработка кастомной темы PrestaShop

PrestaShop 8.x использует Smarty 3 как шаблонизатор для front-office. Дефолтная тема — classic (PrestaShop 1.7+). Разработка кастомной темы начинается с форка classic или с нуля с соблюдением структуры директорий и контрактов хуков, которые ожидают сторонние модули.

Структура темы

themes/mytheme/
├── config/
│   └── theme.yml           # Манифест темы
├── assets/
│   ├── css/
│   ├── js/
│   └── img/
├── templates/
│   ├── _partials/          # Переиспользуемые части
│   ├── catalog/            # Страницы каталога
│   ├── checkout/           # Корзина и оформление
│   ├── customer/           # Личный кабинет
│   ├── cms/                # CMS-страницы
│   └── layouts/            # Layouts: layout-full-width, layout-left-column...
├── modules/                # Переопределения шаблонов модулей
│   └── ps_shoppingcart/
│       └── ps_shoppingcart.tpl
└── preview.png

Манифест theme.yml:

name: mytheme
display_name: "My Custom Theme"
version: "1.0.0"
author:
  name: "Your Company"
  email: "[email protected]"
meta:
  compatibility:
    from: "8.0.0"
    to: ~
assets:
  css:
    all:
      - id: theme-main
        path: assets/css/theme.css
        media: all
  js:
    all:
      - id: theme-main
        path: assets/js/theme.js
        priority: 200
        position: bottom
global_settings:
  image_types:
    cart_default:
      width: 125
      height: 125
    small_default:
      width: 98
      height: 98
    medium_default:
      width: 452
      height: 452
    large_default:
      width: 800
      height: 800
    home_default:
      width: 250
      height: 250
    thickbox_default:
      width: 1024
      height: 1024

Smarty-шаблоны и переменные контекста

PrestaShop автоматически передаёт в шаблоны набор переменных из контроллера. Для страницы продукта доступны:

{* templates/catalog/product.tpl *}
{extends file='layouts/layout-full-width.tpl'}

{block name='content'}
<section class="product-detail" itemscope itemtype="https://schema.org/Product">
    <h1 itemprop="name">{$product.name|escape:'html'}</h1>

    {* Галерея изображений *}
    {block name='product_images'}
        {include file='catalog/_partials/product-images.tpl'
            product=$product
            images=$product.images
            coverImage=$product.cover
        }
    {/block}

    {* Цена с учётом скидок и налогов *}
    <div class="product-price">
        {if $product.has_discount}
            <span class="price-old">{$product.regular_price}</span>
        {/if}
        <span class="price current-price" itemprop="price" content="{$product.price_amount}">
            {$product.price}
        </span>
    </div>

    {* Форма добавления в корзину — обязательный хук *}
    {hook h='displayProductAdditionalInfo' product=$product}

    {include file='catalog/_partials/product-add-to-cart.tpl'}
</section>
{/block}

Webpack-сборка и работа с ассетами

PrestaShop не диктует инструмент сборки, но classic тема использует Webpack. Рекомендуемая конфигурация:

// webpack.config.js
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const path = require('path');

module.exports = {
    entry: {
        theme: './src/js/theme.js',
        checkout: './src/js/checkout.js',
    },
    output: {
        path: path.resolve(__dirname, 'assets'),
        filename: 'js/[name].js',
    },
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
            },
            {
                test: /\.js$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: { presets: ['@babel/preset-env'] }
                }
            }
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({ filename: 'css/[name].css' }),
    ],
};

Переопределение шаблонов модулей

Любой модуль можно переопределить на уровне темы без fork'а модуля:

themes/mytheme/modules/
├── ps_shoppingcart/
│   └── ps_shoppingcart.tpl      # Переопределение виджета корзины
├── ps_searchbar/
│   └── ps_searchbar.tpl         # Кастомная строка поиска
└── blockreassurance/
    └── views/
        └── templates/
            └── hook/
                └── reassurance.tpl

Адаптация под мобильные устройства

PrestaShop не использует breakpoint-систему Bootstrap по умолчанию в classic теме. Для кастомной темы рекомендуется:

// src/scss/_variables.scss
$breakpoints: (
    'xs': 0,
    'sm': 576px,
    'md': 768px,
    'lg': 1024px,
    'xl': 1280px,
    'xxl': 1440px,
);

// Миксин для медиазапросов
@mixin respond-to($bp) {
    @media (min-width: map-get($breakpoints, $bp)) {
        @content;
    }
}

// Применение
.product-grid {
    display: grid;
    grid-template-columns: 1fr;

    @include respond-to('sm') { grid-template-columns: repeat(2, 1fr); }
    @include respond-to('lg') { grid-template-columns: repeat(3, 1fr); }
    @include respond-to('xl') { grid-template-columns: repeat(4, 1fr); }
}

Регистрация и активация темы

# Экспорт темы для переноса
php bin/console prestashop:theme:export mytheme

# Импорт на другой инстанс
php bin/console prestashop:theme:import /path/to/mytheme.zip

# Активация через CLI
php bin/console prestashop:theme:enable mytheme

# Генерация изображений для всех типов
php bin/console prestashop:generate:thumbnails --scope=products

Сроки разработки

• Базовая тема на основе fork classic с редизайном: 2–3 недели
• Тема с нуля, сложный UI, кастомные компоненты корзины/каталога: 4–6 недель
• Адаптация существующего дизайна (Figma/XD → PrestaShop): 3–5 недель
• Поддержка всех стандартных модулей + мультиязычность: включено в оценку выше