16.01.2017      613      0
 

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

В первой части данного урока, я рассказывал о том, как вывести в карточке товара vamshop,…


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

 

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

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

 

 

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

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


Об авторе: Алексей

Меня зовут Алексей, мне 39 лет, и вот уже десять лет как одним из моих многочисленных увлечений стало создание и продвижение сайтов. Подчёркиваю, что это именно хобби, а не основная моя работа. Тем не менее, я никогда не упускал возможности заработать на своих увлечениях. На страницах этого сайта, вы найдёте как множество моих наработок в сфере сайтостроения, так и полезную информацию о продвижении готовых сайтов. Если вы любознательны и любите узнавать новое, мои рекомендации помогут вам освоиться в непростом деле создания сайтов и их продвижения. Ну а если вы слишком далеки от html, css и прочих web-штучек, вы всегда можете воспользоваться моими услугами как вебразработчика, так и сеошника. Желаю Вам с пользой провести время на моём сайте!

Ваш комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Для отправки комментария, поставьте отметку, что разрешаете сбор и обработку ваших персональных данных . Политика конфиденциальности