Вывод пустых характеристик и служебных маркеров в HTML карточки товара «Аспро: Максимум»

Как исключить пустые характеристики из HTML карточки товара в «Аспро: Максимум»

В карточке товара решения «Аспро: Максимум» один и тот же шаблон используется как для вывода реальных характеристик товара, так и для создания служебной заготовки, необходимой JavaScript при переключении торговых предложений.

Из-за этого при отсутствии значения свойства в итоговый HTML страницы могут попадать пустые строки характеристик или служебные значения:

#PROP_TITLE#
#PROP_VALUE#

Сами служебные значения внутри элемента <template> являются частью штатной логики Аспро. Основная проблема возникает тогда, когда пустое реальное свойство выводится в HTML как обычная характеристика товара.

Описание проблемы

Файл шаблона характеристики может вызываться в двух режимах:

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

В исходном шаблоне название свойства выводится следующим образом:

<?=$arProp['NAME'] ?? '#PROP_TITLE#';?>

Значение свойства выводится так:

<?=$arProp['DISPLAY_VALUE']
	? implode(', ', (array)$arProp['DISPLAY_VALUE'])
	: '#PROP_VALUE#';?>

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

<div class="properties__item js-prop">
	<div class="js-prop-title">#PROP_TITLE#</div>
	<div class="js-prop-value">#PROP_VALUE#</div>
</div>

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

Однако тот же файл используется и для настоящих свойств товара. Если свойство присутствует в массиве, но его отображаемое значение пустое, в HTML может появиться конструкция:

<div class="properties__item">
	<div class="js-prop-title">Парфюмер</div>
	<div class="js-prop-value"></div>
</div>

Не следует просто удалять строки #PROP_TITLE# и #PROP_VALUE#. Они могут использоваться JavaScript Аспро при создании новых строк характеристик после переключения торгового предложения.

В каких ситуациях проявляется проблема

Проблема может проявляться не на каждой карточке товара. Она возникает, когда свойство присутствует в настройках вывода или в массиве данных, но фактического значения у товара нет.

Свойство выбрано для отображения, но не заполнено у конкретного товара.
Свойство заполнено у родительского товара, но отсутствует у торгового предложения.
Разные SKU имеют разный набор характеристик.
Значение было очищено после импорта из 1С.
Свойство содержит пустую строку.
Множественное свойство содержит массив пустых элементов.
Значение было отфильтровано при подготовке массива свойств.
Пользовательское свойство существует, но его отображаемое значение не сформировалось.
После смены SKU ранее показанная характеристика должна быть удалена.

Примечание:

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

Где находится служебный шаблон

В шаблоне карточки товара Аспро присутствует следующий блок:

<!-- noindex -->
<template class="props-template">
	<?TSolution\Functions::showBlockHtml([
		'FILE' => 'catalog/props/list.php',
		'PARAMS' => [
			'ITEM_CLASSES' => 'properties__item--compact font_xs',
		]
	]);?>
</template>
<!-- /noindex -->

Он подключает файл:

catalog/props/list.php

Этот файл формирует как обычные строки характеристик, так и служебную заготовку.

Почему нельзя полностью удалить элемент <template>
Элемент <template> содержит HTML-заготовку, которая не отображается пользователю напрямую. ``` JavaScript может клонировать эту заготовку, заменить служебные значения фактическим названием и значением свойства, а затем вставить готовую характеристику в карточку товара. Если удалить весь элемент <template>, при переключении SKU новые характеристики могут перестать добавляться.

Почему нельзя полностью удалить элемент <template>

```

Принцип безопасного исправления

Необходимо разделить два режима работы файла:

служебный режим без переданного свойства;
режим вывода настоящей характеристики.

Если объект свойства не передан, файл должен продолжать формировать:

#PROP_TITLE#
#PROP_VALUE#

Если передано настоящее свойство, но у него отсутствует название или значение, строку характеристики необходимо полностью исключить из HTML.

