Многие, наверное, замечали такую прикольную фишку в топовых интернет-магазинах, как возможность быстрого просмотра товара (превью) в категории магазина без перехода в карточку товара.
Это может быть очень удобно для покупателей, ведь не нужно переходить на другую страницу чтобы узнать больше о товаре. Покупатель сможет рассматривать детально ассортимент продукции непосредственно в категории.
Для того, чтобы реализовать это в магазине JoomShopping, нам потребуются файлы шаблона, а для всплывающего окна будем использовать fancybox.
Итак, приступим к пошаговой реализации:
Загружаем fancybox (ссылка прямая!)
2. Из архива достаем:
jquery.fancybox.pack.js кидаем в /templates/ваш_шаблон/js/
jquery.fancybox.css и картинки (blank.gif, fancybox_loading.gif, fancybox_sprite.png) в /templates/ваш_шаблон/css/
(в принципе кидать вы можете куда угодно, хоть в корень, только помните про пути :-))
3. Если шаблоны Joomshoppinga не переопределены, то переопределяем.
Папку /components/com_jshopping/templates/default/ переименовать в com_jshopping и положить в /templates/ваш_шаблон/html/* (это требуется сделать, чтобы после обновления компонента не потерять наши правки в шаблонах)
4. Создаем файл js.js, с таким содержимым
jQuery(document).ready(function(){
var ajlinks = jQuery('.vip-module a');
jQuery(ajlinks).each(function(idx,el){
var oldhref = jQuery(el).attr('href');
jQuery(el).attr('href', oldhref+'?ajcom=shop');
});
jQuery(ajlinks).fancybox({
maxWidth: 800,
maxHeight: 600,
fitToView: false,
width: '70%',
height: '70%',
autoSize: false,
closeClick: false,
openEffect: 'none',
closeEffect: 'none'
});
});
5. Теперь идем в index.php вашего шаблона, подключаем скрипты в
После закрывающегося тега вставляем
В самом конце перед