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

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

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

1. Распаковываем архив и ложим файлы  jquery.coda-slider-2.0.js и jquery.easing.1.3.js в папку jscript/jquery/plugins/codaslider/.

Копируем код css стилей плагина из файла coda-slider-2.0.css начиная с

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

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

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

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

   <div id="boxFeatured">

   <div id="boxFeatured">

   добавляем

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

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

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

   </div>

   </div>

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

   </div> </div>

   </div> </div>

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

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

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

   вставляем

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

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

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

   {/foreach}

   {/foreach}

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

   </div> </div>

   </div> </div>

3. Настраиваем стили слайдера в файле стилей (в тех строках, которые мы вставляли), а также самих стилях бокса «Рекомендуемые»
4. Настраиваем поведение слайдера в файле jquery.coda-slider-2.0.js в районе 16 строки

   $.fn.codaSlider = function(settings) {

   $.fn.codaSlider = function(settings) {

   и ниже.

5. Ставим в нужном месте шаблона index.html метку {$box_FEATURED}. Если слайдер нужно отображать только на главной странице магазина, то создаем копию index.html с именем index.php_.html и ставим метку бокса только в него.
6. И небольшая вставка в includes/header.php. После

   <script type="text/javascript" src="jscript/jquery/jquery.js"></script>

   <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>

   <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>

Готовый результат можно посмотреть, например, здесь.