Лента спецпредложений

isp_ua

isp_ua

Постоялец
Регистрация
31 Янв 2010
Сообщения
54
Реакции
10
Появилась идея сделать движущуюся ленту товаров в спецпредложениях на главной странице. Какой нужно вставить скрипт?
 
isp_ua написал(а):
Появилась идея сделать движущуюся ленту товаров в спецпредложениях на главной странице. Какой нужно вставить скрипт?
Нажмите для раскрытия...
Возми зайди в обсуждение шопскрипта, там есть тема по новинкам, у одного из участников реализовывано, посмотри
 
а ссылочку можно?
 
  • Заблокирован
  • #4
Спасибо за ссылку на сайт, Мурадели!)
Благодаря Mozile содрал исходник скрипта скроллинга, получил вот такой скрипт:

<marquee behavior="scroll" onmouseover="this.stop()" onmouseout="this.start()" scrollAmount="2" scrollDelay="30" truespeed direction="left" height="31" width="88">
<p>
{здесь помещается контейнер, который должен прокручиваться - в моём случае это контейнер {cpt_product_lists list_id='specialoffers' block_height='' overridestyle=':fanlbj'}}
</p>
</marquee>

этот скрипт можно поставить прямо в редакторе html-кода в WebAsyste
height и width регулируются по вкусу)
 
я реализовал на jCarousel, более красиво получается..
Причем достаточно легко интегрируется.
 
zakbc, а можно поподробнее о jCarousel? Как с ней работать?
 
файл ...\frontend\product_list.html изменяем на:
<html>
<head>
<script type="text/javascript" src="{$smarty.const.URL_JS}/jc/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="{$smarty.const.URL_JS}/jc/jquery.jcarousel.pack.js"></script>
<link rel="stylesheet" type="text/css" href="{$smarty.const.URL_JS}/jc/jquery.jcarousel.css" />
<link rel="stylesheet" type="text/css" href="{$smarty.const.URL_JS}/jc/skin.css" />
<script type="text/javascript">

{literal}
function mycarousel_initCallback(carousel)
{
// Disable autoscrolling if the user clicks the prev or next button.
carousel.buttonNext.bind('click', function() {
carousel.startAuto(0);
});

carousel.buttonPrev.bind('click', function() {
carousel.startAuto(0);
});

// Pause autoscrolling if the user moves with the cursor over the clip.
carousel.clip.hover(function() {
carousel.stopAuto();
}, function() {
carousel.startAuto();
});
};
{/literal}

{literal}
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap: 'both',
auto: 7,
scroll: 4,
initCallback: mycarousel_initCallback
});
});
{/literal}
</script>
</head>

<body>
<div class="position_ff" align="center">

<ul id="mycarousel" class="jcarousel-skin-tango" class="product_list" align="center">

{foreach from=$__products item=_product}
{if $_product.slug}
{assign var=_product_url value="?productID=`$_product.productID`&product_slug=`$_product.slug`"|set_query_html}
{else}
{assign var=_product_url value="?productID=`$_product.productID`"|set_query_html}
{/if}
<li align="center" style="width: {$smarty.const.CONF_PRDPICT_THUMBNAIL_SIZE+10}; height: {if $__block_height}{$__block_height}{elseif $_product.thumbnail}{$smarty.const.CONF_PRDPICT_THUMBNAIL_SIZE+40}{else}55{/if}; float:right;">

<table align="center" width="190px" border="0" cellspacing="0" cellpadding="0" height="100px">
<tr>
<td align="center" rowspan="2" valign="center" width="100">
{if $_product.thumbnail}
<table align="center" border="0" cellspacing="0" cellpadding="0" style="max-width: 100px;
max-height: 100px;
vertical-align:center;">
<tr>
<td>
<div class="imagepos1">
<a align="center" href="{$_product_url}"><img class="imagepos" align="center" src="{$smarty.const.URL_PRODUCTS_PICTURES}/{$_product.thumbnail|escape:'url'}" /></a>
</div>
</td>
</tr>
</table>
{/if}
</td>
<td height="40" valign="bottom" width="90" >{if $_product.Price}<div class="price12">{$_product.price_str}</div>{/if}</td>
</tr>
<tr>
<td width="90" valign="top" ><a href="{$_product_url}" ><div class="product_name12">{$_product.name}</div></a> <div class="categoriya12">{$_product.category_name}</div></td>
</tr>
</table>
</li>
{/foreach}
</ul>
</div>
</body>
</html>
В общем получаем горизонтальный блок, с прокруткой по 4 позиции.
Один есть минус, проблемы с ИЕ :(.
Выровнять получилось, но что -то он не очень красиво работает..
Хотел разные файлы стилей подвязать при разных експлорерах, но так что не получилось, людей по форумах спрашивал все отмалчиваются :(.
Пример показать не могу, нет согласия заказчика.
Но если буду вопросы, или баги помогу.

а архиве лежат файлы, которые нужно подложить в соответсвующую папку.
 

Вложения

  • jc.zip
    21,2 KB · Просмотры: 93
Последнее редактирование модератором:
Вопросы и баги есть. Начну с вопросов)
1) Увеличилась ширина окна, как подогнать ленту под общую ширину? где регулировать ширину?
2) Как можно увеличить высоту ленты,и чтобы цена и название располагались ниже рисунка, а не справа от него?
Баги в опере и мозиле: шрифт левого продукта в строчке нахлёстывается на картинку правого продукта.
В эксплорере особых багов нет, разве только небольшой - кнопки прокрутки немного глючат (когда лента в начальном положении, при нажатии на кнопки прокрутки влево, прокручивает вправо, и наоборот, когда лента доходит до крайнего положения, при нажатии на кнопку вправо, прокручивает влево)
 
Вопросы и баги есть. Начну с вопросов)

Ну это нормально, я его регулировал под свое приложение..

1) Увеличилась ширина окна, как подогнать ленту под общую ширину? где регулировать ширину?

в файле scin.css
.jcarousel-skin-tango .jcarousel-container-horizontal {
width: 770px; (ширина выводимой области)
padding: 24px 60px; (отступы блока сверху и снизу)
background: transparent url(slider.png) no-repeat 0 0; (slider.png - это рисунок фона)

}
.jcarousel-skin-tango .jcarousel-clip-horizontal {
width: 770px; (ширина выводимой области)
height: 140px;(ширина выводимой области)
}
.position_ff {
width: 800 px; (ширина всего блока)
height: 160 px; (высота всего блока)
margin-left: 18px ;

}
2) Как можно увеличить высоту ленты,и чтобы цена и название располагались ниже рисунка, а не справа от него?

смотрите выше.
и в product_list.html - перересуйте таблицу вывода, и разместите элементы как вам нравится.

Баги в опере и мозиле: шрифт левого продукта в строчке нахлёстывается на картинку правого продукта.

отредактируйте непосредственно кмандой padding-left, или padding-right - поможет

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

Это не глюки, эта прокрутка так настроена на граничные элементы - возврат в начальное положение, а не прокрутка по кругу.
Что б менять этот параметр, почитайте инструкцию, к этому елементу, и выставте так как Вам нравится.
Выставляется в product_list.html
{literal}
jQuery(document).ready(function() {
jQuery('#mycarousel').jcarousel({
wrap: 'both',
auto: 7,
scroll: 4,
initCallback: mycarousel_initCallback
});
});
{/literal}

Добавлено через 1 минуту
поправка в файле skin.css
 
Войдите или зарегистрируйтесь для ответа.
Назад
Сверху