Меню

Как подключить скрипт в битрикс

Как правильно подключить jQuery

Содержание

Сжатый или несжатый jQuery

jQuery доступна для скачивания в двух вариантах:

Подключать на сайте нужно конечно сжатый вариант, т.к. он меньше размером, это экономит трафик и быстрее грузится клиентами.

Версии jQuery

Разница в версиях конечно же есть, последняя версия стала меньше размером, устаревшие функции удалены, с версии 2.x убрали и поддержку устаревших браузеров IE 6-8, сейчас jQuery поддерживает Internet Explorer 9+.

Если вы решили перейти с одной версии на другую, проблемы скорее всего возникнут, какие-то устаревшие методы придется искать в шаблоне и заменять на новые, если вы в этом понимаете, тогда все решаемо, иначе вам в помощь есть jQuery Migrate Plugin, но лучше конечно в шаблоне все переписать, что-то дополнительное подключать вообще не желательно, это все замедляет открытие страницы клиентом.

Загрузка jQuery

Скачивайте jQuery только с официального сайта, на странице скачивания будут только последние актуальные версии, в сжатом и несжатом виде, если вам нужна другая версия, тогда либо jQuery CDN, либо jQuery Core, либо Github.

Но тут у вас может возникнуть вопрос, что будет лучше:

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

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

Но тут не все так красиво, как кажется, минусов гораздо больше и они очень важны для вашего сайта, в данном случае CDN сервер может висеть или даже не работать, в этом случае на вашем сайте все будет тормозить или даже не работать, а также удаленный CDN сервер могут взломать и заразить библиотеку, в этом случае ваш сайт может быть заражен через нее, а также все его посетители, зараза она такая, распространяется мгновенно, таким способом могут красть персональные данные ваших посетителей, их куки, делать различные редиректы на другие ресурсы при определенных условиях и т.д.

Также я наслышан о псевдо супер скорости CDN, которую еще ни на одном сайте не видел, возможно если вы за границей живете и там открываете сайт, или HDD-диск на вашем сервере уже на последнем издохе, то да, ближайшие к вам серверы отдают статику быстро, я лично в Новосибирске, и все сайты клиентов, которые приходили ко мне с включенным CDN, ужасно тормозили и открывались даже по несколько минут, вся эта скорость зависит от местоположения, про это говорят многие разработчики, не только я один, так что, в России про эту сомнительную скорость CDN забудьте, а вот про маркетинг не забывайте.

Лично я подключаю jQuery всегда первым способом, локально на сайте, и вам советую, т.к. всего из-за одного хита рисковать всем сайтом, бизнесом, клиентами не вижу смысла.

Подключение jQuery

Подключение jQuery требует определенных условий, это поможет вам либо разобраться с ошибками, либо избежать их:

А вот отдельно какие-то JS-скрипты не зависящие от jQuery где подключать не важно, может и перед jQuery, может и после, без разницы, они от нее не зависят.

Читайте также:  Как подключить насос через экм

Подключение jQuery в 1С Битрикс

Как подключать jQuery и плагины в старом ядре я уже писал здесь, сегодня рассмотрим как правильно подключить jQuery в новом ядре 1С Битрикс.

Итак, в идеальном мире, когда подключение скриптов контролирует разработчик сайта, а не Битрикс, header.php должен быть примерно таким, т.е. в каком порядке разработчик подключает скрипты и стили, в таком порядке они и должны выводиться.

Но в Битриксе это будет правильно работать до первого установленного модуля из Маркетплейс, в которых используются другие устаревшие методы подключения jQuery и скриптов.

Проблема именно в этих методах, как бы вы не подключали свои скрипты в шаблоне, метод CJSCore::Init() все будет выводить выше хедера и ломать работу скриптов, а также подключать сторонние и две своих встроенные библиотеки jQuery столько раз, сколько встретит на странице, т.е. хоть сколько, хоть тысячу раз.

Я сейчас проверил и даже в новом методе есть проблема, скрипт Hello asset1 будет выводиться после скриптов ядра мимо порядка в шаблоне, т.е. опять перед jQuery в моем хедере, а вот скрипт Hello asset2 отработает нормально, как я в шаблоне определил, но вручную надо задавать его порядок, что опять возня.

Вот обратите внимание

Как убрать другие jQuery

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

Подключаем jQuery правильно!