Код исправления

После строк:

$arOptions = $arConfig['PARAMS'] ?? [];
$arProp = $arConfig['ITEM'] ?? [];

добавляется определение режима работы:

$isJsTemplate = empty($arConfig['ITEM']);

Далее выполняется проверка настоящего свойства:

if (!$isJsTemplate) {
	$propName = trim((string)($arProp['NAME'] ?? ''));
	$propValue = $arProp['DISPLAY_VALUE'] ?? null;

	$hasValue = is_array($propValue)
		? count(array_filter(
			$propValue,
			static fn($value) => trim((string)$value) !== ''
		)) > 0
		: trim((string)$propValue) !== '';

	if ($propName === '' || !$hasValue) {
		return;
	}
}

Проверка через trim() позволяет считать пустыми строки, содержащие только пробелы. При этом строковое или числовое значение 0 не удаляется и продолжает отображаться.

Полный исправленный файл

Открыть полный код файла catalog/props/list.php
<? if (!defined('B_PROLOG_INCLUDED') \|\| B_PROLOG_INCLUDED !== true) { die(); } // Параметры из TSolution\Functions::showBlockHtml $arOptions = $arConfig['PARAMS'] ?? []; $arProp = $arConfig['ITEM'] ?? []; // Если ITEM не передан, файл используется как JS-шаблон $isJsTemplate = empty($arConfig['ITEM']); // Пустые реальные характеристики не выводим. // Служебный шаблон для JavaScript сохраняем. if (!$isJsTemplate) { $propName = trim((string)($arProp['NAME'] ?? '')); $propValue = $arProp['DISPLAY_VALUE'] ?? null; ``` $hasValue = is_array($propValue) ? count(array_filter( $propValue, static fn($value) => trim((string)$value) !== '' )) > 0 : trim((string)$propValue) !== ''; if ($propName === '' \|\| !$hasValue) { return; } ``` } // Классы элемента $itemClassList = ['properties__item']; if ($arOptions['IS_ITEM']) { $itemClassList[] = 'js-prop-replace'; } else { $itemClassList[] = 'js-prop'; } if ($arOptions['ITEM_CLASSES']) { $itemClassList[] = $arOptions['ITEM_CLASSES']; } // Классы названия $titleClassList = [ 'properties__title properties__item--inline muted js-prop-title' ]; // Классы значения $valueClassList = [ 'properties__value darken properties__item--inline js-prop-value' ]; if ($arOptions['FONT_CLASSES']) { $titleClassList[] = $arOptions['FONT_CLASSES']; $valueClassList[] = $arOptions['FONT_CLASSES']; } $itemClasses = TSolution\Utils::implodeClasses($itemClassList); $titleClasses = TSolution\Utils::implodeClasses($titleClassList); $valueClasses = TSolution\Utils::implodeClasses($valueClassList); $displayValue = ''; if (!$isJsTemplate) { $values = array_filter( (array)($arProp['DISPLAY_VALUE'] ?? []), static fn($value) => trim((string)$value) !== '' ); ``` $displayValue = implode(', ', $values); ``` } ?> #PROP_TITLE# ``` <?if ( $arOptions['SHOW_HINTS'] === 'Y' && !empty($arProp['HINT']) ):?> <div class="hint hint--down"> <span class="icon colored_theme_hover_bg"> <i>?</i> </span> <div class="tooltip"> <?=htmlspecialcharsbx($arProp['HINT']);?> </div> </div> <?endif;?> </div> <div class="properties__hr properties__item--inline">—</div> <div class="<?=$valueClasses;?>"> <?if ($isJsTemplate):?> #PROP_VALUE# <?else:?> <?=htmlspecialcharsbx($displayValue);?> <?endif;?> </div> ```

Открыть полный код файла catalog/props/list.php

<?
if (!defined('B_PROLOG_INCLUDED') || B_PROLOG_INCLUDED !== true) {
	die();
}

