Почему тег script ломает верстку?

Question

[danforth]

Всем привет!

Есть список товаров, все они перебираются в цикле. Мне нужно в цикле вставить inline-script который будет отправлять статистику в Google Analytics.
Когда вставляю тег script, то верстка ломается.
Пробовал вставлять в другие места - было ещё хуже (по два товара в ряд).
Ломают следующие вставки:

<script type="text/javascript">
    var categoryName = '{$list_name}';
</script>

<script type="text/javascript">
                ga('ec:addImpression', {
                  'id': '{$p.id}',
                  'name': '{$p.name|escape}',
                  'category': 'Apparel/T-Shirts',
                  'brand': 'Google',
                  'variant': 'Black',
                  'list': categoryName,
                  'position': '{$cnt}',
                });
            </script>

Comments

[Ярослав Иванов]

Ковырянием понял, что если после этого блока стоит даже пустой тег скрипт то верстка едет.

<div class="product-list products_view_grid per_row_4  clearfix" data-per-row="4">
<script></script>

[Ярослав Иванов]

Второй блок с ga('ec:addImpression' никак не влияет.

[Ярослав Иванов]

Ощущение, что вставляется некий тег BR.
Как вы присваиваете тег script ? вручную или по циклу ?

[danforth]

Ярослав Иванов: в цикле все вставляется.. есть цикл smarty {foreach $products as $p} и внутри него просто пишу . Это на стороне сервера, в готов html просто появляется тег

[Ярослав Иванов]

danforth: а если вставить после последнего div class="product" ?

[danforth]

Ярослав Иванов: после последнего вставить ещё один?

[Ярослав Иванов]

danforth: Тот убрать а ставить после. Хотя наверное работать не будет.

Answer 1

[axeax]

зачем его вставлять? Лучше сразу в цикле и выполнять

Comments

[danforth]

Не понял вашего вопроса. Затем, чтобы в Analytics передать данные через JS. Вы предлагаете server-side решение данного вопроса? Или вы хотите сказать, что inline-script не выполняется браузером? Там же есть ga(); вызов функции. Он и выполняется. Продолжите ваш ответ, пожалуйста, а то я не понял что вы имеете ввиду.

[axeax]

если конкретно ответить на вопрос, то именно в версии тостер у вас есть prntscr.com/ditx6b.
Касаемо моего ответа: я подумал что эти инлайновые скрипты генерируются js-ом, но судя по всему это происходит на сервере.

[danforth]

axeax: тогда вопрос встречный: как вставка тега script может влиять на поведение clear, ведь обращение идет к каждому n-ному .product. Тег script вообще визуально отсутствует на странице.

[axeax]

prntscr.com/diu6mn слева тостер справа обычная версия. Еще один скрипт ДО начала всех продуктов, в итоге .products_view_grid.per_row_4 .product:nth-child(4n+1) применяется не к тем элементам

[danforth]

axeax: все, понял. Действительно, проблема была в этом, спасибо!