Здравствуйте. Меня интересует как в слайдер promo вставить любое изображение и ссылку на страницу. Чтобы помимо товаров можно было добавить допустим акции. И как изменить размер слайдера, в каком файле?
И после "{/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; }
сам по себе слайдер универсальный, он может крутить не только изображения, но и любой html контент, в данном случае любые элементы списка <li></li> списка <ul class="bxslider"> будут отображены на слайдере, так то можно, главное чтобы в этих переменных что-то было, иначе пустой слайд...
Сергей, а не подскажете: если в списке PROMO нет товара, то как задать параметры, что бы слайдер этот крутил другие изображения.В Ваших ответах выше действительно работает, но при наличии хотя бы одного товара в списке.
6 ответов
<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} – {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; }
Так будет работать?
<li>{$page = $wa->shop->page(5)}{$page.content}</li>
P.S. Сейчас сам попробую :)
Сергей, нашли ли Вы решение своей проблемы?