Vam Shop: переключение css стилей - Шаблоны VamShop
У нас Vam Shop стоит дешевле на 25%
Ваша корзинаВ корзине: 0 товар(ов).
Продвижение сайта собственным контентом
Информация
Уточните все вопросы и сделайте заказ:
E-mail: monamurs@gmail.com
ICQ: 5864444
Мой статусSkype: lifemakeroff
Способы оплаты:
Webmoney,
Money.Yandex,
QIWI,
карта Сбербанка РФ,
Paypal,
а также системы переводов: Контакт, Анелик, Аллюр, Western Union.
Шаблоны для интернет-магазинов. Нами украшено более 400 магазинов!
Отзывы more
Шаблон VamShop
19 апреля 2012 tverecoplast написал отзыв: большое спасибо, все четко и оперативно. [...]

5 из 5 звёзд!

Vam Shop: переключение css стилей

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

Пример на 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">style1</a></li>
<li><a href="?style=style2" rel="style2">style2</a></li>
<li><a href="?style=style3" rel="style3">style3</a></li>
 </ul>

Всё.

источник

Просмотров: 2694

Дата: Вторник, 24 Мая 2011