Переделываем бокс «Рекомендуемые» в слайдер (VAM shop)

21.02.2010 | Написал

Я надеюсь все представляют, что такое слайдер и видели его на многих веб-сайтах. Для тех, кто не совсем понимает, о чем речь, скажу, что это некий бокс, информация в котором меняется динамически автоскролом либо по нажатию стрелок вперед-назад, вверх-вниз или ссылок-кнопок. Мы будем делать такой слайдер на главной странице магазина с выводом туда рекомендуемого товара.

Для этого я использую plug-in для jQuery под названием codaslider. Скачать его можно, например, тут.

  1. Распаковываем архив и ложим файлы  jquery.coda-slider-2.0.js и jquery.easing.1.3.js в папку jscript/jquery/plugins/codaslider/.
  2. Копируем код css стилей плагина из файла coda-slider-2.0.css начиная с

    /* Most common stuff you'll need to change */

    и до конца в файл стилей нашего шаблона. Для удобства я помещаю в стили бокса «Рекомендуемые», но это не принципиально.

  3. Дальше работаем с самим боксом «Рекомендуемые». Нам понадобится переделанный бокс, выводящий не один, а несколько товаров. Такое решение описано в «Вопросах и ответах» на официальном сайте VAM shop.
    В файл шаблона добавляем код, необходымый для работы слайдера, а именно в файл templates/наш шаблон/boxes/box_featured.html после:

    <div id="boxFeatured">

    добавляем

    <div class="coda-slider-wrapper">
    <div class="coda-slider preload" id="coda-slider-1">

    соответственно перед последним закрывающим тегом

    </div>

    добавляем закрывающие теги тех блоков, которые мы только что добавили:

    </div>
    </div>

    После тега начала цикла

    {foreach name=aussen item=box_content from=$box_content}

    вставляем

    <div class="panel">
    <div class="panel-wrapper">

    соответственно, перед тегом конца цикла

    {/foreach}

    вставляем закрывающие теги:

    </div>
    </div>
  4. Настраиваем стили слайдера в файле стилей (в тех строках, которые мы вставляли), а также самих стилях бокса «Рекомендуемые»
  5. Настраиваем поведение слайдера в файле jquery.coda-slider-2.0.js в районе 16 строки
    $.fn.codaSlider = function(settings) {

    и ниже.

  6. Ставим в нужном месте шаблона index.html метку {$box_FEATURED}. Если слайдер нужно отображать только на главной странице магазина, то создаем копию index.html с именем index.php_.html и ставим метку бокса только в него.
  7. И небольшая вставка в includes/header.php. После
    <script type="text/javascript" src="jscript/jquery/jquery.js"></script>

    добавляем:

    <script type="text/javascript" src="jscript/jquery/plugins/codaslider/jquery.easing.1.3.js"></script>
    <script type="text/javascript" src="jscript/jquery/plugins/codaslider/jquery.coda-slider-2.0.js"></script>
    </script> 
     
    		 <script type="text/javascript">
    			$().ready(function() {
    				$('#coda-slider-1').codaSlider();
    			});
    		 </script>
  8. Готовый результат можно посмотреть, например, здесь.

Метки: ,
18 комментариев читателей статьи "Переделываем бокс «Рекомендуемые» в слайдер (VAM shop)"
  • Сергей пишет:

    Уважаемый Евгений! подскажите,
    Как сбоку, в боксе рекомендуемые выводить сразу несколько товаров?
    я прекрасно понимаю что ответ есть на форуме vamshop, но к сожалению у меня нету доступа туда, а руководство компании не хочет платить за cms сайта пока не увидит его локальный вариант со всеми наворотами и т.п., очень заинтересовала Ваша статья, но без переделки нескольких боксов я не смогу доказать что CMS Vamshop лучше чем другие, хотя лично мне очень нравится именно Vamshop.

  • Евгений Молодецкий пишет:

    Забирайте: http://www.molodezky.pp.ua/files/featured.zip Заменить соответствующие файлы Вашего шаблона.

  • Сергей пишет:

    К сожалению в Вашем архиве лежит два абсолютно одинаковых файла
    boxes\box_featured.html и source\boxes\box_featured.html

  • Евгений Молодецкий пишет:

    Поправил. Скачайте ещё раз.

  • Игорь пишет:

    Уважаемый Евгений,
    слайдер очень понравился. И прикрутили Вы его здорово. Очень гармонично получилось ИМХО.
    Пытался прикрутьть слайдер. Всё делал точно так как описано (переделанный блок установлен). Но вот товары появляются друг под другом.
    не пойму, что делаю не так..
    Подскажите в каком месте может быть ошибка?

  • Евгений Молодецкий пишет:

    Там один нюанс есть в includes/header.php. jquery подключается только на странице товара (через ПХП условие прописано). Вынесите подключение скриптов чуть выше и всё заработает.

  • Антон пишет:

    Евгений, спасибо за интересный материал, нигде больше такого найти не смог! Подскажите, как все-таки изменить файл includes/header.php чтобы корректно работали javascripts? Ничего не выход, бокс висит пустой 🙁

  • Евгений Молодецкий пишет:

    Если бокс пустой, то скорее всего Вы не заменили стандартный бокс на бокс, выводящий несколько товаров. Признаком того, что не подключен jquery будет вывод нескольких товаров сразу, а у Вас в нем вообще нет контента. Так что в Вашем случае includes/header.php тут не причем.

  • Dima пишет:

    Здравствуйте, Евгений!

    Очень хороший получился у Вас слайдер, но к сожалению у меня ничего не получается.
    Сделал всё по инструкции, + переписал в шаблоне файлы которые вы выложили для Сергея.

    Подскажите, куда копать?????

    shophtc.kz — вот тут.

    Просьба автору — не реклама.

  • Евгений Молодецкий пишет:

    Посмотрев в браузере код страницы, я не вижу у Вас ни подключения скриптов, ни кода сответствующих дивов. Внимательно все сделайте еще раз.

  • Александр пишет:

    Жаль что используется тяжеловесная jquery

  • Александр пишет:

    Евгений, как сделать чтобы несколько товаров выводилось слайдере?
    к примеру как на 220-volt.ru

  • Евгений Молодецкий пишет:

    Делается по тому же принципу, но с использованием плагина jcarousel. Делал так на нескольких магазинах, в ближайшее время напишу статью.

  • Юрий пишет:

    Отличная статья! ждем по jcarousel

  • Юрий пишет:

    а если работать не с боксом а с модулем {$MODULE_featured_products}
    какие-то отличия есть?
    т.к. бокс работает, а вот делая тоже самое но с модулем
    постоянно висит Loading…
    loading…

  • nolic пишет:

    Подскажите пожалуйста что не так? все делаю по пунктам а слайдер не получается?

    • Евгений Молодецкий пишет:

      Заметка писалась давно, под текущую версию её нужно творчески переработать. В частности, лучше использовать уже интегрированый bxSlider вместо codaslider. И посмотрите, чтоб не было двойного подключения jquery.js, а также на другие загруженные скрипты в коде страницы в браузере, возможно нужно будет убрать jQuery.noConflict(); .

Добавить комментарий

Ваш e-mail не будет опубликован.