Сергей

Если редакция позволяет - используйте Веб-формы.
Да, можно прямо в element.php комплексного компонента Каталог вставить код вызова компонента Веб-форма. В шаблоне элемента каталога выводите кнопку на отображение веб-формы. Ajax в веб-форме можно включить прописав "AJAX_MODE" => "Y"

Первый способ лучше. Верстать, перемежая все это ковырянием в файлах шаблонов \ админке - занятие не из приятных. Постоянно приходится отвлекаться - то подключить что-то в админке, чтобы посмотреть, как работает новый блок, то еще что-то... а когда фронтенд полностью готов, остается только скопировать код и распихать по шаблонам (поменяв, в случае необходимости, классы). Двойной работы никакой нет.

P.S. К тому же, если использовать jade \ slim при разработке, второй способ может стать серьезным препятствием.

Из кода, у вас

<div class="container">
  <div class="row">
    <div class="col-md-12"></div>
   </div>
</div>
<div class="container">
  <div class="row">
       <div class="col-md-8"></div>
  </div>
</div>
<div class="col-md-4"></div>
<div class="container">
  <div class="row">
    <div class="col-md-12"></div>
   </div>
</div>

Как должно быть

<div class="container">
  <div class="row">
    <div class="col-md-12"></div>
   </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-8"></div>
    <div class="col-md-4"></div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="col-md-12"></div>
   </div>
</div>

Я всегда делаю полную верстку сначала, с адаптивностью (если требуется).
При этом сразу применяю какие-то вещи, с которыми будет удобно работать в дальнейшем при интеграции (если знаю, на какую систему надо интегрировать).
Потом, в ходе интеграции уже не отвлекаюсь на стили, а занимаюсь только backend / front JS.

webdesign-master.ru