понедельник, 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;
}
Вот и все.

Было:

 Стало:

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

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

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

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

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

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

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

    ОтветитьУдалить
  6. Спасибо за инфу, полезно было. Как ни странно было коротко и по факту, а то теперь в основном воды понаписывают и потом сиди временами разбирайся. Я теперь себе приобрел по работе в магазит сборочку друга. Очень доволен покупкой и удобством. Рекомендую) кому интересно ссылочка внизу:
    neoseo.com.ua/internet-magazin-seo-magazin-model/

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