Решить проблему вывода сторонних плагинов выше jQuery из хедера можно двумя способами, замените вот эту строчку в хедере или закомментируйте

1) Либо вот на эту, также как в старой статье я делал, тоже рабочий вариант с кэшированием

2) Либо вот на эту, это из ядра Битрикса подключит jQuery

Только при таком способе вы избавитесь от проблем с подключением скриптов и плагинов из сторонних модулей, подключенная в вашем шаблоне сайта jQuery всегда будет выводиться первой перед остальными плагинами, но проблема с подключением jQuery также останется, за этим нужно постоянно следить и отключать все лишние jQuery.

Помните, только одна jQuery должна подключаться, либо ваша в шаблоне (вариант 1), либо из ядра Битрикса (вариант 2), все jQuery из сторонних модулей нужно отключать, т.к. они могут вызываться только на одной странице.

Частые проблемы с jQuery на сайтах

1) jQuery не подключена вообще;
2) jQuery подключена раз 5-10, а должна быть подключена только 1 раз;
3) jQuery подключена после вызова jQuery-плагинов, а должна подключаться самой первой;
4) JS-ошибки на странице, после которых весь остальной JS-код и плагины не работают;
5) Версия jQuery не соответствует минимальной по требованию;
6) Подключена переписанная разработчиком jQuery, которая ведет себя не предсказуемо;
7) Подключена кастомная сборка jQuery, часть функций вырезано;

Во всех своих решениях я делаю возможность подключить или отключить jQuery в настройках модуля или компонента, а вот в решениях других разработчиков, к сожалению, такое встретить не всегда удается.

Источник

7 смертных грехов разработки на 1С-Битрикс

1. Изменять все стандартное/Изменять содержимое папки bitrix

Если вы не послушаетесь и дадите слабину хотя бы в одном – можете попрощаться с беззаботным обновлением платформы. А такая необходимость рано или поздно настанет. Не говоря о том, что искать файлы будет сложнее.

Читайте также:  Как подключить усилитель к штатной магнитоле рено флюенс

Для пользовательских модулей/компонентов/шаблонов/обработчиков должна использоваться папка /local/.

2. Получать данные в template.php

Никогда, слышите, никогда не делайте этого! Я говорю о CIBlockElement::GetList (и подобных им функциях) в template.php.

Шаблон должен быть использован только для вывода информации. Ни для чего больше. Если вычисления (получение дополнительных данных, их модификация) находятся в шаблоне, вы становитесь сильно зависимы от порядка выполнения кода.

Допустим, необходимо посчитать общее количество просмотров всех статей на странице и вывести значение. Если вы разместите вычисления в цикле вывода статей, полученное значение можно будет использовать только после последней статьи. Простая задача по переносу блока наверх страницы превратится в ад.

3. Неверное подключение скриптов и стилей сайта

Откройте свой сайт, найдите основной шаблон и откройте файл header.php.

В Битриксе вполне неплохой механизм автоматического объединения и минификации скриптов, кроме того, Битрикс умеет перемещать JS в конец страницы, благодаря чему сайт быстрее грузится. Если кто вдруг не знал, вся эта годнота включается в настройках Главного модуля:

А теперь барабанная дробь. Ничего не получится, если вы подключали скрипты и стили дедовским способом.

Соберите скрипты из шаблона сайта, поместите их в JS файл, а потом подключите его с помощью AddHeadScript().

Тоже самое касается и стилей. Если вам необходимо подключить стили, вынесите их в отдельный файл, а потом используйте SetAdditionalCSS().

В итоге получится нечто похожее:

. или, если вы используете D7, так:

4. Неверное подключение скриптов и стилей компонента

Если с предыдущим пунктом все более-менее просто, исправить эту проблему гораздо сложнее. Давайте разбираться.

Допустим, для главной страницы сайта необходимо разработать слайдер с баннерами. Ок. Что может быть проще.

Но многие разработчики просто помещают css и js в файл template.php шаблона компонента и на этом успокаиваются. Правильным же подходом будет создание файлов script.js и style.css в папке шаблона. Они подключатся автоматически и избавят от головной боли при разработке.

5. Отключение кеширования

Кеширование позволяет значительно снизить нагрузку на БД. Это более остро чувствуется при росте аудитории (и соответственно запросов к БД).

