Собственные скрипты и скрипты сервисов можно вставлять в несколько мест:
- В приложении сайт –> настройки –> поле "Пользовательский JavaScript-код внутри <head>";
- В Блок приложения сайт с ID prostore.footer;
- В Блок приложения сайт с ID prostore.scripts
Каждый вариант обладает своими особенностями, которые нужно учитывать.
Рассмотрим первый вариант.
Пользовательский JavaScript-код внутри <head>
Туда нужно вставлять скрипты, которые требуют, чтобы их разместили в теге <head> сайта.
Этот тег идёт до тега <body>.
Туда же кстати, нужно вставлять и всякие <meta> теги, например различные верификации (подтверждения прав на сайт).
Данным полем удобно пользоваться!
Ведь даже при смене дизайна, скрипты из этого поля будут появляться даже в новом дизайне.
Важная особенность!
В теге <head> позволено размещать только теги <script>, <meta> и <style>.
Например, если вы разместите в данном поле код Яндекс.Метрики, который она предлагает по умолчанию, он будет работать, но валидатор будет ругаться на то, что у вас тег <div> размещён в теге <head>, а это не позволительно.
Однако, я разместил метрику именно в этом поле.
Есть пара хитростей! =)
Когда будете генерировать код метрики, отметьте дополнительно эти галочки: "Ассинхронный код" (не блокирует загрузку и не снижает скорость), и "Для XML сайтов" (избавляет от ошибок в валидаторе), "В одну строку" (удобно и уменьшен объём)
Ставить остальные галочки или нет – это уже решать вам!
У меня код выглядит так:
Если вы хотите разместить Метрику с Информером (изображение с количеством визитов сайта), то в данное поле я уже не рекомендую вам размещать код метрики.
Для этих целей подойдёт блок приложения Сайт с ID prostore.footer
Используйте {literal}
Прежде чем перейти к самим блокам, хочу вам дать одно предостережение-совет:
Всегда оборачивайте код скриптов, который вы вставляете в блоки smarty-тегом {literal}.
Иначе если в скрипте после фигурной скобки не будет вставлен пробел, это вызовет фатальную ошибку, и сайт не будет открываться. Вот как выглядит обёрнутый {literal}'ом код:
Если вы вставляете код через поле
Дополнительный JavaScript-код для вставки перед закрывающим тегом </head>
в настройках приложения Сайт, то его не нужно оборачивать тегами {literal}.
Блок prostore.footer
Физически этот блок размещается в подвале сайта, с правой стороны. Он в сетке, то есть информация, которая выводится в нём, размещается "вписываясь" в дизайн.
В данный блок хорошо размещать раз различные информеры метрики и/или других сервисов учёта посетителей.
Блок prostore.scripts
Этот блок физически размещён перед закрывающим тегом </body>.
Информация в нём размещается вне сетки, поэтому там лучше размещать "невидимые" скрипты, либо те скрипты, которые сами формируют свой контент. Например код сервисов чатов или отзывов (типа jivo или reformal).
В этот блок, также, следует размещать коды сервисов, которые пишут, что их код должен быть размещён перед закрывающим тегом </body>.
16 комментариев
Добрый день. Куда лучше поставить код виджета mssg.me ? Спасибо
Ольга, согласно рекомендациям на сайте mssg.me скрипт виджета должен быть подключен до закрывающего тега </body>.
Таким образом, вы можете разместить его в любом месте, описанном в данной статье.
Отличный сервис, единственное можно ли размещение виджета управлять? В нашей теме он либо закрывает корзину либо в мобильной версии закрывает боковую кнопку и кнопки нижней панели, может есть возможность как то встроить в нижнюю панель?
Или как вариант чисто для мобильной версии сделать кнопку по центру
Можно попробовать переписать стили виджета в блоке prostore.user_css:
#mssg_widget_iframe { bottom: 0px !important; right: 0px !important; }Нули заменить на своё значение.
Как в моем случае будет выглядеть правка в user_css чтобы кнопка всегда была слева от корзины (а не на корзине)?
Если код виджета
<!-- webim button generation date: 2018-10-15 version: 9.1.56 --> <a class="webim_button" href="#" rel="webim"><img src="https://dudukaru.webim.ru/button.php" border="0"/></a> <script type="text/javascript"> webim = { accountName: "dudukaru", domain: "dudukaru.webim.ru" }; (function () { var s = document.createElement("script"); s.type = "text/javascript"; s.src = "https://dudukaru.webim.ru/js/button.js"; document.getElementsByTagName("head")[0].appendChild(s); })(); </script> <!-- /webim button -->В вашем случае нужно обратиться к провайдеру онлайн чата с подобным вопросом.
Я попробовал её влево перенести, но она почему-то переносится с отступом от левого края пекселей в 100.
Не хочется костылить. Возможно, у провайдера чата есть готовое решение.
Спасибо большое, получилось :)
К сожалению, не выходит его адаптировать нормально)
Хотел его разместить над кнопкой вверх, но на мобильной версии в портретной норм, в ландшафтной в середине, на пк в середине)
Добрый день. Разместил скрипт верификации, сделал как указано внутри тега {Literal}.
В итоге на всех страницах сайта вышло
Убрал тег {Literal}, все исчезло. Фатальной ошибки нет. В статье информация устарела или что-то не так сделал или понял?
ясно, но я убрал тег, а критической ошибки все же нет. Тут индивидуально или все же что-то изменилось?
Михаил, вы были правы!
Код, который вставляется через поле настроек приложения Сайт, не нужно оборачивать тегом {literal}
Код из этого поля и так экранируется.
Если бы {smarty} не экранировался, то вместо {$wa_app_url} должен был появится урл магазина.
Сейчас поправлю инструкцию.
Отлично, разобрались
вставил информер метрики, но он выводится не так, как указано у вас, а левее:
как бы его сдвинуть вправо, или под кнопки соцсетей, или рядом с кнопкой "вверх"?
Самое простое – это добавить ссылке (тегу <a>) информера атрибут:
Глупый наверное вопрос, а как его добавлять? информер? В код блоке prostore.footer?
сдвигает только текст " Positive SSL
причем банер отзывов яндекса, встает себе вполне нормально справа.
<script language="JavaScript" type="text/javascript"> TrustLogo("http://www.cameronsino.ru/wa-data/public/site/comodo_secure_seal_76x26_transp.png", "CL1", "none"); </script> <a style="float:right; margin-right: 150px;" href="https://www.positivessl.com/" id="comodoTL">Positive SSL</a>Информер и счётчик у яндекса – это разные вещи.
Убедитесь, что вы вставляете действительно информер яндекса.