Задача

Разработать HTML-шаблон страницы категории товаров и страницы карточки товара для интернет-магазина на WordPress (WooCommerce). Шаблон верстается строго по приложенному макету (файл во вложении).

Функциональные требования

Шаблон категории товаров

  • Динамические фильтры: Фильтры располагаются в боковой панели или над списком товаров. При выборе опций (ч. - такие параметры есть у заказчика) они применяются только к текущей категории - обновление через перезагрузку (AJAX-фильтрация).
  • Триггерные кнопки навигации: Разместить три кнопки: «Столы» / «Шкафы» / «Тумбы». При клике на одну из них показываются товары соответствующего подтипа, относящиеся только к текущей коллекции (категории/материнской коллекции).
  • Вывод товаров - стандартная сетка с изображением, названием, ценой и кратким описанием.
  • Тестовый контент: Использовать 1 тестовый товар, размноженный несколько раз (clone + дубли) для корректного отображения сетки.

Шаблон карточки товара (Single Product)

  • Вариативный товар (атрибуты): Пользователю нужно иметь возможность выбрать глубину (select-option) и длину (select-option). При изменении любого атрибута цена и описание меняются динамически на JS/jQuery.

    Например: для стола длиной 180 см и глубиной 80 см - цена 15000 руб., описание особое; если выбрать 150 см / 90 см - цена 13000 руб., другое описание.

  • Блок «С этим товаром часто покупают»: Реализовать карусель или сетку (2-4 позиции) на выбор товаров с возможностью добавления в корзину.
  • «Купить в один клик»: Кнопка прямого перехода в корзину с автоматическим добавлением товара. Товар должен «улететь» в корзину при клике (single product of basic version by default). Для обратной связи - уведомление (JavaScript alert или попап).

Общие требования к вёрстке

  • HTML/CSS чистая, валидная.
  • Цветовая гамма в соответствие с макетам (возможны отступления: макет в ч/б или зеленый блок в оригинале - взять за основу шаблона заказчика)
  • В карточку попадает только сам товар (нативный template: single-product.php - НЕ создавать файл, шаблон для полного размещения в body).

Принцип формирования категорий

  • Коллекция = часть дерево/своего раздела. Товары родовые наследуются из «родителей» Woocommerce.
анимация

Анимация дыма в футаже на тему текста

Требуется футаж с анимацией белых текстовых надписей, которые появляются из дыма и исчезают, растворяясь дымкой. Основной стиль - эфирный и кинематографичный, используются стандартный шрифт Google Fonts на зелёном фоне.