Примеры: бренд
Внимание! Мы рекомендуем вам прочитать разделы Архитектура, Класс ElementItem, Класс ElementCollection для полного понимания архитектуры проекта.
Пример 1. Страница бренда
1.1 Задача
Создайте простую страницу бренда и отобразите название бренда, изображение для предварительного просмотра, описание.
1.2 Как это сделать?
В примере используется компонент BrandPage. Метод компонента возвращает объект класса BrandItem. Все доступные поля и методы класса BrandItem вы можете найти в разделе
1.3 Исходный код
Файл: pages/brand-page.htm
title = "Brand page"
url = "/brands/:slug"
layout = "main"
is_hidden = 0
[BrandPage]
slug = "{{ :slug }}"
slug_required = 1
smart_url_check = 1
skip_error = 0
==
{# @var obBrand \Lovata\Shopaholic\Classes\Item\BrandItem #}
{# Получить товар от бренда #}
{% set obBrand = BrandPage.get() %}
<div data-id="{{ obBrand.id }}">
<h1>{{ obBrand.name }}</h1>
{% if obBrand.preview_image is not empty %}
<img
src="{{ obBrand.preview_image.path }}"
title="{{ obBrand.preview_image.title }}"
alt="{{ obBrand.preview_image.description }}"
>
{% endif %}
<div>{{ obBrand.description|raw }}</div>
</div>
Пример 2: Карточка бренда
2.1 Задача
Создайте простую карточку бренда и отобразите поля названия бренда, preview_image, preview_text. Вывести ссылку на страницу бренда.
"obBrand" - это объект класса BrandItem.
2.2 Исходный код
Простой пример карточки бренда.
Файл: partials/brand/brand-card/brand-card.htm
{# @var obBrand \Lovata\Shopaholic\Classes\Item\BrandItem #}
<a href="{{ obBrand.getPageUrl('brand-page') }}">
<div itemscope itemtype="http://schema.org/Brand">
{% if obBrand.preview_image is not empty %}
<img
src="{{ obBrand.preview_image.path }}"
itemprop="image"
alt="{{ obBrand.preview_image.description }}"
title="{{ obBrand.preview_image.title }}"
>
{% endif %}
<h3 itemprop="name">{{ obBrand.name }}</h3>
{% if obBrand.preview_text is not empty %}
<div itemprop="description">
{{ obBrand.preview_text }}
</div>
{% endif %}
</div>
</a>
Пример 3: случайный список брендов
3.1 Задача
Создайте простой блок со случайным списком 5 брендов на index page.
3.2 Исходный код
В примере используется компонент BrandList. Метод компонента возвращает объект класса BrandCollection. Все доступные методы класса BrandCollection вы можете найти в разделе
3.3 Исходный код
Файл: pages/index.htm
title = "Index"
url = "/"
layout = "main"
is_hidden = 0
[BrandList]
==
<div class="brand-wrapper">
{% partial 'brand/random-brand-list/random-brand-list' %}
</div>
Файл: partials/brand/random-brand-list/random-brand-list.htm
{# Получите коллекцию брендов #}
{% set obBrandList = BrandList.make().active() %}
{# Получить массив со случайными брендами #}
{% set arBrandList = obBrandList.random(5) %}
{% if arBrandList is not empty %}
{# Визуализировать список брендов #}
<ul>
{% for obBrand in arBrandList %}
<li>{% partial 'brand/brand-card/brand-card' obBrand=obBrand %}</li>
{% endfor %}
</ul>
{% endif %}
Файл: partials/brand/brand-card/brand-card.htm
{# @var obBrand \Lovata\Shopaholic\Classes\Item\BrandItem #}
<a href="{{ obBrand.getPageUrl('brand-page') }}">
<div itemscope itemtype="http://schema.org/Brand">
{% if obBrand.preview_image is not empty %}
<img
src="{{ obBrand.preview_image.path }}"
itemprop="image"
alt="{{ obBrand.preview_image.description }}"
title="{{ obBrand.preview_image.title }}"
>
{% endif %}
<h3 itemprop="name">{{ obBrand.name }}</h3>
{% if obBrand.preview_text is not empty %}
<div itemprop="description">
{{ obBrand.preview_text }}
</div>
{% endif %}
</div>
</a>
Пример 4: Список брендов с разбивкой на страницы
4.1 Задача
Создайте простую страницу со списком брендов. Список брендов должен иметь блок нумерации страниц.
4.2 Как это сделать?
В примере используется компонент BrandList. Метод компонента возвращает объект класса BrandCollection. Все доступные методы класса BrandCollection вы можете найти в разделе
Вы можете найти дополнительную информацию о компоненте Pagination здесь
4.3 Исходный код
Файл: pages/brand-list.htm
title = "Brand list"
url = "/brands"
layout = "main"
is_hidden = 0
[BrandList]
[Pagination]
count_per_page = 15
pagination_limit = 5
active_class = ""
button_list = "first,first-more,main,last-more,last"
first_button_name = "First"
first_button_limit = 3
first_button_number = 1
first-more_button_name = "..."
first-more_button_limit = 4
prev_button_name = "Prev"
prev_button_limit = 1
prev-more_button_name = "..."
prev-more_button_limit = 1
next-more_button_name = "..."
next-more_button_limit = 1
next_button_name = "Next"
next_button_limit = 1
last-more_button_name = "..."
last-more_button_limit = 4
last_button_name = "Last"
last_button_limit = 3
last_button_number = 1
==
</div class="brand-wrapper">
{% partial 'brand/brand-list/brand-list' %}
</div>
Файл: partials/brand/brand-list/brand-list.htm
{# Получите коллекцию брендов #}
{% set obBrandList = BrandList.make().sort().active() %}
{# Получить массив с кнопками пагинации #}
{% set iPage = Pagination.getPageFromRequest() %}
{% set arPaginationList = Pagination.get(iPage, obBrandList.count()) %}
{# Примените пагинацию к коллекции брендов и получите массив с элементами бренда #}
{% set arBrandList = obBrandList.page(iPage, Pagination.getCountPerPage()) %}
{% if arBrandList is not empty %}
{# Вывести список брендов #}
<ul>
{% for obBrand in arBrandList %}
<li>{% partial 'brand/brand-card/brand-card' obBrand=obBrand %}</li>
{% endfor %}
</ul>
{# Отрисовка кнопок пагинации #}
{% if arPaginationList is not empty %}
{% for arPagination in arPaginationList %}
<a
{% if arPagination.value != iPage %}
href="?page={{ arPagination.value }}"
{% endif %}
class="{{ arPagination.class }}"
data-page="{{ arPagination.value }}"
>
{{ arPagination.name }}
</a>
{% endfor %}
{% endif %}
{% else %}
<div>
Бренды не найдены
</div>
{% endif %}
Файл: partials/brand/brand-card/brand-card.htm
{# @var obBrand \Lovata\Shopaholic\Classes\Item\BrandItem #}
<a href="{{ obBrand.getPageUrl('brand-page') }}">
<div itemscope itemtype="http://schema.org/Brand">
{% if obBrand.preview_image is not empty %}
<img
src="{{ obBrand.preview_image.path }}"
itemprop="image"
alt="{{ obBrand.preview_image.description }}"
title="{{ obBrand.preview_image.title }}"
>
{% endif %}
<h3 itemprop="name">{{ obBrand.name }}</h3>
{% if obBrand.preview_text is not empty %}
<div itemprop="description">
{{ obBrand.preview_text }}
</div>
{% endif %}
</div>
</a>
Пример 5: Панель фильтров с брендами
5.1 Задача
Создайте простую страницу каталога с панелью фильтров по брендам. Применить фильтр по идентификатору категории к списку брендов.
5.2 Как это сделать?
В примере используется компонент BrandList. Метод компонента возвращает объект класса BrandCollection. Все доступные методы класса BrandCollection вы можете найти в разделе
5.3 Исходный код
Файл: pages/catalog.htm
title = "Catalog"
url = "/catalog/:category"
layout = "main"
is_hidden = 0
[CategoryPage]
slug = "{{ :category }}"
slug_required = 1
smart_url_check = 1
has_wildcard = 0
skip_error = 0
[BrandList]
==
<div class="filter-brand-wrapper">
{% partial 'brand/filter-brand-list/filter-brand-list' %}
</div>
Файл: partials/brand/filter-brand-list/filter-brand-list.htm
{# @var obBrand \Lovata\Shopaholic\Classes\Item\BrandItem #}
{# Получить объект CategoryItem #}
{% set obCategory = CategoryPage.get() %}
{# Получите коллекцию брендов #}
{% set obBrandList = BrandList.make().active().sort().category(obCategory.id) %}
{% if obBrandList.isNotEmpty() %}
{# Вывести список брендов #}
<ul>
{% for obBrand in obBrandList %}
<li>
<input
type="checkbox"
name="filter-brand"
value="{{ obBrand.slug }}"
id="brand-{{ obBrand.id }}"
>
<label for="brand-{{ obBrand.id }}">{{ obBrand.name }}</label>
</li>
{% endfor %}
</ul>
{% endif %}