Страница 1 из 1

Прокрутка товаров на главной странице

Добавлено: 04.07.2016, 10:07
mgeese
Здравствуйте, можно ли сделать на главной странице прокрутку в категориях хиты продаж, новинки, акционные товары, как это реализовано с брендами? или чтобы автоматически листалось? Если добавить, например, в хиты больше 4 товаров, то на главной всё равно отображается только 4. Возможно уже есть такой функционал, но не понял как включить.

Добавлено: 04.07.2016, 13:42
zyxer
Можете сделать так:
В okay.js добавить код (~260-я строка)

Код: Выделить всё

/* Инициализация карусели */
$(".fn-slick-products-carousel").slick({
    infinite: true,
    speed: 500,
    slidesToShow: 4,
    slidesToScroll: 1,
    swipeToSlide : true,
    arrows: true,
    responsive: [
        {
            breakpoint: 992,
            settings: {
                slidesToShow: 3
            }
        },
        {
            breakpoint: 768,
            settings: {
                slidesToShow: 1
            }
        }
    ]
});


В main.tpl где div с классом "row" добавить класс "fn-slick-products-carousel" чтобы получилось <div class="row fn-slick-products-carousel">
и где вызов {get_featured_products var=featured_products limit=4} limit установить в большее значение (напр. 20). Аналогично для new_products и discounted_products

Добавлено: 04.07.2016, 14:35
mgeese
Да, спасибо, получилось, только можно ли сдвинуть указатели, чтобы они не наезжали на товары и слайдеры. Скрин прилагаю
Изображение
и еще если задать limit например 20, а товаров меньше, то будут пустые поля листаться. можно что-то придумать с этим?
Изображение

и еще вопрос, можно ли сделать чтобы отображалось в строке не 4 как по умолчанию, а например 5 товаров?
Изображение

Добавлено: 04.07.2016, 14:53
zyxer
чтобы указатели не наезжали можно в bootstrap.css где .slick-next указать "right: -25px;" , а .slick-prev "left: -25px;" но не рекомендую, т.к кнопки будут ЗА пределами контейнера, и на некоторых мониторах не будут "помещаться" на экране.

По поводу пустых слайдов уберите "{if $product@iteration % 3 == 0}<div class="col-xs-12 hidden-sm-down hidden-md-up"></div>{/if}"

Добавлено спустя 1 минуту 25 секунд:
для пяти товаров поставьте slidesToShow: 5 но скорее всего немного "поплывет" верстка

Добавлено: 04.07.2016, 15:04
mgeese
Отлично, спасибо, наверное будет совсем нагло, но я спрошу, нельзя ли как то использовать место по краям? например хочу сделать баннер с акциями, что-то типа вот такого, это реально?
Изображение

Добавлено: 04.07.2016, 18:24
OkayCMS
У вас тогда на ноутбуках сайт не будет влазить в ширину экрана.

Помогите все таки удалить пустые места в карусели

Добавлено: 01.08.2018, 16:21
demqn
zyxer, Подскажите пожалуйста поподробнее как все таки убрать пустые места в карусели
какой код?
в какой файл?
и какое место?
вставить или убрать, а то неполучилось
и Спасибо! ЗА карусель Все работает!
дополнительно добавил ее в рекомендуемые на страницу товара

Добавлено спустя 11 часов 22 минуты:
OkayCMS, Подскажите пожалуйста поподробнее как все таки убрать пустые места в карусели
какой код?
в какой файл?
и какое место?
вставить или убрать, а то неполучилось
и Спасибо! ЗА карусель Все работает!
дополнительно добавил ее в рекомендуемые на страницу товара

Добавлено: 04.12.2019, 18:16
MadDog
Хм.. у меня инициализация слайдера не происходит. вот сюда вставлять js?

Изображение

Добавлено: 04.12.2019, 18:31
zyxer
Сюда. В консоле ошибки есть? Селектор точно верный?

Добавлено: 04.12.2019, 21:02
MadDog
ошибок в консоли ошибок нет предупреждения есть
Изображение

матерится вот на эту строку 16 в индексе <script>ut_tracker.start('parsing:head:js');</script>
А так как я не говорю по-немецки, я не понимать что ему надо. Ну вижу, что рамс какой то с js, но при этом на брендах то тоже карусель и она работает. Которая на дефолтном шаблоне.

в main вот так

Код: Выделить всё

{* Featured products *}
    {get_featured_products var=featured_products limit=20}
    {if $featured_products}
        <div class="row fn-slick-products-carousel">
        <div class="main_products clearfix">       
            {foreach $featured_products as $product}
                <div class="products_item no_padding  col-sm-6 col-xl-3">
                    {include "product_list.tpl"}
                </div>
            {/foreach}           
        </div>
        </div>
    {/if}


10 Раз до запятой проверила не могу понять что не так. Просто как обычная витрина рядами выглядит и все.

з.ы. Я чукча. Знаю. Исправлюсь. Прошу понять и простить.

Добавлено: 04.12.2019, 21:24
zyxer
Вот оно что, у вас между {if $featu... и форычем два уровня вложенности, сделайте один. Т. е. чтобы тег, на который вешается карусель непосредственно оборачивал цикл, т. к. слайдер именно внутрянку считает слайдом, а у вас в данном случае всегда один слайд

Добавлено: 05.12.2019, 13:03
MadDog
zyxer, ооо спасибо!
Мой затуп согласна, а js в 260 строке не работало передвинула ниже перед каруселью брендов и заработало.