понедельник, 18 февраля 2013 г.

Масштабируемый баннер-слайдшоу в Opencart

Странность всех модулей в опенкарте в том, что никогда не узнаешь, что это на самом деле, пока основательно в этом не покопаешься.
Задача: нужно сделать масштабируемый (адаптивный) баннер-слайдшоу в Opencart. Это нужно, в первую очередь, для резиновых шаблонов, т.к. верстка сильно плывет из-за жестко фиксированного баннера.

Слайдшоу в Opencart - это NivoSlider, на самом деле. его скрипт не позволяет на лету уменьшать изображения. Поэтому мы поставим FlexSlider. данная статья рассчитана на чайников, т.е. как автоматически изменить размер слайдера с минимальными потерями и трудозатратами. Для спецов - тут есть исходник самого слайдера и список опций.

Кто не спец - читаем дальше.

Обратите внимание на пути к файлам. У меня шаблон - default. Вы везде пишете название своего шаблона.

Качаем архив.
Там все рабочее, можно просто взять и заменить. Но если у вас очень модифицированный шаблон - не рекомендую..

Файл jquery.flexslider-min.js копируем в \catalog\view\javascript\jquery\

Открываем файл \catalog\view\theme\default\template\common\header.tpl находим в нем строку
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery-1.7.1.min.js"></script>
и после нее вставляем
<script type="text/javascript" src="catalog/view/javascript/jquery/jquery.flexslider-min.js"></script>
мы подключили скрипт flexslider. Jquery у нас уже был

теперь открываем \catalog\view\theme\default\template\module\slideshow.tpl
Вытираем все и вставляем следующий код:

<div class="flex-container">
    <div class="flexslider">
        <ul class="slides">
<?php foreach ($banners as $banner) { ?>
  <li>
    <?php if ($banner['link']) { ?>
    <a href="<?php echo $banner['link']; ?>"><img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" /></a>
    <?php } else { ?>
    <img src="<?php echo $banner['image']; ?>" alt="<?php echo $banner['title']; ?>" />
    <?php } ?>
    <?php } ?>
            </li>
         </ul>
    </div>
</div>
<script>
    $(document).ready(function () {
        $('.flexslider').flexslider({
            animation: 'fade',
            controlsContainer: '.flexslider'
        });
    });
</script>
Открываем файл \catalog\view\theme\default\stylesheet\slideshow.css
удаляем все, вставляем

/* Сброс настроек браузера */
.flex-container a:active,
.flexslider a:active,
.flex-container a:focus,
.flexslider a:focus  { outline: none; }

.slides,
.flex-control-nav,
.flex-direction-nav {
margin: 0;
padding: 0;
list-style: none;
}

.flexslider a img { outline: none; border: none; }

.flexslider {
margin: 0;
padding: 0;
}

/* Скрываем слайды перед загрузкой ява-скрипта */
.flexslider .slides > li {
display: none;
-webkit-backface-visibility: hidden;
}

.flexslider .slides img {
width: 100%;
display: block;

-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}

/* Чистим предидущее изображение для .slides */
.slides:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

html[xmlns] .slides { display: block; }
* html .slides { height: 1%; }



/* Основной стиль слайдера */
.flexslider {
position: relative;
zoom: 1;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;

-webkit-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
-moz-box-shadow: 0px 1px 1px rgba(0,0,0, .2);
box-shadow: 0px 1px 1px rgba(0,0,0, .2);
}

/* Вы можете изменить под свои требования*/
.flex-container {
min-width: 150px;
max-width: 960px;
overflow: hidden;
}

.flexslider .slides { zoom: 1; }



/* Кнопки прокрутки. Стили */
.flex-direction-nav a {
display: block;
position: absolute;
width: 40px;
height: 55px;
top: 50%;
cursor: pointer;
text-indent: -9999px;
}

.flex-direction-nav a:before {
display: block;
position: absolute;
content: '';
width: 30px;
height: 30px;
left: 2px;
background: url(../image/arrows.png) no-repeat;
}

.flex-direction-nav a:after {
display: block;
position: absolute;
content: '';
width: 0;
height: 0;
top: 35px;
}

.flex-direction-nav .flex-next {
right: 0;

-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}

.flex-direction-nav .flex-prev {
left: 0;

-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}

.flex-direction-nav .flex-next:before { background-position: -30px 0;}
.flex-direction-nav .flex-prev:before { background-position: 0 0; }

.flex-direction-nav .flex-next:after {
right: 0;
border-bottom: 5px solid transparent;
border-left: 5px solid #31611e;
display:none;
}

.flex-direction-nav .flex-prev:after {
left: 0;
border-bottom: 5px solid transparent;
border-right: 5px solid #31611e;
display:none;
}



/* Кнопки прокрутки. Управление */
.flexslider .flex-control-nav {
position: absolute;
width: 100%;
bottom: -40px;
text-align: center;
margin: 0 0 0 -10px;
display: none;
}

.flex-control-nav li {
display: inline-block;
zoom: 1;
}

.flex-control-paging li a {
display: block;
cursor: pointer;
text-indent: -9999px;
width: 12px;
height: 12px;
margin: 0 3px;
background-color: #b6b6b6 \9;

-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;

-webkit-box-shadow: inset 0 0 0 2px #b6b6b6;
-moz-box-shadow: inset 0 0 0 2px #b6b6b6;
box-shadow: inset 0 0 0 2px #b6b6b6;
}

.flex-control-paging li a.flex-active {
background-color: #82d344;
background-image: -webkit-gradient(linear, left top, left bottom, from(#82d344), to(#51af34));
background-image: -webkit-linear-gradient(top, #82d344, #51af34);
background-image: -moz-linear-gradient(top, #82d344, #51af34);
background-image: -o-linear-gradient(top, #82d344, #51af34);
background-image: linear-gradient(to bottom, #82d344, #51af34);

-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}



/* Подпись к изображению */
.flexslider .slides p {
display: block;
position: absolute;
left: 0;
bottom: 0;
padding: 0 5px;
margin: 0;

font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
line-height: 20px;
color: white;

background-color: #222222;
background: rgba(0,0,0, .9);

-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
}
Вот и все.

Было:

 Стало:

Если у вас не работает - проверьте, резиновый ли у вас сайт.

7 комментариев:

  1. дык все равно нужно задавать размеры окна в модуле слайдшоу, если не задавать, опенкарт не дает тебе его сохранить, вот и собственно тупик...

    ОтветитьУдалить
  2. Сделал всё по шпаргалке) Действительно флехслайдер заменил стандартный и интегрировался в модуль слайдшоу, но напрочь пропала вся навигация по слайдшоу.

    ОтветитьУдалить
  3. Восстановительные ссылку пожалуйста

    ОтветитьУдалить
  4. Восстановительные ссылку пожалуйста

    ОтветитьУдалить
  5. Восстановительные ссылку пожалуйста

    ОтветитьУдалить