Категории

Встраиваем слайдер контента в шаблон

Сделаем небольшой слайдер в блок.
У меня такой слайдер на блоке Лучшие товары

Пример
Встраиваем слайдер контента в шаблон

Первым делом топаем сюда _http://bxslider.com/
Скачиваем скрипт.
файл jquery.bxSlider.js кидаем в папку javascript вашего шаблона.

Далее в этой же папке открываем файл general.js.php
и ниже ?> вставляем

Теперь редактируем файл boxes/box_best_sellers.html
Нам нужно заменить весь этот код

<table width="100%" border="0" cellspacing="2" cellpadding="0">
{foreach name=aussen item=box_data from=$box_content}
<tr>
<td valign="top" class="boxText" style="border-bottom: 1px solid; border-color: #cccccc;">{$box_data.COUNT}.</td>
<td style="border-bottom: 1px solid; border-color: #cccccc;" class="boxText"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="boxText"><a href="{$box_data.PRODUCTS_LINK}">{$box_data.PRODUCTS_NAME}</a> </td>
</tr>
<tr>
<td class="boxTextPrice" align="right"><strong>{$box_data.PRODUCTS_PRICE}</strong>

</td>
</tr>
<tr>
<td class="boxText" align="right">{if $box_data.PRODUCTS_VPE}{$box_data.PRODUCTS_VPE}<br />{/if}{$box_data.PRODUCTS_TAX_INFO}{$box_data.PRODUCTS_SHIPPING_LINK}</td>
</tr>
</table></td>
</tr>
{/foreach}
</table>

Вот на этот

<div id="slider-content">
{foreach name=aussen item=box_data from=$box_content}
<div class="item">
{if $box_data.PRODUCTS_IMAGE}<div class="image"><a href="{$box_data.PRODUCTS_LINK}" title="{$box_data.PRODUCTS_NAME}"><span class="bold">{$box_data.COUNT}</span><img src="{$box_data.PRODUCTS_IMAGE}" alt="{$box_data.PRODUCTS_NAME}" /></a></div>{/if}
<h4 class="bold"><a href="{$box_data.PRODUCTS_LINK}">{$box_data.PRODUCTS_NAME}</a></h4>
<p class="buy bold">{$box_data.PRODUCTS_PRICE}</p>
</div>
{/foreach}
</div>

Теперь нужно поправить малость стили
Открываем ваш style.css и добавляем туда