// Параметры из TSolution\Functions::showBlockHtml
$arOptions = $arConfig['PARAMS'] ?? [];
$arProp = $arConfig['ITEM'] ?? [];

// Если ITEM не передан, файл используется как JS-шаблон
$isJsTemplate = empty($arConfig['ITEM']);

// Пустые реальные характеристики не выводим.
// Служебный шаблон для JavaScript сохраняем.
if (!$isJsTemplate) {
$propName = trim((string)($arProp['NAME'] ?? ''));
$propValue = $arProp['DISPLAY_VALUE'] ?? null;

```
$hasValue = is_array($propValue)
	? count(array_filter(
		$propValue,
		static fn($value) => trim((string)$value) !== ''
	)) > 0
	: trim((string)$propValue) !== '';

if ($propName === '' || !$hasValue) {
	return;
}
```

}

// Классы элемента
$itemClassList = ['properties__item'];

if ($arOptions['IS_ITEM']) {
$itemClassList[] = 'js-prop-replace';
} else {
$itemClassList[] = 'js-prop';
}

if ($arOptions['ITEM_CLASSES']) {
$itemClassList[] = $arOptions['ITEM_CLASSES'];
}

// Классы названия
$titleClassList = [
'properties__title properties__item--inline muted js-prop-title'
];

// Классы значения
$valueClassList = [
'properties__value darken properties__item--inline js-prop-value'
];

if ($arOptions['FONT_CLASSES']) {
$titleClassList[] = $arOptions['FONT_CLASSES'];
$valueClassList[] = $arOptions['FONT_CLASSES'];
}

$itemClasses = TSolution\Utils::implodeClasses($itemClassList);
$titleClasses = TSolution\Utils::implodeClasses($titleClassList);
$valueClasses = TSolution\Utils::implodeClasses($valueClassList);

$displayValue = '';

if (!$isJsTemplate) {
$values = array_filter(
(array)($arProp['DISPLAY_VALUE'] ?? []),
static fn($value) => trim((string)$value) !== ''
);

```
$displayValue = implode(', ', $values);
```

}
?>




#PROP_TITLE#




```
	<?if (
		$arOptions['SHOW_HINTS'] === 'Y'
		&& !empty($arProp['HINT'])
	):?>
		<div class="hint hint--down">
			<span class="icon colored_theme_hover_bg">
				<i>?</i>
			</span>

			<div class="tooltip">
				<?=htmlspecialcharsbx($arProp['HINT']);?>
			</div>
		</div>
	<?endif;?>
</div>

<div class="properties__hr properties__item--inline">&mdash;</div>

<div class="<?=$valueClasses;?>">
	<?if ($isJsTemplate):?>
		#PROP_VALUE#
	<?else:?>
		<?=htmlspecialcharsbx($displayValue);?>
	<?endif;?>
</div>
```

Как работал шаблон до исправления

Если свойство имело название, но не имело значения, мог сформироваться следующий HTML:

<div class="properties__item js-prop">
	<div class="js-prop-title">Парфюмер</div>
	<div class="js-prop-value"></div>
</div>

В некоторых сценариях вместо пустой строки мог использоваться служебный маркер:

<div class="js-prop-value">#PROP_VALUE#</div>

Как работает шаблон после исправления

Заполненное свойство

Исходные данные:

NAME = "Объём"
DISPLAY_VALUE = "100 мл"

Результат:

<div class="properties__item js-prop">
	<div class="js-prop-title">Объём</div>
	<div class="js-prop-value">100 мл</div>
</div>

Пустое свойство

Исходные данные:

NAME = "Парфюмер"
DISPLAY_VALUE = ""

Результат:

HTML-элемент свойства не выводится.

Служебный вызов

Если файл вызывается без объекта свойства, служебная заготовка сохраняется:

<template class="props-template">
	<div class="properties__item js-prop">
		<div class="js-prop-title">#PROP_TITLE#</div>
		<div class="js-prop-value">#PROP_VALUE#</div>
	</div>
</template>

Примечание:

Служебные маркеры должны остаться только внутри <template class="props-template">. Среди настоящих характеристик товара они присутствовать не должны.

Полученный результат

После изменения шаблона и очистки кеша была повторно проверена итоговая HTML-структура карточки товара.

Получены следующие результаты:

пустые реальные строки характеристик отсутствуют;
служебный элемент <template class="props-template"> сохранился;
#PROP_TITLE# встречается один раз;
#PROP_VALUE# встречается один раз;
оба маркера находятся только внутри служебного шаблона;
заполненные характеристики продолжают отображаться;
структура блока характеристик не нарушена;
JavaScript сохраняет возможность динамически создавать строки свойств.

Полученный результат подтверждает, что исправление разделяет служебный режим и вывод реальных характеристик. Пустые свойства исключаются, но штатная заготовка Аспро остаётся доступной для JavaScript.

Почему это важно

Чистая HTML-структура

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

Корректная семантика

Если значение характеристики отсутствует, соответствующий элемент вообще не создаётся.

Это корректнее, чем выводить название свойства без значения.

Снижение количества лишних элементов DOM

В карточках с большим количеством характеристик и SKU пустые строки могут создавать значительное количество бесполезных HTML-элементов.

Корректная работа автоматических систем

HTML страницы анализируют не только браузеры, но и:

поисковые роботы;
SEO-краулеры;
товарные парсеры;
внутренние системы поиска;
сервисы формирования фидов;
системы анализа карточек товаров.

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

Наличие #PROP_TITLE# и #PROP_VALUE# внутри корректного элемента <template> не следует считать самостоятельной критической SEO-ошибкой. Важнее исключить их попадание в реальные характеристики и не выводить свойства без значения.

Проверка после внедрения

После изменения файла необходимо:

Сохранить резервную копию исходного шаблона.
Очистить кеш Битрикс.
Очистить композитный кеш.
Открыть карточку товара в режиме инкогнито.
Проверить характеристики родительского товара.
Последовательно переключить все торговые предложения.
Проверить изменение характеристик каждого SKU.
Убедиться, что пустые строки не появляются.
Проверить консоль браузера на наличие JavaScript-ошибок.
Повторно сохранить исходный HTML страницы.

Критерии успешной проверки
Незаполненное реальное свойство отсутствует в HTML. Заполненное свойство отображается без изменений. Значение 0 не скрывается. Массив значений выводится через запятую. Массив из пустых элементов не выводится. Служебные маркеры присутствуют только внутри .props-template. Переключение SKU продолжает работать. После нескольких переключений не появляются дубли. В консоли браузера отсутствуют ошибки.

Критерии успешной проверки

Важное замечание об обновлениях решения

Если изменение внесено непосредственно в штатный файл шаблона «Аспро: Максимум», оно может быть перезаписано при обновлении решения.

Перед обновлением Аспро необходимо сохранить изменённый файл отдельно или зафиксировать изменение в системе контроля версий.

После обновления следует сравнить новую штатную версию файла со своей доработкой и при необходимости повторно перенести проверку пустых свойств.

Итог

Проблема заключалась не в самом наличии служебного HTML-шаблона, а в том, что общий файл не различал:

формирование служебной заготовки;
вывод настоящего свойства без значения.

После исправления:

служебные маркеры сохраняются для JavaScript;
пустые реальные характеристики не попадают в HTML;
заполненные свойства отображаются штатно;
переключение торговых предложений продолжает работать;
HTML карточки товара становится чище и семантически корректнее.

Рекомендуется реализовать подобную проверку в штатном шаблоне решения «Аспро: Максимум», чтобы пустые реальные характеристики автоматически исключались из HTML во всех карточках товаров.

Логин:
Пароль:
	Запомнить меня

Регистрация
Забыли свой пароль?