Здравствуйте, Друзья!
Помогите советом, понимаю что задачка пустяковая, но решить не могу уже второй день. в js не сильно силен к сожалению.
Задача такая,
Есть сайт одностраничный на битриксе, на нем есть блок товары, в виде карусели, в блок соответственно товары подгружаются из инфоблока.
У товара есть свойства:
- Название
- Детальная картинка
- Описание (Возможно в html)
- Дополнительные картинки
- Цена
в карусели выводится превью_картинка, название, цена и анонс описания.
Если щелкнуть по товару появляется попап-окно с детальной информацией о товаре и формой заказа.
В нем выводится:
- Название
- Все картинки
- Полное описание (Возможно в html)
- Цена
- Форма заказа
Естественно для каждого товара попап отдельный не будешь делать, потому все значения в него подгружаются при нажатии на товар.
Сделать я решил так:
Для каждого товара, при генерации страницы, генерируется ассоциативный массив (объект) в js, а при нажатии на товар этот массив передается функции которая осуществляет подмену в попап окошке.
выглядит в коде это вот так:
<script>
var good_<?=$arElement["ID"];?> = {
name: '<?=$arElement["NAME"];?>',
price: '<?=$arElement["PROPERTIES"]["CATALOG_PRICE"]["VALUE"]?><?=$arElement["PROPERTIES"]["CATALOG_VALUTA"]["VALUE"]?>',
photo: {
0: '<?=$arElement["DETAIL_PICTURE"]["SRC"];?>',
<?for($i = 1; $i< count($arElement["PROPERTIES"]["CATALOG_PHOTO"]["VALUE"])+1; $i++){?>
<?=$i;?>: '<?=CFile::GetPath($arElement["PROPERTIES"]["CATALOG_PHOTO"]["VALUE"][$i-1]);?>',
<?}?>
}
text: '<?=htmlspecialchars($arElement["PREVIEW_TEXT"]);?>',
}
</script>
<button class="btn btn-class btn-block" data-toggle="modal" data-target="#goodsModal" onclick="goods_modal(good_<?=$arElement["ID"];?>)">Подробнее</button>
в отдаче сервера вот так:
<script>
var good_18 = {
name: 'Тестовый товар',
price: '100руб.',
photo: {
0: '/upload/iblock/7ce/12.jpg',
1: '/upload/iblock/e18/1.jpg',
}
text: 'text text text text text text text text text text text ',
}
</script>
<button class="btn btn-class btn-block" data-toggle="modal" data-target="#goodsModal" onclick="goods_modal(good_18)">Подробнее</button>
Проблема возникает если Описание товара представлено в виде html.
Оно передается в элемент text массива. Если значение в виде простого текста, как в примере выше (text: 'text text text text text text text text text text text '), то все работает значение передается, но если значение в виде кода html, например:
text text text</br>
text text text</br>
text text text
то js выдает ошибку при составлении такого массива. т.е. при попытке передачи массива функции (onclick="goods_modal(good_18)") вылетает ошибка: Uncaught ReferenceError: good_18 is not defined, ну и соответственно ничего не передается и не меняется.
Сначала думал что нужно подменить спецсимволы на код, потому вставил в исходный код htmlspecialchars, но и это не помогло
Вот как то так, помогите, пожалуйста, разобраться, а то всю голову уже сломал, почему не "клеится"...