div.slide-content {}
div.slide-content a.slider_prev, div.slide-content a.slider_next {}
div.item {text-align:center;margin:10px 0 0 0;}
div.item a {color:#cb9375;}
div.item .image {margin:0 auto;width:200px;text-align:center;position:relative;}
div.item .image span {top:0;left:0;position:absolute;background:#cc5210;padding:3px 4px 3px 4px;font-size:1.1em;}
div.item .image a {color:#fff;text-decoration:none;}
div.item h4 {font-size:1.0em;}
div.item .buy .cost {color:#cc5210;}
.bold {font-weight:bold;}

Вроде все)

Евгений, надо бы к тегу code в этом шаблоне форума, добавить overflow: auto;
--
ps странно. оно есть в css.

Слушай вот такую ошибку дает :( не пойму

Fatal error: Smarty error: : syntax error: unclosed tag \{foreach} (opened line 3). (Smarty_Compiler.class.php, line 317) in W:\home\tomy\www\includes\lib\smarty\Smarty.class.php on line 1108

Проверь, есть ли в коде {/foreach}

{config_load file="$language/lang.conf" section="boxes"}

<div id="slider-content">
{foreach name=aussen item=box_data from=$box_content} <div class="item">
{if $box_data.PRODUCTS_IMAGE}<div class="image"><a href="{$box_data.PRODUCTS_LINK}" title="{$box_data.PRODUCTS_NAME}"><span class="bold">{$box_data.COUNT}</span><img src="{$box_data.PRODUCTS_IMAGE}" alt="{$box_data.PRODUCTS_NAME}" /></a></div>{/if}
<h4 class="bold"><a href="{$box_data.PRODUCTS_LINK}">{$box_data.PRODUCTS_NAME}</a></h4>
<p class="buy bold">{$box_data.PRODUCTS_PRICE}</p>
</div>
{/foreach}
</div>

2 раза написал код :D исправь!

<div id="slider-content">
{foreach name=aussen item=box_data from=$box_content}

Точно! Спасибо ;)

Сделал такой слайдер для бокса просмотренные товары, однако когда был просмотрен всего один товар, на слайдере ничего нет!! Как только просматривается второй товар, сразу появляются оба.

Как это исправить? Плиз подскажите!

Есть такое. Как поправить - не знаю.
видимо баг слайдера.

Такая же проблема! Как лечить?

так не выводить вообще бокс со слайдером, если 1 товар

Я попозже топик обновлю и поменяю слайдер.

маленькая проблема: если вклечено кеширование, то при обновлении страницы товары из блока исчезают!
очищаешь кеш - опять появились.

А эта штука на версию 2.5.9 попрет??
Я установил ее, но ничо не появилось.

не имеет значения версия шопоса.
если не работает, то нужно смотреть сам сайт. причин много может быть.

А в index.html какая команда должна быть?
Может туда еще строку добавлять надо?

все что нужно описано в первом топике.

Ну а в чем может быть проблема??

смотрите в index.html есть метка {$box_BESTSELLERS}

Ну а в чем может быть проблема??

Да много в чем. Нужно сайт смотреть и что вы там сделали. Как так можно что-то ответить, если причин куча может быть?

M-martin Да есть.
NeBox ну я имею в виду с чего начать. Может через админку я случайно отключил!

Могли и через админку выключить, смотрите Настройки / Настройка блоков

Вы опишите что именно не появилось.
Если нет самого блока, то да, следуйте совету M-martin'а и проверьте включен ли блок.
Если включен и есть метка в index.html, то нужно смотреть уже либо PHP код блока, либо стили с JS. МОжет какие- ошибки есть.
на другом шаблоне пробовали?

Попробовал на шаблоне default. Та-же история!
Блок включен, но он полностью не появляется на сайте!

Знает ли кто нибудь, как изменить паузу между прокруткой товаров? Пробовал изменить параметр pause:3500 в 11 строке файла javascript\jquery.bxslider2.0.1.min.js - ничего не меняется. Возможно это значение по умолчанию, а где то задаётся явно другое значение .

Установил движок и БД заново. Сделал все как написано в 1 посте. И все равно ничо не появилось!
Тока почему-то блок "Новинки" начал лестатся, хотя он раньше стоял.

Пробовал на shopos-paradise сделать всё так, как описано в первом посте, получилось вряд 3 фото товара сверху вниз. Решил на дефолтовом испытать - тоже самое в ответ. Что я сделал не правильно? Где ошибся?

Начал сомневаться в файле: jquery.bxSlider.js скачанном с сайта http://bxslider.com/. Скопировал jquery.bxSlider.js с шаблона cleanshop. Картинки побежали. Небольшой непорядок с кнопками назад и ещё см. скрин. Как исправить?

Здравствуйте. Вопрос по теме. переменные "next" и "prev" выводятся в блоке вместо слов "ещё" и "назад" в клиншопе работает как надо, в shopos-paradise не хотят! Где прописаны в клиншопе эти слова не найду чтобы прописать для shopos-paradise? Подскажите. Также 123 тоже убрать хотелось бы....
Заранее спасибо.

Вывод цифер в блоке
удалить в файле \themes\шаблон\boxes\box_best_sellers.html
<span class="bold br6">{$box_data.COUNT}</span>

Для Вперед и Назад
В файле themes/cleanshop/javascript/templatica_other.js
Есть код

$(document).ready(function(){
$('#slider-best').bxSlider({
alignment: 'horizontal',
controls: true,
speed: 500,
pager: false,
pager_short: false,
pager_short_separator: ' / ',
margin: 0,
next_text: 'еще',
next_image: '',
prev_text: 'назад',
prev_image: '',
auto: true,
pause: 5000,
auto_direction: 'next',
auto_hover: true,
auto_controls: false,
ticker: false,
ticker_controls: false,
ticker_direction: 'next',
ticker_hover: true,
stop_text: 'stop',
start_text: 'start',
wrapper_class: 'slider-best-wrap'
});
});

Вот тут вот.

Это я уже из настроек скрипта выносил сюда. стандартно это не выводится.
Подробнее тут http://bxslider.com/options
.

Спасибо за ответ. Мой шаблон shopos-paradise. В нём нет файла templatica_other.js. Пробовал копировать из cleanshop - не приживается.
в файле \themes\шаблон\boxes\box_best_sellers.html нет строки <span class="bold br6">{$box_data.COUNT}</span>
Есть <span class="bold">{$box_data.COUNT}</span>, при удалении ничего не меняется.

Как мне выйти из положения?
Заранее благодарен.

p.s. C нумерацией разобрался. в файле: jquery.bxSlider.js сменил

pager:true

на

pager:false

. Но с написанием "назад и ещё " вопрос открыт.

Источник