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

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

Темы, размещенные на сервере, имеют специфический URL адрес. Он хранится в переменной {$_theme_home}. Кроме этого, все файлы темы хранятся в папке tpl. Таким образом, чтобы указать путь к файлу, который мы загрузили в редакторе, нужно добавить к его адресу «{$_theme_home}tpl/». Например:

<link rel="stylesheet" href="{$_theme_home}tpl/assets/css/bootstrap.css">
<script src="{$_theme_home}tpl/assets/javascript/bootstrap.min.js"></script>

Порядок подключения стилей и скриптов

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

Рекомендуется подключать стили и скрипты в следующем порядке.

1. Общие стили платформы. Они собраны в единый файл

<link rel="stylesheet" type="text/css" href="{$_static_url}common.css">

2. Стили темы.

Таким образом, стили темы могут переопределять общие стили платформы.

3. Стили для переопределения стандартных стилей темы

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

4. Основные скрипты темы

Важно, чтобы была библиотека jQuery, допустимо использование в режиме noConflict().

5. Общие скрипты платформы

Если в шаблоне подключена библиотека jQuery версии 1.8 и выше, то нужно дополнительно подкючить библиотеку jquery-migrate-1.2.1.min.js.

6. Стили и коды дополнительных модулей в шапке

Они берутся из общих шаблонов, подключаются в файле:

{include file="layouts/head_modules.tpl"}

7. Свои скрипты для переопределения стандартных и создания новых

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

8. Стили и скрипты из панели администратора

У администратора есть возможность добавить свои стили и скрипты только для своего магазина, переопределив любые вышеуказанные. Для этого нужно добавить в шаблон переменную {$_jscss}.

Пример подключения стилей и скриптов

<head>
	{* 1. Общая шапка с мета-тегами *}
	{include file="layouts/head.tpl"}

	{* 2. Общие стили платформы *}
	<link rel="stylesheet" type="text/css" href="{$_static_url}common.css">

	{* 3. Стили темы *}
	<!-- Шрифты -->
	<link href="https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i&subset=cyrillic,cyrillic-ext" rel="stylesheet">

	<!-- Стили -->
	<link rel="stylesheet" href="{$_theme_home}tpl/assets/css/bootstrap.css">
	<link rel="stylesheet" href="{$_theme_home}tpl/assets/css/font-awesome.min.css">
	<link rel="stylesheet" href="{$_theme_home}tpl/assets/css/style.css">
	<!--[if lt IE 9]>
		<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
		<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
		<link rel='stylesheet' href="{$_theme_home}tpl/assets/css/ie/ie8.css">
	<![endif]-->

	{* 4. Пример подключения стилей, в зависимости от выбранной цветовой схемы в настройке темы *}
	{if !empty($_skin.global.theme)}
		{* <link rel="stylesheet" href="{$_theme_home}tpl/assets/css/color-{$_skin.global.theme}.css"> *}
	{else}
		{* <link rel="stylesheet" href="{$_theme_home}tpl/assets/css/color-default.css"> *}
	{/if}


	{* 5. Стили для переопределения стандартных стилей темы. Вместо редактирования исходников темы. *}
	<link rel="stylesheet" type="text/css" href="{$_theme_home}tpl/assets/css/styles-add.css">


	{* 6. Основные скрипты темы. Важно наличие jQuery *}
	<script src="{$_theme_home}tpl/assets/javascript/jquery-1.9.1.min.js"></script>
	<script src="{$_theme_home}tpl/assets/javascript/jquery-ui.min.js"></script>
	<script src="{$_theme_home}tpl/assets/javascript/bootstrap.min.js"></script>
	<script src="{$_theme_home}tpl/assets/javascript/main.js"></script>

	{* 7. Общие скрипты платформы.
		Если выше подключена библиотека jQuery > 1.8,
		то нужна дополнительная библиотека jquery-migrate-1.2.1.min.js *}
	<script type="text/javascript" src="{$_static_url}jquery/jquery-migrate-1.2.1.min.js"></script>
	<script type="text/javascript" src="{$_static_url}digistr.js"></script>

	{* 8. Стили и коды дополнительных модулей в шапке. По умолчанию берется из папки layouts общих шаблонов. *}
	{include file="layouts/head_modules.tpl"}

	{* 9. Скрипты для переопределения стандартных и создания новых скриптов темы и платформы. Вместо редактирования исходников. *}
	<script type="text/javascript" src="{$_theme_home}tpl/assets/javascript/scripts-add.js"></script>

	{* 10. Стили и скрипты из админки *}
	{$_jscss}
</head>

Содержимое подключаемого файла head.tpl

{* Кодировка *}
<meta charset="utf-8">
{* Title, ключевые слова и описания *}
<title>{$document.MetaTag.title|default:$document.Tree.title|default:$document.Tree.name}</title>
<meta name="keywords" content="{$document.MetaTag.keywords|default:$document.Tree.keywords|default:$document.Tree.name}">
<meta name="description" content="{$document.MetaTag.description|default:$document.Tree.description|default:$document.Tree.name}">
{* Favicon из настройки сайта *}
<link rel="icon" href="{if !empty($_params.favicon)}{$_params.favicon}{else}/favicon.ico{/if}">
<link rel="shortcut icon" href="{if !empty($_params.favicon)}{$_params.favicon}{else}/favicon.ico{/if}">
<meta name="author" content="Digistr.ru">
<meta class="viewport" name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta name="robots" content="INDEX,FOLLOW" />
{* Дополнительные теги, генерируемые платформой и редактируемые администратором сайта *}
{$meta_tags}

Попробуйте 14 дней все бесплатно