Перейти к содержанию

Рекомендуемые сообщения

в mobile версиях opencart прячет колонки для экономии места, следовательно все модули в этих колонках исчезают.

на днях попробовал на коленке набросать решение, которое возможно пригодится разработчикам как модулей, так и возможно авторам шаблонов

 

первым делом нужно определить, открылся магазин в mobile устройстве или нет

        var isMobile = false; 
        // device detection
        if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
        || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
            isMobile = true;
        }

далее мы вытаскиваем свой модуль из display:none колонки и для удобства задаем ему класс mobile-view

        if (isMobile){
            $('#panel-seofilter0').detach().appendTo($('#column-left').parent()).addClass("mobile-view");

нам нужен функционал, который позволит показывать/скрывать наш модуль что бы он не висел постоянно в углу и не мешал просматривать магазин

я добавил простой div с backgroud-image и код к нему

            
            $heading = $('.panel-seofilter .panel-heading');
            $('#panel-seofilter0 div.arrow').click( function (){
                if ($heading.hasClass('hidden-filter')){
                    $('#panel-seofilter0').animate({opacity: 1,left: "+=200"});
                } else {
                    $('#panel-seofilter0').animate({opacity: 0.75,left: "-=200"});
                }
                $heading.toggleClass('hidden-filter');
            });
        }

стили

.panel-seofilter.mobile-view {
    width: 200px;
    position: fixed;
    z-index: 1000;
    top: 0;
}

.panel-seofilter.mobile-view .arrow {
    background-image: url(../image/arr1.png);
    width: 22px;
    height: 22px;
    position: absolute;
    left: 186px;
    top: 8px;
}
.panel-seofilter.mobile-view .hidden-filter .arrow {
    background-image: url(../image/arr2.png);
    left: 191px;
}

как это выглядит

nib3RbclRcCLBAR8bPWdAg.png

http://opencart2020.orcart.ru/test-1/

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Не первой демке если блок фильтров достаточно длинный, то он не скроллится и нижние опции фильтра недоступны.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Похожий контент

    • От Sha
      449.00 руб
      Скачать/Купить дополнение


      Layout Type, ускорение мобильной версии.
      Модуль для ускорения мобильной версии сайта.
      DEMO
      Подробней:
      Как сделать шаблон адаптивным? на мобильной версии скрыть "лишние" элементы.
      Как, что-бы при этом не пострадало usability? переместить модули и виджеты на другие позиции.
       
      Даже топовые шаблоны, поступают именно таким образом, элементы которые "не нужны" или наоборот необходимы только в мобильной версии: либо скрываются посредством css (display:none); либо перемещаются, хорошо если flexbox или bootstrap pull push но часто с помощью навешивания множества слушателей событий javascript. Даже адаптивность bootstrap основана на таких принципах.
      Всё это создаёт лишний "вес" и нагрузку, что конечно же замедляет работу сайта и заставляет процессор пользователя работать с повышенной нагрузкой шумя как майнинг ферма.
      Мы в наших продуктах пропагандируем использовать только то, что необходимо сейчас. И исходя из этих принципов нами был разработан
       
      модуль Мобильные схемы который позволит:
      уменьшить объём страницы,  избавится от лишнего JavaScript кода, избавится от css костылей,      и др.
           при этом даже улучшив
      адаптивность, гибкость в настройке и дружелюбность Вашего сайта!  
       
      Поддерживает встроенные схемы популярных модулей, например поддерживает SEOCMS.
      Большие скидки, для постоянных покупателей.
       
      Бесплатно модуль получить можно вместе с шаблоном Roundshop.
       
      FAQ
       
      Техническая поддержка
      доступна пользователям из списка покупателей.
      Если вы обращаетесь с просьбой разобраться в проблеме, то для экономии времени укажите:
      адрес сайта доступ в админ-панель доступ на FTP-сервер  
      По любым вопросам вы можете связаться с нами через:
      Личные сообщения на форуме; Режим работы с 10-00 до 18-00 по киевскому времени за исключением выходных и праздничных дней.
       
      Добавил Sha Добавлено 13.03.2018 Категория Кэширование, сжатие, ускорение Системные требования Сайт разработчика r.konotop.info Старая цена Метод активации Автоматическая активация Ioncube Loader Нет OpenCart 2.3
      2.2
      2.1 ocStore 2.3
      2.2
      2.1 OpenCart.Pro, ocShop Opencart.pro 2.3
      Opencart.pro 2.1
      OcShop 2.0.3.х  
    • От Sha
      Модуль для ускорения мобильной версии сайта.
      DEMO
      Подробней:
      Как сделать шаблон адаптивным? на мобильной версии скрыть "лишние" элементы.
      Как, что-бы при этом не пострадало usability? переместить модули и виджеты на другие позиции.
       
      Даже топовые шаблоны, поступают именно таким образом, элементы которые "не нужны" или наоборот необходимы только в мобильной версии: либо скрываются посредством css (display:none); либо перемещаются, хорошо если flexbox или bootstrap pull push но часто с помощью навешивания множества слушателей событий javascript. Даже адаптивность bootstrap основана на таких принципах.
      Всё это создаёт лишний "вес" и нагрузку, что конечно же замедляет работу сайта и заставляет процессор пользователя работать с повышенной нагрузкой шумя как майнинг ферма.
      Мы в наших продуктах пропагандируем использовать только то, что необходимо сейчас. И исходя из этих принципов нами был разработан
       
      модуль Мобильные схемы который позволит:
      уменьшить объём страницы,  избавится от лишнего JavaScript кода, избавится от css костылей,      и др.
           при этом даже улучшив
      адаптивность, гибкость в настройке и дружелюбность Вашего сайта!  
       
      Поддерживает встроенные схемы популярных модулей, например поддерживает SEOCMS.
      Большие скидки, для постоянных покупателей.
       
      Бесплатно модуль получить можно вместе с шаблоном Roundshop.
       
      FAQ
       
      Техническая поддержка
      доступна пользователям из списка покупателей.
      Если вы обращаетесь с просьбой разобраться в проблеме, то для экономии времени укажите:
      адрес сайта доступ в админ-панель доступ на FTP-сервер  
      По любым вопросам вы можете связаться с нами через:
      Личные сообщения на форуме; Режим работы с 10-00 до 18-00 по киевскому времени за исключением выходных и праздничных дней.
       
    • От Alexander86
      Приветствую!  
      Подскажите пожалуйста, где искать данные для управления отображения Slideshow в web и mob версиях? Хочу исключить из отображения слайдшоу в мобильной версии. В данном случае Magic Slider. 
       
      Спасибо.
    • От bylkka
      Добрый день,
       
      Выручите пожалуйста на моем сайте http://mybirka.ru/himchistka-online&view=mobile
       
      в категориях "быстрый просмотр" около каждого из товаров, не понимаю как его убрать, перерыл вроде все, а не могу его найти.
    • От biverb
      Хочу приобрести модуль: http://www.opencart.com/index.php?route=extension/extension/info&extension_id=4168&filter_search=mobile%20theme. Дизайн только не нравится. Планирую под себя написать, да в качестве темы залить и поставить.
       
      Кто пользовался модулем, напишите, какие впечатления? советуете - не советуете?! Буду очень признателен. 
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.