Такой функционал довольно часто встречается в интернет магазинах, значит многим будет интересно реализация данной «фишки». Суть очень проста — при скроллинге страницы, меню, находящееся слева будет указывать в какой категории Вы находитесь.
Реализовать данный функционал можно и на стандартном шаблоне virtuemart 2, но, я привык не использовать шаблоны а писать все с 0.
Для начала определимся с расположением блоков. Сейчас сайт выглядит вот так:
Теперь нам нужно выделить подобласти для каждой марки часов. Большой и маленький заголовки…
В области слева, мы расположим логотипы часов вертикально в таком же порядке, как и расположены подобласти с часами одинаковой марки.
Определимся, что все логотипы в колонке слева, будут светло серого цвета. Но когда в центре экрана (проскролив) оказывается подобласть брейтлингов, например, то логотип брейтлинг становится черным. То же самое со всеми другими логотипами.
Эта колонка с логотипами плавно перемещается всегда с левой стороны экрана.
Кроме того, нажав на любой логотип из колонки, страница плавно переезжает так чтобы в центре оказывались часы такой марки, которая была нажата.
Создание позиций и модулей в шаблоне
Для того, что бы создать новую позицию в шаблоне переходим по пути (templates/ВашШаблон/index.php) и в нужном нам месте прописываем новую позицию, например
<div id=»breatl»><jdoc:include type=»modules» name=»breatl» /></div> — для часов Breitling, то же самое проделываем для оставшихся категорий.
Далее ищем файл templateDetails.xml и указываем в нем новую позицию, к примеру
<position>breatl</position> — для часов Breitling, то же самое проделываем для оставшихся категорий.
Далее заходим в административную панель Joomla 2.5, переходим в модули и создаем модуль «VirtueMart Товары» с такими же настройками
Тоже самое проделываем и для остальных категорий.
В итоге у нас должно получиться:
Создаем меню с абсолютный позиционированием
Создаем модуль «произвольный HTML код», куда мы прописываем меню для скроллинга
В итоге у нас получается
Далее вновь создаем позицию в шаблоне в index.php и templateDetails.xml и выводим модуль на «Главной».
Внимание! При создании модуля с меню поставим в дополнительный настройках — Суффикс CSS-класса модуля — absol
Прописываем стили для меню
Где .top-menu li a img — ширина изображения логотипа бренда, а .brendi — непосредственно сама позиция модуля.
Теперь сделаем так, что бы при скроллинге меню следовало за нами. Для этого напишем вот такой скрипт и поместим его в head в файл index.php
Переходы при скроллинге
В завершении создаем эффект перехода от пункта меню к пункту и плавным переходом. Для этого воспользуемся плагинами:
jquery.superscrollorama.js — скачать можно тут
jquery.singlePageNav.min.js — скачать можно тут
Подключаем их в head в файле index.html, и перед закрывающимся тегом пишем:
<script>
if ( ! window.console ) console = { log: function(){} };
$(‘.top-menu’).singlePageNav({
offset: $(‘.top-menu’).outerHeight(),
filter: ‘:not(.external)’,
updateHash: true,
beforeStart: function() {
console.log(‘begin scrolling’);
},
onComplete: function() {
console.log(‘done scrolling’);
}
});
</script>
В итоге получаем вот такой Скроллинг — меню в Virtuemart.
Если есть вопросы, задавайте, буду рад помочь!
