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

Тема в разделе "WebAsyst", создана пользователем isp_ua, 16 фев 2010.

Модераторы: mdss
  1. isp_ua

    isp_ua Создатель

    Регистр.:
    31 янв 2010
    Сообщения:
    34
    Симпатии:
    5
    Появилась идея сделать движущуюся ленту товаров в спецпредложениях на главной странице. Какой нужно вставить скрипт?
     
  2. Crazy_Serg

    Crazy_Serg Постоялец

    Регистр.:
    13 сен 2009
    Сообщения:
    83
    Симпатии:
    16
    Возми зайди в обсуждение шопскрипта, там есть тема по новинкам, у одного из участников реализовывано, посмотри
     
  3. isp_ua

    isp_ua Создатель

    Регистр.:
    31 янв 2010
    Сообщения:
    34
    Симпатии:
    5
    а ссылочку можно?
     
  4. Мурадели

    Мурадели Читатель

    Заблокирован
    Регистр.:
    6 фев 2010
    Сообщения:
    4
    Симпатии:
    4
    Навскидку - вот здесь "бежит": http://www.tataspb.ru/ (внизу); автор, НЯП, spacesite, вот один из его постов: http://www.nulled.ws/showthread.php?t=21162&page=210
     
  5. isp_ua

    isp_ua Создатель

    Регистр.:
    31 янв 2010
    Сообщения:
    34
    Симпатии:
    5
    Спасибо за ссылку на сайт, Мурадели!)
    Благодаря 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 регулируются по вкусу)
     
    D_KART и Мурадели нравится это.
  6. zakbc

    zakbc Постоялец

    Регистр.:
    31 янв 2010
    Сообщения:
    64
    Симпатии:
    2
    я реализовал на jCarousel, более красиво получается..
    Причем достаточно легко интегрируется.
     
  7. isp_ua

    isp_ua Создатель

    Регистр.:
    31 янв 2010
    Сообщения:
    34
    Симпатии:
    5
    zakbc, а можно поподробнее о jCarousel? Как с ней работать?
     
  8. zakbc

    zakbc Постоялец

    Регистр.:
    31 янв 2010
    Сообщения:
    64
    Симпатии:
    2
    файл ...\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 КБ
      Просмотров:
      91
    Последнее редактирование модератором: 3 май 2016
    alexandr3182 нравится это.
  9. isp_ua

    isp_ua Создатель

    Регистр.:
    31 янв 2010
    Сообщения:
    34
    Симпатии:
    5
    Вопросы и баги есть. Начну с вопросов)
    1) Увеличилась ширина окна, как подогнать ленту под общую ширину? где регулировать ширину?
    2) Как можно увеличить высоту ленты,и чтобы цена и название располагались ниже рисунка, а не справа от него?
    Баги в опере и мозиле: шрифт левого продукта в строчке нахлёстывается на картинку правого продукта.
    В эксплорере особых багов нет, разве только небольшой - кнопки прокрутки немного глючат (когда лента в начальном положении, при нажатии на кнопки прокрутки влево, прокручивает вправо, и наоборот, когда лента доходит до крайнего положения, при нажатии на кнопку вправо, прокручивает влево)
     
  10. zakbc

    zakbc Постоялец

    Регистр.:
    31 янв 2010
    Сообщения:
    64
    Симпатии:
    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