Кастомизация главной страницы Аспро: блоки «Акции» и «Популярные товары»
Содержание:
1. Введение
2. Блок «Акции»
3. Блок «Популярные товары»
4. Анимация и UX
5. SEO и микроразметка
6. Советы по производительности
7. Итог
1. Введение
2. Блок «Акции»
3. Блок «Популярные товары»
4. Анимация и UX
5. SEO и микроразметка
6. Советы по производительности
7. Итог
1. Введение
Главная страница — лицо сайта. В шаблоне Аспро стандартные блоки уже есть, но часто требуется уникальный дизайн и логика. Цель кастомизации: динамическое отображение акций и популярных товаров, интеграция с 1С, повышение конверсии.
2. Блок «Акции»
Идеи для кастомизации:
- Сортировка по дате начала/окончания
- Вывод только актуальных акций
- Баннеры, анимация, countdown таймер
- Переключение по категориям
Пример запроса к инфоблоку:
<?php
$arFilter = [«IBLOCK_ID»=>10,»ACTIVE»=>»Y»,»PROPERTY_IS_ACTIVE»=>true];
$res = CIBlockElement::GetList([«SORT»=>»ASC»],$arFilter,false,[«nTopCount»=>5],[«ID»,»NAME»,»PREVIEW_TEXT»,»PROPERTY_DISCOUNT»]);
while($item = $res->Fetch()) $arResult[«ITEMS»][]=$item;
$this->IncludeComponentTemplate();
?>
$arFilter = [«IBLOCK_ID»=>10,»ACTIVE»=>»Y»,»PROPERTY_IS_ACTIVE»=>true];
$res = CIBlockElement::GetList([«SORT»=>»ASC»],$arFilter,false,[«nTopCount»=>5],[«ID»,»NAME»,»PREVIEW_TEXT»,»PROPERTY_DISCOUNT»]);
while($item = $res->Fetch()) $arResult[«ITEMS»][]=$item;
$this->IncludeComponentTemplate();
?>
3. Блок «Популярные товары»
Идеи:
- Вывод по просмотрам или продажам
- Фильтр по категории, цене или бренду
- Карусель или сетка с lazy load
- Подсветка «Хит продаж»
Пример запроса:
<?php
$arFilter = [«IBLOCK_ID»=>5,»ACTIVE»=>»Y»];
$res = CIBlockElement::GetList([«PROPERTY_SALES»=>»DESC»],$arFilter,false,[«nTopCount»=>10],[«ID»,»NAME»,»DETAIL_PAGE_URL»]);
while($item=$res->Fetch()) $arResult[«ITEMS»][]=$item;
$this->IncludeComponentTemplate();
?>
$arFilter = [«IBLOCK_ID»=>5,»ACTIVE»=>»Y»];
$res = CIBlockElement::GetList([«PROPERTY_SALES»=>»DESC»],$arFilter,false,[«nTopCount»=>10],[«ID»,»NAME»,»DETAIL_PAGE_URL»]);
while($item=$res->Fetch()) $arResult[«ITEMS»][]=$item;
$this->IncludeComponentTemplate();
?>
template.php:
<div class=»popular-products»>
<?php foreach($arResult[«ITEMS»] as $item): ?>
<div class=»product-card»>
<a href=»<?= $item[«DETAIL_PAGE_URL»]; ?>»><?= $item[«NAME»]; ?></a>
</div>
<?php endforeach; ?>
</div>
<?php foreach($arResult[«ITEMS»] as $item): ?>
<div class=»product-card»>
<a href=»<?= $item[«DETAIL_PAGE_URL»]; ?>»><?= $item[«NAME»]; ?></a>
</div>
<?php endforeach; ?>
</div>
4. Анимация и UX
UX улучшает восприятие блоков:
- Подсветка блока при скролле
- Карусель через Swiper.js
- Таймер обратного отсчета для акций
- Hover-эффекты на карточках товаров
5. SEO и микроразметка
Используйте Schema.org:
<script type="application/ld+json">
{
"@context":"https://schema.org",
"@type":"Product",
"name":"Товар Х",
"image":"https://site.ru/images/product1.jpg",
"offers":{
"@type":"Offer",
"price":"2990",
"priceCurrency":"RUB",
"availability":"https://schema.org/InStock"
}
}
</script>
6. Советы по производительности
- Кэширование компонента через StartResultCache
- Lazy load для изображений
- Минификация JS и CSS
- Отложенная загрузка блоков ниже fold
7. Итог
Кастомизация главной страницы через собственные компоненты Аспро позволяет гибко управлять блоками, ускорять сайт, увеличивать конверсию и сохранять совместимость с обновлениями шаблона.
Хотите доработать сайт на Аспро?
Создам кастомные блоки «Акции» и «Популярные товары», подключу интеграцию с 1С, оптимизирую скорость и SEO.
Комментарии (0)
Оставить комментарий