Делаем из списка товаров категории слайдер товаров категории

В первой части данного урока, я рассказывал о том, как вывести в карточке товара 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}

 

Заменяем этот код на:

Другие изделия в этой рубрике

 

 

Сохраняем все правки, которые сделали и наслаждаемся результатом!

Пример того, что у меня получилось и должно получиться у вас тоже, можно посмотреть здесь

---