В первой части данного урока, я рассказывал о том, как вывести в карточке товара vamshop, список всех товаров, находящихся в той же категории. Сейчас я расскажу как этот список немного облагородить и вывести его в виде слайдера.
Для начала скачиваем скрипт elastislide. В сети его найти не проблема и уроков по его установке тоже много. Однако, раз найдя его и успешно установив на один из своих проектов, впоследствии я сталкивался со сложностями его инициализации. Почему-то, всё, что я скачивал и пытался установить позднее, отказывалось работать. Поэтому я выкладываю свой архив с заведомо работоспособным скриптом. И рассказываю как установить его, применительно именно к vamshop, потому что на разных CMS работоспособными оказываются несколько разные варианты кода.
Итак, скачиваем архив Elastislide. В нём две папки. Содержимое папки jscript, закачивайте в одноимённую папку jscript, находящуюся в корне вашего магазина vamshop. Содержимое папки images, закачивайте в одноимённую папку вашей темы оформления. У меня это templates/vamshop1/images
После этого, мы будем править файлы движка. Не забывайте, как всегда, делать резервную копию.
Для начала, открываем файл includes/application_bottom.php
В самом конце файла, перед:
|
1 |
< ?php }?> |
Вставьте код:
|
1 2 3 4 5 6 7 8 9 10 |
<script type="text/javascript" src="jscript/jquery.easing.1.3.js"></script> <script type="text/javascript" src="jscript/jquery.elastislide.js"></script> <script type="text/javascript"> $('#carousel').elastislide({ imageW : 150, minItems : 1 }); </script> |
Далее открываем файл stylesheet.css нашей темы оформления и добавляем в него (в любом месте, но лучше в конец):
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
/* Elastislide Style */ .es-carousel-wrapper{ background: transparent; padding:10px 30px; position:relative; } .es-carousel{ overflow:hidden; background: transparent; } .es-carousel ul{ display:none; } .es-carousel ul li{ height:100%; float:left; display:block; margin: 0 5px; } .es-carousel ul li a{ display:block; } .es-carousel ul li a img{ display:block; border:none; max-height:100%; max-width:100%; } .es-nav span{ position:absolute; top:50%; left:12px; background:transparent url('images/nav.png') no-repeat top left; width:14px; height:26px; margin-top:-13px; text-indent:-9000px; cursor:pointer; opacity:0.8; } .es-nav span.es-nav-next{ right:12px; left:auto; background-position:top right; } .es-nav span:hover{ opacity:1.0; } .also img { width: 150px; height: 150px; } |
Далее мы открываем файл карточки товара в нашей теме оформления. У меня это templates\vamshop1\module\product_info\product_info_v1.html
И находим там метку, которую мы вставляли туда в первой части урока. Вот эту:
- {$XPRODUCTS_LIST}
Заменяем этот код на:
Другие изделия в этой рубрике
- {$XPRODUCTS_LIST}
Сохраняем все правки, которые сделали и наслаждаемся результатом!
Пример того, что у меня получилось и должно получиться у вас тоже, можно посмотреть здесь
Меня зовут Алексей, мне 39 лет, и вот уже десять лет как одним из моих многочисленных увлечений стало создание и продвижение сайтов. Подчёркиваю, что это именно хобби, а не основная моя работа. Тем не менее, я никогда не упускал возможности заработать на своих увлечениях. На страницах этого сайта, вы найдёте как множество моих наработок в сфере сайтостроения, так и полезную информацию о продвижении готовых сайтов. Если вы любознательны и любите узнавать новое, мои рекомендации помогут вам освоиться в непростом деле создания сайтов и их продвижения. Ну а если вы слишком далеки от html, css и прочих web-штучек, вы всегда можете воспользоваться моими услугами как вебразработчика, так и сеошника. Желаю Вам с пользой провести время на моём сайте!