Обычная ситуация: верстальщику не нравится, что изменения стилей отображаются не сразу и он решает отключить кеширование отдельного компонента. Работа кипит, сроки горят и он (верстальщик) просто забывает включить кеширование обратно. Проходит время и страницы сайта начинают грузиться все дольше и дольше.

Мой совет: перед сдачей проекта прогнать сайт через монитор производительности. Он покажет ошибки в разработке и вам не придется искать проблемные компоненты вручную.

6. Вложенные циклы при получении элементов инфоблока

Очень часто при разработке нового компонента возникает необходимость получать данные из двух (или больше) связанных Инфоблоков.

Давайте рассмотрим пример: нужно получить список всех деталей, подходящих ко моделям автомобилей.

Код упрощен для простоты восприятия, матерые разработчики найдут в нем сразу несколько ошибок;)

Суть в чем: чем больше на сайте будет моделей, тем больше будет SQLзапросов с получением данных о запчастях. Более правильным был бы такой вариант:

В этом случае, вне зависимости от количества элементов инфоблока, будет всего 2 SQL запроса: получение моделей и получение деталей. А уже дальше в цикле должна быть проведена работа по распределению деталей на соответственные модели автомобилей.

Читайте также:  Как подключить ps3 к беспроводному интернету

Вообще, подобных ошибок очень много:

Перечислять все ушло бы очень много времени.

7. Бездумная разработка компонентов Bitrix

Не самым лучшим решением будет разрабатывать сайт целиком на самописных компонентах. Мотивация может быть разная: «Стандартный компонент делает слишком мало», «Стандартный компонент делает слишком много», «Шаблон слишком массивный, а в данных не разобраться», «Работает не так как я хочу», «Работает так как я хочу, но не очень».

Почему не стоит делать это? По целому ряду причин:

В общем, прежде чем приступить к созданию очередного компонента, задайте себе вопрос: «А не возникнет ли проблем у Заказчика через год или два?».

Вместо заключения

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

Источник

Подключение jquery из ядра битрикс и объединение своих скриптов в один файл

Если используете большое количество js скриптов на сайте. Например: фансибокс, всяческие галереи и прочее- то таких внешних скриптов может набежать по 10/20 на сайт. Имеет смысл объеденить их в один, для большей скорости загрузки сайта и в принципе для оптимизации. Это, конечно, можно проделать вручную но можно воспользоваться функционалом битрикс.

Данная возможность позволяет автоматически, без заморочек объеденить весь javascript в один файл

Пример на моем сайте

При верстке своего сайта я использовал 5 javascript файлов: фансибокс, табы, карусель контента. В исходной html верстке это выглядело так

Для того, что бы при интеграции с битрикс, автоматически, все эти файлы объеденились в один, сжались и вывелись в head шаблона достаточно подключить их вот так

После этого все ваши js файлы объединяться и сожмутся, что значительно ускорит работу сайта, подгрузку js да и поисковые системы будут рады.

PS: Точно так же, можно объединять подключаемые файлы стилей

Почему то все скрипты начинают срабатывать дважды

Цитата
Fred пишет:
Почему то все скрипты начинают срабатывать дважды

А если отключаете свой

Здравствуйте, Михаил!
У меня вопрос ни могу понять в чем дело, но битрикс не хочет подключать первый подключенный не стандартный шрифт у меня их 6 и причём если меняю местами первый на второй, а второй на первый происходит тоже самое тот что был вторым и стал первым перестаёт работать я уже голову сломал не могу понять.

На сайте также используются и и коночные шрифты font-awesome.css они работаю нормально всё остальные также работают но только если не первыми в очереди.

Не знаю уже что и думать может есть какое то ограничение на количество шрифтов.
Да и ещё пробовал и подключать обычным способом / не помогло тоже кешь сбрасывал и отключал ничего не помогает.

Надеюсь на вашу помощь и хочу сразу сказать если даже не сможете помочь всё равно спасибо за все ваши труды и информацию что вы предоставляете.

Михаил, вообщем я нашёл для себя единственное и по моему правильное решение это подключать эти шрифты отдельным файлом и объединить в один через SetAdditionalCSS это так работает и думаю что правильно но почему не работает когда эти шрифты находятся в template_styles.css непонятно причем я заметил если перед первым шрифтом поставить какой нибудь класс то тоже работает но подумал что это будет не правильно.

Всё большое спасибо ещё раз и жду ваших комментариев.

Источник