Сайт-витрина на Albireo CMS

Рассмотрим вариант создания простого сайта-витрины на Albireo CMS. Я хочу отметить, что речь не идёт об Интернет-магазине, где есть корзина, кабинет пользователя, оплаты и т.п. Нет, речь только о том, чтобы сделать сайт, где можно показывать свои товары или услуги в удобном виде. Такой сайт отлично подойдёт тем, кто не хочет окунаться в сложности магазинов.

Организация сайта-витрины

Основная задача сайта-витрины — это познакомить посетителей с вашими товарами или услугами. Для связи используется обычная контактная форма (или telegram-чат).

В будущем, при желании, можно «прикрутить» к сайту корзину, наподобие той, что есть в MaxSite CMS.

В целом сайт-витрина будет состоять из основных частей:

• Главная страница
• Контакты
• Страница товара
• Страницы коллекций

Главная страница сайта-витрины

Поскольку Albireo CMS может предлагать сразу множество вариантов, то есть два типовых: лендинг и вывод записей.

Лендинг для главной — очень частое решение, но нужно понимать, что такой лендинг должен решать какую-то конкретную задачу. То есть лендинг для красоты не имеет смысла. Если у вас сайт состоит только из одного типа товаров, то на главной можно описать их основные преимущества, особенности и т.п. То есть главная будет выполнять роль начальной рекламы.

Если посетитель заинтересуется, то ему можно предложить ссылки на страницы товаров, брендов, коллекций.

Второй вариант — вывод записей обычно формируется автоматически. Для этого нужно определиться с теми критериями по которому будут выводиться записи товаров. Это могут быть рубрики, метки или свои поля.

То есть посетитель сразу будет видеть товары (или их группы).

Третий вариант — это смешанная форма вывода. Тут всё зависит от вашей фантазии. Например можно разместить промо-блок вверху, а внизу сделать вывод по 5-7 товаров каждой категории.

Страница товара/услуги

Каждый товар размещается в отдельном файле записи. Это позволяет использовать любое оформление страницы. Вы сами решаете как и что будет выводиться, поэтому можно использовать в качестве основы блоки Berry CSS.

Я бы советовал сделать некий html-каркас «карточки товара», который потом можно наполнять реальными данными.

Товар

• характеристика 1
• характеристика 2
• характеристика 3
• характеристика 4

Слайдер Tiny Slider или Swiper

Детальное описание товара

