Vamsop Переключение css стилей
C помощью библиотеки jQuery и css стилей можно сделать переключение внешнего вида магазина "на лету", внешний вид будет переключаться моментально, без каких-либо перезагрузок страницы.
Пример на http://demo.vamhost.ru/, по центру, выберите один из стилей (default,style1,light,helius).
Библиотека jQuery, уже установлена в VaM Shop по умолчанию и модуль styleswitch.
Скачиваем файл styleswitch.js и переписываем его в папку магазина /jscript/jquery/plugins
Скачиваем или создаем стили.
Переименовываем файлы стилей stylesheet.css в другие названия, что б имена файлов не повторялись.
Примерно
Стиль 1: style1.css
Стиль 2: style2.css
Стиль 3: style3.css
Стиль стиль1:
Ложим стили в папку с шаблоном (наприер /templates/vamshop/... )
Вариант 1 (если наш стиль полностью меняется):
Открываем файл /includes/header.php и ищем следующую строку:
<link rel="stylesheet" type="text/css" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/stylesheet.css'; ?>" />
Меняем данную строку на:
<link rel="stylesheet" type="text/css" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/stylesheet.css'; ?>" title="default" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/style1.css'; ?>" title="style1" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/style2.css'; ?>" title="style2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/style3.css'; ?>" title="style3" media="screen" />
<script type="text/javascript" src="jscript/jquery/jquery.js"></script>
<script type="text/javascript" src="jscript/jquery/plugins/styleswitch.js"></script>
Вариант 2 (если стиль только какого то блока меняется (например выводить товар не в одну колонку а в несколько))
из основного стиля в stylesheet.css убираем стиль блока который будет менятся
в style1 его копируем , в style2...3 стиль этого блока в других вариантах.
Открываем файл /includes/header.php и ищем следующую строку:
<link rel="stylesheet" type="text/css" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/stylesheet.css'; ?>" />
Добавляем после строки:
<link rel="stylesheet" type="text/css" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/style1.css'; ?>" title="default" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/style2.css'; ?>" title="style2" media="screen" />
<link rel="alternate stylesheet" type="text/css" href="<?php echo 'templates/'.CURRENT_TEMPLATE.'/style3.css'; ?>" title="style3" media="screen" />
<script type="text/javascript" src="jscript/jquery/jquery.js"></script>
Открываем файл в папке с шаблона index.html и добавляем ссылки на смену стиля в предпологаемых местах:
<p>Выберите стиль:</p>
<ul>
<li><a href="?style=style1" rel="style1" class="styleswitch">style1</a></li>
<li><a href="?style=style2" rel="style2" class="styleswitch">style2</a></li>
<li><a href="?style=style3" rel="style3" class="styleswitch">style3</a></li>
</ul>
Всё.