Розробка кастомної теми 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/                # Override шаблонів модулів
│   └── 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' }),
    ],
};

Override шаблонів модулів

Override будь-якого шаблону модуля на рівні теми без форку модуля:

themes/mytheme/modules/
├── ps_shoppingcart/
│   └── ps_shoppingcart.tpl      # Override віджету корзини
├── 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

Графік розробки

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