1. aspro.ru
  2. Аспро: Лайтшоп
  3. Каталог
  4. Карточка товара
  5. Добавление пользовательских блоков в карточку товара

Добавление пользовательских блоков в карточку товара


В Аспро: Лайтшоп с версии 2.7.1. появилась возможность выводить пользовательские блоки в карточке товара, в том числе в виде табов. С помощью блоков вы сможете еще больше уникализировать сайт и сделать проект информативнее для пользователей.

Для создания кастомных блоков потребуются навыки работы с кодом. Чтобы создать файл для блоков в каталоге, проделайте путь: Контент (1) → Структура сайта (2) → Файлы и папки (3) → include (4) → blocks (5) → catalog (6) → detail_blocks (7).

28371db2-7b64-11f1-8fe4-fa163e2ff576

Также можно во вкладке «Файлы и папки» проделать путь: /include/blocks/catalog/detail_blocks/

ba4d41d9-7b64-11f1-8fe4-fa163e2ff576

Чтобы создать кастомный файл, нажмите на кнопку «Добавить» и выберите «Добавить файл». 

9b3cc2b7-7b5b-11f1-8fe4-fa163e2ff576

Затем выберите название (1) и вставьте код блока (2). В файле доступны переменные $Result, $Params и $templateData из детальной карточки товара.

Обратите внимание на написание названия файла! Имя должно быть без пробелов, спецсимволов и кириллицы. Пример написания: new_custom_block.php.

62f6c0eb-7b5f-11f1-8fe4-fa163e2ff576

Чтобы настроить пользовательские блоки, зайдите в параметры компонента каталога. Для этого в режиме правки наведите курсор на область каталога, а затем нажмите на шестеренку в панели.

360e9a23-7b63-11f1-8fe4-fa163e2ff576

В параметры «Свойства для пользовательских блоков» вы можете отметить нужные свойства. Если нужных свойств нет, вы можете создать новые. Значения свойств будут доступны в $templateData['CUSTOM_BLOCKS_DATA']['PROPERTIES']

7a72f339-7b63-11f1-8fe4-fa163e2ff576

В параметре «Пользовательские блоки и табы» вы увидите код блока — название созданного файла (3). Вы можете активировать блок через чекбокс и задать ему название (1). Также по желанию блок можно сделать табом (2).

ef6ee654-7b62-11f1-8fe4-fa163e2ff576

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

a7e3c76d-7b64-11f1-8fe4-fa163e2ff576

Пример использования пользовательских блоков

Рассмотрим популярный у наших пользователей запрос — вывод свойства типа HTML в таб на детальной странице товара.

Для создания нового свойства в административной части перейдите в Контент (1) → Инфоблоки (2) → Типы инфоблоков (3) → Каталог (aspro.premier) (4) → Каталог товаров (5). 

3d6a09a2-7b63-11f1-8fe4-fa163e2ff576

На вкладке «Свойства», укажите название (1), тип (2) и символьный код свойства (3). Сохраняем изменения.

ae4a46c0-7b5e-11f1-8fe4-fa163e2ff576

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

360e9a23-7b63-11f1-8fe4-fa163e2ff576

Чтобы значения свойств товара отображались в кастомных блоках, необходимо отметить созданные свойства в настройке «Свойства для пользовательских блоков». 

01cdfe73-7b63-11f1-8fe4-fa163e2ff576

Затем вернемся в административную часть сайта, чтобы создать кастомный блок. Указываем название файла, оно будет отображаться в параметрах компонента каталога (1). Копируем код ниже и вставляем в поле (2). Сохраним изменения.

<? $codePropHTML = 'HTML_TEST'; ?>

<div> Здесь может быть ваш текст </div>

<?if(!empty($templateData['CUSTOM_BLOCKS_DATA']['PROPERTIES'][$codePropHTML]['DISPLAY_VALUE'])):?>

<?=$templateData['CUSTOM_BLOCKS_DATA']['PROPERTIES'][$codePropHTML]['DISPLAY_VALUE'];?>

<?endif;?>

8874d8df-7b62-11f1-8fe4-fa163e2ff576

Вновь возвращаемся в параметры компонента каталога. В параметре «Пользовательские блоки и табы» находим по коду блока файл, который создали (3). Ставим галочку и указываем название, чтобы блок появился (1). Также делаем отображение блока в виде таба (2).

14110103-7b63-11f1-8fe4-fa163e2ff576

После этого меняем сортировку кастомного блока через параметр «Порядок отображения блоков в табах».

b2cc466e-7b5f-11f1-8fe4-fa163e2ff576

Содержание блока зависит от кода и заполненности свойства товара!

a05e978f-7b5e-11f1-8fe4-fa163e2ff576

Если одно из условий выполнено, мы увидим новый блок.

b82cd5b2-7b5b-11f1-8fe4-fa163e2ff576

Предыдущая статья Детальная картинка в слайдере — одна для каждого SKU
Следующая статья Подбор аналогов товара в карточке