В первой части данного урока, я рассказывал о том, как вывести в карточке товара vamshop, список всех товаров, находящихся в той же категории. Сейчас я расскажу как этот список немного облагородить и вывести его в виде слайдера.
Для начала скачиваем скрипт elastislide. В сети его найти не проблема и уроков по его установке тоже много. Однако, раз найдя его и успешно установив на один из своих проектов, впоследствии я сталкивался со сложностями его инициализации. Почему-то, всё, что я скачивал и пытался установить позднее, отказывалось работать. Поэтому я выкладываю свой архив с заведомо работоспособным скриптом. И рассказываю как установить его, применительно именно к vamshop, потому что на разных CMS работоспособными оказываются несколько разные варианты кода.
Итак, скачиваем архив Elastislide. В нём две папки. Содержимое папки jscript, закачивайте в одноимённую папку jscript, находящуюся в корне вашего магазина vamshop. Содержимое папки images, закачивайте в одноимённую папку вашей темы оформления. У меня это templates/vamshop1/images
После этого, мы будем править файлы движка. Не забывайте, как всегда, делать резервную копию.
Для начала, открываем файл includes/application_bottom.php
В самом конце файла, перед:
< ?php }?>
Вставьте код:
Далее открываем файл stylesheet.css нашей темы оформления и добавляем в него (в любом месте, но лучше в конец):
/* 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}
Сохраняем все правки, которые сделали и наслаждаемся результатом!
Пример того, что у меня получилось и должно получиться у вас тоже, можно посмотреть здесь