<div class="flex flex-wrap-tablet">
  <div class="w40 w100-tablet">
    ![](//products/tovar1/1.webp)
  </div>
  <div class="w55 w100-tablet">
    h2(mar0) Товар
   
    - характеристика 1
    - характеристика 2
    - характеристика 3
    - характеристика 4
  </div>
</div>

<div>Слайдер Tiny Slider или Swiper</div>

Детальное описание товара

Изображения записи лучше хранить в uploads/products/ для каждой страницы в отдельном подкаталоге. Если товаров много (сотни и больше), то наверное будет проще всего использовать некий код-идентификатор, например sku — артикул товара.

Например для одного товара в полях указывается sku, а потом этот же артикул в поле каталога изображений записи:

# артикул
sku: sku001

# каталог изображений
images-dir: [UPLOADS_URL]products/[sku]/

# главное изображение записи
image-large: [UPLOADS_URL]products/[sku]/1.webp

Соответственно, сами файлы будут находиться в uploads/products/sku001/. В полях вставка [sku] автоматически заменится на значение этого поля sku001. Поэтому достаточно поменять артикул в одном поле, как оно автоматически поменяется во всех остальных.

Автоматический вывод изображений из указанного каталога делается как это описано в документации. Можно использовать GLightbox, Fullscreen Lightbox, Grid Gallery или слайдеры Tiny Slider или Swiper.

Коллекции товаров

Группировка товаров подразумевает и навигацию, поэтому важно продумать какой именно вариант вас устроит. Обычно товары имеют сразу множество характеристик, где каждая может выступать как некий «фильтр» для группировки. Например это может быть категория, бренд, назначение товара, цвет, размер и т.п.

В Интернет-магазинах часто используют отдельные поля в базе данных, по которым потом можно сделать выборку записей. В Albireo CMS это тоже возможно, но потребует определённого программирования. Поэтому рассмотрим более простые варианты.

Рубрики и метки

Это «стандартная» навигация и есть смысл её использовать хотя бы на начальном этапе.

Здесь важно определиться что именно вы хотите отнести к рубрикам, а что именно будут описывать метки. Всё зависит от вашего товара. Например в рубрики можно добавить бренды товара. С другой стороны если брендов много, то рубрики не очень удобная рубрификация. Часто в Интернет-магазинах используют рубрики, указывающих на целевую аудиторию, например:

• всё до 500 грн
• акция
• для детей
• для женщин
• мода
• и т.д.

То есть рубрика служит неким начальным ориентиром для посетителя и это достаточно удобно.

Тогда метки будут описывать характеристики товара. Например тот же бренд, цвет, размер, предназначение и т.п.

Получается двойная навигация: общая по рубрикам и детальная по меткам.

Поля записи для описания товара

Возможно, что в некоторых случаях будет удобно использовать описание характеристик товара в виде полей записи. Если автоматизировать «карточку товара», то она будет брать данные из полей записи и html-код будет формироваться автоматически.

Вот примеры полей, которые вы можете использовать за основу.

# описание товара (стандартное поле)
description: 

# метки для дополнительной навигации (стандартное поле)
tags: 

# рубрики (стандартное поле)
category: 

# уникальный артикул товара, например «SKU001»
sku: 

# валюта цены, например «UAH»
currency: 

# цена текущая (только цифры)
price: 

# старая цена
old_price: 

# бренд товара
brand: 

# количество в наличии
stock: 

# статус товара: 1 - доступен, 0 - недоступен
status: 

# дата появления товара в формате YYYY-MM-DD, например «2026-04-02»
created_at: 

Для получения значения поля используется функция getPageData(), например:

- Цена: <?= getPageData('price', 0) . getPageData('currency', 'UAH') ?>
- Бренд: <?= getPageData('brand', 'нет') ?>
- В наличии: <?= getPageData('stock', 0) ?> шт.

Если вы планируете использовать поля для описания товара, то лучше продумать их заранее, чтобы потом не менять все файлы.

«Карточка товара»

Для автоматизации «карточки товара» можно использовать два механизма Albireo CMS: extras-файлы и сниппеты.

Extras-файлы хороши тем, что в них можно использовать tpl-шаблонизатор, что позволяет делать html-код немного проще.

Сниппеты — это «голый» HTML.

Здесь я отмечу ещё одну возможность по описанию характеристик товара. Функции сниппета и Extras-файлов могут принимать дополнительный массив данных, в котором можно хранить данные товара. Например это может быть php-массив. Этот вариант ещё подходит как развитие сайта на будущее: когда данные товара могут храниться в отдельном файле, например CSV от электронной таблицы. Тогда данные (строка товара) может быть передана в сниппет или Extras-файл напрямую.

Типы записей

Может показаться заманчивым использовать поле type для группировки товаров. Однако здесь будет ряд трудностей из-за того, что это поле обычно используется для получения «доступности» записи. Если тип blog, то это «типовой» вывод в архивных записях: карта сайта, рубрики, метки, главная, RSS, комментарии и т.п.

Если же тип system, то страница не выводится на главной, в метках, у неё отключается вывод в карте сайта, комментарии и т.п. Поэтому если страница должна быть ограничена, то у неё ставится системный тип.

Но если тип не указан или указан любой другой, то Albireo CMS используется её как это принято по умолчанию, но скажем для записей на главной получаются только записи с type=blog, а значит все остальные не попадут в этот вывод.

Поэтому, если использовать type, то скорее всего придётся прописывать поля в архивном выводе. Это не проблема, просто не очень удобно. Поэтому вместо type для группировки записей лучше использовать поле group (произвольный текст), order (произвольный текст) и favorite (1/0). Более подробно об это написано здесь: Получение записей в Albireo CMS.

Блог для сайта-витрины и наоборот

Если основной сайт будет именно витрина, то для блога лучше всего использовать мультисайтинг Albireo CMS. То есть просто делаете подкаталог на сервере blog (произвольно) и в этот подкаталог ставите копию системы (каталог website). Сайты будут работать независимо, но использовать одно ядро.

Таким образом вы разделите обычный блог от вывода товаров и это сильно упростит их обслуживание.

Если же у вас уже есть сайт, но нужно прикрутить витрину, то лучше сделать наоборот — создать для неё отельный подкаталог, например market.

Большинство CMS не умеют работать как мультисайтинг, поэтому вынуждены идти на разные хитрости и усложнения. В Albireo CMS этот вопрос решается просто и элегантно.

Усложнение навигации (группировки)

Метки и рубрики — это два базовых вида группировки записей. Рубрики — это заранее предопределенные признаки, поэтому для них есть отдельный конфигурационный файл. Метки же произвольны по своей сути — их не нужно заранее определять.

Поэтому если в будущем предполагается усложнять навигацию, то она может идти либо как аля-рубрики или аля-метки.

В обоих случаях их суть будет повторять уже существующий механизм Albireo CMS. Конечно это потребует программирования, но в целом задача легко решаема.

С другой стороны, можно расширить текущие возможности меток так, чтобы сами метки могли содержать дополнительную информацию.

В качестве примера покажу метки, которые можно использовать в Albireo CMS:

# доступность по адресам
# https://сайт/tags/red
tags: red

# https://сайт/tags/color/red
tags: color/red

# https://сайт/tags/color.red
tags: color.red

Таким образом метки можно группировать с помощью произвольного разделителя. Например можно сделать что-то вроде такого:

tags: brand/adidas, color/white, size/small

Если brand, color, size должны также выводить какие-то свои страницы, то для них создаются отдельные файлы со slug:

slug: tags/brand
slug: tags/color
slug: tags/size
и т.п.

Уже в этих страницах организуется вывод нужных меток по своим критериям. Я об этом рассказывал в своём telegram-канале. Эти страницы «перебьют» стандартные «tags».

Что касается вывода списка меток, то есть смысл посмотреть на виджет tags, чтобы понять как сделать его копию под свою задачу. Для форматированного вывода можно использовать функцию strUcFirst(), которая автоматически выделит первую букву каждого сегмента, сделав метку более читабельной.

«Хлебные крошки»

Такая навигация очень полезна, но её не так просто сделать, поскольку нужно понимать «иерархию» товаров. Здесь в каждом случае придётся действовать индивидуально.

Если ориентироваться на метки и рубрики, то в качестве основы можно взять extras-файл info1.php, где выводятся данные по странице. Рубрики и метки выводятся так:

{@empty! $category}
    <span class="mar10-r bi-bookmark" title="{@lang Categories}">{{ categoryLinks($category) }}</span>
{@endempty}

{@empty! $tags}
    <span class="mar10-r bi-tags" title="{@lang Tags}">{{ tagLinks($tags) }}</span>
{@endempty}

В данном примере categoryLinks() и tagLinks() выводят полностью готовые ссылки. Их можно использовать именно как навигацию «Хлебные крошки».

Если же навигация совсем сложная, то можно использовать поле links, где указываются произвольные ссылки.

links:
 - about
 - berry-design | Пример дизайна Berry CSS
 - contact | Связь | class="bi-envelope"
 - https://maxsite.org/ | Мой сайт | target="_blank"

Ссылки появятся автоматически в конце записи. За это отвечает parts/content/27-links.php, который также можно взять за основу и переделать под свою задачу.

Контакты

Поскольку на сайте нет корзины, то на каждой странице товара желательно разместить какой-то его код и ссылку на контактную форму. Очень часто, даже при наличии корзины, встречается красными буквами «ожидайте звонка менеджера для уточнения». Мы знаем зачем и почему так делается, поэтому скорее всего у вас будет примерно так же.

Контактная форма может быть стандартной (где используется email), либо можно сразу перекидывать в Telegram или Viber. Если товар будет иметь «код», то легко будет понятно что имеется ввиду.

В дальнейшем, если стоит задача автоматизировать этот процесс, то нужно смотреть в сторону корзины. В простом виде это обычное localStorage, а весь код пишется под свою задачу с помощью ИИ. Если использовать AlpineJS (он по умолчанию доступен в Albireo CMS), то задача будет сделана ещё проще. По сути нужно прописать в textarea всю текущую корзину пользователя.

Как вариант есть еще сторонние сайты, которые предлагают готовые корзины с процессом оплаты.

Итого

Создать сайт-витрину на Albireo CMS достаточно несложно. Главное определиться со схемой группировки записей (рубрики + метки), потом отработать страницы с «карточкой товара» и потом уже решить вопросы навигации. Всё это стандартные возможности Albireo CMS.