О Битрикс

"Быстрый просмотр" карточки товара

"Быстрый просмотр" карточки товара"Быстрый просмотр" карточки товара Битрикс с использованием модального окна bootstrap. В шаблоне компонента элементов раздела catalog.section.

Подключение стилей и скриптов в шаблоне компонента:

<?$APPLICATION->SetAdditionalCSS($templateFolder.'/css/bootstrap.css');
$this->addExternalJs("/bitrix/js/main/jquery/jquery-2.1.3.min.js");
$APPLICATION->AddHeadScript($templateFolder.'/js/bootstrap.js');
?>

Кнопка открытия модального окна:

<button type="button" class="btn btn-primary"
data-toggle="modal"
data-target="#exampleModal"
data-name="<?=$arElement["NAME"]?>"
data-text="<?=$arElement["DETAIL_TEXT"]?>"
data-price="<?=$arElement["DISPLAY_PROPERTIES"]["PRICE"]["DISPLAY_VALUE"]?>"
data-img="<?=$arElement["DETAIL_PICTURE"]["SRC"]?>"
data-link="<?=$arElement["DETAIL_PAGE_URL"]?>">
Быстрый просмотр
</button>

Верстка модального окна:

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"><div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<div class="col-sm-12">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 class="modal-title" id="exampleModalLabel">New message</h4>
</div>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-4">
<div class="modal-img">
</div>
</div>
<div class="col-sm-8">
<div class="modal-text">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-sm-6">
<div class="modal-price">
</div>
</div>
<div class="col-sm-6">
<div class="modal-link">
</div>
</div>
</div>
</div>
</div>
</div>

Скрипт для формирования содержимого модального окна:

<script>
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var name = button.data('name'),
text = button.data('text'),
img = button.data('img'),
link = button.data('link'),
price = button.data('price');
var modal = $(this);
modal.find('.modal-title').text(name);
modal.find('.modal-img').html("<img src='"+img+"'/>");
modal.find('.modal-text').html(text);
modal.find('.modal-price').text("Цена: " + price);
modal.find('.modal-link').html("<a class='btn btn-primary' href='" + link + "'>Подробнее</a>");
})
</script>

Более подробно в формате видео:


сайт на Bitrix

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

Социальные сети

Рандом новостей