Каталог на планшете с большим разрешением

Правила раздела: faq.php?mode=okay
Модератор: Модераторы

makki
makki
Репутация: 147
Сообщения: 418
Зарегистрирован: 12.08.2016
С нами: 2 года 9 месяцев
Откуда: Киев
Сайт Skype

Сообщение #1 makki » 25.04.2018, 20:47

В стандартном шаблоне, если зайти на планшете с разрешением больше чем 992px, меню каталога остается десктопное. А оно построено на hover, что делает его полностью не функциональным на тач-устройствах.

Данное решение позволяет эмулировать наведение мышки (hover) при первом касании экрана, а при втором ведет себя как обычный клик мышкой. Таким образом можно открыть многоуровневое десктопное меню на планшете.

1) Файл design/okay_shop/html/categories.tpl
после строки

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

{if $c->subcategories && $c->has_children_visible}

вместо

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

<li class="category_item">

пишем

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

<li class="category_item has-child">

2) Файл design/okay_shop/js/okay.js
После

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

    // Выпадающие блоки
    $('.fn_switch').click(function(e){
        .....
    });

добавляем

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

    $('ul li.category_item.has-child').on("touchstart", function (e) {
        'use strict'; //satisfy code inspectors
        var link = $(this);
        if (link.hasClass('hover')) {
            return true;
        } else {
            if (link.parent().is('.level_1')) {
                $('ul li.category_item.has-child').removeClass('hover');
            } else {
                link.siblings('.hover').removeClass('hover');
            }
            link.addClass('hover');
            e.preventDefault();
            return false;
        }
    });

3) Файл design/okay_shop/css/responsive.css
Строка 416 вместо

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

.category_item:hover > .subcategory {

пишем

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

.category_item:hover > .subcategory, .category_item.hover > .subcategory {

4) Файл design/okay_shop/css/style.css
Строка 672 вместо

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

.category_link:hover,
.category_link:hover .arrow_right {
    color: #1480a8;
}

пишем

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

.category_link:hover,
.category_link:hover .arrow_right,
.category_item.hover > .category_link{
    color: #1480a8;
}
Cоздание и расширение функционала интернет-магазина на платформе OkayCMS

dabustard
dabustard
Репутация: 4
Сообщения: 25
Зарегистрирован: 26.01.2018
С нами: 1 год 3 месяца

Сообщение #2 dabustard » 13.05.2018, 13:46

И разработчику не мешало бы это исправить в новой версии.


Название раздела: Полезные решения для OkayCMS
Правила раздела: faq.php?mode=okay

Быстрый ответ


Введите код в точности так, как вы его видите. Регистр символов не имеет значения.
Код подтверждения

   

Вернуться в «Полезные решения для OkayCMS»

Кто сейчас на форуме (по активности за 5 минут)

Сейчас этот раздел просматривают: 1 гость