Последнее обновление: 20 декабря 2018
Слайдер / банер на главной странице магазина
Слайдер изображений/продуктов размещается в верху области содержания главной страницы приложения «магазин».
Может содержать в себе(один из двух вариантов):
- список товаров
- список изображений
Слайдер / банер списка изображений
Список изображений работает на стандартном функционале приложения «фото» и может формироваться из нескольких вариантов:
- список изображений «альбома»
- изображений по «тегу»
Для отображения в качестве слайдера списка изображений, необходимо в «настройках темы» ( магазин-витрина-оформление пункт 10.2 «слайдер изображений»), в поле «слайдер изображений» приписать одну из предложенных конструкций:
- album/1 – сформирует список изображений, из изображений альбома идентификатор которого – 1.
Узнать идентификатор альбома, можно следующим образом: в приложении "фотогалерея" кликните на название альбома в блоке "альбомы", после клика Вы будете перенаправленны на страницу информации об альбоме, где в строке URL (в браузере верхняя адресная строка), Вы увидите примерно такую строку
site.ru/webasyst/photos/#/album/1/
где последняя цифра и будет являться идентификатором альбома. - tag/мои слайды – сформирует список изображений из изображений содержащих «тег» «мои слайды».
* Если картинок не будет, то слайдер изображений не будет опубликован.
*примечание: баннер картинок имеет приоритет над баннером продуктов, если оба поля заполнены, то отобразится «слайдер изображений».
* ширина изображений должна быть 960px а высота на Ваше усмотрение, но одинаковая у всех изображений в слайдере
Так же можно опубликовать отдельное изображение слайдера, как ссылку на любой произвольный URL. Для этого в редакторе изображения необходимо добавить описание, в качестве описание прописать необходимый URL.
Слайдер / банер списка товаров
Список товаров может формироваться из нескольких вариантов: «категории товара», «товары по тегу» или «список товаров».
Для отображения в качестве слайдера списка товаров, необходимо в «настройках темы» ( магазин-витрина-оформление пункт 10.1 «слайдер товаров»), в поле «слайдер товаров» приписать одну из предложенных конструкций:
- category/1 – сформирует список из продуктов категории идентификатор которой – 1.
* Узнать идентификатор категории можно так – в приложении «магазин», вкладка «товары» кликните на нужной категории, Вы перейдете на страницу содержащую товары этой категории. В строке URL этой категории Вы увидите следующий параметр «category_id=1937», где цифровое значение и будет идентификатором категории - tag/планшет Samsung Galaxy – сформирует список продуктов содержащих «тег» «планшет Samsung Galaxy»
- set/bestsellers – формирует список товара, из списков товаров магазина идентификатор которого «bestsellers».
* Списки товаров магазина, размещаются в приложении «магазин» - вкладка «товары» - блок «списки». Идентификатор списка отображается следом за названием и выделен серым цветом и уменьшенным шрифтом.
* если продуктов нет, слайдер показан не будет
Комментарии (14)
Здравствуйте, возможно настроить отображение товаров в слайдере. По умолчанию сейчас фото не полностью отображается. Еще не видно прозрачных кружков
Предоставьте адрес вашего сайта, по скриншоту не получится понять почему у вас наблюдается такое поведение.
Фото не будет полностью, поскольку имя товара большое и оно отодвигает его в низ - такова структура расположения блоков слайдера.
"Кружочки" не видно поскольку они белые, но можно сделать их любого цвета, например в цвет вашей темы оформления, добавив в пользовательские стили правила:
.slider-homepage .bx-wrapper .bx-pager.bx-default-pager a:hover, .slider-homepage .bx-wrapper .bx-pager.bx-default-pager a.active {
background-color: #E91E63;
}
.slider-homepage .bx-wrapper .bx-pager.bx-default-pager a {
border-color:#E91E63;
}
Здравствуйте. У меня на слайдере полностью не помещается название товара (названия разные, есть и длинные). Можно сделать так, чтобы оно переносилось на другую строку? А если места на слайдере все равно не будет хватать, то чтобы подгонялся размер шрифта?
Попробуйте в блок пользовательских стилей добавить правило:
.da-slide h2 { font-size: 30px; }*где размер шрифта измените на свое усмотрение
*в две строки разместить нельзя, поскольку элементы позиционированы абсолютно и в какой то момент блок с названием товара налезет на блок с его ценой.
Спасибо за оперативность. Шрифт уменьшил и дописал в Ваше правило одну строку :
.da-slide h2 {
font-size: 20px;
white-space: normal;
}Получилось именно так, как хотел.
ДОбрый день!
Как добавить в слайдер карточки (не список) Промо (promocards)?
Здравствуйте!
не понял
добавить в слайдер изображения из списка карточек промо?
Добрый день!
Хочу доработать слайдер изображений на главной: необходимо сделать так. чтобы каждое изображение задерживалось на 5 секунд. Сейчас, по умолчанию, 2-3 секунды. И вдогонку вопрос: можно ли осуществить смену слайдов не просто сдвижением изображений, а каким-либо другим эффектом?
1) Если вы используете слайдшоу с изображениями, то в файле banner.images.html(Магазин-Витрина-Шаблоны) замените число:
4000
на число:
5000
*что увеличит интервал ожидания перед сменой слайда до 5 секунд, 1000 ~ 1 сек.
Для смены эффекта переключения слайдов замените строку:
'slideInRight,slideInLeft'
на строку сформированную из набора, строка должна бить без пробелов и каждый эффект отделен запятой, в конце запятую проставлять ненужно:
sliceDown,sliceDownLeft,sliceUp,sliceUpLeft,sliceUpDown,sliceUpDownLeft,fold,fade,random,slideInRight,slideInLeft,boxRandom,boxRain,boxRainReverse,boxRainGrow,boxRainGrowReverse
2) Если вы используете слайдшоу с продуктами, то изменить можно лишь время задержки переключения слайдов. В файле banner.products.html заменить число:
5000
по аналогии с предыдущей рекомендацией
Спасибо. Всё получилось.
как использовать промо карточки для слайдера?
в файле home.html
замените
{$b_photos = $wa->photos->photos('album/11'<wbr>)}
{include file="`$wa_active_theme_path`/<wbr>banner.images.html" bannerId=1 b_photos=$b_photos}
{else}
{$b_products = $wa->shop->products('set/<wbr>bestsellers', 10)}
{include file="`$wa_active_theme_path`/<wbr>banner.products.html" bannerId=1 b_products=$b_products}
{/if}
и в файле banner.images.html
{if !empty($promocards)}
<div class="nivoSlider-wrapper">
<div id="nivoSlider-promos" class="nivoSlider">
{foreach $promocards as $promo}
<a href="{$promo.link|escape}">
<img src="{$promo.image}" alt="{$promo.title|escape}">
</a>
{/foreach}
</div>
<script type="text/javascript">
$(window).load(function(){
$('#nivoSlider-promos').<wbr>nivoSlider({
effect: 'slideInRight,slideInLeft',
randomStart: false,
pauseTime: 4000,
prevText: '<i class="icon-caret-left"></i>',
nextText: '<i class="icon-caret-right"></i>'
});
});
</script>
</div>
{/if}