Шаблон CUSTOM слайдер promo

Здравствуйте. Меня интересует как в слайдер promo вставить любое изображение и ссылку на страницу. Чтобы помимо товаров можно было добавить допустим акции. И как изменить размер слайдера, в каком файле?

6 ответов

  • 0
    Сергей Варенов 27 ноября 2013 00:43 #
    Найдите код в файле home.html
    <ul class="bxslider">
    {foreach $promos as $p}
    <li itemscope itemtype ="http://schema.org/Product">
    <a href="{$p.frontend_url}" title="{$p.name}{if $p.summary} &ndash; {strip_tags($p.summary)|escape}{/if}">
    <div class="image">
    {$badge_html = $wa->shop->badgeHtml($p.badge)}
    {if $badge_html}
    <div class="corner top right">{$badge_html}</div>
    {/if}
    {$wa->shop->productImgHtml($p, '970', ['itemprop' => 'image', 'alt' => $p.name, 'default' => "`$wa_theme_url`img/dummy200.png"])}

    </div>
    <div class="info">
    <h2 itemprop="name">
    <span class="name">{$p.name}</span>
    </h2>
    <p>{if $p.compare_price > 0}<span class="compare-at-price nowrap"> {shop_currency($p.compare_price)} </span>{/if}<span class="price nowrap">{shop_currency($p.price)}</span></p>
    {if $p.summary}<p itemprop="description">{strip_tags($p.summary)}</p>{/if}

    </div>
    </a>
    </li>
    {/foreach}
    </ul>

    И после "{/foreach}" добавьте <li><a href="ссылка"><img src="путь к изображению"></a></li>
    Для изменение размера сделайте так
    <div style="width: 500px;">
    <ul class="bxslider">
    ...
    </ul>
    </div>

    width-ширина в px
    высота там задана 400 px в файле custom.shop.css
    .promo.hero.superhero { margin-top: -15px; padding: 0; overflow: hidden; background: #fff; }
    .promo a { display: block; height: 400px; position: relative; }
    .promo a .image { position: absolute; right: 0; left: 0; top: 0; bottom: 0; }
    .promo a .image .corner.right { right: 60px; }
    .promo a .image .corner.top { top: 30px; }
    .promo a .image img { width: 100%; top: -30%; position: absolute; }
    .promo a .info { position: absolute; top: 10px; left: 30px; max-width: 60%; }
    .promo a .info h2 { font-size: 3em; font-weight: bold; color: #000; line-height: 1.5em; margin-bottom: 0; text-shadow: 0 1px 1px #fff; }
    .promo a .info p { color: #222; font-size: 1.3em; text-shadow: 0 1px 1px #fff; }

    .promo .bx-wrapper { margin: 0 auto; direction: ltr; }
    .promo .bx-wrapper .bx-viewport { border: none; box-shadow: none; left: 0; }
    .promo .bx-wrapper .bx-pager,
    .promo .bx-wrapper .bx-controls-auto { bottom: 20px; }
    .promo .bx-wrapper .bx-controls-direction a { display: none; opacity: 0.7; }
    .promo:hover .bx-wrapper .bx-controls-direction a { display: block; }
    • 0
      Сергей Варенов Сергей Варенов 27 ноября 2013 00:44 #
      это все стили отвечающие за слайдер, которые там были, удачи
      • 0
        v-e-y v-e-y 27 ноября 2013 01:45 #
        Сергей, а не подскажете..
        Так будет работать?
        <li>{$page = $wa->shop->page(5)}{$page.content}</li>

        P.S. Сейчас сам попробую :)
        • 0
          Сергей Варенов Сергей Варенов 27 ноября 2013 06:33 #
          сам по себе слайдер универсальный, он может крутить не только изображения, но и любой html контент, в данном случае любые элементы списка <li></li> списка <ul class="bxslider"> будут отображены на слайдере, так то можно, главное чтобы в этих переменных что-то было, иначе пустой слайд...
  • 0
    Сергей Моисеенко 10 декабря 2013 10:22 #
    Сергей, а не подскажете: если в списке PROMO нет товара, то как задать параметры, что бы слайдер этот крутил другие изображения.В Ваших ответах выше действительно работает, но при наличии хотя бы одного товара в списке.
    • +1
      YanaN YanaN 13 июля 2015 17:04 #

      Сергей, нашли ли Вы решение своей проблемы?

Добавить ответ

Чтобы добавить комментарий, зарегистрируйтесь или войдите